MCP UI: Endpoint → Design-System UI

Live demo: mcp-ui-poc.vercel.app

Point at any API endpoint. An AI layer analyses the response and composes a UI from a registered design system, returned as an MCP UI resource and rendered in a sandboxed iframe via @mcp-ui/client's UIResourceRenderer.

endpoint URL ─▶ SSRF-guarded fetch ─▶ AI/heuristic planner ─▶ design-system render ─▶ MCP UI resource

Features

• Multi-LLM planner — Anthropic, OpenAI, or Gemini (packages/core, published as ui-compose-kit); falls back to a deterministic heuristic planner when no API key is configured.

• Pluggable design systems — glass (default), shadcn, material, plain. The AI picks from a fixed component catalog (stat-grid, table, list, chart, alert, action-row, etc.) enforced by JSON schema.

• Instruction-driven — free-form prompts steer field selection, chart type, and layout (page, modal, or component presentation).

• Glassmorphism shell — frosted-glass UI with a live appearance panel (blur, frost, mesh, etc.), persisted to localStorage.

• Safety by default — SSRF guard on outbound fetches, response size/time caps, generated-HTML size cap, per-IP rate limiting.

Related MCP server: Document Automation MCP Server

Project structure

mcp-ui-poc/
├── client/        # React + Vite frontend (Tailwind v4, shadcn/ui)
├── server/        # Express API (routes, SSRF-guarded fetch, rate limits)
├── packages/core/ # ui-compose-kit: planner, LLM adapters, design systems
└── api/           # Vercel serverless entry point

See packages/core/README.md for the ui-compose-kit package (adapters, design-system authoring, presentation modes).

Getting started

git clone <repository-url> && cd mcp-ui-poc
npm install && npm run install-all
cp .env.example .env   # add ANTHROPIC_API_KEY (or OPENAI_/GEMINI_)

npm run dev      # backend on :3001
npm run client   # frontend on :3000 (proxies /api to :3001)

Open http://localhost:3000.

API

Key environment variables

See .env.example for the full list.

Scripts

Security

• No persistent storage — each request is stateless.

• SSRF guard rejects private/loopback endpoints unless explicitly allowed.

• MCP UI resources render in a sandboxed iframe; host communication is limited to postMessage notify/link actions.

License

MIT — see LICENSE.

Stack: React, Vite, Tailwind CSS v4, shadcn/ui, Node.js, Express, @anthropic-ai/sdk, openai, @google/genai, @mcp-ui/server, @mcp-ui/client.