---
title: MCP Apps Overview
subtitle: Build custom, interactive experiences in MCP Apps-compatible hosts
---

Apollo MCP Server supports MCP Apps, enabling you to build custom, interactive experiences in any host that supports the MCP Apps specification (like as ChatGPT with OpenAI's Apps SDK). This integration allows you to control how results are displayed, tailoring the look, feel, and interactivity of responses generated from your GraphQL APIs and agentic workflows.

<Note>

For more information about MCP Apps compatibility, visit the [OpenAI Apps SDK documentation](https://developers.openai.com/apps-sdk/quickstart/#add-your-app-to-chatgpt) and the [Model Context Protocol documentation](https://modelcontextprotocol.io/docs/getting-started/intro).

</Note>

## What are MCP Apps?

MCP Apps are mini applications that run inside MCP Apps-compatible hosts. Unlike standard MCP tools that return text responses, apps give you complete control over how data appears, enabling:

- **Custom visualizations**: Display data in tables, cards, charts, or any custom HTML layout
- **Interactive experiences**: Build forms, buttons, and elements that users can interact with directly
- **Unique experiences**: Create experiences specific to your use-case
- **Rich UI beyond text**: Go beyond plain text responses with styled, interactive interfaces

## How MCP Apps work with Apollo MCP Server

Apollo MCP Server bridges your GraphQL APIs to the MCP Apps specification, allowing you to:

1. **Define GraphQL operations** that fetch data from your APIs
2. **Create a UI resource** that controls how data is displayed
3. **Package them together** as apps that MCP Apps-compatible hosts can discover and use

Overall, building an MCP App feels like building a GraphQL app with Apollo Client. If you're already familiar with Apollo Client and React, you can leverage that knowledge to build MCP Apps with only minor modifications—primarily adding `@tool` and `@prefetch` directives to your GraphQL operations. This means you can focus on building great user experiences rather than learning a completely new framework.

<Tip>

The easiest way to get started building MCP Apps is to use the [Apollo AI Apps Template](https://github.com/apollographql/ai-apps-template), which provides a complete setup with React, Vite, Apollo Client, and Apollo MCP Server integration. See the [Quickstart guide](/apollo-mcp-server/mcp-apps-quickstart) for more information.

</Tip>

```mermaid
graph LR
    Host["MCP Apps Host\n(e.g., ChatGPT)"]
    MCPServer["Apollo MCP Server"]
    GraphQL["Your GraphQL API"]
    Iframe["Iframe with UI"]
    
    Host -->|"1. Discover & Pre-fetch UI"| MCPServer
    Host -->|"2. Invoke Tool"| MCPServer
    MCPServer -->|"3. Execute GraphQL"| GraphQL
    GraphQL -->|"4. Return Data"| MCPServer
    MCPServer -->|"5. Return Data"| Host
    Host -->|"6. Create Iframe & Inject Data"| Iframe
    
    style Host fill:#E3F2FD
    style MCPServer fill:#1976D2,color:#fff
    style GraphQL fill:#00ACC1,color:#fff
    style Iframe fill:#4CAF50,color:#fff
```

## MCP Apps vs standard MCP tools

| Feature | Standard MCP Tools | MCP Apps |
|---------|-------------------|----------|
| **Response Format** | Plain text | Custom HTML/UI |
| **Display Control** | Limited to text formatting | Complete control over layout and styling |
| **Interactivity** | None | Full interactive capabilities |
| **Use Case** | Simple data retrieval | Rich experiences |
| **Best For** | Quick queries, simple responses | Complex visualizations, interactive workflows |

### When to use MCP Apps

Use MCP Apps when you need:

- **Display customization**: Control exactly how data appears (e.g., property listings with images, product catalogs with cards)
- **Interactive experiences**: Build forms, buttons, or other interactive elements
- **Unique experiences**: Create custom UI elements
- **Complex visualizations**: Display data in tables, charts, or other structured formats

## Architecture

MCP Apps combine GraphQL operations with custom UI resources to create interactive experiences. Learn more about how MCP Apps work in the [Architecture guide](/apollo-mcp-server/mcp-apps-architecture).

## Prerequisites

Before building your first MCP App, ensure you have all the required prerequisites. See the [MCP Apps Prerequisites](/apollo-mcp-server/mcp-apps-prerequisites) page for a complete checklist.

## Get started

Ready to build your first MCP App? Follow our [MCP Apps Quickstart](/apollo-mcp-server/mcp-apps-quickstart) to create your first app in minutes.

For detailed information about app structure, manifests, and configuration, see the [MCP Apps Reference](/apollo-mcp-server/mcp-apps-reference).
