Build the required MCP server before the optional UI

Build a ChatGPT App Around One Useful Tool

Describe the user job, tool contract, data boundary, and optional embedded interface. Playcode can build the server, widget, deterministic tests, and HTTPS deployment path while you own the OpenAI account, Developer Mode connection, privacy policy, and plugin review.

No credit card required · No coding needed

Quick answer

What does a ChatGPT app builder need to create?

A ChatGPT app needs an MCP server with clearly described tools, validated inputs, predictable outputs, accurate impact annotations, and secure data handling. An embedded UI is optional. Playcode can build and test those files and host the endpoint, while Developer Mode connection, real prompt selection, plugin submission, review, and publication remain manual OpenAI account steps.

1.1M+users
26M+projects
Since 2016

Used by people at

Counts registered accounts using corporate email domains from the companies above. Playcode is a self-serve product, not a contracted vendor to these brands.

From One User Job to a Testable ChatGPT App

Define the tool contract first, then add UI only when it improves the outcome

01

Choose One Job and Draft the Tool Contract

Write direct, indirect, and negative prompts. Give each user intent one tool with an explicit input schema, output schema, description, authentication rule, rate limit, and read-only, destructive, and open-world annotations.

Keep data tools separate from presentation tools when the model should reason over the result before a widget renders it.

Preview
AI Chat
Publish
I'm a realtor in Miami. I need a website to show my listings and get buyer leads.
4 Questions
2 / 4
What's the main style for your real estate site?
AModern & minimal with clean lines
BLuxury feel with large property photos
CProfessional & corporate
DI'll describe my own style below
Or type your own answer...
Skip
Next
Describe what you want to change...
Economy
Build Progress
4/6
Site layout & navigation
3s
Hero section with CTA
5s
Property listings grid
8s
Building contact form...
About page & bio
Footer & SEO meta
miami-homes.playcode.io
Miami Dream Homes
Your trusted partner in Miami real estate
Search by neighborhood...
Featured Listings
NEW
$1,250,000
Coral Gables Villa
4 bd|3 ba|2,400 sqft
OPEN
$890,000
Brickell Condo
2 bd|2 ba|1,200 sqft
Get in Touch
02

Build the MCP Server and Optional UI

Ask Playcode to build the server with the current MCP SDK, deterministic handlers, and a versioned text/html;profile=mcp-app resource when a UI is useful. Return concise model-visible structuredContent and keep widget-only detail in _meta.

Declare exact CSP domains, enforce authorization on the server, and make handlers safe to retry before exposing the endpoint.

03

Inspect, Host, Connect, and Submit Deliberately

Run unit and MCP client tests, inspect the local endpoint with MCP Inspector, then deploy to public HTTPS. Connect it in ChatGPT Developer Mode and exercise the real prompt set on web and mobile.

For public distribution, prepare the plugin that contains the app, scan tools, complete privacy and company fields, submit it for review, and publish only after approval.

Your website is live!

https://
miami-homes.playcode.io
Site is secure - SSL certificate active
Or connect your domainmiami-dream-homes.com
Miami Dream Homes
Your trusted partner
Miami Dream Homes
Your trusted partner
Start with the contract

Turn a Vague Assistant Idea into an Inspectable App

A demo that is hard to trust

  • One broad tool mixes reading, writing, and rendering
  • Tool descriptions do not say when the model should abstain
  • Private details leak into model-visible output
  • Retries can repeat side effects
  • A polished widget hides an untested server contract

A bounded ChatGPT app release

  • One user intent maps to one typed tool
  • Direct, indirect, and negative prompts define selection behavior
  • structuredContent, content, and _meta have separate roles
  • Impact annotations, auth, confirmation, and retry rules are explicit
  • Local MCP tests and live Developer Mode checks have separate evidence
What Playcode can build

The Server, Interface, and Evidence in One Project

01

Typed MCP tools

Action-oriented names, precise descriptions, Zod input and output schemas, accurate impact annotations, and handlers that validate every request again on the server.

02

Optional MCP Apps UI

A versioned HTML resource, portable MCP Apps bridge, accessible states, and widget calls only where interaction adds value beyond a clear text result.

03

Data separation

