使用说明
Hello World聊天GPT应用程序（Next.js）
此存储库是“如何使用Next.js和Vercel构建ChatGPT应用程序”教程中概述的工作流的从头开始实现。它公开了一个最小的MCP服务器路由、所需的资产和中间件配置，以及一个可以通过OpenAI Apps SDK要求在ChatGPT内呈现的Hello World UI界面。
先决条件
- Node.js 18.18+或20.9+（符合Next.js 15运行时要求）
- npm 9+
1.MCP服务器路由(app/mcp/route.ts)
该路由充当ChatGPT的MCP网桥：
- 注册演示
hello_world工具和hello-world-ui资源中包含教程屏幕截图中显示的OpenAI元数据。 - 处理JSON-RPC
tools.list,resources.list，以及tools.call方法。 - 使用引用实现使用的规范“Method not allowed”错误拒绝不受支持的方法。
您可以在本地验证端点：
curl http://localhost:3000/mcp \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","id":1,"method":"tools.list"}'
2.资产配置(next.config.ts)
assetPrefix 源自于 NEXT_PUBLIC_BASE_URL （或 VERCEL_URL 部署时）以确保 _next 资产在ChatGPT iframe中正确加载。在构建或运行开发服务器之前设置env var：
export NEXT_PUBLIC_BASE_URL=http://localhost:3000
3.CORS中间件(middleware.ts)
中间件返回所有路由和短路的预期CORS标头 OPTIONS 带有a的飞行前请求 204 响应，反映教程指导。
4.SDK引导(app/layout.tsx + components/NextChatSDKBootstrap.tsx)
NextChatSDKBootstrap 补丁 history 和 fetch 因此，当页面嵌入到ChatGPT iframe中时，其行为是正确的。它安装在里面 app/layout.tsx 并在以下情况下显示横幅提醒 NEXT_PUBLIC_BASE_URL 不见了。布局还允许 suppressHydrationWarning，符合教程说明。
Hello World用户界面(app/page.tsx)
app/page.tsx 呈现一张“你好，世界。”英雄卡。这是MCP资源通过发布的UI templateUri，一旦将服务器路由连接到ChatGPT，它就会立即可见。
开发工作流程
-
安装依赖项（已由处理
create-next-app，但如果需要，请重新运行）：npm install -
导出基本URL，以便资产前缀和引导程序知道要使用哪个源：
export NEXT_PUBLIC_BASE_URL=http://localhost:3000 -
启动开发服务器：
npm run dev -
访问
http://localhost:3000在以下位置查看Hello World UI或与MCP端点交互http://localhost:3000/mcp.
部署说明
- 当在Vercel上部署时，
VERCEL_URL自动拾取；您仍然可以用以下命令覆盖它NEXT_PUBLIC_BASE_URL如果您需要ChatGPT的自定义域。 - 保持
/mcp仅限服务器，并随着应用程序的增长在那里添加额外的工具/资源。
就是这样——现在，您已经将教程中的所有四个构建块连接到一个干净的Next.js项目中，该项目在ChatGPT应用程序界面内呈现“Hello World”。