gary pfaff
Let’s Connect
Menu
← Selected work

WebMCP UI / Open source / Interface systems

A UI Library Both People and AI Agents Can Drive

Framework-agnostic UI library featuring custom elements with Standard Schema validation and first-class WebMCP exposure — so the same control a person types into, an agent can drive.

My role
Creator · Design & engineering
Tools & disciplines
Web Components · TypeScript · WebMCP
Visit the project
WebMCP UI component library website

Overview

WebMCP UI is a framework-agnostic UI library built on custom elements. Every component validates its input with Standard Schema and exposes itself to AI agents through WebMCP as a first-class capability — the same control a person types into, an agent can drive.

The library ships as an open source package:

Problem

The web is gaining a second kind of user: AI agents. Most UI libraries are built exclusively for human interaction, leaving agents to scrape the DOM and guess at intent. WebMCP is a brand-new API for exposing page capabilities to agents, but building on it meant working at the bleeding edge:

  • A new API with little prior art or established patterns
  • A spec and standard that were still changing underneath the implementation
  • Limited established guidance for connecting agent interaction with familiar interface controls

Objective

  1. Ship framework-agnostic components as custom elements that work in any stack
  2. Validate all component input with Standard Schema, for humans and agents alike
  3. Expose every interactive control to agents through WebMCP by default
  4. Keep the developer experience simple despite the moving spec

Approach

Research

Tracked the evolving WebMCP spec and Standard Schema ecosystem to design an architecture that could absorb upstream changes without breaking consumers.

Design

Designed a component API where human input and agent input flow through the same validated path, so behavior stays consistent no matter who is driving.

Development

Built the components as standards-based custom elements with zero framework lock-in, published to both NPM and JSR.

Interaction consistency

Designed validation around a shared input path, with human and agent interaction treated as two ways to use the same control.

Solution

WebMCP UI delivers:

  • Custom elements that drop into any framework — or no framework at all
  • Standard Schema validation on every component, shared by human and agent input
  • First-class WebMCP exposure, so agents discover and drive controls without DOM scraping
  • Dual publishing to NPM and JSR for broad ecosystem reach

Conclusion

WebMCP UI stakes out a position on the cutting edge of the agentic web: interfaces shouldn’t need separate APIs for people and agents. By building validation and agent exposure into the components themselves, the library makes “agent-ready” the default state of a UI, not an afterthought.

Keep exploring

Black Glass Leads