MCP主机
用于测试MCP服务器的最小Next.js（App Router）主机。
环境变量
| 名称 | 必填 | 默认 | 描述 |
|---|---|---|---|
MCP_SERVER_URL | ✅ | n/a | MCP服务器的基本URL（例如。 http://localhost:3001/mcp). |
DASHBOARD_MCP_SERVER_URL | ❌ | https://dashboard-mcp.vercel.app/api/mcp | 托管MCP仪表板服务器的基本URL。 |
MCP_RESOURCE_ID | ❌ | ui://hello_app_panel | 要从MCP服务器加载的资源id/URI。 |
OPENAI_API_KEY | ❌ | n/a | 此项目不需要。 |
本地开发
npm install
npm run dev打开 http://localhost:3000.
API路线
GET /api/health→{ ok: true }POST /api/mcp/call-hello→ callshello_world工具GET /api/mcp/resource→ 加载MCP资源POST /api/mcp/app-bridge→ 将MCP App JSON-RPC工具/资源调用代理到主服务器POST /api/mcp/dashboard/app-bridge→ 将MCP应用程序调用代理到仪表板服务器POST /api/mcp/dashboard/custom/app-bridge→ 将MCP应用程序调用代理到自定义仪表板服务器URL
测试流程
- 集
MCP_SERVER_URL在您的环境中。 - 启动开发服务器(
npm run dev). - 打开聊天风格UI并单击 打开概述 调用
dashboard_mcp_hello. - 使用 自定义MCP服务器URL 字段+切换以测试Vercel预览部署。
- 扩展 显示调试数据 在需要时检查原始MCP响应。
UI大小
主机布局现在允许更宽的仪表板（高达1100px），嵌入式MCP App iframe的目标是 更大的视图（最小高度560px，~70vh），以更好地适应大型仪表板。
MCP应用程序交互性
主机现在转发MCP App postMessage JSON-RPC请求（例如， tools/call)从 将iframe嵌入到配置的MCP服务器。这启用了以下按钮 更新状态 在 应用程序UI通过主机调用工具，而不是超时。
构建
npm run build
npm start维塞尔
使用默认的Next.js框架设置进行部署（无自定义输出目录覆盖）。