GenUI MCP

OpenGenUI MCP

An MCP Apps-capable MCP server that turns a natural-language description into an interactive HTML/JS UI component, rendered in any compliant MCP host (Microsoft 365 Copilot declarative agents, Claude Desktop, VS Code, Copilot Cowork).

The server exposes a single tool — generate_ui_component(description) — that drives the OpenGenerativeUI LangGraph deep agent over the AG-UI protocol, captures the agent's widgetRenderer tool call, and serves the result as a sandboxed MCP App view.

> [!WARNING] > This is a tech demo, not an enterprise-ready product. It deliberately ships with: > > - Maximally permissive CSP in the rendered iframe ('unsafe-inline', 'unsafe-eval', several CDN domains) so the agent's arbitrary HTML/JS executes without friction. > - No authentication on the HTTP transport — open to anything that can reach localhost:3101. > - No rate limiting, no input validation, no audit trail beyond per-call debug logs. > - Execution of unaudited LLM-generated JavaScript in the user's host (sandboxed in an iframe, but still arbitrary code). > > Do not deploy this as-is anywhere reachable from a network you don't control. Hardening for production would need (at minimum) authentication, a narrow CSP scoped to specific CDNs with 'unsafe-eval' dropped, supply-chain review, and a careful look at how agent output flows into the host.

See [spec.md](./spec.md) for the full design, decisions log, and architecture diagram.

Prerequisites

• Node.js 20+
• The OpenGenerativeUI agent running at http://localhost:8123/. From a clone of CopilotKit/OpenGenerativeUI:

``bash make dev-agent ``

The agent requires an OPENAI_API_KEY (or equivalent for whichever provider you configure) in apps/agent/.env. Strong models only — weak models produce broken visualizations (the agent's own README spells out which models are supported).

Install, build, run

npm install
npm run build      # bundles the View into dist/mcp-app.html (single file)
npm run serve      # HTTP transport on http://localhost:3101/mcp
# or
npm run serve:stdio   # stdio transport for Claude Desktop

npm run dev runs Vite in watch mode plus tsx watching the server.

Configuration

| Env var | Default | Purpose | | ------------------- | -------------------------- | --------------------------------------------- | | PORT | 3101 | HTTP port | | AGENT_URL | http://localhost:8123/ | AG-UI agent base URL | | AGENT_TIMEOUT_MS | 120000 | Max time to wait for a widgetRenderer call |

Connecting from an MCP host

Microsoft 365 Copilot declarative agents

Follow Microsoft's Build agents with MCP guide and point the declarative agent at http://localhost:3101/mcp (or wherever this server is reachable). This is the host the demo was built on — see the LinkedIn post.

VS Code

Add the HTTP endpoint to mcp.json:

{
  "servers": {
    "opengen-ui": { "type": "http", "url": "http://localhost:3101/mcp" }
  }
}

Then

Ask the model to "show me a rotating triangle" / "an interactive binary search visualization" / etc.

Logs

Every tool call writes a structured JSONL log to logs/_.jsonl. Useful when a generation looks wrong — the log records every AG-UI event, every assistant text, and which extraction path captured the widget (tool_call:widgetRenderer vs. the legacy assistant_text[N] fallback). See spec §9.8.

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: adner
• Source: adner/GenUI_MCP
• License: MIT

Install and usage instructions live in the source repository linked above.