@zetesis/agent-ui

Drop-in chat surface for Payload-backed agents, built on top of assistant-ui and the AG-UI protocol.

The package speaks AG-UI end-to-end: events from the agent runtime are streamed unchanged to the React client. Two CUSTOM events are reserved for portal-specific concerns:

• usage — daily token budget snapshot, emitted by the BFF before and after each run so the UI can render the budget bar.

Tool-call results and RAG sources travel inside the standard AG-UI TOOL_CALL_* events; the package extracts and renders them.

Install

pnpm add @zetesis/agent-ui @assistant-ui/react react react-dom

Import the stylesheet once at the app root:

import '@zetesis/agent-ui/styles.css'

Usage

import { AgentChatProvider, AgentThread, AgentThreadList } from '@zetesis/agent-ui'

export function ChatPage() {
  return (
    <AgentChatProvider endpoint="/api/chat" agentSlug="support">
      <div className="flex h-screen">
        <aside className="w-72 border-r"><AgentThreadList /></aside>
        <main className="flex-1"><AgentThread welcomeTitle="Hola" /></main>
      </div>
    </AgentChatProvider>
  )
}

The provider expects a same-origin endpoint that forwards AG-UI events from the agent runtime. The Payload plugin @zetesis/payload-agents-core ships a default handler that does this.