chatgpt-app-builder
Provides architectural patterns and best practices for building MCP servers and ChatGPT widgets.
Install
mkdir -p .claude/skills/chatgpt-app-builder && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1053" && unzip -o skill.zip -d .claude/skills/chatgpt-app-builder && rm skill.zipInstalls to .claude/skills/chatgpt-app-builder
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.Key capabilities
- →Scaffold new MCP server projects
- →Define tools, resources, and prompts
- →Implement interactive React-based widgets
- →Configure OAuth authentication providers
- →Manage server middleware and proxying
How it works
It provides a framework for building MCP servers using Hono-based architecture, enforcing best practices for tool definition, state management in widgets, and security patterns.
Inputs & outputs
When to use chatgpt-app-builder
- →Build an MCP server
- →Create ChatGPT widgets
- →Debug MCP server implementation
About this skill
Build with mcp-use
Treat the installed mcp-use package, its exported types, generated declarations, and the project's existing code as the source of truth. Inspect the installed version before choosing APIs or changing code.
Workflow
- Inspect
package.json, the server entry, exported tool refs,mcp-env.d.ts,views/,skills/, and the installedmcp-useversion. - Scaffold a new stable project with
create-mcp-use-app@latestand the appropriate template. Match the package version or dist-tag when working on beta, canary, or an existing versioned project. - Read only the references needed for the task:
- Server for tools, resources, prompts, MCP middleware, request context, and result envelopes.
- Views for interactive MCP Apps, React hooks, model context, host capabilities, assets, and CSP.
- Authentication for OAuth providers, verified identity, scopes, permissions, and authorization.
- Skills over MCP when a server should ship reusable workflows alongside its tools.
- Advanced features for OpenAPI, proxying, notifications, subscriptions, and elicitation.
- Migration only when retired or compatibility-only imports, helpers, registration shapes, UI patterns, or session assumptions are present.
- Verification before reporting implementation work complete.
- Implement against installed types. Prefer the framework's current conventions over copied examples or historical changelogs.
- Validate the smallest real lifecycle that proves the changed behavior, then expand checks in proportion to risk.
Core invariants
- Import server APIs from
mcp-use, React APIs frommcp-use/react, and OAuth provider adapters from theirmcp-use/oauth/*subpaths. - Define tool arguments with
inputSchema. AddoutputSchemafor structured results and every View-bound tool. - Return raw MCP result envelopes. A successful schema-backed tool must include matching
structuredContent; an expected failure may returnisError: truewith model-readablecontent. - Put each View at
views/<name>/view.tsxand bind it withview: { name: "<name>" }. - Export every statically declared tool ref consumed by a View. Default-export the server entry used by
mcp-use dev,build, andstart. - Keep identity and mutable workflow state request-scoped or in an external store. Treat client-reported metadata as unverified.
- Consider Skills over MCP when a server exposes a repeatable, multi-step workflow that would otherwise inflate tool descriptions.
Guardrails
- Do not invent exports, configuration fields, or callback shapes. Confirm uncertain details in installed declarations or source.
- Do not preserve APIs that are absent from the installed version merely because they appear in an existing project.
- Do not return a plain domain object from a tool callback.
- Do not bind a View without a matching
outputSchemaandstructuredContentresult. - Do not use module globals for cross-request identity, elicitation continuity, or durable business state.
- Do not claim success from a source build alone when types, package exports, authentication, or interactive behavior changed.
- Do not deploy or mutate external systems unless the user explicitly requests it.
When not to use it
- →When manually creating boilerplate code
- →When working outside of an mcp-use project
Prerequisites
Limitations
- →Must use provided scaffolding for proper configuration
- →Requires specific file structure for widgets
How it compares
It provides a standardized CLI-driven scaffolding and architectural pattern library that prevents manual boilerplate errors.
Compared to similar skills
chatgpt-app-builder side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| chatgpt-app-builder (this skill) | 5 | 4mo | Review | Advanced |
| mcp-builder | 136 | 5mo | Review | Advanced |
| copilot-sdk | 7 | 5mo | Review | Intermediate |
| create-mcp-app | 3 | 6mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
mcp-builder
anthropics
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
copilot-sdk
github
Build agentic applications with GitHub Copilot SDK. Use when embedding AI agents in apps, creating custom tools, implementing streaming responses, managing sessions, connecting to MCP servers, or creating custom agents. Triggers on Copilot SDK, GitHub SDK, agentic app, embed Copilot, programmable agent, MCP server, custom agent.
create-mcp-app
modelcontextprotocol
This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides comprehensive guidance for building MCP Apps with interactive UIs.
retellai-hello-world
jeremylongshore
Create a minimal working Retell AI example. Use when starting a new Retell AI integration, testing your setup, or learning basic Retell AI API patterns. Trigger with phrases like "retellai hello world", "retellai example", "retellai quick start", "simple retellai code".
m365-agents-ts
T-Sunm
Microsoft 365 Agents SDK for TypeScript/Node.js.
mcp-builder
UnderUndreGH
MCP (Model Context Protocol) server building principles. Tool design, resource patterns, best practices.