No jargon. One story, three librarians, and some things you can click.
Read this one first. The number-heavy demo makes more sense afterwards.
1The setup
Imagine a library with a catalog of 100,000 cards. You want to find about a dozen worth reading.
You can't go behind the desk yourself. You have to work through a librarian. That librarian is Claude.
Here's the only rule that matters: every single word the librarian says out loud costs you money and time.
That's what "tokens" and "context" mean. Words the librarian has to say or read. So the whole game is getting your dozen cards while making the librarian say as little as possible.
2Three librarians
Same library, same 100,000 cards, same goal. Press the buttons and watch what each one costs you.
Librarian A
reads everything aloud
You ask for the catalog. She reads two hundred cards out loud, then writes you a copy by hand. Want them sorted differently? She reads all two hundred aloud again, and rewrites the copy. Every time.
0
words spoken
0.0s of your life
Librarian B
hands you a booklet, badly
She gives you a proper printed booklet you can hold. Much nicer. But she still read every card aloud to make it, and to turn the page you have to ask her, and she reads them aloud all over again.
0
words spoken
0.0s of your life
Librarian C
points at the drawer
She says nine words: "Catalog's in that drawer, hundred thousand cards, help yourself." You flip through it yourself, as fast as you like. When you've found your twelve, you bring those twelve to her.
0
words spoken
0.0s of your life
3The one picture that explains it
The difference is simply who has to be standing in the room when you turn a page.
Librarian A🧑 you→🧠 Claude→🗄️ the cardsClaude in the middle
Librarian B🧑 you→🪟 booklet→🧠 Claude→🗄️ the cardsstill in the middle
Librarian C🧑 you→🪟 the drawer→🗄️ the cardsClaude stepped out
That's the whole thing. A widget is the drawer. Building it correctly means Claude can step out of the room while you use it, and step back in when you've got your twelve.
The trap is Librarian B. A pretty interface that still runs every click through Claude looks modern and saves you almost nothing. Most of the difference between B and C is invisible from the outside. It's a couple of lines in the code, and it decides whether you pay for every scroll.
4So what can the drawer actually look like?
Anything a web page can be. It really is that open. Click through these, they're all live.
↓ imagine each of these sitting inside your chat ↓
Agency
City
Score
Emails
Click any column heading to sort. In a real widget that sort hits your database directly, and Claude never hears about it.
A form beats twenty rounds of "which city? what size? what score?" typed into a chat. You see every option at once.
In queue
1,247
▲ 34
Emails found
918
▲ 12
Bounced
27
▼ 3
Replied
41
▲ 2
These numbers are updating right now, on their own. A chat message can't do that. It printed once and died.
drag to draw
Yes, really. The official examples include a 3D globe, a PDF reader, sheet music, and a whiteboard. It's a web page, so it can be a web page.
5The fine print on "anything"
Four real limits. None of them will stop what you'd want to build.
It lives in a locked room. The page runs in a sealed frame. It can't read your Claude conversation, your cookies, or anything else on screen. That's deliberate, and it's why Claude is willing to run someone else's code at all.
Bring your own everything. By default it can't pull files off the internet. Either bundle your fonts and libraries into the one file, or list the exact sites you need up front.
It talks through one door. The page can call the tools on your own server and nothing else. It can't reach out to random services on its own.
Camera, microphone and the like need asking. There's a field where you declare what you need, and the user approves it.
Everything else is open. Any framework or none, any layout, any interaction. React, Vue, Svelte, plain JavaScript. The starter templates cover all of them.
If you can picture it as a web page, it can be a widget.
The hard part was never the drawing. It's remembering to be Librarian C and not Librarian B.