Agent skill

Chat Apps UI SDK

by pproenca in pproenca/dot-skills

Interactive UI rendered inside ChatGPT or Claude — OpenAI Apps SDK apps, MCP Apps (the @modelcontextprotocol/ext-apps standard), or MCP-UI components, with a Next.js/React server.

MITAuto-check passedFrontend & Design

Install Chat Apps UI SDK

skills CLI
$ npx skills add pproenca/dot-skills --skill chat-apps-ui-sdk -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pproenca/dot-skills chat-apps-ui-sdk --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/chat-apps-ui-sdk .claude/skills/chat-apps-ui-sdk && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
chat-apps-ui-sdk
GitHub stars
214
Token cost
~2.4k tokens
SKILL.md length
776 words
Files
51 (incl. references, assets)
Skills in repo
182
Repo updated
First seen
Licence
MIT

At a glance

Interactive UI rendered inside ChatGPT or Claude — OpenAI Apps SDK apps, MCP Apps (the @modelcontextprotocol/ext-apps standard), or MCP-UI components, with a Next.js/React server.

  • Works in 8 steps: MCP Tool & Discovery Design (CRITICAL) → UI Resource Wiring & Templates (CRITICAL) → Host–Component Data Bridge (HIGH) → …
  • Designing such apps — even when the user only says chat app
  • SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Chat Apps UI SDK is an agent skill from pproenca/dot-skills. Interactive UI rendered inside ChatGPT or Claude — OpenAI Apps SDK apps, MCP Apps (the @modelcontextprotocol/ext-apps standard), or MCP-UI components, with a Next.js/React server. Covers the MCP tool and resource architecture, the window.openai / ui-bridge data flow, widget state, sandbox/CSP security, display modes, visual design, and directory submission. Trigger when building, reviewing, or designing such apps — even when the user only says "chat app", "ChatGPT widget", "Claude app", "render UI in chat"…

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 53 other files, including reference files and assets (for example `AGENTS.md`, `assets/templates/_template.md` and `metadata.json`).

It sits in Frontend & Design, covering MCP servers and UI design. It works with OpenAI, Model Context Protocol, Next.js and React. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.

When your agent uses it

  • Designing such apps — even when the user only says chat app
  • Render UI in chat
  • CreateUIResource
  • MCP app UI without naming a specific SDK

Example prompts

  • “chat app”
  • “ChatGPT widget”
  • “Claude app”
  • “/chat-apps-ui-sdk”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. MCP Tool & Discovery Design (CRITICAL)
  2. UI Resource Wiring & Templates (CRITICAL)
  3. Host–Component Data Bridge (HIGH)
  4. Display Modes & Responsive Layout (HIGH)
  5. State & Model Context (HIGH)
  6. Security & Data Boundaries (HIGH)
  7. Visual Design & UX Polish (MEDIUM-HIGH)
  8. Distribution & Cross-Host Portability (MEDIUM)

What it can do on your machine

Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chat Apps UI SDK loads about 2.4k tokens when it runs, and up to ~19k if it reads all its reference files. Until then it costs about 158 tokens; SKILL.md has 776 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~158
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~19k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 776 words, ~2,448 tokens.

