Skill 广场
ChatGPT交互式卡片应用开发 Skill

ChatGPT交互式卡片应用开发.Skill

@Shubhamsaboo/chatgpt-app-builder

4.1推荐AI 评分基础检查通过源自 GitHub

此能力专门用于基于 mcp-use 框架与 OpenAI Apps SDK 规范构建支持富文本交互界面的 ChatGPT 应用。它规范了人机协同界面的设计准则(用户在卡片内操作、LLM 实时感知组件状态),提供从项目初始化、服务端 MCP 工具注册、React 组件开发(利用 useWidget 钩子进行状态同步与工具回传),到暗黑模式适配、安全策略(CSP)配置的全套开发实施指南。注:官方已将此规范演进升级为 mcp-app-builder。

编程全栈开发者AI应用开发者前端工程师2026-09-23 更新main

ChatGPT交互式卡片应用开发

此能力专门用于基于 mcp-use 框架与 OpenAI Apps SDK 规范构建支持富文本交互界面的 ChatGPT 应用。它规范了人机协同界面的设计准则(用户在卡片内操作、LLM 实时感知组件状态),提供从项目初始化、服务端 MCP 工具注册、React 组件开发(利用 useWidget 钩子进行状态同步与工具回传),到暗黑模式适配、安全策略(CSP)配置的全套开发实施指南。注:官方已将此规范演进升级为 mcp-app-builder。

它会先理解你的原始内容和目标,再按清晰的步骤完成处理。你不需要学习复杂命令,也不用理解背后的技术细节。

常见场景

它能帮你做什么?

01

02

03

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么,或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

请帮我用 mcp-use 编写一个商品比价 Widget,包含 React 卡片组件代码以及对应的 server.tool 注册逻辑

如何在 ChatGPT Widget 中使用 useWidget 钩子实现点击按钮后触发新的 LLM 追问并更新卡片本地状态?

请提供一个适配 ChatGPT 深色模式和自适应尺寸 (autoSize) 的交互式看板组件模版

适用人群

适合谁?

全栈开发者AI应用开发者前端工程师MCP协议生态插件开发者

上手门槛

使用难度

专业

适合熟悉相关工具和专业流程的用户。

兼容范围

支持哪些 AI?

Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用
国内 Agent可直接使用

中文用户增强

Skill Px 做了什么?

中文说明简化使用方式补充中文案例整理安装流程降低理解难度