MCP Apps Builder Skill

This skill guides you in building MCP Apps - MCP servers with interactive React UIs using the Leanmcp UI SDK.

When to Use This Skill

• User asks for "MCP with UI"
• User wants "interactive MCP server"
• User mentions "MCP App" or "leanmcp UI"
• User needs "dashboard for MCP tools"
• User wants "visual interface for AI tools"
• User mentions "@leanmcp/ui" or "@UIApp"
• User asks for "ChatGPT App" or "GPT App"

What is an MCP App?

MCP Apps extend MCP servers to deliver interactive UIs. Apps run in sandboxed iframes and communicate via JSON-RPC over postMessage. When a tool is called, the UI can be displayed alongside the tool response.

Core Architecture

1. Service file (mcp/*/index.ts) - Tool methods decorated with @Tool AND @UIApp
2. Component file (mcp/*/*.tsx) - React component using @leanmcp/ui components
3. CLI handles the rest - leanmcp dev builds and wraps components with AppProvider

Required Dependencies

{
  "dependencies": {
    "@leanmcp/core": "^0.4.7",
    "@leanmcp/ui": "^0.3.7",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "dotenv": "^16.5.0"
  },
  "devDependencies": {
    "@leanmcp/cli": "latest",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/node": "^20.0.0",
    "typescript": "^5.6.3"
  }
}

TypeScript Configuration

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["**/*.ts", "**/*.tsx", "mcp/**/*.ts", "mcp/**/*.tsx"]
}

Project Structure