ai-elements-workflow

AI Elements 工作流

本技能为使用 Vercel AI Elements 和 React Flow 构建工作流可视化提供全面指导。

何时使用

• 构建基于节点的交互式工作流界面
• 创建流程图可视化
• 实现支持自定义节点和边的图表编辑器
• 为 AI 应用添加工作流可视化

设置

1. 创建 Next.js 项目

npx create-next-app@latest ai-workflow && cd ai-workflow

在项目设置中选择使用 Tailwind。

2. 安装 AI Elements

npx ai-elements@latest

如果尚未配置，这也会同时设置 shadcn/ui。

3. 安装 React Flow

npm i @xyflow/react

4. 添加组件

按需安装工作流组件：

npx ai-elements@latest add canvas
npx ai-elements@latest add node
npx ai-elements@latest add edge
npx ai-elements@latest add connection
npx ai-elements@latest add controls
npx ai-elements@latest add panel
npx ai-elements@latest add toolbar

构建工作流

导入组件

'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 { Toolbar } from '@/components/ai-elements/toolbar';
import { Button } from '@/components/ui/button';

定义节点 ID

const nodeIds = {
  start: 'start',
  process1: 'process1',
  decision: 'decision',
  output1: 'output1',
  output2: 'output2',
  complete: 'complete',
};

创建节点

const nodes = [
  {
    id: nodeIds.start,
    type: 'workflow',
    position: { x: 0, y: 0 },
    data: {
      label: 'Start',
      description: 'Initialize workflow',
      handles: { target: false, source: true },
      content: 'Triggered by user action',
      footer: 'Status: Ready',
    },
  },
  // Add more nodes...
];

创建边

使用 animated 表示活动路径，使用 temporary 表示条件/错误路径：

const edges = [
  {
    id: 'edge1',
    source: nodeIds.start,
    target: nodeIds.process1,
    type: 'animated',
  },
  {
    id: 'edge2',
    source: nodeIds.decision,
    target: nodeIds.output2,
    type: 'temporary', // For error/conditional paths
  },
];

定义节点类型

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>
      <Toolbar>
        <Button size="sm" variant="ghost">Edit</Button>
        <Button size="sm" variant="ghost">Delete</Button>
      </Toolbar>
    </Node>
  ),
};

定义边类型

const edgeTypes = {
  animated: Edge.Animated,
  temporary: Edge.Temporary,
};

渲染画布

const App = () => (
  <Canvas
    edges={edges}
    edgeTypes={edgeTypes}
    fitView
    nodes={nodes}
    nodeTypes={nodeTypes}
    connectionLineComponent={Connection}
  >
    <Controls />
    <Panel position="top-left">
      <Button size="sm" variant="secondary">Export</Button>
    </Panel>
  </Canvas>
);

export default App;

主要功能

功能	描述
自定义节点组件	使用 NodeHeader、NodeTitle、NodeDescription、NodeContent、NodeFooter 实现结构化布局
节点工具栏	通过 Toolbar 组件为节点附加上下文操作
连接柄配置	使用 handles: { target: boolean, source: boolean } 控制连接
边类型	Edge.Animated 用于活动流，Edge.Temporary 用于条件路径
连接线	拖动创建新连接时的样式化贝塞尔曲线
控件	放大/缩小和适应视图按钮
面板	将自定义 UI 放置在画布上的任意位置

组件参考

有关每个组件的详细 props 和 API 文档，请参见 references/components.md。