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 を参照してください。