MCP协议Web客户端

基于Web的模型上下文协议(MCP)客户端,支持连接多个MCP服务器,浏览工具/资源/提示,并通过聊天进行交互。

  • by hemanth
  • TypeScript
  • 本地部署
  • 21 星标
  • 更新于
在 GitHub 查看 hemanth/mcp-web-client

使用说明

MCP Web客户端

基于web的模型上下文协议(MCP)客户端。连接到多个MCP服务器,浏览工具/资源/提示,并通过聊天进行交互。

https://github.com/user-attachments/assets/29057bb1-d856-4a7c-bfe3-97020da21782

特性

  • 多服务器支持 -同时连接到多个MCP服务器
  • OAuth 2.0和承载令牌认证 -支持PKCE的安全身份验证
  • 持续会话 -服务器和凭据保存到本地存储
  • 实时SSE -服务器发送实时更新事件
  • 工具、资源和提示 -完整的MCP能力支持

快速开始

npm install
npm run dev

打开 http://localhost:3000

添加服务器

  1. 点击 + 在侧边栏
  2. 输入服务器URL(例如。, https://mcp.example.com/sse)
  3. 选择身份验证方法:
    • 无身份验证 -公共服务器
    • Bearer Token -使用现有访问令牌
    • OAuth 2.0 -通过OAuth流进行身份验证
  4. 点击 添加服务器

技术栈

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

许可证

麻省理工学院