Inline Widget

Render interactive HTML/SVG widgets directly inside the chat conversation using ShowWidget. Widgets appear inline between text, no sandbox, no preview URL, no side panel. They run JavaScript, so lean into making them interactive and explorable where it helps, something the user can sort, filter, toggle, and hover over, not just a static picture.

When to Use

• User wants a quick visualization embedded in the conversation (chart, metric card, data table)
• The visualization is self-contained, all data is embedded in the HTML, no server needed
• User wants interactivity within the chat: buttons, toggles, hover effects, animated charts
• The output is a single view, not a multi-page app or dashboard that needs routing

Use interactive-dashboard instead if: User needs a multi-page web app, server-side data, live data refresh, or complex interactivity requiring React/FastAPI.

Read .agents/skills/ui-design/SKILL.md for design quality, its color discipline, chart restraint, and anti-slop principles apply here too. Its font pairings and type scale, though, are for full documents; a widget sits on the chat surface, so use the host-font typography rules below instead.

ShowWidget API

ShowWidget(html: str, title: str | None = None, data_files: list[str] | None = None)

• html: Raw HTML fragment, no <!DOCTYPE>, <html>, <head>, or <body> tags
• title: Optional metadata (not displayed to user)
• data_files: Optional list of sandbox file paths to make available as window.__WIDGET_DATA__