"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",
translate: "translate",
evaluate: "evaluate",
decision: "decision",
optimize: "optimize",
complete: "complete",
};
const nodes = [
{
id: nodeIds.start,
type: "workflow",
position: { x: 0, y: 200 },
data: {
label: "Start Workflow",
description: "Initialize translation workflow",
handles: { target: false, source: true },
content: "Input: Text + Target Language (es)",
footer: "Model: GPT-4o-mini",
},
},
{
id: nodeIds.translate,
type: "workflow",
position: { x: 500, y: 200 },
data: {
label: "Initial Translation",
description: "Generate first translation",
handles: { target: true, source: true },
content: "Translate text preserving tone and cultural nuances",
footer: "Step 1 • Fast model",
},
},
{
id: nodeIds.evaluate,
type: "workflow",
position: { x: 1000, y: 200 },
data: {
label: "Evaluate Quality",
description: "Assess translation quality",
handles: { target: true, source: true },
content: "Check: Quality Score, Tone, Nuance, Cultural Accuracy, Issues",
footer: "Model: GPT-4o",
},
},
{
id: nodeIds.decision,
type: "workflow",
position: { x: 1500, y: 200 },
data: {
label: "Quality Check",
description: "Meets quality threshold?",
handles: { target: true, source: true },
content: "Score ≥ 8 && Tone ✓ && Nuance ✓ && Cultural ✓",
footer: "Max iterations: 3",
},
},
{
id: nodeIds.optimize,
type: "workflow",
position: { x: 550, y: -120 },
data: {
label: "Optimize Translation",
description: "Improve based on feedback",
handles: { target: true, source: true },
content: "Apply suggestions and fix specific issues",
footer: "Model: GPT-4o",
},
},
{
id: nodeIds.complete,
type: "workflow",
position: { x: 2000, y: 200 },
data: {
label: "Complete",
description: "Workflow finished",
handles: { target: true, source: false },
content: "Final translation meets all quality criteria",
footer: "Status: Success",
},
},
];
const edges = [
{
id: "edge1",
source: nodeIds.start,
target: nodeIds.translate,
type: "animated",
},
{
id: "edge2",
source: nodeIds.translate,
target: nodeIds.evaluate,
type: "animated",
},
{
id: "edge3",
source: nodeIds.evaluate,
target: nodeIds.decision,
type: "animated",
},
{
id: "edge4",
source: nodeIds.decision,
target: nodeIds.complete,
type: "animated",
label: "Quality Met",
},
{
id: "edge5",
source: nodeIds.decision,
target: nodeIds.optimize,
type: "temporary",
label: "Needs Improvement",
},
{
id: "edge6",
source: nodeIds.optimize,
target: nodeIds.evaluate,
type: "animated",
label: "Re-evaluate",
},
];
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">Evaluator-Optimizer Pattern</h3>
<p className="text-muted-foreground text-xs">
Iterative quality improvement loop
</p>
<div className="flex gap-1">
<Badge variant="secondary">Translation</Badge>
<Badge variant="secondary">AI Evaluation</Badge>
</div>
</div>
</Panel>
</Canvas>
);
export default Example;
Registry components
