
Chatgpt App Builder
Turn a product SPEC into ChatGPT app flows that split interactive Views from purchase and booking Tools against your existing APIs.
Overview
chatgpt-app-builder is an agent skill most often used in Build (also Validate scope) that maps a SPEC.md to ChatGPT app Views and Tools wired to your existing APIs.
Install
npx skills add https://github.com/alpic-ai/skybridge --skill chatgpt-app-builderWhat is this skill?
- SPEC.md-driven decomposition into View vs Tool responsibilities
- Example flows: event tickets (browse view + Stripe checkout tool), restaurant reserve, PTO balance vs request
- Maps existing products and APIs to ChatGPT app constraints (payments, phone collection, approvals)
- Expected-behavior rubric from value proposition and product context blocks
- Separates browse/select UI from side-effect tools like purchase or reservation
- Evaluation examples cover tickets, restaurant finder, and PTO checker SPEC patterns
Adoption & trust: 3.2k installs on skills.sh; 1.7k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a SPEC and backend APIs but no clear plan for which ChatGPT surfaces should be interactive views versus one-shot tools.
Who is it for?
Indie builders extending TicketHub-style products into ChatGPT with Stripe, booking, or HR APIs already documented in a SPEC.
Skip if: Greenfield ideas with no API or product context, pure native mobile apps with no agent surface, or compliance-heavy deployments without human review of data handling.
When should I use this skill?
You have a SPEC.md with value proposition, existing product, APIs, and constraints and need ChatGPT app view/tool architecture before implementation.
What do I get? / Deliverables
You get an architecture-aligned split of views and tools, constraint-aware flows (checkout, approvals, required fields), and behavior expectations ready to implement in your ChatGPT app project.
- View versus tool breakdown aligned to your SPEC
- Per-flow expected behavior notes (browse vs purchase, balance vs request)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build/agent-tooling is canonical because output is implementable ChatGPT app surface area (views, tools, constraints)—the main deliverable is the agent product interface. Agent-tooling matches Skybridge-style apps where the builder wires LLM-hosted UI and tool calls to backend APIs rather than a traditional web-only frontend.
Where it fits
You paste a SPEC with APIs and constraints so the agent proposes view/tool boundaries before you commit engineering days.
You implement browse_events as a view and purchase_tickets as a Stripe checkout tool per the skill's expected behavior.
You align reservation and PTO request tools with manager-approval rules from your HR portal API.
You refine which flows are demo-safe in ChatGPT versus web-only based on the view/tool split.
How it compares
Use for ChatGPT app information architecture from SPEC—not for generic React UI or MCP server authoring alone.
Common Questions / FAQ
Who is chatgpt-app-builder for?
Solo founders and indie devs adding a ChatGPT app slice on top of an existing SaaS or API-backed product using structured SPEC inputs.
When should I use chatgpt-app-builder?
In Validate when scoping agent UX from a SPEC, and in Build when implementing views/tools for tickets, reservations, or HR flows; also at Launch when refining agent distribution stories tied to the same product APIs.
Is chatgpt-app-builder safe to install?
Review the Security Audits panel on this Prism page; specs may describe payments and PII—do not let agents auto-deploy checkout or HR tools without your security review.
SKILL.md
READMESKILL.md - Chatgpt App Builder
[ { "query": "SPEC.md:\n# Event Tickets\n\n## Value Proposition\nFind concerts and events nearby, see available seats, and purchase tickets.\n\n## Product Context\n- **Existing product**: TicketHub website\n- **API**: Event search API, seat availability API, purchase API\n- **Constraints**: Payment handled via Stripe checkout", "expected_behavior": "View (browse_events) for search results + seat selection UI. Tool (purchase_tickets) for checkout link. View handles event browsing and seat picking, tool handles payment redirect." }, { "query": "SPEC.md:\n# Restaurant Finder\n\n## Value Proposition\nFind nearby restaurants and make reservations.\n\n## Product Context\n- **Existing product**: ReserveNow booking platform\n- **API**: Restaurant search API, reservation API\n- **Constraints**: Reservations require user phone number", "expected_behavior": "View (search_restaurants) showing results with 'Reserve' button. Tool (make_reservation) for booking. Phone number collected via view input." }, { "query": "SPEC.md:\n# PTO Checker\n\n## Value Proposition\nLet employees check their PTO balance and request time off for a specific time range.\n\n## Product Context\n- **Existing product**: HR portal\n- **API**: PTO balance API, time-off request API\n- **Constraints**: Requests need manager approval", "expected_behavior": "Two flows: (1) Check balance - tools only, (2) Request time off - view with calendar/date picker is acceptable. Tool (get_pto_balance) for balance. View or tool for requesting time off (both valid)." }, { "query": "SPEC.md:\n# Flight Tracker\n\n## Value Proposition\nTrack flight status with geolocalization and get delay alerts.\n\n## Product Context\n- **Existing product**: Airline mobile app\n- **API**: Flight status API, notifications API\n- **Constraints**: Real-time updates every 5 min", "expected_behavior": "View (track_flight) showing flight status card with map, times, gate info. Tool (set_alert) for notifications. View displays rich visual data." }, { "query": "SPEC.md:\n# Movie Showtimes\n\n## Value Proposition\nFind movies playing nearby and see showtimes.\n\n## Product Context\n- **Existing product**: CinemaHub website\n- **API**: Movie listings API\n- **Constraints**: None", "expected_behavior": "View (search_movies) showing movie cards with showtimes. One view, no tools - purely browsing, no booking." }, { "query": "SPEC.md:\n# Support Ticket\n\n## Value Proposition\nLet users create support tickets and check ticket status.\n\n## Product Context\n- **Existing product**: HelpDesk support portal\n- **API**: Ticket API (create, get status)\n- **Constraints**: Tickets require category and description", "expected_behavior": "Tools only - no view needed. Tool (create_ticket) takes description and category, returns ticket ID. Tool (get_ticket_status) returns status text. Pure conversational action, no browsing or visual data." } ] [ { "query": "I have a color picker view. When users click a color swatch, I need to remember their choice.", "expected_behavior": "Uses useViewState with selectedColor. Shows setState on click." }, { "query": "My playlist builder has an 'Add Song' button in the search results and a 'Remove' button in the playlist view. Both components need access to the same playlist.", "expected_behavior": "Suggests createStore for shared state. Shows store with addSong/removeSong actions accessed by both components." }, { "query": "Users browse recipes in my view. When they ask the LLM 'what ingredients do I need?', it doesn't know which recipe they're viewing.", "expected_behavior": "Uses data-llm on the recipe container. Dynamic value with recipe name and key details." }, { "query": "I want a 'Compare these options' button that asks the AI to analyze the pros and cons of items the user has shortlisted.", "expected_behavior": "Uses useSendFollowUpMessage. Button onClick calls sendM