Patterns / AG-UI in React

AG-UI React components

AG-UI is an event protocol between agents and front ends. Many agent frameworks speak it. useAgUi connects one to Candor: give it your endpoint and it returns messages for Thread and Message, props for Composer, and the interrupts waiting on a person.

A run that ends on an interrupt shows it in approvals. Answer each with respond; once every open interrupt has an answer, the next run starts with resume, approved or cancelled with the reason.

fromAgUiEvents is the mapping underneath, as a pure function, if you'd rather manage the connection yourself.

The components

  • useAgUiFreeConnects an AG-UI endpoint: messages, composer props, interrupts.
  • AG-UIFreeThe pure mapping from AG-UI events to Candor messages, approvals and usage.
  • ThreadFreeWhere the messages go.
  • MessageFreeOne message, with tool calls and reasoning.
  • ComposerFreeWhere the person asks, and stops a run.

See it working

Live in the examples: AG-UI

Install

With the shadcn CLI

Each component brings in what it depends on. These are free (MIT).

Good to know

  • Candor doesn't run frontend tools for you. Mentions are sent as structured references in forwardedProps, not pasted into the text.