AI导哈

Next.js应用框架

一个基于React的服务器渲染框架，支持快速开发、部署和流式HTTP通信。

  • by krasnoff
  • TypeScript
  • 混合部署
  • 更新于
在 GitHub 查看 krasnoff/nextjs-mcp-template

使用说明

这是一个 Next.js 项目启动于 create-next-app.

入门指南

首先，运行开发服务器：

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

打开 http://localhost:3000 使用浏览器查看结果。

您可以通过修改开始编辑页面 app/page.tsx。当您编辑文件时，页面会自动更新。

此项目使用 next/font 自动优化和加载 幽灵，Vercel的新字体系列。

了解更多

要了解有关Next.js的更多信息，请查看以下资源：

您可以查看 Next.js GitHub仓库 -欢迎您的反馈和贡献！

在Vercel上部署

部署Next.js应用程序的最简单方法是使用 Vercel平台 Next.js的创建者。

查看我们的 Next.js部署文档 了解更多详情。

MCP流式HTTP端点（SSE）

此模板通过Streamable HTTP在以下位置公开模型上下文协议（MCP）服务器 POST/GET/DELETE /api/mcp 使用服务器发送事件（SSE）。

  • 服务器实现： app/api/mcp/services/mcp-server.ts
  • 路由处理程序（桥接到SSE）： app/api/mcp/route.ts

运作原理

该路由使用MCP SDK StreamableHTTPServerTransport 在一个将Next.js Fetch Request/Response适配到传输所期望的Node HTTP API的小桥之后。传输管理会话和SSE流；MCP服务器连接一次，并在请求之间持续存在。

在当地试试

  1. 启动开发服务器
npm run dev
  1. 初始化会话（返回SSE流和 mcp-session-id 头球
curl -N \
	-X POST http://localhost:3000/api/mcp \
	-H 'Accept: application/json, text/event-stream' \
	-H 'Content-Type: application/json' \
	-d '{
		"jsonrpc": "2.0",
		"id": "1",
		"method": "initialize",
		"params": { "clientInfo": { "name": "curl", "version": "0.0.1" }, "protocolVersion": "2025-03-26" }
	}'

保存 mcp-session-id 响应标头。后续请求应包括它和 Mcp-Protocol-Version.

  1. 打开专用的SSE流（可选，用于通知）：
curl -N \
	-H 'Accept: text/event-stream' \
	-H 'Mcp-Session-Id: <your-session-id>' \
	-H 'Mcp-Protocol-Version: 2025-03-26' \
	http://localhost:3000/api/mcp
  1. 调用内置 add 工具：
curl -N \
	-X POST http://localhost:3000/api/mcp \
	-H 'Accept: application/json, text/event-stream' \
	-H 'Content-Type: application/json' \
	-H 'Mcp-Session-Id: <your-session-id>' \
	-H 'Mcp-Protocol-Version: 2025-03-26' \
	-d '{
		"jsonrpc": "2.0",
		"id": 2,
		"method": "tools/call",
		"params": { "name": "add", "arguments": { "a": 2, "b": 3 } }
	}'

您应该收到一个SSE事件，其JSON-RPC结果包含 { "result": 5 }.

  1. 关闭会话（可选）：
curl -X DELETE \
	-H 'Mcp-Session-Id: <your-session-id>' \
	-H 'Mcp-Protocol-Version: 2025-03-26' \
	http://localhost:3000/api/mcp

笔记：

  • 强制执行内容协商。POST必须接受两者 application/json 和 text/event-stream 并发送 Content-Type: application/json.
  • 如果打开，服务器还可以在独立的SSE GET流上发送消息。

与MCP检查员联系

如果您正在使用MCP Inspector应用程序（浏览器/Electron）：

  • 传输：HTTP（流式传输）--不是WebSocket
  • 服务器URL: http://localhost:3000/api/mcp
  • 来自浏览器的第一个请求可能会显示 204 No Content 在网络面板中，这是CORS预飞行，这是意料之中的。
  • 确保允许应用程序读取 Mcp-Session-Id 头球此模板通过以下方式公开它 Access-Control-Expose-Headers 因此，Inspector可以将其用于后续请求。
  • 如果你看到a 400 Bad Request 抱怨失踪 Mcp-Session-Id，这通常意味着会话标头在下一个请求中没有被转发。确保检查器设置为HTTP（流式）并重新连接。

相关 MCP