示范背景协议(MCP)的网络客户端. 连接多个MCP服务器,浏览工具/资源/快取,并通过聊天进行交互.

□ 特性

• ** 多服务器支持** - 同步连接多个MCP服务器
• ** OAuth 2.0 & Bearer Token Auth** - 在PKCE支持下的安全认证
• ** 持续会话** - 服务器和证书保存到本地Storage
• ** Real-time SSE** - 用于实时更新的服务器-恒定事件
• ** 工具、资源和提示** - 完全的MCP能力支持

□ 快开始

打开 [[T0]

□ 添加服务器

1. 在侧边栏上单击QQ
2. 输入服务器 URL(例如 https://mcp.example.com/sse)
3. 选择认证方法:

• ** 无 Auth** - 公共服务器
• Bearer Token - 使用现有访问符
• ** OAuth 2.0** - 通过OAuth流量认证

4. 点击Add 服务器

□ 技术堆栈

• 下一个.js 15 + 反应 19
• 类型脚本
• 有尾风CSS
• 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