MCP客户端模板

MCP客户端模板

这是MCP（模型上下文协议）客户端项目的基础模板，具有Vite+TypeScript前端和Express后端。它允许您通过web界面添加、管理MCP服务器并与之交互。

OAuth2.1支持： 该模板本机支持OAuth2.1身份验证，以实现安全访问和集成，如官方文档所述。

OAuth2.1身份验证流程

当连接到需要身份验证的MCP服务器时，前端将提供身份验证链接。请按照以下步骤操作：

1. 尝试从web界面连接到服务器。
2. 如果需要身份验证，前端将显示一个链接。
3. 复制链接并将其粘贴到浏览器中的新选项卡中。
4. 在新选项卡中完成身份验证过程（OAuth2.1重定向流）。
5. 经过身份验证后，返回MCP客户端模板界面继续使用服务器。

由于此项目只是一个模板，因此存在此手动复制粘贴流程。

项目结构

• public/：静态文件和资源（favicon、图像、OAuth回调）。
• src/：TypeScript前端和CSS。
  • main.ts：用于添加服务器、发送命令和显示输出的UI逻辑。
  • style.css：界面样式。
• server/：Express后端。
  • index.ts：用于MCP服务器管理、命令转发、身份验证处理的REST API。
  • authTokensStore.ts, mcpTypes.ts：令牌管理和MCP类型。
• index.html：主页结构。
• package.json：依赖关系和脚本（开发、构建、预览、服务器启动）。
• tsconfig.json：TypeScript配置。

这 data/ 文件夹包含运行时内存和配置，不应手动修改。

需求

• Node.js（推荐版本>=18）

安装

1. 克隆存储库：
   复制

   git clone <url-repo>
   cd mcp-client-template
   

2. 安装依赖项：
   复制

   npm install
   

开发与使用

• 启动前端：
  复制

  npm run dev
  

• 启动后端：
  复制

  npm run dev:server
  

定制与扩展

• 要添加新的前端功能，请在中编辑文件 src/.
• 要扩展后端，请在 server/.
• 您可以添加新的端点、身份验证逻辑和高级MCP服务器管理。

分叉与再利用

我们鼓励您分叉此存储库，将其用作您自己的MCP客户端项目的起点。分叉后：

• 根据需要重命名项目并更新元数据 package.json 以及文档文件。
• 自定义前端和后端逻辑以满足您的要求。
• 根据需要删除或调整示例代码和端点。

此模板旨在轻松扩展到更复杂的MCP项目。

附加说明

• 这 data/ 文件夹被忽略，不应手动编辑。

---

如有疑问或建议，请打开问题或联系维护人员。