AgentUI

The shape of it

import { createRegistry, AgentRoot, AgentRenderer } from '@kibadist/agentui-react';

const registry = createRegistry({
  'data-table': DataTable,
  'info-card':  InfoCard,
});

export function App() {
  return (
    <AgentRoot endpoint="/api/agent">
      <AgentRenderer registry={registry} />
    </AgentRoot>
  );
}

The agent emits structured UIEvents through a tool call. Your frontend renders them through a whitelisted component registry you control. User interactions return as ActionEvents on the same SSE-backed session.

Why AgentUI

Typed, not stringly

Agents emit validated UIEvents — never raw HTML or JSX. The wire protocol is a Zod-validated schema, not a string contract.

Registry is the sandbox

Only components you register via createRegistry() can be rendered. There is no escape hatch — the model cannot reach your DOM.

Streaming, resumable, observable

SSE-backed sessions with Last-Event-ID resume, partial-JSON parsing during tool calls, and built-in metrics for parse latency and dropped events.

Bring your own LLM

Adapters for Anthropic, OpenAI, Google, DeepSeek via the Vercel AI SDK, or provider-native streams.

Install

React + a backend you build

pnpm add @kibadist/agentui-react @kibadist/agentui-validate

Next.js App Router

pnpm add @kibadist/agentui-react @kibadist/agentui-next @kibadist/agentui-ai

NestJS backend

pnpm add @kibadist/agentui-nest @kibadist/agentui-validate @kibadist/agentui-ai

Where to next

Getting started Clone the repo, set an API key, run the dev server, send your first prompt.

Concepts The problem AgentUI solves, the typed-event protocol, the four-step flow.

Wire protocol Every operation in the protocol, with JSON Patch deltas, capabilities, and the streaming partial-JSON parser.

Packages The eight published @kibadist/agentui-* packages and how they fit together.