chatgpt-app
Guidance for building the chatgpt-app (Vite + React + @openai/apps-sdk-ui) with the MCP-friendly single-file output.
Best use case
chatgpt-app is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Guidance for building the chatgpt-app (Vite + React + @openai/apps-sdk-ui) with the MCP-friendly single-file output.
Teams using chatgpt-app should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/chatgpt-app/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How chatgpt-app Compares
| Feature / Agent | chatgpt-app | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Guidance for building the chatgpt-app (Vite + React + @openai/apps-sdk-ui) with the MCP-friendly single-file output.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# ChatGPT App Skill
This skill covers work in `/chatgpt-app`, the Vite + React TypeScript app that ships a single-file (inline HTML/CSS/JS) bundle consumed by the MCP server.
## Tech Stack & Build
- Vite + React 19 + TypeScript.
- Tailwind CSS v4 for utilities; base CSS imports `@openai/apps-sdk-ui/css`.
- Single-file build via `vite-plugin-singlefile` and `html-minifier-terser` (see `package.json` scripts).
## Design System
- All design and components come from **@openai/apps-sdk-ui**.
- Official reference: https://openai.github.io/apps-sdk-ui/?path=/docs/overview-introduction--docs
- Deep dives: prefer the **deepwiki-mcp** (if available) to consult available components, tokens, styles, icons, and colors before guessing.
- Design tokens are exposed in `node_modules/@openai/apps-sdk-ui`; CSS imports use `@source "../node_modules/@openai/apps-sdk-ui";` as in `src/index.css`.
## Icons
- Import icons from the SDK Icon component:
```tsx
import { IconName } from "@openai/apps-sdk-ui/components/Icon";
```
- Use SDK-documented icon names; check the docs or deepwiki-mcp for the catalog.
## Styling & Tokens
- Base CSS (`src/index.css`) pulls tokens and fonts:
```css
@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
@source "../node_modules/@openai/apps-sdk-ui";
:root {
font-family: var(--font-sans);
color: var(--color-text);
background: var(--color-surface);
}
```
- Prefer SDK tokens/variables (`--font-sans`, `--color-text`, `--color-surface`, etc.) and SDK components over custom styles.
## Practices
- Reach for SDK components first; only add bespoke styles when the SDK lacks a suitable primitive.
- Keep the bundle single-file safe: avoid external asset references that won’t inline cleanly.
- When uncertain about component props, tokens, or icons, consult the Apps SDK UI docs and deepwiki-mcp instead of guessing.Related Skills
chatgpt
OpenAI's conversational AI assistant.
chatgpt-import
Import ChatGPT conversation history into OpenClaw's memory search. Use when migrating from ChatGPT, giving OpenClaw access to old conversations, or building a searchable archive of past chats.
chatgpt-exporter-ultimate
Export ALL your ChatGPT conversations instantly — no 24h wait, no extensions. Works via browser relay OR standalone bookmarklet. Extracts full message history with timestamps, roles, and metadata. One command, one JSON file, done.
boycott-chatgpt-54c8dfea
OpenAI president Greg Brockman gave [$25 million](https://www.sfgate.com/tech/article/brockman-openai-top-trump-donor-21273419.php) to MAGA Inc in 2025. They gave Trump 26x more than any other major AI company. ICE's resume screening tool is powered by OpenAI's GPT-4. They're spending 50 million dollars to prevent states from regulating AI.
how-to-build-chatgpt-sidebar
Use when asked to build a sidebar experience similar to ChatGPT.com / OpenAI
guard-users-chatgpt
Guardrail policy for Chatgpt CLI: refuse catastrophic actions, require scoped approvals, and reduce secret leakage.
chatgpt / 启用开发者模式的 / openai
General SOP for common requests related to chatgpt, 启用开发者模式的, openai.
chatgpt-history
Search and extract data from ChatGPT conversation history. Use when the user asks to find, search, or extract information from their ChatGPT history, conversations, or past chats.
chatgpt-apps
Complete ChatGPT Apps builder - Create, design, implement, test, and deploy ChatGPT Apps with MCP servers, widgets, auth, database integration, and automated deployment
chatgpt-apps-sdk
Build ChatGPT apps using OpenAI's Apps SDK. This skill leverages OpenAI's Docs MCP server to fetch the latest documentation, ensuring guidance is always current. Use when creating a new ChatGPT app, building an MCP server for ChatGPT, designing widgets/UI for ChatGPT apps, preparing an app for submission, or any question about ChatGPT Apps SDK or Agentic Commerce.
chatgpt-app:validate
Run validation suite on your ChatGPT App to check schemas, annotations, widgets, and UX compliance.
chatgpt-app:new
Create a new ChatGPT App from concept to working code. Guides through conceptualization, design, implementation, testing, and deployment.