inline-widget
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.