Mcp Server Basic Sample

Prepare mcp server app

1. Install packages

pnpm install

2. Build

pnpm build

Mcp Inspector

Inspector - Model Context Protocol

pnpm start

pnpm inspect

Claude for Desktop

Download Claude for Desktop

Download - Claude

Set Configure Claude for Desktop

Open the config file in VSCode.

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

/Users/[user]/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "RandomNumber": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/PARENT/FOLDER/build/index.js"]
    }
  }
}

If you use mise.

$ mise which node
/Users/[user]/.local/share/mise/installs/node/22.14.0/bin/node

/Users/[user]/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "RandomNumber": {
      "command": "/Users/[user]/.local/share/mise/installs/node/22.14.0/bin/node",
      "args": ["/ABSOLUTE/PATH/TO/PARENT/FOLDER/build/index.js"]
    }
  }
}

reference: https://github.com/modelcontextprotocol/servers/issues/64#issuecomment-2503152420

Resources

- Example Servers - Model Context Protocol
- modelcontextprotocol/typescript-sdk: The official Typescript SDK for Model Context Protocol servers and clients
- TypeScript で MCP サーバーを実装し、Claude Desktop から利用する
- 簡易な自作MCPサーバーをお試しで実装する方法