AI Agent Flow

Installation

Architecture

This component is built using a hybrid approach of HTML DOM nodes layered over an SVG canvas for drawing Bezier curves (<path>).

• DOM Nodes: The nodes are standard React div elements, absolutely positioned using Framer Motion (<motion.div>) to allow for smooth layout shifts, continuous floating animations, and hardware-accelerated CSS filters like backdrop-blur and glowing drop-shadows.
• SVG Canvas: An overlay SVG handles the Bezier curves. We map through a predefined set of directed edges to draw the connections.
• Animated Flows: To simulate "packets" of data moving through the LLM pipeline, we use framer-motion to animate the pathLength property of glowing gradient paths, accompanied by an <animateMotion> SMIL animation on a glowing white dot that traces the curve perfectly.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AIAgentFlow } from "@/components/creative/ai-agent-flow";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AIAgentFlow } from "@/components/creative/ai-agent-flow";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AIAgentFlow
      />
    </div>
  );
}