freemcplab / Directory / Playground / MCP Apps Protocol

● Official modelcontextprotocol ⚡ Instant

MCP Apps Protocol

Name: MCP Apps Protocol MCP Server
Author: modelcontextprotocol

by modelcontextprotocol · modelcontextprotocol/ext-apps

The official extension that lets MCP servers ship interactive UI fragments — Claude embeds your form/chart/picker right in the conversation.

MCP Apps is an officially-blessed extension of MCP allowing servers to declare interactive UIs (forms, charts, pickers) that the chatbot host renders. This repo holds the spec, reference SDK, and examples.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Spec for embedded UIs in MCP
Reference SDK (TypeScript)
Example apps
Host implementation guidance
Maintained by the MCP team

Live Demo

What it looks like in practice

ready

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-apps-protocol",
      "args": []
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-apps-protocol": {
      "command": {
        "args": []
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add mcp-apps-protocol -- undefined

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use MCP Apps Protocol

Add a form-based confirmation to your MCP tool

👤 Developers ⏱ ~15 min intermediate

When to use: A tool has destructive side effects; you want user confirmation before execution.

Flow

Read spec

Skim the Apps spec section.✓ Copied

→ Mental model
Add UI fragment

Return an App component from your tool handler.✓ Copied

→ Host renders form
Wire submit

On submit, tool re-invokes with confirmed args.✓ Copied

→ Safer destructive tool

Outcome: Your MCP tools can request structured confirmations.

Combinations

Pair with other MCPs for X10 leverage

mcp-apps-protocol + fastmcp

Use fastmcp as your MCP server; Apps for interactive bits

Combine mcp-apps-protocol with fastmcp: Use fastmcp as your MCP server; Apps for interactive bits✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
protocol-spec	(see docs)	No callable tools — this is a protocol extension	1 call

Cost & Limits

What this costs to run

API quota: N/A
Tokens per call: 0
Monetary: Free
Tip: Keep Apps small — they're rendered inline

Security

Permissions, secrets, blast radius

Credential storage: None

Data egress: None

Troubleshooting

Common errors and fixes

Host doesn't render the App

Confirm host supports the Apps extension; it's opt-in

Alternatives