Agent-aware web components.
Components your AI can drive.
Framework-agnostic custom elements with Standard Schema validation and first-class WebMCP exposure — so the same control a person types into, an agent can drive.
Drops into anything that renders HTML
One element. A human control and an agent tool.
Drop in an element
Add <wmcp-input> to any page. It is a proper, accessible, form-associated control first.
Opt into exposure
Add the `expose` attribute. The element registers a WebMCP tool on connect, removes it on disconnect.
Agents fill the form
A WebMCP-aware agent discovers the tool and sets the value exactly as if a user typed it — validated and announced. Submitting stays a deliberate step the browser can gate behind user consent.
Form controls to fill. Interactions to drive.
Start with the form primitives — accessible, validated, agent-fillable. Then reach for the interaction primitives: each exposes an action an agent can trigger, not just a value to set.
<wmcp-button>
A click an agent can trigger — submit, reset, any action.
<wmcp-dialog>
Modals the agent opens and the human confirms.
<wmcp-menu>
Pick an item — a parameterized action over an enum.
<wmcp-tabs>
Switch a persistent, agent-movable selection.
<wmcp-popover>
Anchored panels and tooltips, opened on demand.
<wmcp-toast>
Notifications an agent can read to see what happened.
Not just controls. Whole workflows an agent can drive.
Paste a recipe and the cart fills itself. Paste an email and the CRM form files itself. Six live demos — see all examples.
Recipe → grocery cart
Paste a recipe; the agent adds every ingredient to your cart.
Restaurant booking
“Table for 4 on Friday at 7” becomes a filled form you confirm.
Brain-dump → to-dos
A rambling paragraph becomes prioritized tasks.
Email → CRM lead
A messy inquiry email files itself as a clean lead.
Receipt → expense
Vendor, total, date, category — filed without retyping.
Dashboard control
The agent sets the filters, then reads the answer off the page.
Built form-first. Agent-ready on purpose.
Framework-agnostic
Standard custom elements built with Lit. Drop them into React, Vue, Svelte, or plain HTML — no wrapper required.
Standard Schema validation
Bring Zod, Valibot, or ArkType. Validation drives aria-invalid, live error messages, and native form constraints.
WebMCP exposure
Opt in with `expose` and each control registers an imperative WebMCP tool an agent can call — feature-detected, zero-cost when absent.
No-build CDN
One script tag auto-registers every element. Perfect for Webflow, WordPress, or hand-written HTML.
Design tokens
Theming via CSS custom properties from a Style Dictionary pipeline — light and dark out of the box.
Accessible by default
Real form association through ElementInternals: labels, error live regions, and form participation come built in.
Add it in one line.
Use the ESM package with your build tool, or drop a single script tag — no build step required.
pnpm add @webmcpui/core @webmcpui/tokens