"use client";
import { Canvas } from "@/components/ai-elements/canvas";
import { Connection } from "@/components/ai-elements/connection";
import { Controls } from "@/components/ai-elements/controls";
import { Edge } from "@/components/ai-elements/edge";
import {
Node,
NodeContent,
NodeDescription,
NodeFooter,
NodeHeader,
NodeTitle,
} from "@/components/ai-elements/node";
import { Panel } from "@/components/ai-elements/panel";
import { Badge } from "@/components/ui/badge";
const nodeIds = {
start: "start",
orchestrator: "orchestrator",
workerCreate: "worker-create",
workerModify: "worker-modify",
workerDelete: "worker-delete",
complete: "complete",
};
const nodes = [
{
id: nodeIds.start,
type: "workflow",
position: { x: 0, y: 200 },
data: {
label: "Start Workflow",
description: "Initialize orchestrator workflow",
handles: { target: false, source: true },
content: "Input: Feature Request",
footer: "Setup: globalThis.fetch = fetch",
},
},
{
id: nodeIds.orchestrator,
type: "workflow",
position: { x: 500, y: 200 },
data: {
label: "Orchestrator",
description: "Plan the implementation",
handles: { target: true, source: true },
content:
"Generate implementation plan with files array (purpose, filePath, changeType)",
footer: "Model: openai/o4-mini • Step 1",
},
},
{
id: nodeIds.workerCreate,
type: "workflow",
position: { x: 1000, y: 0 },
data: {
label: "Worker: Create",
description: "Implement new files",
handles: { target: true, source: true },
content: "Expert at implementing new files following best practices",
footer: "Parallel execution",
},
},
{
id: nodeIds.workerModify,
type: "workflow",
position: { x: 1000, y: 200 },
data: {
label: "Worker: Modify",
description: "Update existing code",
handles: { target: true, source: true },
content: "Expert at modifying code while maintaining consistency",
footer: "Parallel execution",
},
},
{
id: nodeIds.workerDelete,
type: "workflow",
position: { x: 1000, y: 400 },
data: {
label: "Worker: Delete",
description: "Safely remove code",
handles: { target: true, source: true },
content: "Expert at safely removing code without breaking changes",
footer: "Parallel execution",
},
},
{
id: nodeIds.complete,
type: "workflow",
position: { x: 1500, y: 200 },
data: {
label: "Complete",
description: "Workflow finished",
handles: { target: true, source: false },
content: "All file changes executed successfully",
footer: "Status: Success",
},
},
];
const edges = [
{
id: "edge1",
source: nodeIds.start,
target: nodeIds.orchestrator,
type: "animated",
},
{
id: "edge2",
source: nodeIds.orchestrator,
target: nodeIds.workerCreate,
type: "animated",
},
{
id: "edge3",
source: nodeIds.orchestrator,
target: nodeIds.workerModify,
type: "animated",
},
{
id: "edge4",
source: nodeIds.orchestrator,
target: nodeIds.workerDelete,
type: "animated",
},
{
id: "edge5",
source: nodeIds.workerCreate,
target: nodeIds.complete,
type: "animated",
},
{
id: "edge6",
source: nodeIds.workerModify,
target: nodeIds.complete,
type: "animated",
},
{
id: "edge7",
source: nodeIds.workerDelete,
target: nodeIds.complete,
type: "animated",
},
];
const nodeTypes = {
workflow: ({
data,
}: {
data: {
label: string;
description: string;
handles: { target: boolean; source: boolean };
content: string;
footer: string;
};
}) => (
<Node handles={data.handles}>
<NodeHeader>
<NodeTitle>{data.label}</NodeTitle>
<NodeDescription>{data.description}</NodeDescription>
</NodeHeader>
<NodeContent>
<p className="text-sm">{data.content}</p>
</NodeContent>
<NodeFooter>
<p className="text-muted-foreground text-xs">{data.footer}</p>
</NodeFooter>
</Node>
),
};
const edgeTypes = {
animated: Edge.Animated,
temporary: Edge.Temporary,
};
const Example = () => (
<Canvas
connectionLineComponent={Connection}
edges={edges}
edgeTypes={edgeTypes}
fitView
nodes={nodes}
nodeTypes={nodeTypes}
>
<Controls />
<Panel position="top-left">
<div className="flex flex-col gap-2">
<h3 className="font-semibold text-sm">Orchestrator-Worker Pattern</h3>
<p className="text-muted-foreground text-xs">
Parallel execution of specialized workers
</p>
<div className="flex gap-1">
<Badge variant="secondary">Orchestrator</Badge>
<Badge variant="secondary">Workers</Badge>
<Badge variant="secondary">Parallel</Badge>
</div>
</div>
</Panel>
</Canvas>
);
export default Example;
