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/ 文件夹被忽略，不应手动编辑。

---

如有问题或建议，请打开一个 Issue 或联系维护者。