mongodb-chatgptsdk演示
mongodb-chatgptsdk演示 是Next.js 15入门版，展示了如何配对 MongoDB 阿特拉斯Vercel和 ChatGPT应用软件开发工具包 构建一个协作式待办事项助手。同样的Atlas支持的API驱动了传统的web UI和模型上下文协议（MCP）工具，使用户可以直接在ChatGPT中获得体验。
亮点
- 共享任务列表。
todo_lists和todo_items集合在Atlas中实时更新，包括乐观的UI更新、共享链接和通过SWR实时刷新。 - 零摩擦局部开发。
lib/mongodb.ts当MONGODB_URI未设置，因此您可以在没有网络连接的情况下进行演示，并通过设置一个env变量切换到Atlas。 - ChatGPT原生工具。
/api/mcp/[transport]/route.ts注册小部件HTML以及用于创建、列出、更新和删除待办事项的工具，以便ChatGPT可以与完全相同的后端通信。 - 一条部署路径。 Vercel托管应用程序，提供小部件模板，并公开您插入ChatGPT的“开发自己的”流中的MCP端点。
项目结构
app/
api/
mcp/[transport]/route.ts # MCP handler (JSON/SSE transports)
todos/[listId]/route.ts # REST API for CRUD actions
todos/ # Pages + widgets for list display
components/
todo-list-widget.tsx # Main React UI with optimistic updates
lib/
mongodb.ts # Atlas client + in-memory fallback
openai.ts # Widget helper (window.openai bridge)先决条件
- Node.js 20+
- 包管理器（建议使用pnpm）
- MongoDB Atlas集群（M0免费层可用）或本地MongoDB进行测试
- 可选：如果您想在本地运行时从ChatGPT测试MCP端点，请使用Ngrok(
pnpm ngrok)
设置
- 安装依赖项：
pnpm install- 复制
.env.example（或使用下面的代码片段）.env并填写您的MongoDB连接字符串：
MONGODB_URI="mongodb+srv://:
@cluster.mongodb.net/chatgpt_todos"- （可选）为数据库添加种子：
use chatgpt_todos
db.todo_lists.insertOne({ _id: "launch-list", title: "Launch checklist", shareToken: UUID(), createdAt: new Date() })地方发展
pnpm dev- 应用程序：http://localhost:3000
- Todo API：http://localhost:3000/api/todos/:listId
- MCP端点（JSON传输）：http://localhost:3000/api/mcp/json
因为 lib/mongodb.ts 在以下情况下回退到内存存储 MONGODB_URI 即使没有实时数据库，您也可以探索UI和MCP工具。
ChatGPT应用SDK集成
MCP路线(app/mcp/route.ts)执行三项任务：
- 渲染
/todos/widget页面一次，并将其注册为小部件资源，这样ChatGPT就可以嵌入完全相同的UI。 - 展示工具(
create_todo_list,add_todo_item,complete_todo_item,delete_todo_item,get_todo_list,list_todo_lists,upsert_todo_items)与zod-验证输入。 - 返回人类可读的文本和
structuredContent因此，小部件在每次工具调用后都保持同步。
要在ChatGPT中尝试：
- 运行开发服务器（或部署到Vercel）。
- 在ChatGPT中，打开 构建GPT→ 添加操作→ 模型上下文协议.
- 粘贴
https:///api/mcp/json（或您的ngrok网址）。 - ChatGPT自动检测工具；点击 保存 然后用“创建项目启动列表并添加三个任务”这样的短语开始提示
在Vercel上部署
- 将仓库推送到GitHub并将其导入Vercel。
- 设置环境变量(
MONGODB_URI，加上可选PUBLIC_BASE_URL如果你需要一个自定义域）。 - 部署。
baseUrl.ts自动检测小部件CSP元数据的正确来源，因此MCP注册开箱即用。 - 更新您的ChatGPT MCP配置以使用生产URL。
脚本
| 脚本 | 描述 |
|---|---|
pnpm dev | 使用Turbopack运行Next.js |
pnpm build | 创建生产捆绑包 |
pnpm start | 在本地启动生产服务器 |
pnpm ngrok | 通过ngrok暴露端口3000用于ChatGPT MCP测试 |
故障排除
- 内存回退而不是Atlas？ 确保
MONGODB_URI在本地开发和Vercel的环境中定义。 - ChatGPT中未加载小部件？ 验证中的CSP元数据
app/mcp/route.ts引用正确的域设置PUBLIC_BASE_URL修复自定义设置。 - 工具调用卡住了吗？ 检查Vercel功能日志或
pnpm dev产出；寻找[todos]或[v0]API路由的日志。
许可证
该项目作为教育样本提供。自由调整它以用于演示、博客文章或您自己的支持ChatGPT的应用程序。