Get started with MCP Apps

Try an example MCP App

Connect an example server

Make sure you have installed and logged into Claude Desktop. Navigate to the developer settings page (Settings > Developer) and click the “Edit Config” button. Add one of the example servers to your claude_desktop_config.json:

Example	Description
Customer Segmentation	Data visualization with scatter charts and clustering analysis
Map	Interactive 3D globe viewer using CesiumJS
QR Code	QR code generation with customizable colors and styling
ShaderToy	Real-time GLSL shader compilation and display
Sheet Music	ABC notation rendering with interactive audio playback
⋮	Explore more examples—each with ready-to-use config snippets!

{
  "mcpServers": {
    "customer-segmentation": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/customer-segmentation-server", "--stdio"]
    }
  }
}

{
  "mcpServers": {
    "map": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/map-server", "--stdio"]
    }
  }
}

{
  "mcpServers": {
    "qr": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/qr-server", "--stdio"]
    }
  }
}

{
  "mcpServers": {
    "shadertoy": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/shadertoy-server", "--stdio"]
    }
  }
}

{
  "mcpServers": {
    "sheet-music": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/sheet-music-server", "--stdio"]
    }
  }
}

Save and restart the desktop app to connect.

See it in action

Once your local server is connected, prompt Claude to use it. For example, with the customer segmentation server, ask Claude to show you recent customer data. Claude will prompt you for permission to display the App. Click “Always allow”, and you’ll see the MCP App render inline in the conversation.

Build your own MCP App

Ready to add an MCP App to your own MCP server? Here are the key resources:

MCP Apps Quickstart - Step-by-step guide to building your first MCP App
SDK API Documentation - Full API reference
Example implementations - Vanilla JS, React, Vue, Svelte, and more

If you are using an AI coding agent, MCP Apps skills provide guided development for agents that support the Agent Skills standard, including Claude Code, Cursor, Gemini CLI, and others. In Claude Code, you can install the MCP Apps skills plugin with the following commands:

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps

Once installed, ask your agent to “Create an MCP App” or “Add a UI to my MCP tool”.

You can test remote MCP Apps locally via a proxy like mcp-remote.

Migrate from OpenAI Apps SDK

If you are migrating an existing app from the OpenAI Apps SDK to the MCP Apps SDK, see the migration reference. You can also use the MCP Apps skills mentioned above to help migrate your apps. Ask your agent to “Migrate from OpenAI Apps SDK” or “Convert my OpenAI App to an MCP App”.

We’d love to see what you build! Send feedback to mcp-apps@anthropic.com or open an issue on the ext-apps repository.

Third-party Connectors

Building Connectors

Built-in Integrations

Try an example MCP App

Connect an example server

See it in action

Build your own MCP App

Migrate from OpenAI Apps SDK

​Try an example MCP App

​Connect an example server

​See it in action

​Build your own MCP App

​Migrate from OpenAI Apps SDK

Try an example MCP App

Connect an example server

See it in action

Build your own MCP App

Migrate from OpenAI Apps SDK