Agent pipelinePro

An AI agent at work, live: a question is typed and sent, the agent calls its tools one at a time (each spins, then shows what it found), and the answer streams in token by token; slows under the pointer, pauses, and stacks on phones.

When to use

An AI agent at work, live: a question, tool calls one at a time, and the answer.
AI products showing what their agent does, or a live view of your agent's runs.

When not to use

Assistants that answer without tools: AI assistant or Message show it more plainly.
An audit of every step an agent took: Tool Activity lists them in full.

Usage

Agent pipeline with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { useEffect, useRef } from "react"
2import { AgentPipeline, type AgentFlowHandle } from "@/components/dashral/blocks/agent-pipeline"
3
4const agent = useRef<AgentFlowHandle>(null)
5useEffect(() => runs.on("run", (run) => agent.current?.send({ prompt: run.prompt, steps: run.steps, answer: run.answer })), [])
6
7<AgentPipeline ref={agent} mode="live" tools={tools} />

API reference

AgentPipeline

The section: a heading, the agent in a dotted panel with a Live badge and Pause, and a row of figures. Every part comes from props, with a sample agent by default.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"AI agents"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`tools`	`Tool[]` The tools the agent can call, and the sample conversations the demo plays.	`sample`
`scripts`	`Script[]`	`sample`
`stats`	`{ value: string; label: string }[]` The figures under the diagram; none hides the row.	`sample`
`mode`	`AgentFlowProps["mode"]` With your agent's own runs instead of the sample conversations (see AgentFlow's mode="live").	—
`ref`	`React.Ref<AgentFlowHandle>`	—

AgentFlow

An AI agent at work, as a diagram: a question is typed and goes to the agent as a hollow dot; the agent calls its tools one at a time (a hollow dot out, a spinner on the tool, a solid square back with what it found), then its answer streams to the answer card as dots, word by word. One requestAnimationFrame loop writes the SVG and the text directly; React doesn't render per frame. Side by side when there's room, stacked on a narrow container. The sample conversations in a loop by default; with mode="live", the runs you send (see AgentFlowHandle). The loop stops off screen, in a hidden tab, when paused and (live) once the last run is answered; with reduced motion it shows a question answered.

Prop	Type	Default
`tools`	`Tool[]` Required.	—
`scripts`	`Script[]` The sample conversations, played in a loop ("demo").	`sample`
`speed`	`number` How fast it plays: 1 is the usual pace, 2 twice as fast, 0 holds it still.	`1`
`paused`	`boolean` Brings it to rest where it is (easing down, not stopping in one frame).	`false`
`mode`	`"demo" \| "live"` "demo" plays the sample conversations in a loop; "live" plays a run only when you send it (see AgentFlowHandle).	`"demo"`
`ref`	`React.Ref<AgentFlowHandle>`	—
`className`	`string`	—

type Tool

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`description`	`string`	—
`detail`	`string`	—
`icon`	`LucideIcon`	—
`metric`	`{ unit: string; value?: number; base?: number }` A count beside its name, then `unit`. `value` is your own number, shown as it is. Without it the card counts calls itself: `base` plus every call the agent makes to it.	—

type Script

One question the agent answers: the tools it calls in turn (with what each found), then its answer.

Prop	Type	Default
`prompt`	`string`	—
`steps`	`{ tool: string; result: string }[]`	—
`answer`	`string`	—

type AgentFlowHandle

Plays your agent's runs (mode="live").

Prop	Type	Default
`send`	`(run: Script) => void` Plays one run: the question typed in, each tool call in turn with what it found, then the answer streamed out. Runs sent while one plays wait their turn; the last one stays answered until the next. Off screen, in a hidden tab or with reduced motion it shows answered at once, and its calls are counted.	—