ui-lift

Web App → MCP Surface Compiler

Static analysis of React apps to auto-generate Model Context Protocol (MCP) servers. Point it at your source code, get a runnable MCP server that exposes your app's UI capabilities as structured, agent-callable tools.

What It Does

React App Source → AST Analysis → Intermediate Representation → MCP Server

ui-lift scans your React components and extracts:

Install

npm install -g ui-lift
# or
npx ui-lift scan ./src

Usage

# Scan a React app and generate an MCP server
ui-lift scan ./src --output ./mcp-server --name my-app

# Run the generated server
cd mcp-server
npm install
node server.js

CLI Options

ui-lift scan <srcDir>

Options:
  -f, --framework <framework>  Framework (default: "react")
  -o, --output <dir>           Output directory (default: "./mcp-server")
  -n, --name <name>            App name

Example

Given this React component:

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => { /* ... */ };

  const saveTodos = async () => {
    await fetch('/api/todos', { method: 'POST', body: JSON.stringify(todos) });
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      <button onClick={saveTodos}>Save</button>
    </div>
  );
}

ui-lift generates these MCP tools:

Programmatic API

import { scan, parseReactFile } from 'ui-lift';

// Full scan
const schema = await scan({
  srcDir: './src',
  framework: 'react',
  outputDir: './mcp-server',
  appName: 'my-app',
});

console.log(`Generated ${schema.tools.length} tools`);

// Parse a single file
const results = parseReactFile(sourceCode, 'App.tsx');

Output Structure

mcp-server/
├── server.js        # Runnable MCP server
├── package.json     # Dependencies (MCP SDK, zod)
└── ir-schema.json   # Full intermediate representation

Architecture

src/
├── parser/
│   └── react-parser.ts    # Babel AST analysis
├── ir/
│   └── types.ts           # Unified intermediate representation
├── generator/
│   └── mcp-generator.ts   # MCP server code generation
├── index.ts               # Library entry + scanner
└── cli.ts                 # CLI entry point

Examples

Three example apps are included in examples/:

• todo-app — Classic todo with CRUD + API persistence
• dashboard — Metrics dashboard with useReducer + API calls
• contact-form — Form with validation + submission

Try them:

ui-lift scan examples/todo-app/src --name todo-app --output /tmp/todo-mcp

Roadmap

• Vue.js parser
• Svelte parser
• Next.js route detection
• React Router navigation tools
• Form validation extraction
• TypeScript type inference from props
• Watch mode (re-generate on file changes)

License

MIT