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

Web page: https://candor.themethodic.com/patterns/ag-ui-react

## Components

- **useAgUi** (`use-ag-ui`, free; https://candor.themethodic.com/docs/use-ag-ui.md): Connects an AG-UI endpoint: messages, composer props, interrupts.
- **AG-UI** (`ag-ui`, free; https://candor.themethodic.com/docs/ag-ui.md): The pure mapping from AG-UI events to Candor messages, approvals and usage.
- **Thread** (`thread`, free; https://candor.themethodic.com/docs/thread.md): Where the messages go.
- **Message** (`message`, free; https://candor.themethodic.com/docs/message.md): One message, with tool calls and reasoning.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): Where the person asks, and stops a run.

## Install

```bash
npx candor-ui add use-ag-ui thread message
```

## Notes

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