---
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).
