MCP Generative UI Wrapper

A proxy layer that wraps any "plain" MCP server (tools-only) and automatically generates interactive UI resources using an LLM at runtime.

What It Does

Point the wrapper at any existing MCP server, and it automatically:

1. Discovers tools from the underlying server
2. Generates interactive UIs for each tool using an LLM
3. Caches generated UIs for fast subsequent access
4. Supports iterative refinement - say "make the table sortable" and the UI regenerates

Supported UI Standards

The wrapper supports two MCP UI standards:

• MCP Apps (--standard mcp-apps, default) — Uses the @modelcontextprotocol/ext-apps App API. UIs are self-contained HTML that communicate with the host via the MCP Apps SDK.
• OpenAI Apps SDK (--standard openai) — Uses the window.openai API (Skybridge). UIs communicate with the host via the OpenAI Apps SDK, as used in ChatGPT.

Both standards produce self-contained HTML with inline JS/CSS. The wrapper generates UIs tailored to the selected standard's API surface.

Why?

The MCP ecosystem has hundreds of tool-only servers with no visual interface. Building UIs for each tool requires frontend development effort and blocks exploration of "what would this look like as an app?"

This wrapper creates a zero-friction path from "I have tools" to "I have interactive UIs."

How It Works

┌─────────────────┐     ┌─────────────────────┐     ┌─────────────────┐
│    MCP Host     │────▶│  Generative UI      │────▶│  Underlying     │
│ (Claude Desktop)│◀────│     Wrapper         │◀────│  MCP Server     │
└─────────────────┘     └─────────────────────┘     └─────────────────┘
                               │
                               ▼
                        ┌─────────────┐
                        │   LLM API   │
                        │ (Anthropic, │
                        │  OpenAI)    │
                        └─────────────┘

The wrapper:

• Exposes all upstream tools with _meta.ui.resourceUri pointing to generated UIs
• Serves ui:// resources with LLM-generated HTML
• Proxies tool calls transparently to the underlying server
• Accepts refinement requests via the _ui_refine tool

Usage

# Wrap a stdio MCP server
mcp-gen-ui --upstream "uvx mcp-server-yfinance" --provider anthropic

# Wrap a remote MCP server (defaults to Streamable HTTP transport)
mcp-gen-ui --upstream-url http://localhost:9000/mcp --provider openai

# Force SSE transport for older servers
mcp-gen-ui --upstream-url http://localhost:9000/sse --upstream-transport sse

# Authenticate with a bearer token
mcp-gen-ui --upstream-url http://localhost:9000/mcp --upstream-token my-secret

# Use OpenAI Apps SDK standard instead of MCP Apps
mcp-gen-ui --upstream "uvx mcp-server-yfinance" --standard openai

# Specify model and port
mcp-gen-ui --upstream "node my-server.js" --provider anthropic --model claude-sonnet-4-20250514 --port 8000

# Custom prompt to guide UI generation style
mcp-gen-ui --upstream "node my-server.js" --prompt "Use a dark theme with purple accents"

# Load prompt from a file
mcp-gen-ui --upstream "node my-server.js" --prompt-file ./my-ui-style.txt

Pipe Composition (mcpblox)

mcp-gen-ui can participate in mcpblox pipe chains. When stdin is a pipe, it reads the upstream URL from stdin. When stdout is a pipe, it writes its own URL to stdout for downstream consumers.

# mcpblox transforms → mcp-gen-ui adds UIs
mcpblox --upstream "uvx yfmcp@latest" --prompt "rename tools" \
  | mcp-gen-ui --provider anthropic --standard openai

# Multi-stage pipeline
mcpblox --upstream "uvx yfmcp@latest" --prompt "rename tools" \
  | mcpblox --prompt "create synthetic compare_stocks tool" \
  | mcpblox --prompt "hide all except compare_stocks and get_price_history" \
  | mcp-gen-ui --standard openai --provider anthropic --port 18888

When piped, the server binds to an OS-assigned port (override with --port). All logs go to stderr so stdout stays clean for the pipe protocol.

Features

• Zero-config: Point at any MCP server, get UIs automatically
• Dual-standard: Supports both MCP Apps and OpenAI Apps SDK
• Pipe composition: Chain with mcpblox via Unix pipes for transform → UI pipelines
• On-demand generation: Generate on first request, cache for performance
• Iterative refinement: Natural language feedback to customize UIs
• Full interactivity: Generated UIs can call tools, update dynamically
• Graceful fallback: Minimal UI for tools without meaningful visual output

Design Documents

See docs/ for design documents:

• PRODUCT_SPEC.md - Requirements and user stories
• PRODUCT_SPEC-design.md - Technical architecture and implementation plan

License

Apache 2.0