Node Simple MCP Example

🛠️ ClaudeとローカルJSON HTTPサーバーを使用した簡単なMCPの例

このガイドでは、Claude（MacOSデスクトップ版）を使ってMCP（モデル - コンピュータープロトコル）経由でローカルのmock JSONサーバーとやり取りする基本的なセットアップを案内します。

🚀 クイックスタート

本ガイドでは、Claude（MacOSデスクトップ版）を使用して、MCP（モデル - コンピュータープロトコル）を介してローカルのmock JSONサーバーとやり取りする基本的なセットアップを説明します。

✨ 主な機能

• Claudeを使ってMCP経由でローカルのmock JSONサーバーとやり取りできます。
• 特定のコマンドをClaudeに入力することで、ローカルのmockサーバーに対して実際のリクエストを送信できます。

📦 インストール

🧰 前提条件

• 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の入力欄の下に 🛠️ ハンマーアイコン付きの2つの新しいMCPツールが表示されるはずです。

• 以下のようなプロンプトを使ってClaudeをテストします。

"すべての投稿を取得"

"idが500、タイトルが「Claudeによって作成」、ビュー数が123の投稿を挿入"

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

JSONサーバーとMCPサーバーを実行している間にClaudeにプロンプトを与えることを確認してください。

💻 使用例

基本的な使用法

テスト

以下のコマンドを実行します。

npx @modelcontextprotocol/inspector node build/index.js

http://127.0.0.1:6274/#resources ですべての利用可能なリソースを確認できます。