useAgUi

Free · MIT

Wires an AG-UI agent to Candor: messages for <Thread>/<Message>, props for <Composer>, and the interrupts waiting on a person. The same shape as useClaudeAgent and useCandorChat, so screens work with any of them.

const { messages, composer, approvals, respond } = useAgUi({ url: "/api/agent", agent }) <Thread footer={<Composer {...composer} />}>{messages.map((m) => <Message key={m.id} message={m} />)}</Thread>

A run that ends on an interrupt shows it in approvals. respond records the answer, and once every open interrupt has one, starts the next run with resume: approved → { status: "resolved", payload: { approved: true } }, denied → { status: "cancelled", payload: { approved: false, reason } }. Mentions are sent as structured forwardedProps.references, not pasted into the text.

Markdown

Preview

It's types and helpers, listed below.

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/use-ag-ui

Brings in: ag-ui, chat, composer · npm: @ag-ui/client@^1.0.3

Functions

useAgUi(options: UseAgUiOptions)

const { messages, composer, approvals, respond } = useAgUi({ url: "/api/agent", agent }) <Thread footer={<Composer {...composer} />}>{messages.map((m) => <Message key={m.id} message={m} />)}</Thread>

Types

UseAgUiOptions: Omit<FromAgUiOptions, "running" | "now"> & { /** Your AG-UI endpoint (LangGraph, Mastra, CrewAI, Google ADK, Pydantic AI…). It receives a RunAgentInput and streams events back. */ url: string headers?: Record<string, string> | undefined /** Replaces the global fetch, e.g. to add auth or to play a script in tests and demos. */ fetch?: typeof fetch | undefined /** Continue an existing thread instead