By Mehdi HassanHow should you design apps for ChatGPT?
You design apps for ChatGPT by treating the conversation as the main interface and your UI as a small, well-timed addition to it. The model decides when to call your app based on its name, description and tools, and the user keeps talking to ChatGPT throughout, so your screens have to fit into a chat rather than replace it.
That's a different brief from a web app. Our hub on AI product UX covers AI features inside your own product; this guide is about living inside someone else's. It's based on OpenAI's published Apps SDK guidelines on its developer site. Those docs change often, so treat any specific limit below as current at the time of writing and check them before you build.
What is an app in ChatGPT?
An app in ChatGPT connects the model to your service through tools on an MCP server, the Model Context Protocol, and can return an optional UI component that ChatGPT renders in the conversation. The model calls your tools when a request matches, and your component shows the result in a form people can act on.
The naming has shifted. In 2026 OpenAI's developer docs describe plugins built from skills, MCP servers and optional UI, while apps and the Apps SDK remain the terms for the interactive integration. Whatever the label, the design questions are the same: which goals you support, what the model says, and when a visual surface helps.
Part | What it does | Who designs it |
|---|---|---|
Name and description | Tells users and the model what the app is for | Product and copy |
Tools | Actions the model can call, with their descriptions | Product and engineering |
UI component | Optional card, carousel or fullscreen view | Design and frontend |
Model replies | The text around your UI | Shaped by tool descriptions and results |
Which use cases deserve a ChatGPT app?
A use case deserves a ChatGPT app when a user can name a goal in plain words and your app can take them all the way to a useful result. OpenAI's UX guidance warns against tools that expose technical operations without finishing a recognizable task, and against implying broad capability while covering only a narrow slice.
Collect real requests
Pull wording from support tickets, site search, feature requests and sales calls. Include requests that name your product and ones that only describe the goal.
Group by goal
Merge requests that share one outcome. Show my open tasks and what's overdue are probably one use case with a filter.
Write each use case down
Record the goal, example requests, the expected result, the context needed and any safety boundary.
Pick the smallest build
Choose a skill with instructions, a tool on your MCP server, or UI. Add UI only when people need to inspect, compare, edit, confirm or navigate.
Decide what you won't support
List the exclusions and make sure your descriptions and refusals say so.
This inventory doubles as your test plan later. If you're still choosing between chat, copilot and agent patterns for your own product, copilot vs agent vs chat compares them.
Which display mode should your ChatGPT app use?
Your ChatGPT app should start with an inline card, because OpenAI's guidelines say every app first appears inline, and only move to other modes when the task needs them. Each mode has a narrow job, and most apps need one or two of them.
Mode | Use it for | Key rules in OpenAI's guidelines |
|---|---|---|
Inline card | Confirmations, summaries, a map, a quick action | Up to two actions; no tabs, drill-ins or nested scrolling |
Inline carousel | Choosing among a few similar items | 3 to 8 items, each with an image, short metadata and one optional action |
Fullscreen | Maps, editors, detailed browsing | ChatGPT's composer stays available; use only when space helps |
Picture-in-picture | Live sessions, games, video | Responds to the composer; closes when the session ends |
The common error is designing a whole web app and squeezing it into a card. If your card needs tabs, split it into separate cards or tool calls. If it needs a sidebar, it probably belongs in fullscreen, or back in your own web app UI.
What are the visual design rules for ChatGPT app UI?
The visual rules for ChatGPT app UI come down to this: look like ChatGPT, and let your brand show in a few deliberate places. OpenAI's guidelines ask apps to use system colors for text, icons and dividers, and the platform's native system fonts, with no custom fonts even in fullscreen.
- Color: brand accents on primary buttons, badges and icons are fine; brand colors on backgrounds and text are not.
- Type: stick to body and small body sizes, and use bold or highlights inside content, not for structure.
- Icons: system icons, or custom ones that are monochrome and outlined.
- Logo: leave it out. ChatGPT adds your app name and logo above the component.
- Layout: follow the system grid and corner radii, order content as headline, supporting text, then action.
- Accessibility: the guidelines ask for WCAG AA contrast, alt text on every image and layouts that survive text resizing.
OpenAI also publishes an Apps SDK UI component library and a Figma kit that match ChatGPT's design system. Start there rather than drawing components from scratch, and spend your design time on content and states.
How should a ChatGPT app behave in the conversation?
A ChatGPT app should behave like a good colleague in a meeting: act on clear requests, confirm before changing anything, and say plainly when something is out of scope. OpenAI's UX guidance asks that write actions be authorized and confirmed, and that the app explain its limits and offer a next step.
- Confirm writes. Before a booking, payment, message or delete, show what will happen in a card with one primary action.
- Don't repeat the card. The model's text should add a next step, not restate what the UI already shows.
- Design every state. Plan loading, empty, error and partial results; our guide to AI loading states covers the in-between moments.
- Keep actions meaningful. Each button should start a conversation turn or call a tool, nothing decorative.
- Respect context. Ask only for information the task needs, and use what the user already said.
These are the same trust patterns that matter in agentic UX: visible plans, approvals and a clear record of what happened. In ChatGPT the conversation itself is the log, so write tool results that read well there.
How do you prototype and test a ChatGPT app?
You prototype a ChatGPT app by scripting conversations first and designing components second. Write the user's request, the model's reply and the card for each use case, then test with direct, indirect, edge-case and out-of-scope requests, which is the test set OpenAI's UX principles recommend.
Hypothetical example: designing a ChatGPT app for a scheduling startup
For example, suppose a startup sells team scheduling software. Its inventory finds three goals: find a time with colleagues, book a room, and move a meeting.
Finding a time becomes an inline card with three suggested slots and one primary action, Book this time. Booking a room uses a carousel of up to five rooms with a photo, capacity and floor. Moving a meeting needs no new UI: the model confirms in text and shows a small confirmation card before the change. Out of scope: payroll and leave requests, which the app declines with a link to the right tool.
This is an illustrative walkthrough, not a description of a real product.
Test on mobile early, since OpenAI's guidelines let card height grow only up to the mobile display area. If you want help shaping the first version, our MVP design service covers scoping, and product design covers the flows and components. Our generative AI industry page shows the products we work on.
