mcp-apps-builder

1# MCP Apps Builder Skill
2 
3This skill guides you in building MCP Apps - MCP servers with interactive React UIs using the Leanmcp UI SDK.
4 
5## When to Use This Skill
6 
7- User asks for "MCP with UI"
8- User wants "interactive MCP server"
9- User mentions "MCP App" or "leanmcp UI"
10- User needs "dashboard for MCP tools"
11- User wants "visual interface for AI tools"
12- User mentions "@leanmcp/ui" or "@UIApp"
13- User asks for "ChatGPT App" or "GPT App"
14 
15## What is an MCP App?
16 
17MCP 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.
18 
19## Core Architecture
20 
211. **Service file** (`mcp/*/index.ts`) - Tool methods decorated with `@Tool` AND `@UIApp`
222. **Component file** (`mcp/*/*.tsx`) - React component using `@leanmcp/ui` components
233. **CLI handles the rest** - `leanmcp dev` builds and wraps components with AppProvider
24 
25## Required Dependencies
26 
27```json
28{
29  "dependencies": {
30    "@leanmcp/core": "^0.4.7",
31    "@leanmcp/ui": "^0.3.7",
32    "react": "^18.0.0",
33    "react-dom": "^18.0.0",
34    "dotenv": "^16.5.0"
35  },
36  "devDependencies": {
37    "@leanmcp/cli": "latest",
38    "@types/react": "^18.0.0",
39    "@types/react-dom": "^18.0.0",
40    "@types/node": "^20.0.0",
41    "typescript": "^5.6.3"
42  }
43}
44```
45 
46## TypeScript Configuration
47 
48```json
49{
50  "compilerOptions": {
51    "experimentalDecorators": true,
52    "emitDecoratorMetadata": true,
53…