OA0 = Omni AI 0

OA0 是一个探索 AI 的论坛

现在注册

已注册用户请登录

OA0 › 技能包 › chatgpt-apps：完整的 ChatGPT 应用构建器 - 包含设计、实现与测试

chatgpt-apps：完整的 ChatGPT 应用构建器 - 包含设计、实现与测试

ocmuuu · 2026-02-14 23:51:35 · 3 次点击 · 0 条评论

名称： chatgpt-apps
描述： 完整的 ChatGPT 应用构建器 - 通过 MCP 服务器、小部件、身份验证、数据库集成和自动化部署，创建、设计、实现、测试和部署 ChatGPT 应用
主页： https://github.com/hollaugo/prompt-circle-claude-plugins
user-invocable: true

ChatGPT 应用构建器

提供从概念到生产的完整工作流，用于构建、测试和部署 ChatGPT 应用。

命令

/chatgpt-apps new - 创建一个新的 ChatGPT 应用
/chatgpt-apps add-tool - 向你的应用添加一个 MCP 工具
/chatgpt-apps add-widget - 向你的应用添加一个小部件
/chatgpt-apps add-auth - 配置身份验证
/chatgpt-apps add-database - 设置数据库
/chatgpt-apps validate - 验证你的应用
/chatgpt-apps test - 运行测试
/chatgpt-apps deploy - 部署到生产环境
/chatgpt-apps resume - 继续开发一个应用

1. 创建新应用

目的： 从概念到可运行代码，创建一个新的 ChatGPT 应用。

工作流程

第一阶段：概念化

询问应用想法
"你想构建什么样的 ChatGPT 应用？描述它的功能和解决的问题。"
基于 UX 原则分析
- 对话优势：用户通过自然语言能完成什么？
- 原生契合度：如何与 ChatGPT 的对话流集成？
- 可组合性：工具能否独立工作并与其他应用组合？
检查反模式
- 静态网站内容展示
- 需要外部标签页的复杂多步骤工作流
- 重复 ChatGPT 原生功能
- 广告或追加销售
定义用例
创建 3-5 个主要用例，包含用户故事。

第二阶段：设计

工具拓扑
- 查询工具 (readOnlyHint: true)
- 变更工具 (destructiveHint: false)
- 破坏性工具 (destructiveHint: true)
- 小部件工具 (通过 _meta 返回 UI)
- 外部 API 工具 (openWorldHint: true)
小部件设计
对于每个小部件：
- id - 唯一标识符 (kebab-case)
- name - 显示名称
- description - 描述其显示内容
- mockData - 预览用的示例数据
数据模型
设计实体和关系。
身份验证要求
- 单用户 (无需身份验证)
- 多用户 (Auth0 或 Supabase Auth)

第三阶段：实现

生成具有以下结构的完整应用：

{应用名称}/
├── package.json
├── tsconfig.server.json
├── setup.sh
├── START.sh
├── .env.example
├── .gitignore
└── server/
    └── index.ts

关键要求：
- 从 @modelcontextprotocol/sdk/server/index.js 导入 Server 类
- 使用 StreamableHTTPServerTransport 进行会话管理
- 小部件 URI：ui://widget/{widget-id}.html
- 小部件 MIME 类型：text/html+skybridge
- 工具响应中包含 structuredContent
- 工具上带有 _meta 和 openai/outputTemplate

第四阶段：测试

运行设置：./setup.sh
启动开发服务器：./START.sh --dev
预览小部件：http://localhost:3000/preview
测试 MCP 连接

第五阶段：部署

生成 Dockerfile 和 render.yaml
部署到 Render
配置 ChatGPT 连接器

2. 添加 MCP 工具

目的： 向你的 ChatGPT 应用添加一个新的 MCP 工具。

工作流程