Concise structuredContent for the model, optional narration in content, and large or widget-only detail in _meta so private context does not enter model narration.

04

Auth and action boundaries

Anonymous read paths where appropriate, OAuth 2.1 for user-specific access, scope checks per call, and explicit confirmation before writes or irreversible actions.

05

Prompt and protocol tests

Direct, indirect, and negative prompt fixtures plus MCP discovery, schema, tool-call, resource, invalid-input, retry, CSP, and payload-separation tests.

06

Deployment and review preparation

A public HTTPS endpoint, privacy and retention checklist, exact CSP allowlists, tool-scan inputs, review test prompts, and a reproducible downloadable package.

Current Apps SDK workflow

Build the MCP Contract, Then Prove the Host Boundary

The local artifact proves code and protocol behavior. ChatGPT Developer Mode and public plugin review remain separate manual checks.

Before you build

Prerequisites

  • One user job with a golden prompt set

    Tool discovery depends on metadata, so the server needs direct prompts, indirect prompts, and negative prompts that should not invoke it.

    Ready when: Every intended prompt maps to one tool and every negative prompt has a reason to abstain or use another path.

  • A public HTTPS and data-handling plan

    ChatGPT needs a reachable HTTPS MCP endpoint, and review needs exact CSP, privacy, retention, authentication, and user-data disclosures.

    Ready when: The brief lists the endpoint owner, allowed network domains, stored fields, retention and deletion rules, scopes, and human owner for review.

  • OpenAI organization and plugin-management access

    Developer Mode, organization verification, tool scanning, submission, approval, and publication happen in OpenAI-managed account surfaces.

    Ready when: The owner can access the intended organization and knows who holds api.apps.read and api.apps.write permissions.

Implementation sequence

Do, observe, verify
  1. 01
    App brief and golden prompt fixture

    Write tool metadata before implementation

    Define one tool per intent, a Use this when description, every input and output field, read-only, destructive, and open-world annotations, auth requirement, rate limit, and examples that should and should not select it.

    Expected result

    The intended tool is unambiguous for direct and indirect prompts and stays out of unrelated or negative requests.

    Verify

    Review every prompt against tool name, description, schemas, and annotations before writing the handler.

  2. 02
    Playcode project server files

    Implement the MCP server and payload boundary

    Use the current @modelcontextprotocol/sdk and Zod, validate every input, return only model-needed JSON in structuredContent, optional narration in content, and widget-only detail in _meta. Keep read handlers idempotent and writes confirmation-gated.

    Expected result

    An MCP client can discover the tool, reject invalid input, call the handler repeatedly, and inspect a deterministic result without private widget detail entering model-visible fields.

    Verify

    Run MCP list, call, invalid-input, duplicate-call, and serialization tests and assert the exact response keys.

  3. 03
    Versioned MCP Apps resource

    Add a UI only when it clarifies the result

    Register a text/html;profile=mcp-app resource with @modelcontextprotocol/ext-apps, use the MCP Apps bridge by default, declare exact CSP domains, and connect it with _meta.ui.resourceUri.

    Expected result

    The widget renders the structured result without broad network access, hidden instructions, or a second conflicting business-logic path.

    Verify

    Read the resource through an MCP client, inspect MIME type and CSP metadata, then render it in MCP Inspector and check console and network errors.

  4. 04
    Public host, MCP Inspector, and ChatGPT Developer Mode

    Deploy to HTTPS and exercise Developer Mode

    Publish the exact tested artifact to a stable HTTPS /mcp URL, repeat protocol tests, connect the endpoint in Developer Mode, and exercise direct, indirect, negative, auth, failure, retry, web, and mobile cases.

    Expected result

    The real ChatGPT host selects the intended tools, renders the optional UI, respects confirmation and auth, and avoids the app for negative prompts.

    Verify

    Record the endpoint version, prompt results, web and mobile observations, console errors, tool payloads, and unresolved differences from local Inspector behavior.

  5. 05
    OpenAI plugin submission portal

    Prepare the plugin submission separately

    Verify the organization, use a real public MCP URL, scan tools, review imported schemas, annotations, instructions, CSP, and UI metadata, complete privacy and company fields plus test prompts, then submit the plugin that contains the app for review.

    Expected result

    The portal accepts a reviewable draft whose server-advertised metadata matches actual behavior. Approval and publication remain pending until OpenAI completes review.

    Verify

    Re-scan after every server metadata change, rerun all submitted prompts, and compare disclosures with every user-related field before selecting Submit for review.

Decisions that change the build

Does the first release need an embedded UI?

  • Tool-only MCP result
  • Tool plus an MCP Apps widget

Choose: Start tool-only when a concise answer or JSON result completes the job. Add a widget for comparison, selection, editing, visualization, or repeated interaction that is materially clearer than narration.

Tradeoff: A widget improves interaction but adds CSP, accessibility, state, caching, host compatibility, screenshot, and review work. The MCP server remains required either way.

Should the first tool require authentication?

  • Anonymous read-only path
  • OAuth-protected user data or actions

Choose: Prove an anonymous or fictional read-only path first when the product allows it. Add OAuth only to tools that truly need user-specific data or writes, and enforce tokens, audience, scopes, and policy on every server call.

Tradeoff: Authentication protects private data but introduces provider metadata, token verification, reauthorization, scope, test-account, and review complexity.

Before you share it

Test checklist

  • Happy path

    List tools and resources, call the read-only tool with valid input, and render the optional widget from the returned structuredContent.

    Expected: Schemas, annotations, resource URI, MIME type, structured fields, narration, and widget output all match the declared contract.

  • Invalid input

    Send an unknown enum, oversized value, missing credential, wrong scope, and a negative prompt that should not invoke the tool.

    Expected: The server rejects invalid calls without side effects or secrets, auth returns a useful challenge, and the real host abstains on the negative prompt.

  • Duplicate or retry

    Repeat the same read call and retry a proposed write with the same idempotency key after an interrupted response.

    Expected: Reads remain deterministic and the write applies at most once only after explicit confirmation and current authorization.

  • Published smoke test

    Connect the deployed HTTPS endpoint in ChatGPT Developer Mode and run direct, indirect, negative, auth, UI, web, and mobile prompts.

    Expected: The real host behavior matches the golden prompt expectations with no CSP, console, auth, privacy, or unexpected tool-selection failure.

If something goes wrong

Common failure cases

ChatGPT does not select the intended tool

Likely cause
The tool name, description, parameter annotations, or server instructions do not distinguish the user intent from nearby tools.
Check
Replay direct, indirect, and negative prompts one at a time in Developer Mode and inspect the scanned metadata, not only the handler.
Fix
Narrow each tool to one job, start the description with when to use it, clarify parameters, and re-scan metadata before rerunning the prompt set.

The widget is blank or blocked

Likely cause
The resource MIME type, URI, bridge listener, bundled asset URL, or exact CSP domain does not match the deployed resource.
Check
Read the resource with MCP Inspector, inspect text/html;profile=mcp-app, console, network, CSP, and the tool resourceUri.
Fix
Version the resource URI, correct the bridge and exact allowlists, deploy all referenced assets, and reconnect the updated endpoint.

Sensitive fields appear in model narration

Likely cause
The handler put widget-only, debugging, user, or internal identifiers in structuredContent or content instead of minimizing and isolating them.
Check
Capture the raw tool result and inventory every field visible to the model, widget, logs, and review scanner.
Fix
Remove unnecessary fields, move non-model UI detail to _meta, redact logs, update privacy disclosures, and rerun payload-leakage tests.

The submission scan disagrees with the written justification

Likely cause
Server annotations, schemas, security schemes, instructions, CSP, or resource metadata are stale or inaccurate.
Check
Compare the scanned draft with the deployed tool list and actual side effects, including indirect writes such as messages or jobs.
Fix
Correct the server metadata and behavior, redeploy, select Scan Tools again, verify the imported values, and only then submit.
Example interface direction

A Compact Launch Checklist Inside the Conversation

A widget can make status and next actions easier to scan, but the typed MCP tool remains the real contract.

Illustrative ChatGPT app concept showing a launch checklist with tool contract, privacy, and review items
Illustrative conceptIllustrative UI concept with fictional checklist states, not a product screenshot, readiness claim, or submission approval. The actual result depends on your brief, data, tool contract, and ChatGPT host rendering.
Reproducible local artifact

