モデルコンテキストプロトコル(MCP)のWebベースのクライアント。 複数のMCPサーバーに接続し、ツール/リソース/プロンプトを参照し、チャットを介してやり取りします。

##特徴

-マルチサーバーサポート - 複数のMCPサーバーに同時に接続

• OAuth 2.0 & Bearer Token Auth - PKCE サポートで安全な認証
• 永続セッション - ローカルストレージに保存されたサーバーと認証情報
• リアルタイムSSE - ライブ更新のためのサーバー送信イベント
• ツール、リソース&プロンプト - フルMCP機能のサポート

クイックスタート

http://localhost:3000を開く

サーバーの追加

1. サイドバーの**+**をクリック
2. サーバ URL を入力(例、https://mcp.example.com/sse])
3. 認証方法の選択:

• Auth なし - パブリックサーバ
• Bearer Token - 既存のアクセストークンを使用する
• OAuth 2.0 - OAuth フローによる認証

4. [Add Server]をクリックします

テックスタック

• 次.js 15 + React 19
• タイプスクリプト
• テールウィンドCSS
• MCPプロトコル2024-11-05

ライセンス

ログイン

MCP Web Client

A web-based client for the Model Context Protocol (MCP). Connect to multiple MCP servers, browse tools/resources/prompts, and interact via chat.

Features

• Multi-Server Support - Connect to multiple MCP servers simultaneously
• OAuth 2.0 & Bearer Token Auth - Secure authentication with PKCE support
• Persistent Sessions - Servers and credentials saved to localStorage
• Real-time SSE - Server-Sent Events for live updates
• Tools, Resources & Prompts - Full MCP capability support

Quick Start

npm install
npm run dev

Open http://localhost:3000

Adding a Server

1. Click + in the sidebar
2. Enter the server URL (e.g., https://mcp.example.com/sse)
3. Choose authentication method:
   • No Auth - Public servers
   • Bearer Token - Use existing access token
   • OAuth 2.0 - Authenticate via OAuth flow
4. Click Add Server

Tech Stack

• Next.js 15 + React 19
• TypeScript
• Tailwind CSS
• MCP Protocol 2024-11-05

License

MIT