收集信息
- 这个工具做什么？
- 需要哪些输入？
- 返回什么？
分类工具类型
- 查询 (readOnlyHint: true) - 获取数据
- 变更 (destructiveHint: false) - 创建/更新数据
- 破坏性 (destructiveHint: true) - 删除数据
- 小部件 - 返回 UI 内容
- 外部 (openWorldHint: true) - 调用外部 API
设计输入模式
使用适当的类型和描述创建 Zod 模式。
生成工具处理器
使用 chatgpt-mcp-generator 代理创建：
- server/tools/ 中的工具处理器
- Zod 模式导出
- 类型导出
- 数据库查询 (如果需要)
注册工具
在 server/index.ts 中更新元数据：
typescript { name: "my-tool", _meta: { "openai/toolInvocation/invoking": "加载中...", "openai/toolInvocation/invoked": "完成", "openai/outputTemplate": "ui://widget/my-widget.html", // 如果是小部件 } }
更新状态
将工具添加到 .chatgpt-app/state.json。

工具命名

使用 kebab-case：list-items, create-task, show-recipe-detail

注解指南

场景	readOnlyHint	destructiveHint	openWorldHint
列表/获取	true	false	false
创建/更新	false	false	false
删除	false	true	false
外部 API	视情况而定	视情况而定	true

3. 添加小部件

目的： 添加带有 HTML/CSS/JS 和 Apps SDK 集成的内联 HTML 小部件。

5 种小部件模式

卡片网格 - 网格中的多个项目
统计仪表板 - 关键指标显示
表格 - 表格数据
条形图 - 简单的可视化
详情小部件 - 单个项目详情

工作流程

收集信息
- 小部件用途和数据
- 视觉设计 (卡片、表格、图表等)
- 交互性需求
定义数据结构
使用 TypeScript 接口记录预期的结构。
添加小部件配置
typescript const widgets: WidgetConfig[] = [ { id: "my-widget", name: "我的小部件", description: "显示数据", templateUri: "ui://widget/my-widget.html", invoking: "加载中...", invoked: "准备就绪", mockData: { /* 示例 */ }, }, ];
添加小部件 HTML
生成包含以下内容的 HTML：
- 预览模式支持 (window.PREVIEW_DATA)
- OpenAI Apps SDK 集成 (window.openai.toolOutput)
- 事件监听器 (openai:set_globals)
- 轮询回退 (100ms, 10s 超时)
创建/更新工具
通过 widgetId 将工具链接到小部件。
测试小部件
使用模拟数据在 /preview/{widget-id} 预览。

小部件 HTML 结构

(function() {
  let rendered = false;

  function render(data) {
    if (rendered || !data) return;
    rendered = true;
    // 渲染逻辑
  }

  function tryRender() {
    if (window.PREVIEW_DATA) { render(window.PREVIEW_DATA); return; }
    if (window.openai?.toolOutput) { render(window.openai.toolOutput); }
  }

  window.addEventListener('openai:set_globals', tryRender);

  const poll = setInterval(() => {
    if (window.openai?.toolOutput || window.PREVIEW_DATA) {
      tryRender();
      clearInterval(poll);
    }
  }, 100);
  setTimeout(() => clearInterval(poll), 10000);

  tryRender();
})();

4. 添加身份验证

目的： 使用 Auth0 或 Supabase Auth 配置身份验证。

何时添加

多用户
每个用户的持久私有数据
用户特定的 API 凭证

提供商

Auth0：
- 企业级
- OAuth 2.1, PKCE 流程
- 社交登录 (Google, GitHub 等)

Supabase Auth：
- 设置更简单
- 默认邮箱/密码
- 与 Supabase 数据库集成

工作流程

选择提供商
根据需求询问用户偏好。
指导设置
- Auth0： 创建应用，配置回调 URL，获取凭证
- Supabase： 已通过数据库设置配置
生成身份验证代码
使用 chatgpt-auth-generator 代理创建：
- 会话管理中间件
- 用户主题提取
- 令牌验证
更新服务器
添加身份验证中间件以保护路由。
更新环境变量
```bash
# Auth0
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=...
AUTH0_CLIENT_SECRET=...

Supabase (来自数据库设置)

SUPABASE_URL=...
SUPABASE_ANON_KEY=...
```
测试
验证登录流程和用户隔离。

5. 添加数据库

目的： 使用 Supabase 配置 PostgreSQL 数据库。

何时添加

持久化用户数据
多实体关系
查询/过滤能力

工作流程

检查 Supabase 设置
验证账户和项目是否存在。
收集凭证
- 项目 URL
- 匿名密钥 (公开)
- 服务角色密钥 (服务器端)
定义实体
对于每个实体，指定：
- 字段和类型
- 关系
- 索引
生成模式
使用 chatgpt-database-generator 代理创建包含以下内容的 SQL：
- id (UUID 主键)
- user_subject (varchar，已索引)
- created_at (timestamptz)
- updated_at (timestamptz)
- 用于用户隔离的 RLS 策略
设置连接池
```typescript
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
process.env.SUPABASE_URL!,
process.env.SUPABASE_SERVICE_ROLE_KEY!
);
```
应用迁移
在 Supabase 仪表板中或通过迁移工具运行 SQL。

查询模式

始终通过 user_subject 过滤：

const { data } = await supabase
  .from('tasks')
  .select('*')
  .eq('user_subject', userSubject);

6. 生成黄金提示词

目的： 生成测试提示词以验证 ChatGPT 是否正确调用工具。

重要性

衡量精确度/召回率
支持迭代
发布后监控

3 个类别

直接提示词 - 显式调用工具
- "显示我的任务列表"
- "创建一个名为...的新任务"
间接提示词 - 基于结果，ChatGPT 应推断工具
- "我今天需要做什么？"
- "帮我组织工作"
负面提示词 - 不应触发工具
- "什么是任务？"
- "告诉我关于项目管理"

工作流程

分析工具
审查每个工具的目的和输入。
生成提示词
对于每个工具，创建：
- 5+ 个直接提示词
- 5+ 个间接提示词
- 3+ 个负面提示词
- 2+ 个边缘情况提示词
最佳实践
- 工具描述以 "在以下情况使用..." 开头
- 清晰说明限制
- 在描述中包含示例
保存输出
写入 .chatgpt-app/golden-prompts.json：
json { "toolName": { "direct": ["prompt1", "prompt2"], "indirect": ["prompt1", "prompt2"], "negative": ["prompt1", "prompt2"], "edge": ["prompt1", "prompt2"] } }

7. 验证应用

目的： 部署前的验证套件。

10 项验证检查

必需文件
- package.json
- tsconfig.server.json
- setup.sh (可执行)
- START.sh (可执行)
- server/index.ts
- .env.example
服务器实现
- 使用 MCP SDK 的 Server
- 具有 StreamableHTTPServerTransport
- 使用 Map 进行会话管理
- 正确的请求处理器
小部件配置
- 存在 widgets 数组
- 每个都有 id, name, description, templateUri, mockData
- URI 匹配模式 ui://widget/{id}.html
工具响应格式
- 返回 structuredContent (不仅仅是 content)
- 小部件工具具有带有 openai/outputTemplate 的 _meta
资源处理器格式
- MIME 类型：text/html+skybridge
- 返回带有序列化和 CSP 的 _meta
小部件 HTML 结构
- 预览模式支持
- Apps SDK 的事件监听器
- 轮询回退
- 渲染保护
端点存在性
- /health - 健康检查
- /preview - 小部件索引
- /preview/:widgetId - 小部件预览
- /mcp - MCP 端点
Package.json 脚本
- 具有 build:server
- 具有 start (HTTP_MODE=true)
- 具有 dev (监视模式)
- 没有 web 构建脚本 (web/, ui/, client/)
注解验证
- readOnlyHint 设置正确
- 删除操作使用 destructiveHint
- 外部 API 使用 openWorldHint
数据库验证 (如果启用)
- 表具有必需字段
- user_subject 已索引
- RLS 策略已启用

常见错误

错误	修复方法
缺少 structuredContent	添加到工具响应
错误的小部件 URI	使用 ui://widget/{id}.html
没有会话管理	添加 Map
缺少 _meta	添加到工具定义和响应
错误的 MIME 类型	使用 text/html+skybridge

关键： 在其他验证之前首先检查文件是否存在！

8. 测试应用

目的： 使用 MCP Inspector 和黄金提示词运行自动化测试。

4 个测试类别

MCP 协议
- 服务器启动无错误
- 处理初始化
- 正确列出工具
- 正确列出资源
模式验证
- 工具模式是有效的 Zod
- 必需字段已标记
- 类型与实现匹配
小部件测试
- 所有小部件在预览模式下渲染
- 模拟数据正确加载
- 没有控制台错误
黄金提示词测试
- 直接提示词触发正确的工具
- 间接提示词按预期工作
- 负面提示词不触发工具

工作流程

在测试模式下启动服务器
bash HTTP_MODE=true NODE_ENV=test npm run dev
运行 MCP Inspector
测试协议合规性：
- 初始化连接
- 列出工具
- 使用有效输入调用每个工具
- 检查响应
模式验证
验证模式编译并与实现匹配。
黄金提示词测试
使用 ChatGPT 测试提示词：
- 记录调用了哪个工具
- 与预期工具比较
- 计算精确度/召回率
生成报告
json { "passed": 42, "failed": 3, "categories": { "mcp": "✅", "schema": "✅", "widgets": "✅", "prompts": "⚠️ 3 failures" }, "timing": "2.3s" }

修复失败

对于每个失败，解释：
- 什么失败了

技能包地址：https://github.com/openclaw/skills/tree/main/skills/hollaugo/chatgpt-apps/SKILL.md

3 次点击 ∙ 0 人收藏

登录后收藏

目前尚无回复

0 条回复

chatgpt-apps：完整的 ChatGPT 应用构建器 - 包含设计、实现与测试

ChatGPT 应用构建器

命令

目录

1. 创建新应用

工作流程

第一阶段：概念化

第二阶段：设计

第三阶段：实现

第四阶段：测试

第五阶段：部署

2. 添加 MCP 工具

工作流程

工具命名

注解指南

3. 添加小部件

5 种小部件模式

工作流程

小部件 HTML 结构

4. 添加身份验证

何时添加

提供商

工作流程

Supabase (来自数据库设置)

5. 添加数据库

何时添加

工作流程

查询模式

6. 生成黄金提示词

重要性

3 个类别

工作流程

7. 验证应用

10 项验证检查

常见错误

8. 测试应用

4 个测试类别

工作流程

修复失败