---
title: "widget-studio"
description: "Generate and display rich UI widgets (cards, charts, forms, tables) inline in conversations by prompting the Widget Studio generator."
canonical: https://agentpluginsdirectory.com/plugins/widget-studio
last-updated: 2026-09-25
---

# widget-studio
Generate and display rich UI widgets (cards, charts, forms, tables) inline in conversations by prompting the Widget Studio generator.
- Slug: widget-studio
- Publisher: ericlewis
- Repository: https://github.com/ericlewis/widget-studio-mcp
- Manifest: plugin.json
- Version: 0.2.0
- Category (editorial): design-frontend
- Skills: 4 (doctor, make, preview, tweak)
- MCP servers: 1 (widget-studio)
- Stars: 0
- Repository created: 2026-08-09
- Repository last pushed: 2026-08-09
- Publisher type: User
- Listing: https://agentpluginsdirectory.com/plugins/widget-studio
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What widget-studio does, in the publisher's words

An agent capability for creating and displaying rich UI widgets (cards, dashboards, task lists, charts, forms, tables) inline in conversations, packaged as a Claude Code plugin, an Agent Skill, standalone CLI scripts, and an MCP server with MCP Apps support. Widgets use the ChatKit widget JSON format, generated by prompting Widget Studio's hosted generator; the JSON is edited directly only for small tweaks.

The MCP server is optional: the skills + CLI deliver the full generate→render loop on their own. The server is the layer that adds interactive inline widgets in MCP Apps hosts. Each host gets the richest rendering it supports:

- MCP Apps hosts (Claude Desktop, claude.ai, ChatGPT): interactive iframe via the standard _meta.ui.resourceUri → ui://widget-studio/widget.html, a fully self-contained HTML renderer (CSP-safe, light/dark, actions post back to chat). Legacy openai/outputTemplate alias included for older ChatGPT builds.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/ericlewis/widget-studio-mcp/HEAD/README.md

## Skills

- doctor: Diagnoses the widget-studio installation, MCP server health, PNG rendering, and generator API reachability, and fixes what it can. Use when widgets fail to render or generate, the PNG fallback errors, tools are missing, or after installing or updating the plugin.
- make: Creates and displays rich UI widgets (cards, dashboards, task lists, charts, forms, tables, boarding passes, receipts) inline in the conversation by prompting the Widget Studio generator. Use when the user asks for a widget, a visual card, a rendered summary of data, "show me X as a widget/card/cha…
- preview: Renders a ChatKit widget JSON file to a PNG image or a self-contained HTML file locally. Use when the user wants to see a saved widget JSON, needs a shareable/openable HTML version of a widget, or wants a dark-mode PNG.
- tweak: Makes small edits to an existing widget, change a label, value, color, badge, or list item, and re-displays it instantly, without a 20-60s regeneration. Use when the user asks to adjust, fix, restyle, or update part of a widget that was already generated or exists as JSON.

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

## MCP servers

- widget-studio: transport: stdio; command: node ${PLUGIN_ROOT}/dist/index.js

Read from the plugin's own mcp.json. Environment variable names only, never values.