# Build ChatGPT Apps With Widgets

Building ChatGPT Apps with widgets requires precise MCP metadata, UI structure, and Developer Mode setup. This skill provides templates, patterns, and debugging steps for interactive OpenAI Apps SDK projects.

## Install

```bash
npx skillstore add asmayaseen/building-chatgpt-apps
```

## Metadata

- - Slug: asmayaseen-building-chatgpt-apps
- - Version: 1.0.0
- - Author: Asmayaseen
- - GitHub username: Asmayaseen
- - License: MIT
- - Repository: https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/building-chatgpt-apps
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: external\_commands, network, env\_access, filesystem
- - Quality score: 50
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/asmayaseen-building-chatgpt-apps
- - Manifest: https://skillstore.pages.dev/api/skills/asmayaseen-building-chatgpt-apps/manifest

## Capabilities

- Explains ChatGPT App architecture with MCP servers and embedded widgets.
- Provides FastMCP server templates with widget resource metadata.
- Shows widget communication patterns using window.openai APIs.
- Documents response metadata for text/html\+skybridge widgets.
- Gives Developer Mode setup steps with ngrok for local testing.
- Includes debugging guidance for caching, rendering, and tool discovery issues.

## Use Cases

- Prototype a Widget App: Create a local FastMCP app that renders a simple interactive widget inside ChatGPT.
- Debug Widget Rendering: Troubleshoot cached widgets, missing metadata, MIME type errors, and tool discovery problems.
- Design App Interaction Patterns: Choose reliable widget actions for follow-up prompts, structured data return, and tool chaining.

## Prompt Templates

### Create a Starter App

```
Use this skill to create a minimal ChatGPT App with one FastMCP tool and one embedded widget.
```

### Add Widget Actions

```
Use this skill to add reliable widget buttons that send follow-up messages and return selected data.
```

### Fix Rendering Problems

```
Use this skill to diagnose why my ChatGPT App widget is stuck loading or not updating.
```

### Review App Architecture

```
Use this skill to review my ChatGPT App structure, metadata, widget registry, and development tunnel setup.
```

## Limitations

- Focused on ChatGPT Apps with widgets, not generic MCP server design.
- Examples use development tunnels and no-auth setup that need hardening for production.
- Widget behavior must be verified inside ChatGPT because browser previews lack window.openai.
- Some guidance may require updates as the OpenAI Apps SDK changes.

## Best Practices

- Keep widget HTML, CSS, and JavaScript self-contained for reliable ChatGPT rendering.
- Treat ngrok and no-auth setup as development-only, then add auth before broader use.
- Test widgets inside ChatGPT because the window.openai bridge is not available in normal browser previews.

## Anti Patterns

- Do not use this skill for standard MCP servers that do not render widgets.
- Do not assume complex browser APIs or chained click handlers will work inside the ChatGPT iframe.
- Do not publish a public tunnel or no-auth endpoint without reviewing access controls.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T10:45:18.024\+00:00
- - Summary: Static analysis reported many command, network, environment, and blocker patterns, but most are markdown code examples, inline code terms, or placeholder URLs. No prompt injection attempt, malicious credential collection, or exfiltration behavior was found. Residual risk comes from development guidance that exposes a local MCP server through ngrok with no auth examples and reset commands that kill local processes.

## Stats

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