Internal explainer

Widgets in Claude

What they are, why they matter for anything with a lot of rows, and the one mistake that makes them pointless.

Four pages · every demo runs locally in your browser · nothing calls a real service

Start here: the librarian version

plain english

One story, three librarians, no jargon. Press four buttons and watch what each one costs you. Ends with a live gallery of what a widget can actually be: a sortable table, a form, a self-updating dashboard, a drawing pad.

Read this first →

The same session, three ways

interactive

The version with numbers. Run the identical eight actions through three builds. It makes you wait through the spinner, shows who is in the loop for every click, and tracks both the token bill and the seconds you lose.

Try the demo →

How a widget actually works

reference

The mechanism in six short sections. What the server declares, how it renders, what it can and cannot touch, and the two commands that scaffold one for you.

Read →

100,000 rows and the context window

the details

Does a widget save you from the token blowup? Only if you build it to. The three channels, which one the model reads, and the field that is actually a guarantee rather than a convention.

Read →

The short version, if you only read one thing. A widget is a small web page that appears inside the chat instead of Claude typing out a wall of text.

It does not save you anything automatically. Build it carelessly and you get a nicer screen for the same bill. Build it correctly and Claude steps out of the room while you click, then steps back in when you have your answer.

Official docs: MCP Apps overview · build guide · example widgets