mcpField
M
MCP Chat Demo

MCP Chat Demo

ローカル
github.com/ehartyeAI・エージェント1100 週間前に更新
リポジトリ

MCP Chat Demo について

MCP Chat Demoは、MCPサーバーとの連携を示すReact・TypeScript製のチャットアプリ例です。ローカルまたはリモートのサーバーに接続し、チャット内でツールやリソースを利用できます。

主な機能

  1. 01ローカル・リモートMCPサーバーへの接続
  2. 02リアルタイムチャット画面
  3. 03MCPツールとリソースへの対応
  4. 04メッセージ履歴
  5. 05エラー処理と再接続

活用シーン

  1. 01チャットアプリでのMCPサーバー連携のデモ
  2. 02チャット内でのMCPツール・リソース利用

MCP 対応

ローカルまたはリモートのMCPサーバーに接続し、チャット画面からツールやリソースを利用します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

インストール方法は未掲載です

このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。

リポジトリ

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

MCP チャットデモ

Model Context Protocol（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
  1. 依存関係をインストールします。
npm install
  1. 開発サーバーを起動します。
npm run dev

機能

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

技術スタック

  • React 18
  • TypeScript
  • Vite
  • TailwindCSS
  • MCP TypeScript SDK

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。