home / skills / alpic-ai / skybridge / chatgpt-app-builder

chatgpt-app-builder skill

safe

This skill guides developers through creating and updating ChatGPT apps, from ideation and bootstrapping to deployment and integration with the Skybridge

npx playbooks add skill alpic-ai/skybridge --skill chatgpt-app-builder

Review the files below or copy the command above to add this skill to your agents.

Files (24)

SKILL.md

2.8 KB

---
name: chatgpt-app-builder
description: |
  Guide developers through creating ChatGPT apps.
  Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/widgets, debugging, running dev servers, deploying and connecting apps to ChatGPT.
  Use when a user wants to create or update a ChatGPT app / MCP server for ChatGPT, or use the Skybridge framework.
---

# Creating ChatGPT Apps

ChatGPT apps are conversational experiences that extend ChatGPT through tools and custom UI widgets. They're built as MCP servers invoked during conversations.

⚠️ 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. Internalize this before writing code: the widget is your shared surface.

SPEC.md keeps track of the app's requirements and design decisions. Keep it up to date as you work on the app.

## Setup

1. **Discover** → [discover.md](references/discover.md): when user has an idea but no SPEC.md yet
2. **Copy template** → [copy-template.md](references/copy-template.md): when starting a new project with ready SPEC.md
3. **Run locally** → [run-locally.md](references/run-locally.md): when ready to test, need dev server or ChatGPT connection

## Architecture

Design or evolve UX flows and API shape → [architecture.md](references/architecture.md)

## Implementation

- **Fetch and render data** → [fetch-and-render-data.md](references/fetch-and-render-data.md): when implementing server handlers and widget data fetching
- **State and context** → [state-and-context.md](references/state-and-context.md): when persisting widget UI state and updating LLM context
- **Prompt LLM** → [prompt-llm.md](references/prompt-llm.md): when widget needs to trigger LLM response
- **Style and localize** → [style-and-localize.md](references/style-and-localize.md): when adapting to theme, layout, locale, or device capabilities
- **Display modes** → [control-display-modes.md](references/control-display-modes.md): when switching between inline, PiP, fullscreen, or modal
- **External links** → [open-external-links.md](references/open-external-links.md): when redirecting to external URLs or setting "open in app" target
- **OAuth** → [oauth.md](references/oauth.md): when tools need user authentication to access user-specific data
- **CSP** → [csp.md](references/csp.md): when declaring allowed domains for fetch, assets, redirects, or iframes

## Deploy

- **Ship to production** → [deploy.md](references/deploy.md): when ready to deploy via Alpic
- **Publish to ChatGPT Directory** → [publish.md](references/publish.md): when ready to submit for review

Full API docs: [https://docs.skybridge.tech/api-reference.md](https://docs.skybridge.tech/api-reference.md)

Overview

This skill guides developers through creating, testing, and deploying ChatGPT apps using the Skybridge framework. It covers the full app lifecycle: idea discovery, UX-driven design, bootstrapping projects, implementing widgets and server handlers, debugging locally, and publishing to ChatGPT. The focus is practical: shared widget state between the human and the LLM, SPEC-driven design, and reliable deployment.

How this skill works

The skill inspects your project intent and SPEC, recommends templates or scaffolding, and walks you through implementing MCP server handlers and widget code in TypeScript. It explains how to persist widget state, surface that state to the LLM, trigger LLM prompts, integrate OAuth, and configure CSP and display modes. It also provides steps for running a dev server, connecting to ChatGPT, deploying via Alpic, and submitting to the directory.

When to use it

You have an idea and need to produce a SPEC.md and UX flow before coding.
You want to bootstrap a new ChatGPT app from Skybridge templates.
You are implementing widget UI, server handlers, or data fetching logic.
You need to sync widget state with the LLM or trigger LLM responses.
You are debugging locally, running a dev server, or connecting to ChatGPT.
You are preparing to deploy, configure CSP, add OAuth, or publish the app.

Best practices

Keep SPEC.md up to date to capture requirements, UX decisions, and API shape.
Treat the widget as a shared surface: design for both the human and the LLM.
Design APIs and UX iteratively: validate flows in a dev server before polishing UI.
Persist minimal widget state needed for continuity; expose clear state snapshots to the LLM.
Use display modes and responsive styles to support inline, PiP, fullscreen, and modal experiences.
Declare CSP and OAuth scopes early to avoid deployment regressions and review delays.

Example use cases

Build a scheduling assistant that shows an interactive calendar widget and updates the LLM with chosen slots.
Create a research tool that fetches, summarizes, and surfaces documents to both the user and the LLM.
Implement an authenticated data explorer where users connect via OAuth and the LLM composes queries.
Bootstrap a prototype from a template, iterate on UX/spec, then deploy to Alpic and publish to the ChatGPT Directory.
Add a PiP viewer for media content and coordinate playback state between the user and the LLM.

FAQ

Do I need TypeScript experience to use this skill?

Skybridge and the examples use TypeScript; familiarity helps, but guidance covers common patterns and bootstrapping steps to get started.

How do I test widget and LLM interactions locally?

Run the dev server, connect it to ChatGPT in dev mode, and iteratively update widget state and server handlers to observe shared state and LLM prompts.