chatgpt-app-builder

alpic-ai/skybridge

Build and deploy ChatGPT apps with tools and custom UI views using the Skybridge framework.

What is chatgpt-app-builder?

A comprehensive guide for creating ChatGPT apps that extend ChatGPT through MCP servers with custom tools and UI views. Use this when building new ChatGPT applications or updating existing ones, from initial design through deployment and publishing.

Design UX flows and API architecture for ChatGPT apps
Bootstrap new projects from templates with ready specifications
Implement server handlers, data fetching, and view rendering
Manage state, context, and LLM prompts within shared UI surfaces
Handle authentication via OAuth for user-specific data access
Deploy apps to production and publish to ChatGPT Directory

How to install chatgpt-app-builder

npx skills add https://github.com/alpic-ai/skybridge --skill chatgpt-app-builder

Prerequisites

Node.js environment for running dev servers
Understanding of MCP (Model Context Protocol) servers
Familiarity with building web applications and APIs

Claude Code

Cursor

Windsurf

Cline

How to use chatgpt-app-builder

1.Start with discover.md if you don't have a SPEC.md yet, or copy-template.md if starting a new project
2.Read and maintain SPEC.md to track app requirements and design decisions
3.Follow architecture.md to design UX flows and API shape for your changes
4.Implement features using the relevant guides: fetch-and-render-data.md, state-and-context.md, prompt-llm.md, etc.
5.Run locally using run-locally.md to test your app and ChatGPT connection
6.Use evals.md to verify the model reaches correct tools from natural prompts
7.Deploy to production with deploy.md and publish to ChatGPT Directory with publish.md

Use cases

Good for

Building an ecommerce app that integrates with ChatGPT for product browsing and purchasing
Creating a task management tool where ChatGPT and users collaborate through a shared interface
Developing a data visualization app that fetches and renders real-time information
Setting up OAuth authentication for apps that need access to user accounts
Deploying a ChatGPT app to production after local testing and evaluation

Who it's for

Full-stack developers building ChatGPT applications
Teams creating MCP servers for LLM integration
Developers migrating from earlier Skybridge versions
Anyone building conversational experiences with custom UI and tools

chatgpt-app-builder FAQ

What is a ChatGPT app?

A ChatGPT app is a conversational experience that extends ChatGPT through tools and custom UI views, built as an MCP server that ChatGPT invokes during conversations.

Who are the two users of a ChatGPT app?

The human user and the ChatGPT LLM collaborate through the shared view—the human interacts with it while the LLM sees its state.

What should I read first if I don't have a SPEC.md?

Read discover.md first to establish your app's requirements and design decisions before proceeding with implementation.

How do I test my ChatGPT app before deploying?

Use run-locally.md to set up a dev server, then use evals.md to verify that a real model reaches the correct tools from natural prompts.

What if I'm upgrading from an older Skybridge version?

Check migrate-to-v1.md for versions < 0.36.x, or fetch the v2.0.0 release notes if upgrading from 1.x to 2.x.

Full instructions (SKILL.md)

Source of truth, from alpic-ai/skybridge.

name: chatgpt-app-builder description: | Guide developers through creating and updating ChatGPT apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, 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 Apps For LLMs

ChatGPT apps are conversational experiences that extend ChatGPT through tools and custom UI views. 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 view—the human interacts with it, the LLM sees its state. Internalize this before writing code: the view 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.

Building an ecommerce app? → Read ecommerce.md first.

No SPEC.md? → Read discover.md first. Nothing else until SPEC.md exists.

SPEC.md exists? → Read SPEC.md, then follow architecture.md to design the change. Update SPEC.md, then read the relevant Implementation references below before writing code.

Migrating from Skybridge < 0.36.x? → Read migrate-to-v1.md first. Users may reference skybridge >= 0.36.x as v1.

Migrating from Skybridge 1.x to 2.x? → Fetch the v2.0.0 release notes first and follow them.

Setup

Copy template → copy-template.md: when starting a new project with ready SPEC.md
Run locally → run-locally.md: when ready to test, need dev server or ChatGPT connection
Evals → evals.md: when checking that a real model reaches the right tools from natural prompts, in a test

Architecture

Design or evolve UX flows and API shape → architecture.md

Implementation

Fetch and render data → fetch-and-render-data.md: when implementing server handlers and view data fetching
State and context → state-and-context.md: when persisting view UI state and updating LLM context
Prompt LLM → prompt-llm.md: when view needs to trigger LLM response
UI guidelines → ui-guidelines.md: display modes, layout constraints, theme, device, and locale
External links → open-external-links.md: when redirecting to external URLs or setting "open in app" target
OAuth → oauth.md: when tools need user authentication to access user-specific data
Assets and styling → assets-and-styling.md: when adding images, fonts or CSS to views
CSP → csp.md: when declaring allowed domains for fetch, assets, redirects, or iframes