{ "markdown": "# widget-studio\n\nAn agent capability for creating and displaying rich UI widgets (cards, dashboards,\ntask lists, charts, forms, tables) **inline in conversations** — packaged as a\nClaude Code plugin, an Agent Skill, standalone CLI scripts, and an MCP server with\n[MCP Apps](https://github.com/modelcontextprotocol/ext-apps) support. Widgets use the\nChatKit widget JSON format, generated by prompting\n[Widget Studio](https://widgets.chatkit.studio)'s hosted generator; the JSON is\nedited directly only for small tweaks.\n\n## Architecture\n\nThe MCP server is optional — the skills + CLI deliver the full generate→render\nloop on their own. The server is the layer that adds *interactive* inline\nwidgets in MCP Apps hosts. Each host gets the richest rendering it supports:\n\n| Layer | What it provides | Who uses it |\n| --- | --- | --- |\n| **Skills** ([skills/](skills/)) | `/widget-studio:make` — how to *prompt* the generator well; `:tweak` — instant JSON edits + re-display; `:preview` — render saved JSON to PNG/HTML; `:doctor` — install/render/API health checks | Any skills-capable agent |\n| **Reference** ([skills/make/references/chatkit-widgets.md](skills/make/references/chatkit-widgets.md)) | ChatKit component schema for reading and making small edits to generated widgets before re-display | The model, on demand |\n| **Scripts** ([scripts/](scripts/), [bin/](bin/)) | `widget-generate` (prompt → widget via hosted API), `widget-render` (JSON → PNG / standalone HTML), `widget-export` (→ `.widget` file for the Widget Studio editor) — self-locating, on PATH in plugin sessions | The full capability, no MCP needed |\n| **MCP server** ([src/](src/)) | `generate_widget`, `display_widget`, and `export_widget` (.widget files) tools; interactive MCP Apps iframe with a copy/export action bar in capable hosts, automatic PNG fallback elsewhere | MCP Apps hosts (interactive) + any other MCP client (PNG) |\n| **Evals** ([evals/](evals/)) | Deterministic golden-render suite (`npm run eval`) + skill-creator-format LLM eval cases ([skills/make/evals/evals.json](skills/make/evals/evals.json)) | CI / skill iteration |\n\n### Rendering paths\n\n- **MCP Apps hosts** (Claude Desktop, claude.ai, ChatGPT): interactive iframe via the\n standard `_meta.ui.resourceUri` → `ui://widget-studio/widget.html`, a fully\n self-contained HTML renderer (CSP-safe, light/dark, actions post back to chat).\n Legacy `openai/outputTemplate` alias included for older ChatGPT builds.\n- **Non-UI MCP clients** (Claude Code CLI, others): the server detects the missing\n MCP Apps capability at initialize and attaches a **PNG image** of the widget to the\n tool result instead (see [PNG rendering](#png-rendering)). Override with\n `WIDGET_STUDIO_IMAGE=auto|always|never`.\n- **No MCP at all**: `widget-render` (`scripts/render-widget.mjs`) produces the same\n PNG or a self-contained HTML preview from a widget JSON file.\n\n## Install\n\n> **Note:** the `npx` forms and one-click badges below go live with the first\n> npm release of `widget-studio-mcp`. Until then, use the\n> [from-source form](#from-source) — everything else is identical.\n\n[![Install in Cursor](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en/install-mcp?name=widget-studio&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIndpZGdldC1zdHVkaW8tbWNwQGxhdGVzdCJdfQ==) [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF)](https://insiders.vscode.dev/redirect/mcp/install?name=widget-studio&config=%7B%22name%22%3A%22widget-studio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22widget-studio-mcp%40latest%22%5D%7D) [![Install in LM Studio](https://img.shields.io/badge/LM_Studio-Install-4f46e5)](https://lmstudio.ai/install-mcp?name=widget-studio&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIndpZGdldC1zdHVkaW8tbWNwQGxhdGVzdCJdfQ==)\n\n### As a Claude Code plugin (recommended for Claude)\n\n```\n/plugin marketplace add ericlewis/widget-studio-mcp\n/plugin install widget-studio@widget-studio\n```\n\nThe plugin registers the MCP server, puts `widget-generate`/`widget-render`/`widget-export`\non PATH, and installs the skill family (`/widget-studio:make`, `:tweak`, `:preview`,\n`:doctor`). `dist/` ships self-contained bundles — no `npm install` needed.\n\n### MCP server, per host\n\n
Claude Code\n\n```bash\nclaude mcp add widget-studio -- npx -y widget-studio-mcp@latest\n```\n
\n\n
Claude Desktop\n\n`claude_desktop_config.json` (Settings → Developer → Edit Config):\n\n```json\n{ \"mcpServers\": { \"widget-studio\": { \"command\": \"npx\", \"args\": [\"-y\", \"widget-studio-mcp@latest\"] } } }\n```\n
\n\n
Cursor\n\nUse the install badge above, or `.cursor/mcp.json`:\n\n```json\n{ \"mcpServers\": { \"widget-studio\": { \"command\": \"npx\", \"args\": [\"-y\", \"widget-studio-mcp@latest\"] } } }\n```\n
\n\n
VS Code\n\n```bash\ncode --add-mcp '{\"name\":\"widget-studio\",\"command\":\"npx\",\"args\":[\"-y\",\"widget-studio-mcp@latest\"]}'\n```\n
\n\n
Codex CLI\n\n```bash\ncodex mcp add widget-studio -- npx -y widget-studio-mcp@latest\n```\n\nOr `~/.codex/config.toml`:\n\n```toml\n[mcp_servers.widget-studio]\ncommand = \"npx\"\nargs = [\"-y\", \"widget-studio-mcp@latest\"]\n```\n
\n\n
Gemini CLI\n\nAs an extension (bundles the MCP server and skills):\n\n```bash\ngemini extensions install https://github.com/ericlewis/widget-studio-mcp\n```\n
\n\n
Windsurf\n\n`~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{ \"mcpServers\": { \"widget-studio\": { \"command\": \"npx\", \"args\": [\"-y\", \"widget-studio-mcp@latest\"] } } }\n```\n
\n\n
Goose\n\n```bash\ngoose session --with-extension \"npx -y widget-studio-mcp@latest\"\n```\n
\n\n
Amp\n\n```bash\namp mcp add widget-studio -- npx -y widget-studio-mcp@latest\n```\n
\n\n
ChatGPT (and other remote-only hosts)\n\nChatGPT connects to remote MCP servers only. Run the HTTP transport behind a\ntunnel or deploy, then add the URL under Settings → Connectors (developer mode):\n\n```bash\nnpx -y widget-studio-mcp@latest --http 3400 # stateless streamable HTTP, POST /mcp\n```\n\nChatGPT implements the MCP Apps standard natively, so widgets render\ninteractively; in `--http` mode the server also always attaches the PNG.\nBridge for stdio-only hosts hitting a remote:\n`npx -y mcp-remote https://your-host/mcp`.\n
\n\n
From source\n\n```bash\ngit clone https://github.com/ericlewis/widget-studio-mcp && cd widget-studio-mcp\nnpm install && npm run build\nclaude mcp add widget-studio -- node \"$(pwd)/dist/index.js\" # or the equivalent for your host\n```\n
\n\n### PNG rendering\n\nBuilt in — pure JS/WASM (satori + resvg with bundled Inter fonts). No browser,\nno playwright/puppeteer, no native dependencies, nothing to install.\n\n## Develop\n\n```bash\nnpm run build # typecheck + bundle the iframe app and self-contained server into dist/\nnpm test # protocol smoke test (incl. one real API generation)\nnpm run eval # render golden fixtures to PNG + offline protocol checks\n```\n\nManual preview of any widget JSON:\n\n```bash\nnode scripts/render-widget.mjs --in evals/golden/sales-dashboard.json --png dashboard.png\nnode scripts/render-widget.mjs --in evals/golden/sales-dashboard.json --html dashboard.html\n```\n\n`dist/` is committed on purpose: plugin installs copy the repo as-is, so the\nbundles must ship prebuilt. Rebuild before committing changes under `src/`.\n\n## Notes\n\n- The Widget Studio API is the unauthenticated hosted service behind the public\n editor; requests carry a stable random user ID (`WIDGET_STUDIO_USER_ID` to pin).\n- The renderer covers the full ChatKit component set; unknown components degrade to\n rendering their children. External images are blocked by host CSP in interactive\n mode (placeholder shown) but fine in PNG/HTML output.\n", "bytes": 8057, "sha": "728e37deb3ebf736b122e746fb338fd8771cff82800937b461ca896da50c0c84", "repo_slug": "ericlewis/widget-studio-mcp", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/plg_ericlewis_widget_studio_mcp_2f85c0ce/readme" }