Is Agent Feedback Loop free to use?

Agent Feedback Loop is a Premium AI Canvas component. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.

How do I install Agent Feedback Loop?

Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.

What is Agent Feedback Loop built with?

Agent Feedback Loop is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Agent Feedback Loop?

Common uses include AI Agent Workflow Diagram, Human-in-the-Loop Workflow, and AI Automation Landing Page. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Agent Feedback Loop with AI?

Yes. Open "Remix with AI" on this page to read the setup and the constants Agent Feedback Loop is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact component, install it with the one-command CLI.

Agent Feedback Loop

An isometric widget of six AI agent stages in a loop.

PremiumWidgetsAI Agent Workflow DiagramHuman-in-the-Loop WorkflowAI Automation Landing Page

Add to your projectPremium component

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
stages	`AgentFeedbackLoopStage[]`	AGENT_FEEDBACK_LOOP_STAGES	The six stage names and descriptions, left to right. The drawings stay tied to position, so entry 0 is always the card fan and entry 5 the tray.
feedbackLabel	`string`	'Feedback'	The caption under the cube on the loop.
labels	`'hover' \| 'always'`	'hover'	Whether stage names appear on hover, focus and tap, or stay visible. On narrow screens they are always visible.
ambient	`boolean`	true	Whether the relay runs after the intro: a comet travels each conduit in turn, the stage it reaches briefly plays its motion and emits the next comet in its own colour, then the loop carries it through the cube back to Discover and the cycle repeats. Hovering a stage, or holding one with activeStage, pauses it. Off, the conduits are still, with a small notch at each entry port showing the direction, as with reduced motion.
playIntro	`boolean`	true	Whether the stages assemble one by one when the picture first scrolls into view. Off, it opens composed.
onStageClick	`(id: string, index: number) => void`	-	Called with the stage id and index on click, Enter or Space, and on a second tap on touch. The Feedback cube is a seventh button and calls it with 'feedback' and 6.
onStageHover	`(id: string \| null, index: number) => void`	-	Called with the stage id and index on pointer enter, focus or a first tap, and with null and -1 when it ends. The Feedback cube reports 'feedback' and 6.
activeStage	`string`	-	Id of a stage to hold in its hovered state, or 'feedback' for the cube. Hovering another stage still previews it.
paletteDark	`Partial<AgentFeedbackLoopPalette>`	-	Colour overrides for the dark theme, merged over AGENT_FEEDBACK_LOOP_DARK. `lanes` (string[]) is the series ramp: Discover and Extract take lane 1, Evaluate to Learn lanes 2 to 5, the Feedback cube lane 1 again; a shorter ramp wraps. Every coloured surface, glow, badge shadow and the travelling light is mixed from it, and glyphs on a lane switch to the dark ground where white would fall under 3:1.
paletteLight	`Partial<AgentFeedbackLoopPalette>`	-	Colour overrides for the light theme, merged over AGENT_FEEDBACK_LOOP_LIGHT, `lanes` included. The light lanes are fills on white tiles: keep each deep enough that white glyphs on it clear 3:1 (the default amber does at 3.19:1), or the glyphs switch to the dark ground.
tuning	`Partial<AgentFeedbackLoopTuning>`	-	Timing and motion overrides, merged over AGENT_FEEDBACK_LOOP_TUNING.
className	`string`	-	Extra classes merged onto the root element.

About Agent Feedback Loop

Agent Feedback Loop draws an AI agent pipeline as six isometric objects in a row, from Discover through Extract, Evaluate, Review and Activate to Learn, with a thin line carrying the outcome back through a small glass cube. Each stage assembles in turn as it scrolls into view, and hovering, focusing or tapping one lifts it into a named exploded view. A coloured light then relays around the circuit, one hue per stage. Motion drives the assembly and Tailwind CSS switches the light and dark palettes. Twelve props take your own stage names, colours and timing. It suits AI agent product pages, workflow explainers and automation docs.

Built with

MotionTailwind CSS

Frequently asked questions

Is Agent Feedback Loop free to use?: Agent Feedback Loop is a Premium AI Canvas component. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.
How do I install Agent Feedback Loop?: Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.
What is Agent Feedback Loop built with?: Agent Feedback Loop is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Agent Feedback Loop?: Common uses include AI Agent Workflow Diagram, Human-in-the-Loop Workflow, and AI Automation Landing Page. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Agent Feedback Loop with AI?: Yes. Open "Remix with AI" on this page to read the setup and the constants Agent Feedback Loop is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact component, install it with the one-command CLI.