ui-sdk ideas
Docs GitHub
snapshot() · query() · act()

Ideas for interfaces
agents can operate

Working demos built on ui-sdk — every component it renders joins an agent bridge, so a model reads and changes the UI through the components’ own APIs.

Northwind Studio
INVOICE
Total4 860,00 €
New bill
Vendor name
Northwind Studio GmbH
Invoice date
2026-11-02
Currency
EUR
Amount
4,860.00
Category
Choose…
Submit bill
act10 fields in one call
01Live demo

Fill a form from a document

Pick an invoice, a subscription or a hotel folio. The agent reads it and fills every field in one call — you see what changed, undo it, and approve the submit.

  • act()
  • data-agent-secret
  • undoSource
Project settings
Project name
Atlas
Region
Tokyo
Weekly digest
Delete project
Rename it to Atlas and move it to Tokyo
actRegion → “Tokyo”
The agent wants to press Delete project.
AllowDeny
@Region
@Retention
@Re
02Live demo

Chat UI kit

A composer with @-mentions and /-commands, tool-call cards and approvals — all ui-sdk parts — driving the settings screen next to it.

  • Trigger Menu
  • allow()
  • subscribe()
Up next
Region = Europe
00:1400:41
03Soon

Semantic session replay

Record “chose Region = Europe”, not DOM diffs. Replay it with act().

Europe, last quarter, over $10k
Region: EuropeJul 1 – Sep 30Amount ≥ 10,000
04Soon

Filters in plain words

One sentence sets the Select, Date Picker and Slider on a dashboard.

You set Plan to Pro
Agent set Name to Atlas
Agent set Region to Tokyo
⌘Z
05Soon

Undo only the agent

An app-wide history where ⌘Z reverts the agent and keeps your edits.

acme.app/settings
registerTools(agent, {
  allow: confirmWithUser
})
06Soon

Your site, ready for WebMCP

One line lets the browser’s own agent use your forms — the person brings the model.

@ui-sdk/react 0.1.0-beta.1 · by @kapish_dimaDemos run without an API key — recorded runs call the real bridge