Download SKILL.mdSave it as .claude/skills/chat-apps-ui-sdk/SKILL.md (or your agent's skills folder). This skill also uses 50 other files; get the full folder from GitHub.
name
chat-apps-ui-sdk
description
Interactive UI rendered inside ChatGPT or Claude — OpenAI Apps SDK apps, MCP Apps (the @modelcontextprotocol/ext-apps standard), or MCP-UI components, with a Next.js/React server. Covers the MCP tool and resource architecture, the window.openai / ui-bridge data flow, widget state, sandbox/CSP security, display modes, visual design, and directory submission. Trigger when building, reviewing, or designing such apps — even when the user only says "chat app", "ChatGPT widget", "Claude app", "render UI in chat", "window.openai", "createUIResource", "outputTemplate", or "MCP app UI" without naming a specific SDK.

Chat Apps UI SDK Best Practices

A reference for building beautiful, review-ready apps that render interactive UI inside the chat surface of ChatGPT and Claude. As of January 2026 these platforms share one foundation — the MCP Apps standard (@modelcontextprotocol/ext-apps), rendered by Claude, ChatGPT, VS Code, and Goose. The OpenAI Apps SDK is a superset adding the window.openai bridge, and MCP-UI (@mcp-ui/server / @mcp-ui/client) is the community implementation. This skill contains 46 rules across 8 categories, ordered by impact so the highest-leverage decisions come first.

The mental model: an app is an MCP tool first, UI second. The model invokes a tool; the tool returns data plus a link to a UI resource; the host renders that resource in a sandboxed iframe; the iframe talks back over a defined bridge. Mistakes early in that chain mean nothing renders; mistakes later mean it renders broken, unsafe, or unpolished.

When to Apply

Reference these guidelines when:

  • Designing the MCP tool and structuredContent / content / _meta contract for a chat app
  • Wiring a tool to a component (_meta.ui.resourceUri, the text/html;profile=mcp-app MIME type, the ui:// scheme)
  • Writing the iframe component and its bridge (window.openai, ui/notifications/*, MCP-UI onUIAction)
  • Choosing display modes, widget state, theming, and responsive layout
  • Hardening a chat app (CSP, sandbox, secrets, OAuth) or preparing it for directory submission
  • Reviewing or refactoring existing ChatGPT-app / Claude-app / MCP-UI code

Rule Categories by Priority

PriorityCategoryImpactPrefix
1MCP Tool & Discovery DesignCRITICALtool-
2UI Resource Wiring & TemplatesCRITICALwire-
3Host–Component Data BridgeHIGHbridge-
4Display Modes & Responsive LayoutHIGHdisplay-
5State & Model ContextHIGHstate-
6Security & Data BoundariesHIGHsec-
7Visual Design & UX PolishMEDIUM-HIGHdesign-
8Distribution & Cross-Host PortabilityMEDIUMdist-

Quick Reference

1. MCP Tool & Discovery Design (CRITICAL)
2. UI Resource Wiring & Templates (CRITICAL)
3. Host–Component Data Bridge (HIGH)
Show full SKILL.md (327 more words)Show less
4. Display Modes & Responsive Layout (HIGH)
5. State & Model Context (HIGH)
6. Security & Data Boundaries (HIGH)
7. Visual Design & UX Polish (MEDIUM-HIGH)
8. Distribution & Cross-Host Portability (MEDIUM)

How to Use

Read the individual reference files for full explanations and incorrect-vs-correct code examples. Start at the top — category 1 (tool-) and category 2 (wire-) gate whether anything renders at all, so resolve those before touching display or design.

Reference Files

FileDescription
references/_sections.mdCategory definitions and impact ordering
assets/templates/_template.mdTemplate for new rules
metadata.jsonVersion and reference URLs
  • build-mcp-server — Entry point for designing the MCP server shape (deployment model, tool patterns) this skill's UI rules build on top of.

© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 50 other files (references, assets) in skills/.experimental/chat-apps-ui-sdk of pproenca/dot-skills.

  • SKILL.md
  • AGENTS.md
  • assets/templates/_template.md
  • metadata.json
  • references/_sections.md
  • references/bridge-call-tools-app-visibility.md
  • references/bridge-followup-vs-silent-call.md
  • references/bridge-handle-all-mcpui-actions.md
  • references/bridge-render-from-notifications.md
  • references/bridge-use-host-apis.md
  • references/bridge-validate-postmessage-origin.md
  • references/design-inherit-native-typography.md
  • references/design-limit-actions-hierarchy.md
  • references/design-meet-wcag-contrast.md
  • references/design-render-loading-empty-error.md
  • references/design-respect-reduced-motion.md
  • references/design-restrain-brand-color.md
  • references/display-avoid-nested-scroll.md
  • … and 33 more

Open the folder on GitHubat commit cf93c57

Compare with similar skills

Chat Apps UI SDK next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chat Apps UI SDK compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chat Apps UI SDK this skillpproenca/dot-skills214—~2.4kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18218 repos~11kAutomated safety check: NotesCustom licence
Nextcrmpdovhomilja/nextcrm-app711—~3.3kAutomated safety check: PassMIT
Chatgpt App Builderalpic-ai/skybridge2.1k—~1kAutomated safety check: PassMIT
Reactopenops-cloud/openops1.1k—~1.7kAutomated safety check: PassCustom licence
MCP App Builderalpic-ai/skybridge2.1k—~906Automated safety check: PassMIT

Similar skills

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    182 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes
  • Nextcrm

    pdovhomilja/nextcrm-app

    Connect to NextCRM MCP server to manage CRM data — accounts, contacts, leads, opportunities, targets, products, contracts, activities, documents, target lists, enrichment, email accounts, campaigns…

    711 GitHub stars~3.3k tokensUpdated 2 days ago
    Sales & SupportAuto-check passed
  • Chatgpt App Builder

    alpic-ai/skybridge

    Guide developers through creating and updating ChatGPT plugins.

    2.1k GitHub stars~1k tokensUpdated yesterday
    Agent WorkflowsAuto-check passed
  • React

    openops-cloud/openops

    A skill your agent uses when creating or editing frontend React code in react-ui or ui-components packages.

    1.1k GitHub stars~1.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • MCP App Builder

    alpic-ai/skybridge

    Guide developers through creating and updating MCP Apps. An agent skill from alpic-ai/skybridge.

    2.1k GitHub stars~906 tokensUpdated yesterday
    Agent WorkflowsAuto-check passed
  • Domscribe

    patchorbit/domscribe

    Work with Domscribe — the pixel-to-code bridge. An agent skill from patchorbit/domscribe.

    193 GitHub stars~3.3k tokensUpdated 1 mo ago
    Agent WorkflowsAuto-check: notes

More from pproenca/dot-skills

All 182 skills in this repo
  • Audio Voice Recovery

    pproenca/dot-skills

    Audio forensics and voice recovery guidelines for CSI-level audio analysis.

    214 GitHub stars~3.3k tokensUpdated 1 mo ago
    Auto-check passed
  • Codemod React Pipeline

    pproenca/dot-skills

    Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.

    214 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed
  • Dev Rfc

    pproenca/dot-skills

    Create well-structured RFCs and technical proposals for software projects.

    214 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Dx Harness

    pproenca/dot-skills

    Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.

    214 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Language Spec Author

    pproenca/dot-skills

    Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…

    214 GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed
  • Python Pep Author

    pproenca/dot-skills

    Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…

    214 GitHub stars~2.1k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Chat Apps UI SDK

What does Chat Apps UI SDK do?

Interactive UI rendered inside ChatGPT or Claude — OpenAI Apps SDK apps, MCP Apps (the @modelcontextprotocol/ext-apps standard), or MCP-UI components, with a Next.js/React server. Chat Apps UI SDK is an agent skill from pproenca/dot-skills.js/React server.

When should I use Chat Apps UI SDK?

Chat Apps UI SDK fits situations like: designing such apps — even when the user only says chat app; render UI in chat; createUIResource; MCP app UI without naming a specific SDK.

How do I install Chat Apps UI SDK in Claude Code?

Run `npx skills add pproenca/dot-skills --skill chat-apps-ui-sdk -a claude-code`. Or copy the skill folder (skills/.experimental/chat-apps-ui-sdk in pproenca/dot-skills) into .claude/skills/chat-apps-ui-sdk in your project. Claude Code loads it when a task matches its description.

How do I install Chat Apps UI SDK in Codex?

Run `npx skills add pproenca/dot-skills --skill chat-apps-ui-sdk -a codex`. Or copy the skill folder (skills/.experimental/chat-apps-ui-sdk in pproenca/dot-skills) into .agents/skills/chat-apps-ui-sdk in your project. Codex loads it when a task matches its description.

Can I use Chat Apps UI SDK in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill chat-apps-ui-sdk -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chat-apps-ui-sdk, .gemini/skills/chat-apps-ui-sdk, .github/skills/chat-apps-ui-sdk and .opencode/skills/chat-apps-ui-sdk in your project.

What does Chat Apps UI SDK need to run?

SKILL.md names no scripts, command-line tools or credentials: Chat Apps UI SDK is instructions for the agent only.

Does Chat Apps UI SDK access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Chat Apps UI SDK safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Chat Apps UI SDK use?

Chat Apps UI SDK is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chat Apps UI SDK use?

About 2.4k tokens (SKILL.md is roughly 9.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 16k tokens, read only when the agent opens those files.

What are the alternatives to Chat Apps UI SDK?

Skills that share tags, products or a category with Chat Apps UI SDK: UI UX Pro Max (saoudi-h/solar-icons, 182 stars), Nextcrm (pdovhomilja/nextcrm-app, 711 stars), Chatgpt App Builder (alpic-ai/skybridge, 2.1k stars) and React (openops-cloud/openops, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chat Apps UI SDK?

pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.

Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.