UI Tools

UI tools render React widgets inside ChatGPT when invoked. Instead of returning plain text, a UI tool displays an interactive visual (a dashboard, a form, a table, a chart) directly in the conversation.

ChatGPT conversation with an embedded dashboard widget — A UI tool rendering a dashboard widget inside ChatGPT

When to Use a UI Tool

Use a UI tool when:

The user needs to see structured data (tables, lists, cards)
The output involves interactive elements (buttons, filters, forms)
A visual layout communicates better than plain text
You want to show charts, maps, or media

If you only need to return data for ChatGPT to use in its response (no visual), use a data tool instead.

Display Modes

Every UI tool has a display mode that controls how the widget appears in ChatGPT. Choose the right mode for what you are building.

Inline

The widget appears directly in the conversation flow, sized to fit alongside chat messages. Best for: quick confirmations, short lists, status cards, compact summaries.

Fullscreen

The widget takes over the view, giving your app maximum space. Best for: dashboards, complex forms, data tables, maps, multi-panel layouts.

PiP (Picture-in-Picture)

The widget appears as a floating, persistent window that stays visible while the user continues chatting. Best for: media players, live feeds, reference panels, timers, persistent status monitors.

Picture-in-picture widget floating over ChatGPT conversation — A PiP widget floating above the conversation

Choosing the Right Mode

Use this table to pick a display mode based on what you are building.

What you are building	Display mode	Why
Confirmation message (“Order placed”)	Inline	Short, contextual, does not need extra space
Status card (order status, account info)	Inline	Quick reference that fits in conversation flow
Short list (3-5 items)	Inline	Compact enough for inline; no scrolling needed
Data table with sorting/filtering	Fullscreen	Needs horizontal and vertical space for columns and controls
Dashboard with multiple charts	Fullscreen	Multiple visual elements require full layout control
Multi-step form	Fullscreen	Users need space to fill out fields without feeling cramped
Map or spatial visualization	Fullscreen	Maps need room to be useful
Video or audio player	PiP	Users want to keep chatting while media plays
Live data feed (stock prices, logs)	PiP	Persistent visibility while doing other things
Reference panel (documentation, specs)	PiP	Users glance at it while working in the conversation

Setting the Display Mode

Include the display mode when you describe the tool in the builder chat.

Build a UI tool called “order_dashboard” that displays recent orders in a sortable table. Use fullscreen mode.

Create a UI tool “confirmation_card” that shows a success message after an action completes. Display inline.

Add a UI tool “live_ticker” that shows real-time price updates. Use picture-in-picture mode.

How UI Tools Call Data Tools

A widget rendered by a UI tool can trigger data tools to perform actions. For example, an order dashboard (UI tool) might have a “Cancel Order” button that calls a cancel_order data tool. When you describe this interaction in your prompt, the AI wires it up automatically:

In the order_dashboard UI tool, add a “Cancel” button on each order row. When clicked, it should call the cancel_order data tool with the order ID, then refresh the table.

This keeps your UI tool focused on display and your data tool focused on the action.

Tips

Default to inline, then upgrade

Start with inline mode. If the widget feels cramped or needs scrolling, switch to fullscreen. This avoids taking over the user’s view unnecessarily.

Let users control transitions

For fullscreen widgets, include a way to return to the conversation (a close button, a “done” action). Chippy adds default navigation, but explicit controls improve the experience.

Always provide a way back

If your widget opens a detail view or drill-down, include a back button or breadcrumb. Users should never feel stuck inside a widget.

Keep inline widgets compact

Inline widgets share space with chat messages. Aim for a single card, a short list (under 5 items), or a brief confirmation. If you need more space, use fullscreen.

Use PiP sparingly

PiP is powerful but can clutter the interface. Reserve it for content that genuinely needs to persist: media playback, live feeds, or reference material the user checks repeatedly.

Troubleshooting

Problem	Cause	Fix
Widget does not appear in ChatGPT	Tool is not connected via MCP, or MCP endpoint is outdated	Verify the MCP URL in ChatGPT settings matches your current preview or production URL
Widget renders but looks broken	Layout is too wide for inline mode	Switch to fullscreen mode for complex layouts
Buttons do nothing when clicked	The widget is not wired to a data tool	In your prompt, specify which data tool each button should call
Widget flickers or reloads	State is lost on re-render	Tell the AI: “Persist the widget state so it does not reset when the user interacts”
PiP window blocks conversation	Floating window is too large	Reduce the widget size or switch to fullscreen with a close button

What’s Next

Data Tools

Return structured data without rendering a widget.

Mock Data

Prototype with realistic data before connecting APIs.

Styling

Customize the look and feel of your widgets.

Tools

General tool design principles and configuration.

Getting Started

Building Apps

Connecting Services

Connecting to ChatGPT

Testing & Quality

Analytics

Team & Billing

Advanced

UI Tools

UI Tools

When to Use a UI Tool