How to use the ChatGPT App Builder (Deprecated) agent skill

What is an agent skill and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file and supporting reference files. When a coding agent decides the skill is relevant to your request, it loads those instructions so it can work with more specific knowledge.

Once installed, this skill gives the agent a reference guide for building ChatGPT apps that include interactive visual widgets. According to the source, the agent can scaffold a project, write server tools that return widgets, build React widget components, manage widget state shared between the user and the ChatGPT model, and configure content security and metadata.

• Server tools that return widgets using the mcp-use server helpers
• React widget components with the mcp-use React hooks
• Widget state shared between the human user and the ChatGPT model
• Content security policy (CSP) and metadata configuration

Read the deprecation notice before you install

The SKILL.md description begins with a deprecation notice: this skill has been replaced by mcp-app-builder, and the agent should use that instead. The source gives this install command for the replacement: npx skills install mcp-use/mcp-use --skill mcp-app-builder

If you are starting a new project, the source says new work should use mcp-app-builder. This skill is most useful for maintaining an existing ChatGPT app built with its patterns, or for understanding the older mcp-use widget conventions before you migrate.

How do you install the chatgpt-app-builder skill?

You can install the skill from the ZIP file on this page. Download the ZIP, then unzip it into one of these locations:

Your personal skills folder: ~/.claude/skills/

A project-specific folder: .claude/skills/ inside your project

• Personal: unzip into ~/.claude/skills/ so it is available across your projects
• Project: unzip into .claude/skills/ inside the project so it applies only there
• Claude apps: upload the skill under Settings → Capabilities → Skills

What do you need before you use it?

The source lists these requirements: Node.js and npm/npx, mcp-use and its React helpers, OpenAI Apps SDK or ChatGPT developer access for testing, and the mcp-app-builder skill as the recommended replacement.

The skill tells the agent to run a package install via npx, so you need Node.js and npm available on your machine. Testing the widget in ChatGPT requires developer access.

• Node.js with npm and npx
• mcp-use and its React helpers
• OpenAI Apps SDK or ChatGPT developer access for testing
• mcp-app-builder skill (recommended replacement)

How do you trigger the skill with a natural request?

You do not need a special command. The skill description says it applies when you are creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when you mention ChatGPT widgets, mcp-use widgets, or Apps SDK development.

Name the thing you are building. Requests such as 'add a ChatGPT widget that shows my order list' or 'define a React widget for mcp-use' match the skill's description. Note that the agent may first suggest mcp-app-builder, since the skill itself tells it to do so.

• Example: 'Create a ChatGPT app with a widget that lists open support tickets.'
• Example: 'Write an mcp-use server tool that returns a widget with a form.'
• Example: 'Help me define a React widget with state the ChatGPT model can see.'

What about safety: scripts and network access?

The source states this skill runs no scripts itself but does use the network. Its install step uses npx, which fetches code from the internet. If you cannot verify that install command, do not run it. Review the command and the package before letting the agent execute it.

Check the Apache-2.0 licence in LICENSE.txt before you reuse or redistribute the material.

• Runs scripts: no
• Uses network: yes, through the npx install step
• Review any npx command the agent proposes before approving it

Tips for getting good results

The skill's references cover discovery, architecture, setup, server and widgets, state and context, UI guidelines, components, and CSP and metadata. Ask the agent to read the reference that matches your task, such as the CSP reference when configuring external domains.

The skill includes manual evaluation files in evals/. The evals README describes running each query against an agent with the skill and comparing the response with the expected behaviour. You can use this to check whether the agent is following the skill correctly.

• Ask about one area at a time, for example server tools or CSP
• Check the agent's proposed install commands before running them
• Use the evals folder to test the skill's behaviour yourself