MCP App Playground

What it does

MCP App Playground is a collection of 50+ self-contained MCP App templates — interactive HTML/TypeScript/CSS components that render tool results inside iframes in Claude and other AI hosts. Each template is built on the official @modelcontextprotocol/ext-apps SDK and demonstrates how to display real-world API responses (GitHub commits, Slack messages, analytics dashboards, Shopify products, Tesla controls, and more) as polished, interactive UIs rather than raw text.

The playground ships with a local MCP server you point your AI client at: invoke demo tools, and see exactly how each app renders and behaves — no real API credentials or backend needed.

Key features

• 50+ example templates covering GitHub, Slack, Google Analytics, Shopify, Datadog, Notion, Spotify, Vercel, Brightdata, and more
• Local preview server — spin up http://localhost:4311 with mock data to iterate on UI instantly
• Hosted MCP endpoint — http://localhost:3001/mcp for live host integration during development
• Base template — opinionated starter with dark mode, responsive layout, host context (theme/fonts/display mode), XSS-safe helpers, and full SDK event handler scaffolding
• AI-assisted development prompts — Cursor and agent-optimised prompts to generate new templates from response.json or OpenAPI specs
• Zero build required — npx @apigene/mcp-app-playground starts everything with no cloning

Installation

Run instantly (no install):

npx @apigene/mcp-app-playground

Claude Desktop (connect to local MCP server):

{
  "mcpServers": {
    "mcp-app-playground": {
      "command": "npx",
      "args": ["@apigene/mcp-app-playground", "mcp", "stdio"]
    }
  }
}

Cursor: Reference the project's docs/CURSOR_PROMPT_MCP_APP_SIMPLE.md for AI-assisted template creation workflows.

Supported hosts

Claude Desktop (primary), Cursor (via AI agent prompts), MCPJam. Works with any host that supports MCP App ui:// resources.