Inspect the Server, Widget, Tests, and Prompt Fixtures

The Launch Checklist package uses the current official dependency family and keeps live ChatGPT exercise outside the automated claim.

5/5
deterministic MCP and resource tests passing
7
direct, indirect, and negative prompt fixtures
0
external network domains in the example widget CSP

Download the Launch Checklist ChatGPT app ZIP

Choose the right first release

Tool-Only App or App with an Embedded UI?

What you needTool-only MCP appMCP app with UI
Best resultA lookup, calculation, validation, or short structured answerA comparison, selector, editor, status board, or interactive detail view
Required boundaryMCP server and tool contractThe same MCP server plus a versioned text/html;profile=mcp-app resource
Model dataConcise structuredContent and optional narrationThe same model data plus widget-only _meta where needed
Extra review surfaceTools, auth, privacy, prompts, and server behaviorCSP, iframe behavior, accessibility, screenshots, state, and mobile rendering
Start with one bounded outcome

ChatGPT Apps That Are Easier to Explain and Test

Launch Readiness

Read-only checklist

Turn a product name, audience, and stage into a transparent checklist without claiming that a live connection, review, or publication has occurred.

Knowledge Lookup

Cited source result

Search approved records with bounded filters, return concise model-visible citations, and keep large display data in the widget-only payload.

Project Status

Structured snapshot

Read a private project only after OAuth scope checks, then render milestones and blockers without exposing tokens, logs, or internal debug fields.

Confirmed Action

Review before write

Separate preview from execution, show the exact target and consequence, require current authorization and confirmation, and make the write idempotent.

The engine

A software team in one agent

Playcode AI runs the same frontier models that power ChatGPT and Claude - and orchestrates them like a team: it plans the work, delegates to sub-agents, runs long jobs in the background, and reviews its own changes.

Every frontier model

The latest models from every major lab, in one picker. Switch anytime.

ClaudeGPTGeminiGrok

Sub-agents

Big jobs split across specialists - one explores your code, one writes, one audits - working in parallel.

Background tasks

Long builds and migrations keep running while you keep talking. They report back when done.

migration - running

It sees your designs

Have a design in Figma? Paste a screenshot - or a page you like, or a bug - and it builds from what it sees.

Tuned by years of iteration to write production software - structured, typed, maintainable - not throwaway prototypes.

Production code

Real code you can open, read, and edit

Under every project is a codebase the agent keeps production-grade. And you are never locked out of it: open the file explorer and edit any file yourself - server included. No AI required.

Quality is the default

Complete states, secure boundaries, structured code - the bar is what a professional agency would ship.

Every file is yours to open

Browse the whole project - frontend, backend, configuration - and edit directly in the built-in editor.

Developers are welcome

Invite your developer with the right role, or export the project code and files. Nothing is trapped in Playcode.

For teams and organizations

Share it like you share a doc

Playcode is built for organizations, not just solo builders. Workspaces hold your projects, people, and billing; roles and teams decide exactly who sees what.

Workspaces with their own billing

Create a workspace per company, client, or department - each with its own members, projects, and subscription.

Three clear roles

Admins manage, editors build, viewers watch. Set roles on the whole workspace, on a team, or on a single project.

Teams that scope access

Group people into teams and give each team its own projects - or a whole folder of them. Private projects stay private, even inside a shared workspace.

Share outside the workspace

Send a project to any email - a client, a contractor - with exactly the access you choose. No extra seat needed.

Share "Inventory tracker"
Acme Ops workspace
Private
client@partner.co
Editor Invite
Operations team
8 people
Editor
MK
Maya Kowalski
maya@acme.co
ADMIN
JR
Jon Reyes
jon@acme.co
EDITOR
LS
Lena Sato
lena@acme.co
VIEWER
Restricted - only people invited can open it
Real-time

Multiplayer by default

Work on one project together. Write in the same AI chat together. Every message, edit, and setting is fully synchronized - live, for everyone, on every device.

acme-launch · Playcode
MKJR
Maya's laptop
Maya
Add a 'Book a call' button to the hero
Jon
And link it to our calendar, please
Playcode AIDone - button added to the hero and linked to your calendar.Preview updated
Describe the next change...
Jon's phone
Maya
Add a 'Book a call' button to the hero
Jon
And link it to our calendar, please
Playcode AIDone - button added to the hero and linked to your calendar.
Message...
Already there. No refresh.

