Introduction
webmcpui is a framework-agnostic, WebMCP-native web component library. Every element is a proper, accessible HTML control first and, when you opt in, also registers an imperative WebMCP tool an agent can call.
Three families of primitives:
- Form controls expose a value an agent can set —
<wmcp-input>,<wmcp-textarea>,<wmcp-select>,<wmcp-checkbox>,<wmcp-radio>/<wmcp-radio-group>. Shared behavior (form association, validation, WebMCP exposure, theming) lives in aWmcpFormControlbase. - Interaction primitives expose an action an agent can trigger —
<wmcp-button>,<wmcp-dialog>,<wmcp-menu>,<wmcp-tabs>,<wmcp-popover>,<wmcp-switch>,<wmcp-tooltip>— or, for<wmcp-toast>, a reading an agent can perceive. They share aWmcpAction/WmcpExposablebase. - Presentational primitives are accessible, themed controls with no agent surface —
<wmcp-badge>,<wmcp-separator>,<wmcp-alert>,<wmcp-progress>,<wmcp-avatar>.
Building in React or Vue? @webmcpui/react and @webmcpui/vue wrap these elements with typed, idiomatic components — same behavior, framework-native ergonomics.
Why it exists
The same control a person operates by hand, an agent should be able to operate by calling a tool — fill a field, click a button, open a dialog, switch a tab, or read a notification. webmcpui's elements are good, accessible controls first; agent-exposure is additive and opt-in.
It's all feature-detected: with no agent present (the common case today), the WebMCP layer is a complete no-op, so your controls are always good HTML.
One source of truth, two channels
Vanilla custom elements built with Lit, distributed two ways:
- an ESM package for build tools (
@webmcpui/core), and - a single-file CDN bundle for no-build environments (Webflow, WordPress, plain HTML).
Next steps
- Installation — add it to your project, with or without a build step.
- Validation — bring any Standard Schema validator.
- WebMCP exposure — how elements become agent tools.
- Testing — exercise exposure with the fake agent.