MCP App Workers Template

What it does

MCP App Workers Template gives you a complete, working scaffold for building MCP servers that render interactive HTML widgets inside MCP-compatible hosts. Instead of returning plain text, your tools display rich React-based UIs — think search results, dashboards, or detail cards — directly inside the client. The included anime search example queries the Jikan API (MyAnimeList) and renders results in a styled interactive widget.

Key features

• React widget system: Build interactive UI widgets with React 19 and Tailwind CSS 4, compiled into single-file HTML bundles via Vite
• Tool-to-widget linking: Attach a UI widget to any MCP tool using _meta["ui/resourceUri"] — the host auto-renders it on tool call
• MCP Extensions Apps integration: Two-way communication between widget and host via @modelcontextprotocol/ext-apps
• Cloudflare Workers deployment: Deploy globally in minutes with wrangler deploy; built-in ASSETS binding serves widget HTML
• CSP-ready: Per-widget Content Security Policy configuration for connectDomains and resourceDomains

Installation

Clone and run locally:

git clone https://github.com/MCPJam/mcp-app-workers-template.git
cd mcp-app-workers-template
npm install && npm run build && npm run dev

Claude Desktop — after deploying your worker, add to claude_desktop_config.json:

{
  "mcpServers": {
    "my-mcp-app": {
      "type": "http",
      "url": "https://<your-worker>.<your-subdomain>.workers.dev/mcp"
    }
  }
}

VS Code Copilot — add to settings.json:

"github.copilot.chat.mcp.servers": {
  "my-mcp-app": {
    "type": "http",
    "url": "https://<your-worker>.<your-subdomain>.workers.dev/mcp"
  }
}

Claude.ai web: Add https://<your-worker>.<your-subdomain>.workers.dev/mcp in Claude.ai Settings → Integrations.

Supported hosts

Any MCP client that supports HTTP/SSE transport and the MCP Extensions Apps widget protocol — MCPJam is the primary confirmed host.