chatgpt-app-builder skill

by Shubhamsaboo·Shubhamsaboo/awesome-llm-apps·145k stars·Apache-2.0

DEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill.

A100/100content scan

Is the chatgpt-app-builder skill safe?

Clean: nothing in its files matched our rules. We read 18 files in the folder on 2026-10-25.

No findings.

Install the chatgpt-app-builder skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.

git clone --depth 1 https://github.com/Shubhamsaboo/awesome-llm-apps.git /tmp/awesome-llm-apps
mkdir -p ~/.claude/skills
cp -r /tmp/awesome-llm-apps/generative_ui_agents/ai-mcp-app-builder/apps/mcp-use-server/.agent/skills/chatgpt-app-builder ~/.claude/skills/chatgpt-app-builder

available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

ChatGPT App Builder

Build ChatGPT apps with interactive widgets using mcp-use. Zero-config widget development with automatic registration and built-in React hooks.

The app is consumed by two users at once: the human and the ChatGPT LLM. They collaborate through the widget -- the human interacts with it, the LLM sees its state. The widget is your shared surface.

Before You Code

Clarify what to build → discover.md: when starting a new app, validating an idea, or scoping features
Design tools and widgets → architecture.md: when deciding what needs UI vs tools-only, designing UX flows

Setup

Scaffold and run → setup.md: when creating a new project, starting dev server, connecting to ChatGPT/Claude

Implementation

Server handlers + widget creation → server-and-widgets.md: when writing server.tool() with widgets, widget() helper, React widget files
Widget state and LLM context → state-and-context.md: when persisting state, triggering LLM from widget, managing ephemeral vs persistent data
Display modes, theme, layout → ui-guidelines.md: when adapting to inline/fullscreen/PiP, handling theme, device, locale
Component API → components-api.md: when using McpUseProvider, Image, ErrorBoundary, useWidget
CSP and metadata → csp-and-metadata.md: when configuring external domains, dual-protocol metadata
Advanced patterns → widget-patterns.md: when building complex widgets with tool calls, state, theming

Quick Reference

// Server
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "widget-name" } },
  async (input) => widget({ props: {...}, output: text("...") })
);

// Widget (resources/widget-name.tsx)
import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
export const widgetMetadata: WidgetMetadata = { description: "...", props: z.object({...}) };
export default function MyWidget() {
  const { props, isPending, callTool, sendFollowUpMessage, state, setState, theme } = useWidget();
  if (isPending) return <McpUseProvider autoSize><div>Loading...</div></McpUseProvider>;
  return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}

More skills from Shubhamsaboo/awesome-llm-apps

Aadvisor-orchestrator-workerUse when a task is too large for one model pass, needs parallel research or generation across many subtasks (like researching a dozen competitors at once), or the user asks to orchestrate multiple models, split work across a model team, run an advisor-worker loop, have a stronger model review the plan while cheap workers execute, or says "too big for one model" or "fan this out". Not for single-file edits or tasks one model handles in one pass.
Acommit-archaeologistReconstructs why code exists from local git history, including the introducing commit, later changes, current authors, repeated companion files, and likely intent. Use when the user asks "why does this code exist", "who wrote this function and why", or to "explain the history of this function" before a rewrite, refactor, or risky edit. Runs entirely locally.
Adependency-doctorChecks requirements.txt, pyproject.toml, and package.json dependency manifests for surface-level direct-dependency footguns: standard-library shadowing pins, abandoned backports, unpinned dependencies, and obvious intra-manifest conflicts, plus opt-in PyPI yanked releases. Use when the user asks to check a manifest for dependency problems, asks why dependencies won't install or whether anything is wrong with their dependencies, wants a dependency autopsy, or suspects dependency manifest rot. Runs offline by default as a local tool for the user's own project, not repository CI.
Afirst-readerBeta readers for any draft, run by simulating how a real reader experiences it, moment by moment. A skim gate, a no-lookahead timed read producing an attention transcript with quit points, a recall test of what a reader remembers the next day, and a trust ledger of the implied author. Use when the user asks for a beta read, beta readers, test readers, human review, reader review, to read something like a human, to be a first reader, whether a piece holds attention or will actually get read, for a quick read of whether a busy skimmer would even open a post, what readers will remember or take away tomorrow, where readers stop reading or bounce, or why a draft still feels off or hollow after anti-slop or humanizer edits. Final gate before publishing; reports where the reading broke; never rewrites.
Amcp-apps-builder**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns.
Amcp-builderDEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill.
Aproject-graveyardScans the developer's machine for dead side projects, autopsies each one from its git history (died at the payments wall, killed by a newer project, finished but never shipped), surfaces their personal death patterns, and picks the corpse most worth resurrecting — then helps ship it. Use when the user mentions abandoned, unfinished, or old side projects, asks "what should I finish", wants to revive or resurrect a project, says "run the graveyard", wonders why they never finish anything, or is about to start a new project that sounds like one they already built. Runs entirely locally.
Ascope-creep-detectorAnalyzes git diffs against a stated intent to detect scope creep, unrelated files, broad pull requests, changes that grew beyond a fix, dependency additions, public API renames, config or CI edits, oversized hunks, and formatting-only files. Use when the user asks whether a change grew beyond the fix, a PR is too broad, or what unrelated stuff they touched, and wants keep, split, or justify guidance. Operates locally and offline.
Athinking-out-loudA contract for what the agent does when a long, messy, stream-of-consciousness ramble arrives (usually voice dictation): act on nothing until the echo brief is approved. The echo audits the entire transfer, mission, locked decisions and constraints, open questions, flips and parked tangents, with the model's inferences and guesses quarantined away from the user's own phrasing, so the user verifies what the model believes, not just what it doubts. Use when the user says "let me think out loud" or wants to ramble a bit before building anything, when a message opens with a speech-to-text preamble like "switching to voice, sorry for typos", when input is a long weakly punctuated stream with restarts and mid-message reversals ("actually no, wait, scrap that idea entirely"), or when the user asks to be interviewed about a fuzzy half-formed idea. Includes an optional capture mode for rambles spread across several messages and an optional targeted interview.

All agent skills → · MCP servers