MCP Apps Nextjs Starter

MCP应用程序——最小Next.js入门

最低限度 Next.js 建筑起动机 MCP应用程序 --MCP主机与工具调用一起呈现的交互式UI。

运作原理

Next.js应用程序有两个角色：

1. 小部件用户界面 (app/page.tsx)--MCP宿主在沙盒iframe中呈现的React页面。MCP路由自动获取渲染的页面HTML，并将其作为MCP资源。

这 useMcpApp 钩子(app/hooks/use-mcp-app.ts)通过连接到主机 App 类从 @modelcontextprotocol/ext-apps 并将工具输入/结果数据作为React状态提供。

入门

pnpm install

带隧道的当地开发

MCP应用程序需要一个公共HTTPS URL。使用 吸烟 （或任何隧道）：

ngrok http 3000

复制HTTPS URL并将其设置为 .env:

BASE_URL=https://xxxx-xxx-xxx.ngrok-free.app

然后启动开发服务器：

pnpm dev

连接到主机

将您的MCP服务器URL添加到支持应用程序的任何MCP主机：

https://xxxx-xxx-xxx.ngrok-free.app/mcp

例如，在ChatGPT、Cursor或Claude.ai中：设置>应用程序>添加上面的URL。

项目结构

app/
  page.tsx              — Homepage (widget UI)
  about/page.tsx        — Example sub-page (navigation demo)
  counter/page.tsx      — Example sub-page (interactivity demo)
  mcp/route.ts          — MCP server endpoint
  hooks/use-mcp-app.ts  — React hook for the MCP Apps bridge
  layout.tsx            — Root layout with iframe bootstrap patches
baseUrl.ts              — Public URL resolver (tunnel / Vercel)
middleware.ts           — CORS headers for cross-origin iframe access
next.config.ts          — assetPrefix for iframe asset loading

关键文件

• app/mcp/route.ts --在此处定义您的工具和资源。这 greet 工具是一个最小的例子。
• app/page.tsx --您的小部件UI。像任何Next.js页面一样编辑它。它通过以下方式接收工具数据 useMcpApp().
• app/hooks/use-mcp-app.ts --辛格尔顿 App 与...建立桥梁 sessionStorage 坚持不懈。提供 toolInput, toolResult，以及 connected 国家。

部署

部署到 维塞尔 --不需要额外的配置。这 BASE_URL 是从生产环境中Vercel的环境变量自动导出的。

部署后，使用以下命令将其连接到任何MCP主机：

https://your-app.vercel.app/mcp

例如，在ChatGPT、Cursor或Claude.ai中：设置>应用程序>添加上面的URL作为连接器。

了解更多

• MCP应用程序规范
• @modelcontextprotocol/ext应用程序
• mcp处理器