Same project, same moment

Everyone works in the project at the same time - even in the code editor - without lock-outs or "who has the latest version".

Every device

Start on the laptop, check from your phone: the same live state follows you everywhere you sign in.

Nothing to refresh

Changes arrive over a live connection the instant they happen. Reloading the page is a habit you can drop.

Feels instant

It never makes you wait

Instant

Every click applies immediately on your device. Syncing happens behind you, not in front of you.

Offline

Connection dropped? Your changes queue locally and replay the moment you are back.

Reload-proof

The queue survives closing the tab. Nothing you did is lost while you are away.

Real People. Real Websites Built with AI.

"I built my entire portfolio site in 20 minutes. My clients think I hired a designer. Already got 3 new inquiries this month."
Marcus T. · Freelance Graphic Designer, Austin TX
"We switched from Wix to Playcode. The AI actually understands what we need instead of giving us cookie-cutter templates. Saved us thousands."
Sarah Chen · Owner, Bloom & Petal Floristry
"I update my property listings from my phone while showing apartments. Clients are impressed when I tell them I built the site myself."
David Morales · Real Estate Agent, Miami FL

Simple Pricing

Start small. Upgrade when you're ready.

Starter

$0to start

Try the AI website builder and see results

  • AI credits included to start
  • Publish your site instantly
  • Subdomain included
  • Website hosting included
  • No credit card required
Get Started

Pro

Most Popular
$21/month

Everything you need to build

  • 100 AI credits/month
  • All AI models (12+)
  • Visual editing
  • Custom domains
  • Website hosting included
  • Export your code anytime
  • Private projects
  • Unlimited collaborators

Cancel anytime. No hidden fees.

How credits work

Credits are used when AI helps you. Simple edits cost less, complex features cost more.

  • "Change button color" ~0.3-0.5 credits
  • "Add a contact page" ~2-3 credits
  • "Build full landing page" ~5-10 credits

Most users never run out. 100 credits = lots of building.

ChatGPT App Builder Questions

Yes. The current Apps SDK architecture uses your MCP server to define tools, enforce authentication, return data, and point to any UI resource. An embedded widget is optional; the MCP server and tool contract are the required foundation.

Yes. A tool-only app is often the better first release for lookups, calculations, checks, and concise structured results. Add an MCP Apps UI when selection, comparison, editing, or visualization materially improves the user outcome.

Put concise JSON that the model may read and narrate in structuredContent. Put large or widget-only detail in _meta. Optional content can contain short narration. Never treat _meta as a substitute for server authorization or privacy minimization.

Playcode can build, test, package, and host the general MCP server and optional UI. Connecting the HTTPS endpoint in ChatGPT Developer Mode requires your OpenAI account and remains a manual host test, including real prompt selection and mobile behavior.

Current OpenAI documentation describes submitting the plugin that contains the MCP-backed app through the plugin submission portal. The flow includes organization verification, a real public MCP URL, tool scanning, privacy and company information, test prompts, review, approval, and a separate Publish step.

No. Local tests establish the code and protocol contract. OpenAI review evaluates the deployed endpoint, metadata, tool behavior, privacy disclosures, annotations, test prompts, UI when present, policies, and other requirements. Review timing and approval are not guaranteed.

Use OAuth 2.1 when a tool reads user-specific data or performs an authorized action. Prefer an anonymous or fictional read-only path for early proof when possible. The server must still validate tokens, audience, expiry, scopes, and app policy on every protected call.

Negative prompts prove that metadata does not make the app appear for unrelated work, unsupported claims, or requests that should use another tool. They are essential because ChatGPT selects tools from names, descriptions, schemas, and context rather than from your handler alone.

Still have questions? Contact us

Describe the tool. Inspect the real MCP contract.

Start with one user job, one typed read-only tool, one prompt set, and one explicit privacy boundary. Add a widget only when it improves the outcome.

A launch-readiness app with one read-only checklist tool and compact widget...Build My ChatGPT App

No credit card required. AI credits included.