AI导哈

MCP通用前端

一个通用的React + TypeScript前端，用于连接任何暴露HTTP端点的MCP服务器，支持动态表单生成、安全API密钥存储和开发者友好功能。

  • by M0hitMehra
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 M0hitMehra/mcp-client

使用说明

MCP通用前端

用于模型上下文协议（MCP）服务器的通用React+TypeScript前端。

特性

  • 通用客户端：连接到任何暴露HTTP端点的MCP服务器。
  • 动态表单：根据工具模式自动生成表单。
  • 安全：API密钥存储在本地，并直接发送到您的服务器。
  • 开发者友好：原始JSON模式、输出检查和易于部署。

入门指南

先决条件

  • Node.js 18+
  • 使用HTTP适配器运行的MCP服务器（例如，暴露 /.well-known/mcp-manifest.json 和 /mcp/call).

安装

  1. 导航到前端目录：

    cd frontend

  2. 安装依赖项：

    npm install

本地运行

  1. 启动开发服务器：

    npm run dev

  2. 打开浏览器 http://localhost:5173.

  3. 连接到您的MCP服务器:

    • 进入 服务器URL （例如。， http://localhost:8443).
    • 输入您的 API密钥 （如果您的服务器需要）。
    • 点击 连接.

运行测试

使用Playwright运行自动验收测试：

npx playwright install --with-deps
npm test

配置

您可以在中配置默认值 .env:

  • VITE_DEFAULT_MCP_URL：要填充的默认服务器URL。
  • VITE_ALLOW_INSECURE_HTTP：允许连接到非HTTPS服务器（默认值：true）。

api参考

此前端期望MCP服务器公开：

  • GET /.well-known/mcp-manifest.json：返回MCP清单。
  • POST /mcp/call：执行工具。

呼叫有效负载示例：

{
  "tool": "tool-name",
  "inputs": { "arg": "value" },
  "context": {}
}

许可证

麻省理工学院

相关 MCP