AI Agent Workflow
A free AI agent workflow section for React and Next.js.
Agent hand-off
A request, routed to a clear outcome
Follow one support request as specialist agents gather evidence, use tools and prepare a recorded resolution.
- The request contains two captures for the same order. The original charge and its timestamp are attached to the case.
- The purchase is inside the refund window and the account has no prior reversal. A refund is permitted after the duplicate capture is confirmed.
- A single duplicate capture is marked for reversal. The original payment remains untouched until an authorised reviewer confirms the case.
- The case is ready for review with the evidence, policy check and proposed correction recorded together. No payment has been changed by this example.
Current outcome
Intake Agent
Workflow outcome
The request contains two captures for the same order. The original charge and its timestamp are attached to the case.
Step 1 of 4
Customise
Code
<AIAgentWorkflow
steps={steps}
/>AI Agent Workflow is a free animated workflow section for React and Next.js, styled with Tailwind. It presents a supplied request moving through specialist agents, tool use and a recorded outcome.
Use it to explain one linear hand-off without making live API calls: the ordered step data stays readable in the document, controls can be driven by your application, and reduced motion exposes every supplied outcome at once.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/feat-ai-agent-workflowUsage
import {
AIAgentWorkflow,
type AgentStep,
} from "@/components/feat-ai-agent-workflow";
const steps: AgentStep[] = [
{
id: "intake",
agent: "Intake Agent",
action: "Classifies the request",
tool: "Request search",
output: "The request and matching records are attached to the case.",
},
{
id: "policy",
agent: "Policy Agent",
action: "Checks the applicable rules",
tool: "Policy rules",
output: "The supplied details meet the stated review requirements.",
},
{
id: "review",
agent: "Review Agent",
action: "Prepares the human hand-off",
tool: "Review queue",
output: "The evidence is ready for an authorised person to decide.",
},
];
export default function Page() {
return <AIAgentWorkflow steps={steps} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | AgentStep[] | required | Three to six ordered steps animate. Other counts render as a static ordered list. |
| activeStep | number | undefined | Controlled active index. Finite values are truncated and clamped to the supplied steps. |
| onStepChange | (index: number) => void | undefined | Called when autoplay or a user control advances to another step. |
| interval | number | 3 | Seconds each step holds before autoplay advances. Set to zero to disable autoplay. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
AI Agent Workflow reads its panel, active-node, rail and inactive-node colours from five scoped CSS variables with semantic fallbacks. Set them on an ancestor to align the relay with a product surface; keep the supplied step data and internal motion implementation unchanged.
<AIAgentWorkflow steps={steps} interval={0} />
:root {
--agent-workflow-surface: var(--surface, var(--background));
--agent-workflow-panel: var(--surface, var(--background));
--agent-workflow-accent: var(--primary);
--agent-workflow-rail: var(--border);
--agent-workflow-node: var(--background);
}Frequently asked questions
- Is AI Agent Workflow free for commercial use?
- Yes. AI Agent Workflow is MIT licensed and may be used in personal and commercial projects.
- Does AI Agent Workflow call agents or external tools?
- No. It presents the ordered steps and outcomes supplied through props. It does not make API calls, stream tokens or execute tools.
- How can I control the active step and autoplay?
- Pass activeStep and update it from onStepChange for controlled use. Set interval to zero to stop autoplay, or set prefers-reduced-motion to reduce to show every supplied outcome without autoplay.