ChatGPT 应用程序SDK EdgeOne 页面启动器（或：ChatGPT应用SDK EdgeOne页面入门版）
这个仓库是一个最小化的EdgeOne Pages项目，展示了如何构建一个与MCP（可能是指某种服务器或平台兼容协议）兼容的服务器 OpenAI 应用程序开发工具包（SDK） 使用 Next.js 和边缘函数。
部署
现场演示：https://chatgpt-apps-edgeone-pages.edgeone.run
概述
该项目展示了如何使用Next.js在腾讯云EdgeOne Pages + Functions上托管MCP服务器。MCP服务器向ChatGPT暴露了工具，并渲染包含结构化内容的小部件。
技术栈
- Next.js 15带有App Router的React框架
- Hono（人名，音译）适用于EdgeOne Functions的快速、轻量级Web框架
- MCP SDK（MCP软件开发工具包）模型上下文协议实现
- Tailwind CSS实用优先的CSS框架
- TypeScript类型安全的开发
能力
- MCP服务器无服务器（的架构/环境）
onRequest基于Hono构建的EdgeOne Functions上的处理程序 - 小部件支持该
hello_stat该工具渲染包含结构化内容的动态小部件 - CORS 支持内置逻辑确保服务器与ChatGPT iframe和浏览器调试兼容
- Next.js 前端基于React的现代UI，采用Tailwind CSS样式
关键文件
functions/mcp/index.ts实现MCP JSON-RPC，注册hello_stat工具，并处理小部件渲染functions/httpTransport.ts用于MCP服务器的自定义HTTP传输app/page.tsxNext.js 项目介绍着陆页app/layout.tsx带有全局样式的根布局app/globals.cssTailwind CSS 配置和全局样式edgeone.json带有CORS头部的EdgeOne页面配置
快速入门
1. 部署到EdgeOne Pages
- 点击上方按钮进行一键部署。
- 配置完成后，EdgeOne 控制台会分配一个域名，该域名同时托管 Next.js 应用程序和 MCP 端点。
一旦部署完成，Next.js 应用将从根路径提供服务，并且 functions/mcp/index.ts 被自动映射到 /mcp。
从ChatGPT连接
- 确保您的账户拥有ChatGPT应用程序开发者访问权限。
- 在ChatGPT中，打开 设置 → 连接器 → 创建。
- 将 EdgeOne Pages 的部署 URL 添加为 MCP 服务器，例如：
https:///mcp- 保存配置，然后拨打
hello_stat在对话中使用该工具来生成一个显示你名字的统计小部件。
MCP请求流程
- ChatGPT通话
/mcp通过MCP协议，触发initialize并且tools/list握手。 - 当用户调用时
hello_stat服务器返回带有标题/值/描述的结构化内容。 - 小部件模板从Next.js应用根目录获取，并在ChatGPT中使用结构化数据进行渲染。
- 错误以结构化格式返回，以便ChatGPT和开发人员能够快速进行调试。
项目结构
examples/chatgpt-apps-edgeone-pages/
├── app/
│ ├── layout.tsx # Next.js root layout
│ ├── page.tsx # Landing page
│ └── globals.css # Global styles with Tailwind
├── functions/
│ ├── mcp/
│ │ ├── index.ts # MCP server with hello_stat tool
│ │ └── [[default]].ts # Dynamic route handler
│ └── httpTransport.ts # Custom HTTP transport for MCP
├── edgeone.json # EdgeOne configuration
├── next.config.js # Next.js configuration
└── tailwind.config.js # Tailwind CSS configuration进一步阅读
为了扩展设置，继续发展MCP（微控制器/主控制程序）逻辑 functions/mcp/index.tsEdgeOne Pages 根据需求扩展计算能力。