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
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.