AI导哈

ChatGPT应用SDK集成工具

一个基于Next.js和边缘函数的MCP服务器，用于集成ChatGPT应用SDK，支持动态小部件渲染和结构化内容展示。

  • by TencentEdgeOne
  • TypeScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 TencentEdgeOne/chatgpt-apps-edgeone-pages

使用说明

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

  1. 点击上方按钮进行一键部署。
  2. 配置完成后，EdgeOne 控制台会分配一个域名，该域名同时托管 Next.js 应用程序和 MCP 端点。

一旦部署完成，Next.js 应用将从根路径提供服务，并且 functions/mcp/index.ts 被自动映射到 /mcp。

从ChatGPT连接

  1. 确保您的账户拥有ChatGPT应用程序开发者访问权限。
  2. 在ChatGPT中，打开 设置 → 连接器 → 创建。
  3. 将 EdgeOne Pages 的部署 URL 添加为 MCP 服务器，例如：
    https://<your-project-url>/mcp
  4. 保存配置，然后拨打 hello_stat 在对话中使用该工具来生成一个显示你名字的统计小部件。

MCP请求流程

  1. ChatGPT通话 /mcp 通过MCP协议，触发 initialize 并且 tools/list 握手。
  2. 当用户调用时 hello_stat服务器返回带有标题/值/描述的结构化内容。
  3. 小部件模板从Next.js应用根目录获取，并在ChatGPT中使用结构化数据进行渲染。
  4. 错误以结构化格式返回，以便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 根据需求扩展计算能力。

相关 MCP