MCP Web Client について
MCP Web Client は、SSE 経由で MCP サーバーと連携するチャットボットアプリを作成・管理するための Web ベースのクライアントです。フロントエンドとバックエンドを分離した構成で、SQLite を使用するため、導入とテストを手軽に行えます。
主な機能
- 01Dify 連携による複数チャットボットの管理
- 02SSE による複数 MCP サーバーの接続と管理
- 03SSE によるリアルタイムチャットとツール呼び出し
- 04Markdown とコードハイライトに対応したUI
- 05SQLite による軽量なデプロイ
活用シーン
- 01チャットボットアプリの迅速な構築とテスト
- 02Web インターフェースからの複数 MCP サーバーへの接続
- 03Docker Compose による開発環境の実行
MCP 対応
MCP クライアントとして、バックエンドの MCP サーバーに SSE で接続して管理し、supergateway を利用して各種 MCP サーバーに接続します。
詳細
MCP Web クライアント
MCP (Model Context Protocol) クライアントの Web ベースの実装です。高度なチャットボットアプリケーションの作成と管理、SSE を通じたバックエンドの MCP サーバーとの統合に対応しています。
特性
- 複数チャットボット管理：Dify を統合してチャットボットの作成と管理を実現
- MCP サーバー統合：SSE 接続を通じた複数の MCP サーバーの接続と管理
- リアルタイムインタラクション：SSE を使用したリアルタイムチャットとツール呼び出し
- 直感的なユーザーインターフェース：最新の、レスポンシブなユーザーインターフェース。Markdown、コード構文強調表示などに対応
- 軽量なデプロイメント：SQLite データベースを使用し、迅速なデプロイメントとテストが可能
アーキテクチャ
MCP Web クライアントはフロントエンドとバックエンドの分離アーキテクチャを採用しています：
- フロントエンド：Next.js と React で構築されたシングルページアプリケーション
- バックエンド：Node.js と Express で構築された RESTful API と SSE サービス
- MCP 統合：supergateway を使用して様々な MCP サーバーに接続
- チャットボット管理：Dify の API を統合してチャットボット管理を実現
クイックスタート
環境要件
- Node.js >= 20.0.0
- npm または pnpm
- Docker と Docker Compose（開発とデプロイメント用）
開発環境のセットアップ
- リポジトリをクローン
git clone https://github.com/yourusername/mcp-web-client.git
cd mcp-web-client
- フロントエンド依存関係をインストール
cd frontend
pnpm install
- バックエンド依存関係をインストール
cd ../backend
pnpm install
- 環境変数を設定
フロントエンドとバックエンド用の .env ファイルを作成し、.env.example に基づいて必要な環境変数を入力してください。
- 開発サーバーを起動
# 启动前后端（在项目根目录执行）
docker-compose up
- アプリケーションにアクセス
ブラウザで http://localhost:3000 にアクセスしてください
ライセンス
このプロジェクトは MIT ライセンスの下で公開されています。
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。