@webmcpui/react

webmcpui

Agent-aware, framework-agnostic web components for the WebMCP era — accessible, form-associated controls an AI agent can fill, with Standard Schema validation.

Each <wmcp-*> element is a great, accessible form control first. When a WebMCP host is present, it can also expose itself as a tool an AI agent can discover and call — feature-detected, so it's a zero-cost no-op everywhere else.

Documentation → · Live demo →

Install

With a build tool (Vite, Next, Nuxt, anything):

pnpm add @webmcpui/core @webmcpui/tokens

import { defineComponents } from '@webmcpui/core';
import '@webmcpui/tokens/css'; // theme tokens (CSS custom properties)

defineComponents(); // registers <wmcp-input>, <wmcp-select>, …

<wmcp-input label="Email" name="email" type="email"></wmcp-input>

No build step (Webflow, WordPress, plain HTML) — one script tag, elements auto-register:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webmcpui/tokens/dist/css/tokens.css" />
<script src="https://cdn.jsdelivr.net/npm/@webmcpui/core/dist/webmcpui.global.js"></script>

<wmcp-input label="Email" name="email" type="email"></wmcp-input>

Deno / JSR:

deno add jsr:@webmcpui/core

Expose a control to an agent

Opt in with the expose attribute. The element registers a WebMCP tool on connect and removes it on disconnect:

<wmcp-input label="Email" name="email" type="email" expose></wmcp-input>
<!-- registers a "fill_email" tool an agent can call -->

It's feature-detected against document.modelContext (the WebMCP API) — a complete no-op when no agent host is present, so the control is always a good form control first. See the docs for details.

What ships

Form controls — expose a value an agent can set. Form-associated (real <form> participation via ElementInternals), accessible, and Standard Schema-validatable:

<wmcp-input> · <wmcp-textarea> · <wmcp-select> · <wmcp-checkbox> · <wmcp-radio-group>

Interaction primitives — expose an action an agent can trigger (or, for toast, a reading an agent can perceive):

<wmcp-button> · <wmcp-dialog> · <wmcp-menu> · <wmcp-tabs> · <wmcp-popover> · <wmcp-toast>

Packages

Package	Registry	What
@webmcpui/core	npm · JSR	The custom elements (built on Lit)
@webmcpui/tokens	npm	Design tokens — CSS custom properties, TS, Figma

This is a pnpm + Turborepo monorepo; the webmcpui.com site lives in apps/web.

Status

WebMCP is early — in a public origin trial in Chrome 149+ — and the API surface is still shifting. Everything here is additive and feature-detected, so adopting webmcpui costs nothing today and lights up as hosts ship. Expect breaking changes before 1.0.

License

MIT Gary Pfaff (Pfaff Digital)