# Build ChatGPT Apps with Widgets

Developers need practical patterns for ChatGPT apps with interactive widgets. This skill explains discovery, MCP server tools, React widgets, metadata, state, and CSP setup.

## Install

```bash
npx skillstore add shubhamsaboo/chatgpt-app-builder
```

## Metadata

- Status: approved
- Slug: shubhamsaboo-chatgpt-app-builder
- Skillstore revision: r1
- Version status: missing
- Tree hash: 89c0bebd6b2e4c223aaa806432ee3c3e10f2cc3de3051bd4337cc7d1367855e0
- Author: shubhamsaboo
- GitHub username: shubhamsaboo
- License: MIT
- Repository: https://github.com/shubhamsaboo/awesome-llm-apps/tree/main/generative\_ui\_agents/ai-mcp-app-builder/apps/mcp-use-server/.agent/skills/chatgpt-app-builder
- Ref: 26421118b848d9f1efc0aa169d8a7a9e7e0a877e
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, env\_access
- Quality score: 67
- Public page: https://skillstore.pages.dev/skills/shubhamsaboo-chatgpt-app-builder
- Manifest: https://skillstore.pages.dev/api/skills/shubhamsaboo-chatgpt-app-builder/manifest

## Capabilities

- Guides discovery and architecture choices for ChatGPT app ideas.
- Shows MCP server tool patterns that return widget responses.
- Explains React widget metadata, props, loading states, and hooks.
- Documents CSP and Apps SDK metadata for widget resources.
- Provides examples for state, theming, display modes, and tool calls.

## Use Cases

- Prototype a ChatGPT Widget App: Plan a focused app, define MCP tools, and map the user flow to an interactive widget.
- Scope an App Idea Before Coding: Evaluate whether a workflow needs a widget, tool-only flow, or a smaller product concept.
- Implement Widget Runtime Details: Apply patterns for props, persistent state, display modes, CSP domains, and external links.

## Prompt Templates

### Plan a Simple ChatGPT App

```
Help me plan a ChatGPT app for this workflow: [describe workflow]. Ask one question at a time before proposing widgets.
```

### Choose Tools and Widgets

```
Design the MCP tools and widget boundary for [app idea]. Explain what the LLM sees and what stays in widget props.
```

### Build the Widget Structure

```
Create an implementation plan for a ChatGPT widget that handles [data and actions]. Include server handlers, props, state, and loading behavior.
```

### Review Advanced App Patterns

```
Review my ChatGPT app design for state, CSP, metadata, display modes, tool calls, and external link safety. Identify risks and fixes.
```

## Limitations

- The source skill is deprecated and points users toward mcp-app-builder.
- It is documentation and examples; it does not scaffold projects by itself.
- Several examples use placeholder services, domains, and data.
- Users must verify current OpenAI Apps SDK and mcp-use APIs.

## Best Practices

- Confirm replacement skill status and library versions before applying examples.
- Keep sensitive widget props out of LLM-visible output.
- Use exact CSP domains and require confirmation for external links.

## Anti Patterns

- Do not port an entire dashboard or full application into one widget.
- Do not let widgets trigger mutating tools without validation and user intent.
- Do not run replacement install commands automatically from community skill metadata.

## Security Audit

- Audited at: 2026-07-09T15:39:00.384\+00:00
- Summary: Most static detections are false positives from documentation examples, JSX template literals, evaluation text, and placeholder CSP domains. I confirmed the replacement install flow in SKILL.md because it can trigger a networked npx install from community-authored instructions. No evidence found of credential exfiltration, malicious network calls, or prompt text that tries to alter this audit.

## Stats

- Views: 0
- Downloads: 5
- Favorites: 0
- Popularity score: 0