MCP Gateway, Server, and Client

MCP ゲートウェイ、サーバー、クライアント

Claude Desktop がリモートサーバーへの接続をサポートするまでは、このスクリプトを使って stdio から HTTP SSE（Server-Sent Events）エンドポイントへのブリッジを実行できます。

mcp-server-and-gw をインストールする

# 1. install
npm install -g mcp-server-and-gw
# 2. Or run directly with npx
npx mcp-server-and-gw http://localhost:8808/
# ...you can use environment variables too
MCP_HOST=localhost MCP_PORT=8808 npx mcp-server-and-gw

Claude に設定を追加する

ブリッジスクリプトは Node.js JavaScript ですが、サーバーコードには任意の言語を使用できます。

stdio から HTTP SSE トランスポートへの Model Context Protocol ゲートウェイ src/mcp-server-and-gw.ts です。

## 1. Build
yarn install
yarn build

## 2. Copy the code or update the claude_desktop_config.json
##    NOTE: Ensure that npx is in the PATH, or use full path like /opt/homebrew/bin/npx
echo '{
  "mcpServers": {
    "Claude Gateway Example": {
      "command": "npx",
      "args": [
        "mcp-server-and-gw", "http://localhost:8808/"
      ]
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

## 3. Start server so that claude can connect to it for discoverying its resources, tools, etc.
PORT=8808 node examples/server.js

## 4. Start Claude Desktop

サーバーとクライアントの例

Claude Desktop から独立して SSE サーバーを開発することで、より迅速に反復できます。たとえば、src/server.ts を実行し、src/client.ts をクライアントとして使用します。

サーバーを起動し、別のターミナルでクライアントを起動すると、サーバーの出力を確認できます。

% node examples/server.js
Server is running on port 8808

--> Received connection: /sse
New SSE connection.
--> Received message (post)
{
  jsonrpc: '2.0',
  id: 0,
  method: 'initialize',
  params: {
    protocolVersion: '2024-11-05',
    capabilities: {},
    clientInfo: { name: 'example-client', version: '1.0.0' }
  }
}
<-- 202 Accepted
--> Received message (post)
{ jsonrpc: '2.0', method: 'notifications/initialized' }
<-- 202 Accepted
--> Received message (post)
{ jsonrpc: '2.0', id: 1, method: 'resources/list' }
<-- 202 Accepted
--> Received message (post)
{ jsonrpc: '2.0', id: 2, method: 'tools/list' }
<-- 202 Accepted
--> Received message (post)
{
  jsonrpc: '2.0',
  id: 3,
  method: 'tools/call',
  params: { name: 'query', arguments: { sql: 'SELECT 42;' } }
}
<-- 202 Accepted

クライアントを起動する

% node examples/client.js
Connecting...
Connected: { resources: {}, tools: {}, templates: {} }
{ resources: [] }
{
  tools: [
    {
      name: 'query',
      description: 'Run a read-only SQL query on a DuckDB database',
      inputSchema: { type: 'object', properties: { sql: { type: 'string' } } }
    },
    {
      name: 'visualise',
      description: 'Visualise SQL query results as an Apache ECharts chart. Provide the SQL clause that produces the data for the visualisation. Provide chart JSON configuration for Apache ECharts.',
      inputSchema: {
        type: 'object',
        properties: { sql: { type: 'string' }, chart: { type: 'string' } }
      }
    }
  ]
}
{
  content: [ { type: 'text', text: '[\n  {\n    "42": 42\n  }\n]' } ],
  isError: false
}

MCP Inspector でテストする

1 つ目のターミナルでサーバーの例を起動します。

node examples/server.js

…そして、別のターミナルでゲートウェイを起動します。

npx @modelcontextprotocol/inspector node ./build/mcp-server-and-gw.js