AI导哈

ChatGPT应用SDK Next.js启动器

一个基于Next.js的ChatGPT应用SDK启动器，用于演示如何构建与OpenAI Apps SDK兼容的MCP服务器，并在ChatGPT中渲染小部件。

  • by parkjeayeon
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 parkjeayeon/nextjs-mcp

使用说明

ChatGPT应用SDK Next.js入门版

一个最小的Next.js应用程序，演示如何构建 OpenAI应用软件开发工具包 兼容的MCP服务器，在ChatGPT中呈现小部件。

概述

本项目展示了如何使用模型上下文协议（MCP）将Next.js应用程序与ChatGPT Apps SDK集成。它包括一个可用的MCP服务器，该服务器公开了可以从ChatGPT调用的工具和资源，并在ChatGPT中本地呈现响应。

关键组件

1.MCP服务器路由(app/mcp/route.ts)

核心MCP服务器实现，向ChatGPT公开工具和资源。

主要特点：

  • 工具注册 具有OpenAI特定的元数据
  • 资源注册 为iframe渲染提供HTML内容
  • 交叉链接 通过以下方式在工具和资源之间 templateUri

OpenAI特定元数据：

{
  "openai/outputTemplate": widget.templateUri,      // Links to resource
  "openai/toolInvocation/invoking": "Loading...",   // Loading state text
  "openai/toolInvocation/invoked": "Loaded",        // Completion state text
  "openai/widgetAccessible": false,                 // Widget visibility
  "openai/resultCanProduceWidget": true            // Enable widget rendering
}

完整配置选项： OpenAI应用SDK MCP文档

2.资产配置(next.config.ts)

严重： 集 assetPrefix 确保 /_next/ 静态资产从正确的来源提取：

const nextConfig: NextConfig = {
  assetPrefix: baseURL,  // Prevents 404s on /_next/ files in iframe
};

如果没有这个，Next.js将尝试从iframe的URL加载资源，导致404错误。

3.CORS中间件(proxy.ts)

处理客户端导航期间跨源RSC（React Server Components）获取所需的浏览器OPTIONS预检请求：

export function proxy(request: NextRequest) {
  if (request.method === "OPTIONS") {
    // Return 204 with CORS headers
  }
  // Add CORS headers to all responses
}

4.SDK引导(app/layout.tsx)

这 <NextChatSDKBootstrap> 组件修补浏览器API，使其在ChatGPT iframe中正常工作：

它修补了什么：

  • history.pushState / history.replaceState -阻止历史记录中的完整源URL
  • window.fetch -重写同源请求以使用正确的基本URL
  • <html> 属性观察器-防止ChatGPT修改根元素

所需配置：

<html lang="en" suppressHydrationWarning>
  <head>
    <NextChatSDKBootstrap baseUrl={baseURL} />
  </head>
  <body>{children}</body>
</html>

注： suppressHydrationWarning 目前是必需的，因为ChatGPT在Next.js应用程序水合之前修改了初始HTML，导致水合不匹配。

入门指南

安装

npm install
# or
pnpm install

发展

npm run dev
# or
pnpm dev

打开 http://localhost:3000 查看应用程序。

测试MCP服务器

MCP服务器位于：

http://localhost:3000/mcp

从ChatGPT连接

  1. 将您的应用程序部署到Vercel
  2. 在ChatGPT中，导航到 设置→ 连接器 → 创建 并添加您的MCP服务器URL /mcp 路径（例如。， https://your-app.vercel.app/mcp)

注： 将MCP服务器连接到ChatGPT需要开发人员模式访问权限。请参阅 连接指南 有关设置说明。

项目结构

app/
├── mcp/
│   └── route.ts          # MCP server with tool/resource registration
├── layout.tsx            # Root layout with SDK bootstrap
├── page.tsx              # Homepage content
└── globals.css           # Global styles
proxy.ts             # CORS handling for RSC
next.config.ts            # Asset prefix configuration

运作原理

  1. 工具调用：ChatGPT调用在中注册的工具 app/mcp/route.ts
  2. 资源引用：工具响应包括 templateUri 指向已注册的资源
  3. 小部件渲染：ChatGPT获取资源HTML并在iframe中呈现
  4. 客户保湿：Next.js使用修补的API在iframe内水合应用程序
  5. 导航：客户端导航使用补丁 fetch 装载RSC有效载荷

了解更多

部署

该项目旨在与 维塞尔 部署。这 baseUrl.ts 配置会自动检测Vercel环境变量并设置正确的资产URL。

配置会自动处理：

  • 生产URL通过 VERCEL_PROJECT_PRODUCTION_URL
  • 通过预览/分支URL VERCEL_BRANCH_URL
  • 在iframe中正确加载资源的资产前缀

相关 MCP