MCP GRID-Next.js MCP工具生成器
使用干净的UI、模式驱动的表单和实时结果在本地或从外部MCP服务器创建、管理和运行工具。
概述
这个应用程序是一个Next.js 15工具游乐场，它使用模型上下文协议（MCP）。它允许您：
- 运行捆绑服务器端点公开的内置MCP工具
- 将您自己的工具创建为API调用（REST）或自定义JavaScript逻辑
- 使用服务器端代理从外部MCP服务器（SSE或Streamable HTTP）发现和调用工具，以避免CORS
- 为每个用户在localStorage和Postgres数据库之间切换存储
它非常适合原型化工具想法、测试MCP服务器和构建可以共享的小型实用程序。
特性
- 模式驱动的表单：从类似JSON模式的工具定义中自动生成输入
- API工具：配置URL/方法/头和查询/主体参数；粘贴cURL进行预填充
- 自定义逻辑工具：编写JS以返回MCP格式的结果或纯文本
- 数组/对象参数：对于复杂的输入，直接输入JSON
- 外部MCP服务器：通过SSE或Streamable HTTP与auth头/API密钥连接
- 存储模式：本地存储（默认）或通过NextAuth按用户Postgres
- 实时结果：以可读的MCP结果格式呈现的响应
需求
- Node.js 18.18+（建议20+）
- npm 9+
- 可选的Postgres数据库（用于持久化、按用户存储）
- GitHub OAuth应用程序（使用Postgres模式时用于NextAuth）
环境变量
将env.example复制到.env.local并填写值：
NEXT_BASE_URL=http://localhost:3004 # base URL used by server-side MCP client
NEXTAUTH_URL=http://localhost:3004 # NextAuth callback URL
DATABASE_URL=postgres://user:pass@host:5432/dbname
GITHUB_CLIENT_ID=xxxxx
GITHUB_CLIENT_SECRET=xxxxx
NEXTAUTH_SECRET=your-long-random-string笔记：
- NEXT_BASE_URL用于服务器端将MCP客户端连接到此应用程序自己的MCP端点。
- 仅当您在“设置”中启用“使用数据库”时，才需要DATABASE_URL。
- 对于本地开发，将所有值放在.env.local中。
入门
- 安装依赖项
npm install- （可选）配置数据库+身份验证
- 创建Postgres数据库并设置database_URL
- 创建GitHub OAuth应用程序（主页URL和回调设置为NEXTAUTH_URL）
- 设置GITHUB_CLIENT_ID、GITHUB_LIENT_SECRET、NEXTAUTH_SECRET
- 初始化数据库（仅当使用Postgres模式时）
npm run init-db- 启动开发服务器
npm run dev应用程序将在http://localhost:3004
使用演练
页面/路线：
- /--Playground：在左侧选择一个工具，填写表格，运行并查看结果
- /工具管理-创建/编辑自定义工具（API或JS）
- /external-servers-配置外部MCP服务器（SSE或Streamable HTTP，带有头/API密钥）
- /setting--启用“使用数据库”的每个用户设置（需要登录）
- /auth/signin--下一个身份验证登录（GitHub）
自定义API工具
- 粘贴cURL：自动检测方法、URL、标头和推断参数（支持JSON正文和表单URL编码）
- 查询/正文分离：定义querySchema和inputSchema，以便参数放在正确的位置
- 数组/对象：JSON值作为结构化数据输入；查询参数是JSON字符串化的，正文是JSON
自定义逻辑工具
- 编写简单的JS；您将获得安全的全局变量（控制台、JSON、数学等）
- 返回字符串或MCP样式对象：｛content:〔｛type:“text”，text:“…”｝〕｝
- 错误被捕获并作为可读文本返回
外部MCP服务器
- 添加具有SSE或流式HTTP传输的服务器
- 可选身份验证：Bearer或API-Key，加上自定义头
- 服务器端代理端点避免浏览器CORS，可以保持SSE会话活动
存储模式
- 本地存储（默认，无需身份验证）
- Postgres（在/setting中启用）。需要GitHub登录。工具和外部服务器按用户存储。
此应用程序中的MCP服务器端点
由@vercel/mcp适配器支持：
- 流式HTTP:POST/GET/api/mcp（适配器basePath“/api”，流式HttpEndpoint“/mcp”）
- SSE:GET/api/SSE
服务器还注册了辅助工具（json_formatter、base64_conconverter、hash_generator等），并从数据库中动态注册自定义工具，使用小缓存进行快速刷新。一个特殊的工具refresh_custom_tools强制缓存刷新。
程序化客户端使用（在此应用程序内）使用utils/clientUtils.ts中的setupClient连接到NEXT_BASE_URL/api/mcp。
项目结构
app/
api/[transport]/route.ts # MCP adapter handler (streamable-http + SSE)
api/tools/route.ts # CRUD for custom tools (DB mode)
api/external-servers/route.ts # CRUD for external MCP servers (DB mode)
api/external-mcp/route.ts # Proxy for external MCP over Streamable HTTP
api/sse-connect/route.ts # Proxy + sessionizer for external MCP over SSE
api/settings/route.ts # Per-user setting: useDb
... UI pages (/, /tool-management, /external-servers, /setting, auth)
components/ # UI (Tool list/panel, forms, editors)
hooks/ # useTools, useToolExecution, useExternalServers
lib/ # Postgres adapter + schema helpers
utils/ # clientUtils, toolStorage, toolExecutors, parseCurl
types/ # Shared TypeScript types
scripts/init-db.ts # Initialize DB schema (Postgres)脚本
- dev：下一个dev--涡轮包--端口3004
- 构建：下一个构建--涡轮包
- 开始：下一次开始
- lint:eslint
- init db:tsx脚本/init-db.ts
部署说明
- 此应用程序使用Next.js路由处理程序和节点运行时进行长期连接（SSE）。使用sse外部服务器时，确保您的平台支持对/api/sse的持久请求。
- 如果您的平台是无服务器的，并且限制了SSE，请首选外部服务器的Streamable HTTP传输（/api/external mcp-proxy）。
- 在生产环境中设置所有环境变量和强NEXTAUTH_SECRET。
故障排除
- 401保存工具/服务器：您必须登录（GitHub）并在/setting中启用“使用数据库”。
- 数据库模式什么也不做：确保Database_URL已设置，并运行npm run init db；然后切换“使用数据库”。
- 外部服务器调用失败：检查服务器URL、传输类型和身份验证；对于SSE，请验证您的主机是否允许长期连接。
- 工具不刷新：运行refresh_custom_tools工具或等待几秒钟（缓存TTL~5s）。
- 服务器端MCP连接失败：将NEXT_BASE_URL设置为生产环境中的公共URL。
安全
- 用户添加的JS在一个有限的、类似沙盒的函数中运行，只有安全的全局变量；无法直接访问节点API。
- 秘密属于环境变量；不要硬编码API密钥。
- 当连接到外部MCP服务器时，标头在服务器端被代理，以避免向浏览器暴露秘密。
许可证
麻省理工学院——见许可证
致谢
- Next.js、TypeScript、顺风CSS
- @vercel/mcp适配器和@modelcontextprotocol/sdk
- Radix UI+Lucide图标
快乐建筑！ 🚀