Module Federation MCP Apps

What it does

Module Federation MCP Apps bridges your existing micro-frontend infrastructure with AI-native interactive UIs. Instead of bundling self-contained HTML into the MCP server, it loads React components dynamically from your existing CDN-deployed Module Federation remotes and renders them inline inside conversations in Claude, VS Code Copilot, or any MCP Apps-capable host.

Key features

• No duplicate build pipeline — point a config file at your existing MF remotes; no need to extract or re-bundle components separately
• Live CDN delivery — UI updates deploy with your normal frontend pipeline; just bump the version in mcp_apps.json
• Shared dependencies — React and shared modules are deduplicated across all tools via Module Federation's shared scope
• Multi-step wizards — supports callServerTool, requestDisplayMode, and stateful multi-step flows (e.g. a 3-step Deploy Wizard demo is included)
• CORS proxy built-in — handles cross-origin CDN resources automatically
• AI Skill for config generation — include skill/generate-mcp-apps-config.md in any coding assistant to auto-detect your MF config and generate mcp_apps.json

Installation

Claude Desktop (npx):

{
  "mcpServers": {
    "module-federation": {
      "command": "npx",
      "args": ["-y", "@module-federation/mcp-apps@latest", "--config", "/absolute/path/to/mcp_apps.json", "--stdio"]
    }
  }
}

VS Code Copilot: Add the same command/args block under github.copilot.chat.mcp.servers in settings.json.

HTTP mode: Run node dist/index.js without --stdio for browser-based agents connecting via Streamable HTTP at http://localhost:3001/mcp.

Supported hosts

Claude Desktop (confirmed), VS Code Copilot, Cursor, Windsurf, Gemini CLI, Claude Code — all via the included automated installer (npm run install-mcp:<client>).