Get started with MCP Apps

• Scoping an app, or extending one that already renders in Claude: see what an MCP App can do in Claude, such as open in the side panel, embed your website, or give Claude tools to call
• New to MCP Apps: try an example in Claude Desktop to see how an MCP App looks and behaves
• Ready to build: build your own MCP App from a quickstart, an example implementation, or the MCP Apps skills for AI coding agents

What an MCP App can do in Claude

• Side panel and full screen: show your app beside the conversation or full screen when it needs more room than the conversation gives it
• Entry points: let people open your app from the Artifacts page in Claude, without asking Claude for the app, and let them pin it to the sidebar
• App tools: register tools in your app’s UI so that Claude can change what your app shows, such as a list on screen or the selected rows
• Messages: send Claude a message from your app, such as when someone clicks a button in your app that asks Claude for a plan
• Embedded websites: load your own website in an <iframe> inside your app, such as your product’s editor or dashboard
• Downloads: save a file from your app to the user’s device

Check what a capability requires

• Organization access: before you build on a capability such as the side panel, entry points, or app tools, check whether your organization has access by following the steps on that capability’s page
• Remote server: app tools, entry points, and embedded websites need a connector that’s backed by a remote server
• Verified listing: for a directory connector, entry points and embedded websites are available only under a Verified listing.
  • People who install your connector from a Community listing don’t get either one, even if both worked while you tested with a custom connector.
  • To compare a directory connector with a custom connector, see Directory connectors vs custom connectors.

Try an example MCP App in Claude Desktop

Connect an example server

{
  "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"]
    }
  }
}

Ask Claude to use the app

Build your own MCP App

• 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

Register tools and resources once for every host

• 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

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

c3d80a4ed901ee05b21755a88273b4a4.claudemcpcontent.com

Build with an AI coding agent

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

Migrate from the OpenAI Apps SDK

Send feedback on MCP Apps

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
• Manage your listing after publishing: update a connector that’s already listed in the directory