# Interactive HTML widgets

> Rendered right in the chat, with the full tab one click away.

Sometimes you want to interact with data, content, or a visualization. If so, ask for a widget. If you would save or deploy it, ask for the code instead. A request like "let me poke at these embeddings" is widget territory.

## What a widget is

A self-contained HTML page the [code agent](/code) writes on request. Inline in the chat at 320px, one click to expand to the full tab, and the same file adapts to both. It can pull Plotly, D3, Chart.js, or Three.js from approved CDNs, fetch live data (HuggingFace APIs, for instance), and take your file inputs; paste a CSV and it builds an interface around it.

| Worked examples | What it does |
| --- | --- |
| HuggingFace model explorer | Live-queries the HF API; filter by task, sort by downloads, click through to model cards |
| Confusion-matrix visualizer | Paste labels and counts; interactive heatmap with per-class precision, recall, and F1 on hover |
| Embedding-space viewer | 2D scatter of your vectors via t-SNE or PCA; color by cluster, hover for metadata, zoom the neighborhoods |
| Game of Life | Conway's automaton on a canvas. No research value; excellent for the fifth hour of a rebuttal. |

> **Researcher:** make a step sequencer (6 tracks)
>
> **Althea:** Here is a 6-track step sequencer for you. It uses synthesized drum sounds (Kick, Snare, Hi-Hat, Open Hat, Clap, Tom), so you don't need to wait for audio files to load. I've included a few extra controls like **Swing** to give the beat some groove, and a volume slider. It starts with a basic pattern loaded up—just hit **Play** to get started!
>
> _[interactive widget: Step Sequencer widget: Play and Clear buttons, BPM and Swing sliders, and a six-track, sixteen-step drum grid with a basic pattern loaded, clipped by the inline viewport]_

_Inline in the chat, at 320px._

_[The embedding visualizer expanded to a full browser tab: the PCA projection of 90 labeled word embeddings in four categories]_

_Expanded to the full tab. The same file, and still private until shared._

_[The confusion-matrix visualizer: overall accuracy 84.8%, a five-class heatmap, and a per-class precision/recall/F1 table]_

_The confusion-matrix visualizer, built from pasted labels and counts._

> **Althea:** Here is the interactive embedding visualizer. It includes a pre-loaded dataset of 90 words across 4 categories. You can switch between "t-SNE" and "PCA" views using the dropdown, and use the search bar to highlight specific words (try "lion", "blue", or "doctor").
>
> _[interactive widget: Embedding Visualizer widget: projection dropdown on t-SNE, a search field, and a scatter of 90 word embeddings in four color-coded categories]_

_The embedding-space viewer. Hover for metadata; zoom and pan the neighborhoods._

## Share it

Every widget has a Share button. One click makes a public link. Anyone can open and interact without logging in, and you can toggle sharing off to revoke access. Send the sample-size calculator to your labmate; they use it in their browser rather than in your account.

![The Share button generating a public link for a widget](/case-studies/widget-share.webp)

_The Share button. Toggle it off and the link stops working._

![The HuggingFace model explorer widget, opened from its public share link](/case-studies/widget-hf-explorer-shared.webp)

_The HuggingFace explorer, opened from a public share link. No login on the other end._

## The sandbox

Widgets run in a sandboxed iframe under a strict content security policy, with no access to your session, cookies, or storage. Inside the frame they get full ES6, canvas, SVG, and keyboard interaction.

When the widget settles the question, [freeze the answer into a document](/documents) you can cite.
