4. What are MCP Apps?
1m

What are MCP Apps?

MCP Apps are mini applications that run inside MCP Apps-compatible hosts (for example, ChatGPT).

Instead of text responses, MCP apps give you complete control over how data appears, from custom visualizations to interactive elements.

Learn more about MCP Apps.

Sequence of events

Sequence diagram: MCP Apps Host, Apollo MCP Server, GraphQL API, and MCP App view exchanging numbered steps from tool invocation through iframe rendering

Here is the flow shown in the diagram:

  1. Invokes tool — Based on the user's request, the MCP Apps host asks the Apollo MCP server to run a tool.
  2. Executes GraphQL — The MCP server runs the corresponding against the API.
  3. Returns data — The API responds with the requested data to the MCP server.
  4. Returns data — The MCP server passes that data back to the host.
  5. Requests UI resource — The tool result includes _meta.ui.resourceUri, which triggers the host to request the UI bundle or HTML resource from the MCP server.
  6. Returns HTML — The MCP server returns the markup (and related assets) that define how the app should look and behave.
  7. Creates iframe and injects data — The host renders the MCP App inside a sandboxed iframe and wires in the data so users see a rich, interactive view instead of a plain text reply.

This separation of concerns keeps access controlled at the MCP server, reuses your for data, and still lets you ship a purpose-built UI for the chat experience.

Note: Some hosts will discover and pre-fetch UI resources before making tool calls.

Practice

How does the MCP Apps host know that it should render a UI for a tool call?
Previous