# Inline Widget

Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via...

- Repository: https://github.com/ginlix-ai/LangAlpha (2232 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ginlix-ai/LangAlpha --skill inline-widget -g -a claude-code -y`
Codex: `npx skills add ginlix-ai/LangAlpha --skill inline-widget -g -a codex -y`
Cursor: `npx skills add ginlix-ai/LangAlpha --skill inline-widget -g -a cursor -y`
Gemini CLI: `npx skills add ginlix-ai/LangAlpha --skill inline-widget -g -a gemini-cli -y`

## Description

Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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__`

The rest: https://github.com/ginlix-ai/LangAlpha/blob/HEAD/plugins/langalpha_deliverables/skills/inline-widget/SKILL.md