Typescript MCP Demo

🚀 MCP とClaudeのチャットアプリケーション

このアプリケーションは、全栈型のアプリで、Model Context Protocol（MCP）とAnthropicのClaude LLMを統合し、対話型のチャットインターフェースを提供し、MCPツールを利用した機能拡張を実現します。

🚀 クイックスタート

このアプリケーションは、MCPとClaudeの統合を通じて、ユーザーに高度なチャット体験を提供します。以下の手順で、アプリケーションを起動できます。

✨ 主な機能

• Claude AIとの対話型チャットインターフェース
• ダイアログとツール実行詳細を表示するダブルパネルUI
• MCPサーバーが提供するツールを動的に検出
• 様々なパラメータを持つ複数のツールをサポート
• MCPを通じてClaudeのツール呼び出しを正しく処理

📦 インストール

前提条件

• Node.js（バージョン14以上）
• npm（バージョン6以上）
• Anthropic APIキー

プロジェクトのダウンロード

ターミナルで以下のコマンドを実行して、リポジトリをクローンします。

git clone [リポジトリのURL]
cd mcp-chat-with-claude

依存関係のインストール

clientディレクトリに移動して、クライアントの依存関係をインストールします。

cd client
npm install

serverディレクトリに移動して、サーバーの依存関係をインストールします。

cd ../server
npm install

環境変数の設定

.envファイルを作成し、以下の内容を追加します。

ANTHROPIC_API_KEY=your_api_key_here
PORT=3000

設定と実行

MCPサーバーを起動します。

cd server
node mcp-server.ts

ホストアプリケーションを起動します。

cd ../client
npm start

💻 使用例

基本的な使用法

チャットインターフェース

ユーザーはテキストを入力し、Enterキーを押すことでメッセージを送信できます。Claudeはコンテキストに基づいて応答を生成します。

ツール呼び出し

MCPサーバーは、Claudeが呼び出すための複数のツールを提供します。これには以下のようなものが含まれます。

• テキスト分析ツール
• ネットワークリクエストツール
• データ処理ツール

これらのツールの名前と機能は、チャット中に動的に表示されます。

📚 ドキュメント

プロジェクトの概要

このプロジェクトは、2つの主要なコンポーネントで構成されています。

1. MCPサーバー：Node.jsで実装されたModel Context Protocolサーバーで、LLMが呼び出すための複数のツールを提供します。
2. ホストアプリケーション：チャットインターフェースとして機能し、ユーザー、Claude AI、およびMCPサーバーの間の橋渡しを行います。

プロジェクト構造

├── client/                 # クライアントおよびホストアプリケーション  
│   ├── dist/               # コンパイルされたTypeScriptファイル  
│   ├── host-app.ts         # ホストアプリケーションサーバー  
│   ├── chat.js             # チャットインターフェースのロジック  
│   ├── index.html          # メインウェブページのインターフェース  
│   ├── styles.css          # 画面のスタイル  
│   ├── package.json        # クライアントの依存関係  
│   └── mcp-client-example.ts # サンプルMCPクライアント（テスト用）  
│
├── server/                 # MCPサーバー  
│   ├── dist/               # コンパイルされたTypeScriptファイル  
│   ├── mcp-server.ts       # MCPサーバーの実装  
│   └── package.json        # サーバーの依存関係  
└── .env                    # 環境変数の設定ファイル

プロジェクトアーキテクチャ

                ┌───────────────┐
                │               │
                │   MCPサーバー   │
                │               │
                └──────┬───────┘
                        │
                        ▼
                 ┌───────────────┐
                 │               │
                 │  ホストアプリ     │
                 │               │
                 └──────┬───────┘
                         │
                         ▼
                  ┌──────▼──────┐
                  │             │
                  │   Claude API   │
                  │   (Anthropic)  │
                  │             │
                  └───────────────┘

よくある質問

1. 接続問題：MCPサーバーとホストアプリケーションが両方とも実行されていることを確認し、コンソールのエラーメッセージを確認してください。
2. ツールが見つからない：MCPサーバーが起動していること、およびツール名が完全に一致していることを確認してください。
3. APIキーエラー：.envファイル内のAnthropic APIキーが正しく設定されていることを確認してください。
4. ツール呼び出しエラー：応答パネルで詳細なエラーメッセージを確認してください。

📄 ライセンス

MIT

謝辞

• Model Context Protocol
• Anthropic Claude API