Skip to main content
Glama
adner

OpenGenUI MCP

by adner
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

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 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:

    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).

Related MCP server: VibeServe

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/<timestamp>_<runId>.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.

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers