MCP客户端模板
这是MCP（模型上下文协议）客户端项目的基础模板，具有Vite+TypeScript前端和Express后端。它允许您通过web界面添加、管理MCP服务器并与之交互。
OAuth2.1支持： 该模板本机支持OAuth2.1身份验证，以实现安全访问和集成，如官方文档所述。
OAuth2.1身份验证流程
当连接到需要身份验证的MCP服务器时，前端将提供身份验证链接。请按照以下步骤操作：
- 尝试从web界面连接到服务器。
- 如果需要身份验证，前端将显示一个链接。
- 复制链接并将其粘贴到浏览器中的新选项卡中。
- 在新选项卡中完成身份验证过程（OAuth2.1重定向流）。
- 经过身份验证后，返回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）
安装
- 克隆存储库：
git clone
cd mcp-client-template- 安装依赖项：
npm install开发与使用
- 启动前端：
npm run dev- 启动后端：
npm run dev:server定制与扩展
- 要添加新的前端功能，请在中编辑文件
src/. - 要扩展后端，请在
server/. - 您可以添加新的端点、身份验证逻辑和高级MCP服务器管理。
分叉与再利用
我们鼓励您分叉此存储库，将其用作您自己的MCP客户端项目的起点。分叉后：
- 根据需要重命名项目并更新元数据
package.json以及文档文件。 - 自定义前端和后端逻辑以满足您的要求。
- 根据需要删除或调整示例代码和端点。
此模板旨在轻松扩展到更复杂的MCP项目。
附加说明
- 这
data/文件夹被忽略，不应手动编辑。
______________________________________________________________________
如有疑问或建议，请打开问题或联系维护人员。