🛠️ Simple MCP Example with Claude and a Local JSON HTTP Server

🛠️ Claude とローカル JSON HTTP サーバーを使ったシンプルな MCP の例

このガイドでは、**Claude（MacOS デスクトップ）**を使って、MCP（Model-Computer Protocol）経由でローカルのモック JSON サーバーとやり取りする基本的な設定方法を説明します。

---

🧰 前提条件

• Node.js がインストールされていること
• Claude for MacOS（Anthropic からダウンロード）
• ローカルサーバーと Claude の MCP ツールの基本的な理解

---

🚀 ステップごとのセットアップ

1. 依存関係をインストールする

プロジェクトのルートで、必要なパッケージをインストールします。

npm install
npm run mock-api
npm run mcp-server

claude_desktop_config.json ファイル（通常は ~/.claude/ またはアプリの内部設定フォルダーにあります）を編集し、MCP サーバーの設定を追加します。

{
  "mcpServers": {
    "json-chat": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-example/dist/index.js"]
    }
  }
}

• Claude を再起動します

• 再起動後、Claude の入力バーの下に、🛠️ ハンマーのアイコンが付いた新しい MCP ツールが 2 つ表示されます。

• 次のようなプロンプトを Claude に送ってみてください。

「すべての投稿を取得して」

「id 500、title "created by claude"、views 123 の投稿を挿入して」

Claude は、設定した MCP ツールを使って、ローカルのモックサーバーに実際のリクエストを送信します。

Claude にプロンプトを送るときは、JSON サーバーと MCP サーバーが実行中であることを確認してください。

テスト

次を実行します。 Run

npx @modelcontextprotocol/inspector node build/index.js

その後、利用可能なすべてのリソースが http://127.0.0.1:6274/#resources に表示されます。