ai-elements-workflow

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

AI Elements Workflow

AI Elements 工作流

This skill provides comprehensive guidance for building workflow visualizations using Vercel AI Elements with React Flow.

本Skill提供了使用Vercel AI Elements结合React Flow构建工作流可视化的全面指导。

When to Use

适用场景

Building interactive node-based workflow interfaces
Creating process flow visualizations
Implementing diagram editors with custom nodes and edges
Adding workflow visualization to AI applications

构建基于节点的交互式工作流界面
创建流程可视化图表
实现带有自定义节点和连线的图表编辑器
为AI应用添加工作流可视化功能

Setup

搭建步骤

1. Create Next.js Project

1. 创建Next.js项目

bash

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

Choose to use Tailwind in the project setup.

bash

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

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

2. Install AI Elements

2. 安装AI Elements

bash

npx ai-elements@latest

This also sets up shadcn/ui if not configured.

bash

npx ai-elements@latest

如果未配置shadcn/ui，该命令也会自动完成其设置。

3. Install React Flow

3. 安装React Flow

bash

npm i @xyflow/react

bash

npm i @xyflow/react

4. Add Components

4. 添加组件

Install the workflow components as needed:

bash

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

根据需要安装工作流组件：

bash

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

Building a Workflow

构建工作流

Import Components

导入组件

tsx

'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';

tsx

'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';

Define Node IDs

定义节点ID

tsx

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

tsx

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

Create Nodes

创建节点

tsx

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...
];

tsx

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',
    },
  },
  // 添加更多节点...
];

Create Edges

创建连线

Use

animated

for active paths and

temporary

for conditional/error paths:

tsx

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
  },
];

为活跃路径使用

animated

类型，为条件/错误路径使用

temporary

类型：

tsx

const edges = [
  {
    id: 'edge1',
    source: nodeIds.start,
    target: nodeIds.process1,
    type: 'animated',
  },
  {
    id: 'edge2',
    source: nodeIds.decision,
    target: nodeIds.output2,
    type: 'temporary', // 用于错误/条件路径
  },
];

Define Node Types

定义节点类型

tsx

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>
  ),
};

tsx

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>
  ),
};

Define Edge Types

定义连线类型

tsx

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

tsx

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

Render the Canvas

渲染画布

tsx

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;

tsx

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;

Key Features

核心特性

Feature	Description
Custom Node Components	Use NodeHeader, NodeTitle, NodeDescription, NodeContent, NodeFooter for structured layouts
Node Toolbars	Attach contextual actions to nodes via Toolbar component
Handle Configuration	Control connections with `handles: { target: boolean, source: boolean }`
Edge Types	`Edge.Animated` for active flow, `Edge.Temporary` for conditional paths
Connection Lines	Styled bezier curves when dragging new connections
Controls	Zoom in/out and fit view buttons
Panels	Position custom UI anywhere on the canvas

特性	描述
自定义节点组件	使用NodeHeader、NodeTitle、NodeDescription、NodeContent、NodeFooter构建结构化布局
节点工具栏	通过Toolbar组件为节点添加上下文操作
连接点配置	通过 `handles: { target: boolean; source: boolean }` 控制节点的连接权限
连线类型	`Edge.Animated` 用于活跃流程， `Edge.Temporary` 用于条件路径
连线样式	拖拽新连接时显示风格化的贝塞尔曲线
控制组件	提供放大/缩小和适配视图的按钮
面板组件	可在画布任意位置放置自定义UI

Component Reference

组件参考

For detailed props and API documentation for each component, see

references/components.md

有关各组件的详细属性和API文档，请查看

references/components.md

。