MCP Chat Demo

🚀 MCP チャットデモプロジェクト

このプロジェクトは、モデルコンテキストプロトコル（MCP）サーバーとの統合を示すチャットアプリケーションのサンプルです。このアプリを通じて、MCP サーバーとのやり取りを体験できます。

🚀 クイックスタート

プロジェクト構造

mcp-chat-demo/
├── package.json
├── README.md
├── .gitignore
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── components/
│   │   ├── Chat.tsx
│   │   ├── MessageList.tsx
│   │   ├── MessageInput.tsx
│   │   └── MCPConnection.tsx
│   ├── lib/
│   │   ├── mcp-client.ts
│   │   └── types.ts
│   └── styles/
│       └── main.css
└── public/
    └── index.html

セットアップ手順

1. リポジトリをクローンします。

git clone https://github.com/yourusername/mcp-chat-demo.git
cd mcp-chat-demo

2. 依存関係をインストールします。

npm install

3. 開発サーバーを起動します。

npm run dev

✨ 主な機能

• ローカルまたはリモートの MCP サーバーへの接続
• リアルタイムチャットインターフェース
• MCP ツールとリソースのサポート
• メッセージ履歴
• エラー処理と再接続ロジック

🔧 技術詳細

このプロジェクトで使用されている技術スタックは以下の通りです。