Also called "MCP Apps." Same thing, two names. Don't let that trip you up.
A widget is a tiny web page that appears inside the chat, instead of Claude typing out a wall of text.
That's it. That's the whole idea.
Right now, when one of your tools returns data, everything has to squeeze through Claude's brain.
Now you want to change one thing. "Actually, filter to Boston only."
Every single tweak is a full round trip through the model. Ten filter changes = ten expensive round trips, and your context window fills up with ten copies of nearly the same table.
The tool hands back a little interactive page. You click around in it directly. Claude isn't involved.
Click a hundred times. Still zero extra tokens. The widget has its own private line to your server.
Those buttons are live. Pressing them talks straight to your MCP server. Claude just sits there.
Yes, but be precise about where the saving comes from.
| Moment | Cost | Why |
|---|---|---|
| The first tool call | same as before | The result still goes to Claude once, like any normal tool. |
| Every click after that | free | The widget calls your server on its own. Nothing enters the conversation. |
| Re-rendering the data | free | The widget draws the table. Claude never has to retype 500 rows. |
| Your context window | stays clean | One tool result instead of ten near-identical dumps. |
The rule of thumb: the more times you'd normally go back and forth over the same dataset, the more a widget saves you. A one-shot question saves nothing. A triage session over 200 rows saves a lot.
You already have MCP servers. A widget is two extra things bolted onto one you own.
On the tool you already have
Add a line saying "my UI lives at ui://my-thing/page.html."
A new resource on the same server
When Claude asks for that address, hand back one self-contained HTML file.
Claude Desktop drops that HTML into a locked-down iframe in the chat. The page can call your tools; it cannot touch Claude, your cookies, or anything else on the page. That's the whole security story.
There's an official scaffolding skill. Two commands in Claude Code:
/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps
Then just say "build me an MCP app that shows a color picker" and watch what it generates. Ten minutes, and the shape clicks.
Places where you currently get a link, a CSV, or a wall of text.
Now: CSV out, edit, CSV back in.
Widget: approve / reject / re-tier by clicking. Every click writes straight to the server.
Now: tool hands you a signed link, you open a browser tab.
Widget: coverage table and creative grid render right in the chat.
Now: Claude describes which fields are broken.
Widget: table with the bad cells in red and a "fix and re-run" button.
Now: matched atoms dumped as text into context.
Widget: pick the cards you want, only those go to Claude.
| Do I need Anthropic's approval? | No. Your own custom connector renders its own widgets. Approval only matters if you want to be listed in the public directory. |
| What plan? | Custom connectors need a paid plan. You're already there. |
| Where does it work? | Claude web, Claude Desktop, Cowork, iOS and Android. Also VS Code Copilot and a few others. |
| Is it on by default? | Yes, if the connector is enabled. Admins can switch the rendering off org-wide. |
| What language? | Plain HTML and JS. React, Vue, Svelte, or nothing at all. Your call. |
Official docs: MCP Apps overview · Build guide · Interactive connectors · ext-apps repo + examples