Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/sstobo/convex-skills --skill ai-elements-workflowPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Documento Skill originale
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
AI Elements Workflow
This skill provides comprehensive guidance for building workflow visualizations using Vercel AI Elements with 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
Setup
1. Create Next.js Project
bash
npx create-next-app@latest ai-workflow && cd ai-workflowChoose to use Tailwind in the project setup.
2. Install AI Elements
bash
npx ai-elements@latestThis also sets up shadcn/ui if not configured.
3. Install React Flow
bash
npm i @xyflow/react4. Add Components
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 toolbarBuilding 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';Define Node IDs
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...
];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
},
];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>
),
};Define Edge Types
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;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 |
Component Reference
For detailed props and API documentation for each component, see references/components.md.
