Apps SDKTutorial7 min

Build a ChatGPT App UI from MCP tool results

How to turn MCP tool output into a useful ChatGPT App component rather than a decorative panel.

Real example

Example: render a proposal shortlist inside ChatGPT

A user asks ChatGPT to find active tenders from an MCP-connected system. A plain text answer is hard to scan and compare.

Return structured MCP tool results with tender id, buyer, deadline, fit reason, and risk. Render a ChatGPT App component with a sortable list, evidence chips, and a selected detail panel.

The app turns tool output into a decision surface, so the user can compare options instead of reading a long generated paragraph.

Tutorial path

How to implement it

Step 01

Define an MCP tool with a focused response object that the UI can render without parsing prose.

Step 02

Build a component that reads tool results and shows states like loading, empty, error, and ready.

Step 03

Use the Apps SDK bridge for supported interactions instead of custom global hacks.

Step 04

Keep sensitive data out of component state unless the app genuinely needs it.

Step 05

Test the app with realistic tool responses and missing-data cases.

Checklist

Ready when these are true

Tool result is structured

Component has empty and error states

Bridge usage is intentional

Sensitive data minimized

Missing data renders cleanly

Field notes

What matters in practice

A ChatGPT App component should make tool results easier to inspect, compare, or act on.

Keep the MCP server responsible for data and the component responsible for presentation and interaction.

Design the component around the user action that should happen after the tool returns.

Avoid these mistakes

Common failure modes

Do not make the component parse prose from the assistant message.

Do not store durable business decisions only in component state.

Do not hide empty and error states.

Practical tip

Design the MCP tool response as an API contract for the component, not as a chat transcript.

Apply this to a build