DEV Community

Dalton C
Dalton C

Posted on

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

#webcomponents #ai #opensource #javascript

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:

  1. Agents are bad at generating HTML. They hallucinate class names, forget closing tags, and produce inconsistent markup.
  2. You need a full framework runtime to render the output. That means React, a bundler, and a build step.
  3. 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' }
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)