Get started with MCP Apps

An MCP App is interactive UI that your MCP server renders inside a Claude conversation, such as an interactive chart or map. You build one with the MCP Apps SDK as part of your own MCP server, so it reaches people the same way the rest of your plugin’s connector does. This page is for developers who have an MCP server, or are building one, and want it to show UI in Claude.

If you haven’t built the server yet, see Build an MCP server for Claude.

To see how an MCP App looks and behaves, try an example in Claude Desktop first, then build your own from the SDK quickstart, the examples, or the agent skills.

Try an example MCP App in Claude Desktop

The MCP Apps repository publishes example servers that you run locally with npx and connect to Claude Desktop through its configuration file.

Connect an example server

Connecting an example server means adding its entry to Claude Desktop’s configuration file, so that the desktop app runs the server locally with npx. To connect one:

Install Claude Desktop

Install Claude Desktop and sign in.

Open the configuration file

Go to Settings > Developer and click Edit Config.

Add an example server

Add one of these 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
ShaderToy	Real-time GLSL shader compilation and display
Sheet Music	ABC notation rendering with interactive audio playback

The MCP Apps repository has more examples, each with a ready-to-use config snippet. The config entry for each example in the table runs its server with npx, which fetches the latest published version each time. Pin a version, such as @modelcontextprotocol/server-map@2.0.1, if you keep an entry beyond trying it out:

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

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

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

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

Save and restart

Save the file and restart the desktop app to connect the server.

Ask Claude to use the app

Once the server is connected, prompt Claude to use it. For example, with the customer segmentation server connected, ask Claude to show you recent customer data. Claude asks for permission to display the app. Click Allow, or Always allow for a server you trust, and the MCP App renders inline in the conversation.

Build your own MCP App

To add an MCP App to your own MCP server, start from the SDK documentation and examples:

Add an interactive UI to your MCP server: add a one-tool MCP App to the quickstart server on this site, in plain JavaScript with no build step
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

To test a remote MCP App locally, connect to it through a proxy such as mcp-remote.

Register tools and resources once for every host

An MCP App can run in Claude and in other hosts that support MCP Apps from one codebase. On the server, register your tools and resources with registerAppTool() and registerAppResource(), which generate each host’s metadata for you. In the app, call App.connect() without a transport argument, and the SDK detects the host and picks the transport.

Set `ui.domain` for Claude

Each host defines its own format for the Resource._meta.ui.domain field, the sandbox origin your app is served from. For Claude, the value is the first 32 hex characters of the SHA-256 of your server URL, followed by .claudemcpcontent.com. Compute it with this command, replacing https://example.com/mcp with your server URL:

node -e 'const yourServerUrl = "https://example.com/mcp"; console.log(require("crypto").createHash("sha256").update(yourServerUrl).digest("hex").slice(0,32) + ".claudemcpcontent.com")'

For https://example.com/mcp, the command prints:

c3d80a4ed901ee05b21755a88273b4a4.claudemcpcontent.com

If Claude reports Invalid ui.domain format or ui.domain mismatch, see Troubleshoot MCP Apps.

Build with an AI coding agent

If you use an AI coding agent, the MCP Apps skills guide it through MCP App development. They work in any agent that supports the Agent Skills standard, including Claude Code. In Claude Code, install the MCP Apps skills plugin with these commands:

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

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

Migrate from the OpenAI Apps SDK

If you have an existing app built on the OpenAI Apps SDK, follow the migration reference to move it to the MCP Apps SDK. The MCP Apps skills can also do the migration: ask your agent to “Migrate from OpenAI Apps SDK” or “Convert my OpenAI App to an MCP App”.

Send feedback on MCP Apps

To report a problem or suggest a change to MCP Apps, email mcp-apps@anthropic.com or open an issue on the ext-apps repository.

Next steps

Design guidelines: display modes, mobile layout, and style variables for an app that feels native to Claude
Troubleshoot MCP Apps: developer tools and fixes for an app that doesn’t render
Submit a connector: list your server and its MCP App screenshots in the directory

Build a plugin

Build an MCP server

Add interactive UI with MCP Apps

Publish to the directory

Try an example MCP App in Claude Desktop

Connect an example server

Ask Claude to use the app

Build your own MCP App

Register tools and resources once for every host

Set `ui.domain` for Claude

Build with an AI coding agent

Migrate from the OpenAI Apps SDK

Send feedback on MCP Apps

Next steps

​Try an example MCP App in Claude Desktop

​Connect an example server

​Ask Claude to use the app

​Build your own MCP App

​Register tools and resources once for every host

​Set ui.domain for Claude

​Build with an AI coding agent

​Migrate from the OpenAI Apps SDK

​Send feedback on MCP Apps

​Next steps

Try an example MCP App in Claude Desktop

Connect an example server

Ask Claude to use the app

Build your own MCP App

Register tools and resources once for every host

Set `ui.domain` for Claude

Build with an AI coding agent

Migrate from the OpenAI Apps SDK

Send feedback on MCP Apps

Next steps