PfaffDigital
Open Source

webMCP UI
Components Your AI Can Drive

Our open-source library of agent-aware web components. 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. MIT licensed, built in the open.
View on GitHubRead the Docs

21

Custom Elements

3

Primitive Families

2

Distribution Channels

MIT

Licensed & Open Source

Live Simulation

Watch an Agent
File a Lead From a Messy Email

This is the "Email → CRM lead" workflow from the webMCP UI examples. The agent reads a pasted email, discovers the exposed tools on the page, and fills each control exactly as if a human typed it — validated, announced, and human-gated at submit.
inbox — forwarded inquiry
Hey — Jordan here from Meridian Outfitters.
Our storefront is ancient and we want a rebuild
that AI assistants can actually use. Budget is
somewhere around $20–30k. Reach me at
[email protected]. Thanks!
Agent Standby
Scroll into view to start the agent
new-lead.html — five exposed <wmcp-*> controls
<wmcp-input expose>
Jane Appleseed
<wmcp-input expose>
[email protected]
<wmcp-input expose>
Company, Inc.
<wmcp-input expose>
Select a range
<wmcp-input expose>
Describe the project
How It Works

One Element.
A Human Control and an Agent Tool.

01

Drop in an element

Add it to any page — Webflow, WordPress, Nuxt, Next, plain HTML. It is a proper, accessible, form-associated control first: real labels, native validation, error live regions.

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

Opt into exposure

Add the expose attribute. The element registers a WebMCP tool when it connects and removes it when it disconnects. Feature-detected — a complete no-op when no agent is present.

<wmcp-input
  label="Work email"
  name="email"
  type="email"
  expose>   <!-- that's it -->
</wmcp-input>
03

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.

// agent-side
email.set("[email protected]")
// → validated against your schema
// → aria live region announced
// → form state updated
The Catalog

21 Elements.
Three Families of Primitives.

Form controls expose a value an agent can set. Interaction primitives expose an action an agent can trigger. Presentational primitives round out the UI — same tokens, no agent surface. Every tag links to its live docs and demo.

Form Controls

Expose a value an agent can set. Form association via ElementInternals, Standard Schema validation, accessible error messaging.

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

Interaction Primitives

Expose an action an agent can trigger — or, for toast, a reading an agent can perceive. Click, open, switch, pick, read.

<wmcp-button> <wmcp-dialog> <wmcp-menu> <wmcp-tabs> <wmcp-popover> <wmcp-toast> <wmcp-switch> <wmcp-tooltip>

Presentational

Accessible, themed building blocks with no agent surface — pure UI that shares the same design tokens and theming pipeline.

<wmcp-badge> <wmcp-alert> <wmcp-avatar> <wmcp-progress> <wmcp-separator> <wmcp-card> <wmcp-skeleton> <wmcp-spinner>
Features

Built Form-First.
Agent-Ready on Purpose.

Framework-Agnostic
Standard custom elements built with Lit. Drop them into React, Vue, Svelte, Solid, Angular, or plain HTML — no wrapper required. Typed wrappers ship as @webmcpui/react and @webmcpui/vue for framework-native ergonomics.
Standard Schema Validation
Bring Zod, Valibot, or ArkType — no bespoke schema language. Validation drives aria-invalid, live error messages, and native form constraints, for humans and agents alike.
First-Class WebMCP Exposure
Opt in with one attribute and each control registers an imperative WebMCP tool an agent can call. Feature-detected against document.modelContext — zero cost when no agent host is present.
No-Build CDN
One script tag auto-registers every element. Perfect for Webflow, WordPress, or hand-written HTML — the same source of truth as the ESM package, distributed two ways.
Design Tokens
Theming via CSS custom properties from a Style Dictionary pipeline — light and dark out of the box, with tokens published for CSS, TypeScript, and Figma.
Accessible by Default
Real form association through ElementInternals: labels, error live regions, and native form participation come built in. Good HTML first — always.
Examples

Not Just Controls.
Whole Workflows an Agent Can Drive.

Six live, multi-tool demos on webmcpui.com — everyday and business workflows an agent can drive end to end. Each one runs in the browser against real exposed elements.
Install

Add It in One Line.

Use the ESM package with your build tool, or drop a single script tag — no build step required. Published on npm and JSR, MIT licensed.
terminal
$ pnpm add @webmcpui/core @webmcpui/tokens
import { defineComponents } from '@webmcpui/core'
import '@webmcpui/tokens/css' // theme tokens (CSS custom properties)

defineComponents() // registers <wmcp-input> and the other <wmcp-*> elements
Core Maintainers

Built in the Open.
Maintained With Intent.

webMCP UI is developed and maintained by the team at Pfaff Digital — the same standards we bring to client work, given back to the web.

Gary Pfaff

Creator & Core Maintainer

Founder, Pfaff Digital

20+ years of design and development experience. Built webMCP UI so the agent-ready web starts with good, accessible HTML — not scraping hacks.

About Pfaff Digital

Errol Keith

Core Maintainer

webMCP UI

Core maintainer shaping the component architecture, validation pipeline, and the WebMCP exposure model across every element family.

View on GitHub
FAQ

webMCP UI, Answered

Build Forms for People — and the Agents Working for Them

webMCP UI is how we think the agent-ready web should be built: accessible HTML first, agent exposure as an attribute. Use it in your project, or let us build your agent-ready interface for you.
Build Something Agent-ReadyStar on GitHub
MIT licensed — free for commercial use
Docs, live demos, and llms.txt at webmcpui.com
WebMCP implementation services from the maintainers