MCP应用程序——最小Next.js入门
最低限度 Next.js 建筑起动机 MCP应用程序 --MCP主机与工具调用一起呈现的交互式UI。
运作原理
Next.js应用程序有两个角色：
- 小部件用户界面 (
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作为连接器。