CH

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.zip

Installs 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.
273 chars · catalog description✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Advanced

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

You give it
MCP server feature requirements
You get back
production-ready MCP server code

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

  1. Inspect package.json, the server entry, exported tool refs, mcp-env.d.ts, views/, skills/, and the installed mcp-use version.
  2. Scaffold a new stable project with create-mcp-use-app@latest and the appropriate template. Match the package version or dist-tag when working on beta, canary, or an existing versioned project.
  3. 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.
  4. Implement against installed types. Prefer the framework's current conventions over copied examples or historical changelogs.
  5. 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 from mcp-use/react, and OAuth provider adapters from their mcp-use/oauth/* subpaths.
  • Define tool arguments with inputSchema. Add outputSchema for 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 return isError: true with model-readable content.
  • Put each View at views/<name>/view.tsx and bind it with view: { name: "<name>" }.
  • Export every statically declared tool ref consumed by a View. Default-export the server entry used by mcp-use dev, build, and start.
  • 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 outputSchema and structuredContent result.
  • 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

Node.js environment

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.

SkillInstallsUpdatedSafetyDifficulty
chatgpt-app-builder (this skill)54moReviewAdvanced
mcp-builder1365moReviewAdvanced
copilot-sdk75moReviewIntermediate
create-mcp-app36moReviewAdvanced

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).

136215

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.

763

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.

331

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".

31

m365-agents-ts

T-Sunm

Microsoft 365 Agents SDK for TypeScript/Node.js.

00

mcp-builder

UnderUndreGH

MCP (Model Context Protocol) server building principles. Tool design, resource patterns, best practices.

00

Search skills

Search the agent skills registry