# MCP Apps Builder

Build MCP Apps with interactive React UIs using the Leanmcp UI SDK.

- Repository: https://github.com/Leanmcp/gateway-skills (2122 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-07
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Leanmcp/gateway-skills --skill mcp-apps-builder -g -a claude-code -y`
Codex: `npx skills add Leanmcp/gateway-skills --skill mcp-apps-builder -g -a codex -y`
Cursor: `npx skills add Leanmcp/gateway-skills --skill mcp-apps-builder -g -a cursor -y`
Gemini CLI: `npx skills add Leanmcp/gateway-skills --skill mcp-apps-builder -g -a gemini-cli -y`

## Description

Build MCP Apps with interactive React UIs using the Leanmcp UI SDK. Use this skill when users ask for "MCP with UI", "MCP App", "interactive MCP", "leanmcp UI", "MCP dashboard", or want to create rich visual interfaces for their MCP tools. This skill covers @UIApp decorator, React components with useTool/useResource hooks, ToolDataGrid, ToolForm, ToolButton, and ChatGPT Apps support.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

```json
{
  "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

```json
{
  "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

The rest: https://github.com/Leanmcp/gateway-skills/blob/HEAD/skills/mcp-apps-builder/SKILL.md