# webmcpui

> Framework-agnostic, WebMCP-native web components: accessible form controls an agent can fill and interaction primitives an agent can drive, with Standard Schema validation and design tokens. Each element is a good HTML control first and, when a WebMCP host is present, exposes itself as a tool an agent can call — additive and feature-detected.

## Getting started
- [Introduction](https://webmcpui.com/docs): Agent-aware web components for the WebMCP era — framework-agnostic form and interaction primitives with Standard Schema validation.
- [Installation](https://webmcpui.com/docs/installation): Add webmcpui to your project with a build tool, or drop a single script tag — no build step required.
- [Validation](https://webmcpui.com/docs/validation): Bring any Standard Schema validator — Zod, Valibot, ArkType — and wire it straight into form validation.
- [WebMCP exposure](https://webmcpui.com/docs/webmcp): How a form control becomes an imperative WebMCP tool an agent can discover and call.
- [Testing](https://webmcpui.com/docs/testing): Exercise WebMCP exposure end-to-end with the bundled fake agent.
- [React & Vue](https://webmcpui.com/docs/frameworks): Idiomatic, typed React and Vue components that wrap the core custom elements — with unstyled and SSR guidance.

## Elements
- [<wmcp-input>](https://webmcpui.com/docs/elements/input): A text input — the canonical form control, with type variants, validation, and WebMCP exposure.
- [<wmcp-textarea>](https://webmcpui.com/docs/elements/textarea): A multi-line text control with the same validation and WebMCP exposure as the input.
- [<wmcp-select>](https://webmcpui.com/docs/elements/select): A native select with declarative options and an enum-typed WebMCP tool schema.
- [<wmcp-checkbox>](https://webmcpui.com/docs/elements/checkbox): A boolean control whose WebMCP tool takes a checked argument.
- [<wmcp-radio-group>](https://webmcpui.com/docs/elements/radio): An accessible radio group with roving focus and an enum-typed WebMCP tool.

## Interaction
- [<wmcp-button>](https://webmcpui.com/docs/elements/button): A themeable button that exposes an action — not a value — for an agent to trigger.
- [<wmcp-dialog>](https://webmcpui.com/docs/elements/dialog): A modal dialog whose exposed action is opening — the agent surfaces it, the human confirms.
- [<wmcp-menu>](https://webmcpui.com/docs/elements/menu): A menu button whose exposed action is parameterized — the agent picks which item.
- [<wmcp-tabs>](https://webmcpui.com/docs/elements/tabs): A tab set whose exposed action switches a persistent active tab — the first stateful interaction primitive.
- [<wmcp-popover>](https://webmcpui.com/docs/elements/popover): A non-modal anchored floating panel — and a tooltip mode — whose exposed action is opening.
- [<wmcp-toast>](https://webmcpui.com/docs/elements/toast): A notification region whose agent surface is perceiving, not actuating — the agent reads the toasts the page throws.
- [<wmcp-switch>](https://webmcpui.com/docs/elements/switch): A form-associated on/off toggle an agent can flip by setting a boolean.
- [<wmcp-tooltip>](https://webmcpui.com/docs/elements/tooltip): A hover/focus tooltip — a thin preset of the popover, defaulted to hover with role=tooltip.

## Presentational
- [<wmcp-badge>](https://webmcpui.com/docs/elements/badge): A small status/label pill. Purely presentational — no agent tool.
- [<wmcp-alert>](https://webmcpui.com/docs/elements/alert): An inline callout for a persistent message, with severity roles for a11y.
- [<wmcp-avatar>](https://webmcpui.com/docs/elements/avatar): A user/entity avatar that falls back to initials when the image is missing.
- [<wmcp-progress>](https://webmcpui.com/docs/elements/progress): A determinate or indeterminate progress bar with progressbar a11y.
- [<wmcp-separator>](https://webmcpui.com/docs/elements/separator): A thin rule dividing content, horizontal or vertical.
- [<wmcp-card>](https://webmcpui.com/docs/elements/card): A themeable surface container that slots its content.
- [<wmcp-skeleton>](https://webmcpui.com/docs/elements/skeleton): A decorative loading placeholder that pulses while content loads.
- [<wmcp-spinner>](https://webmcpui.com/docs/elements/spinner): An indeterminate loading indicator with an accessible label.

## Examples
- [Examples](https://webmcpui.com/docs/examples): Real-world, multi-tool WebMCP demos — everyday and business workflows an agent can drive end to end.
- [Recipe → grocery cart](https://webmcpui.com/docs/examples/recipe-cart): Paste a recipe and watch an agent fill a shopping cart through page-level and element WebMCP tools.
- [Book a table in one sentence](https://webmcpui.com/docs/examples/restaurant-booking): One natural-language sentence becomes three filled selects and a confirmation dialog — all element-exposed tools.
- [Brain-dump → to-do list](https://webmcpui.com/docs/examples/brain-dump): Paste a rambling paragraph; the agent turns it into prioritized tasks and checks off what you already did.
- [Email → CRM lead](https://webmcpui.com/docs/examples/crm-lead): Paste a messy inquiry email; the agent extracts contact, company, budget, and need, fills the lead form, and files it.
- [Receipt → expense report](https://webmcpui.com/docs/examples/expense-report): Paste receipt text; the agent fills vendor, amount, date, and category, and files the expense row.
- [Ask the dashboard a question](https://webmcpui.com/docs/examples/dashboard): The agent sets the dashboard's filters, then reads the answer off the page — actuate and perceive in one flow.

## Full text
- [llms-full.txt](https://webmcpui.com/llms-full.txt): every doc page concatenated.