Agent UI Without React: Zero-Dependency Web Components for AI Agents

Dalton C — Sat, 04 Apr 2026 18:29:45 +0000

Every agent UI solution right now assumes React.

MCP Apps? React. AG-UI from CopilotKit? React. Vercel's generative UI? React. Google's A2UI? It's protocol-level but every reference implementation is React.

That's fine if you're already in a React app. But what if your agent just needs to open a modal? Or switch a tab? Or show a stat card? You shouldn't need create-next-app for that.

The problem with generative UI

The current approach to agent UI is "generative" - the agent produces markup or component trees on the fly. This has a few problems:

Agents are bad at generating HTML. They hallucinate class names, forget closing tags, and produce inconsistent markup.
You need a full framework runtime to render the output. That means React, a bundler, and a build step.
Every tool call dumps intermediate JSON into the chat that users don't care about.

A different approach: agents operate on components, not generate them

What if the components were already on the page, and the agent just controlled them?

That's what I built with Zephyr Framework. Its 14 web components (custom elements) with a built-in agent API. The agent doesn't generate UI, it interacts with existing components through structured methods:

// read what's on the page
const state = Zephyr.agent.getState()
// [{ tag: 'z-modal', id: 'settings', state: {}, actions: ['open', 'close'] }, ...]

// take an action
Zephyr.agent.act('#settings', 'open')

// create new components when needed
Zephyr.agent.render('#dashboard', {
  tag: 'z-stat',
  attributes: { 'data-label': 'Revenue', 'data-value': '$1.2M', 'data-trend': 'up' }
})

No HTML generation. No React. No build step. The components are web standards (Custom Elements v1) so they work in any framework or no framework at all.

Try it in 30 seconds

Save this as an HTML file and open it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zephyr-framework@0.3/zephyr-framework.min.css">
</head>
<body>
  <z-accordion>
    <z-accordion-item>
      <button slot="trigger">What is Zephyr?</button>
      <div slot="content">A UI framework built for AI agents. Zero JS. Pure CSS interactions.</div>
    </z-accordion-item>
  </z-accordion>

  <z-modal id="demo">
    <h2>Hello from Zephyr</h2>
    <p>An AI agent can open this with: <code>Zephyr.agent.act('#demo', 'open')</code></p>
  </z-modal>
  <button data-trigger="demo">Open Modal</button>

  <z-tabs>
    <button slot="tab" data-tab="one" data-active>First</button>
    <button slot="tab" data-tab="two">Second</button>
    <div slot="panel" data-tab="one">Tab content here.</div>
    <div slot="panel" data-tab="two">More content here.</div>
  </z-tabs>

  <script src="https://cdn.jsdelivr.net/npm/zephyr-framework@0.3/zephyr-framework.min.js"></script>
</body>
</html>

Two tags from a CDN. No npm, no bundler, no framework. Open your browser console and run Zephyr.agent.act('#demo', 'open') to see the agent API in action.

Connecting to an AI agent

Zephyr has integrations for however you're building your agent:

MCP Server - for Claude Desktop, Cursor, VS Code Copilot, Windsurf:

npx create-zephyr-framework my-app
cd my-app && npm start

Then point your MCP client at npx zephyr-mcp. Claude gets tools like zephyr_act, zephyr_get_state, zephyr_describe.

Vercel AI SDK - for custom agents using generateText/streamText:
The AI SDK example shows 7 tools defined with the AI SDK tool() function, bridged to Zephyr components via WebSocket.

Embedded widget - for deployed sites:

<script src="zephyr-agent-widget.js"></script>
<z-agent data-api-key="sk-ant-..." data-provider="anthropic"></z-agent>

Drop it on any page and visitors can chat with your UI.

How it compares

	Zephyr	MCP Apps	AG-UI (CopilotKit)	Generative UI (AI SDK)
Framework dependency	None (Web Components)	React	React	React
Build step required	No	Yes	Yes	Yes
Agent generates markup	No	Yes	No	Yes
Pre-built components	14 + dashboard + runtime	Define your own	Define your own	Define your own
MCP integration	Yes	Native	No	No
A2UI catalog	Yes	No	No	No

The tradeoff is clear: if you're deep in React and want maximum flexibility in what the agent can render, generative UI or AG-UI makes sense. If you want something that works everywhere with zero setup and pre-built components that agents know how to use out of the box, that's Zephyr's niche.

What's in the box

14 core components: accordion, modal, tabs, select, carousel, toast, dropdown, combobox, datepicker, infinite scroll, sortable, file upload, virtual list
Dashboard add-on: stat cards, data grids, charts, responsive dashboard layouts
Runtime add-on: streaming log viewer, command input, live ticker
Agent API: getState, act, describe, setState, render, compose, observe, record/replay, multi-agent locking
MCP server, A2UI catalog, TypeScript declarations, embedded chat widget

All MIT licensed, zero dependencies: https://github.com/daltlc/zephyr-framework