用途：该技能为使用 Vercel AI Elements 结合 React Flow 构建工作流可视化提供指导，适用于实现交互式节点工作流界面、创建流程图可视化、构建带自定义节点与边的图表编辑器，以及为 AI 应用添加工作流可视化。
主要能力：提供 Canvas、Node、Edge、Connection、Controls、Panel、Toolbar 等组件；节点支持 NodeHeader、NodeTitle、NodeDescription、NodeContent、NodeFooter 的结构化布局，并可通过 Toolbar 附加编辑、删除等操作；通过 handles 配置连接；边类型包括 Edge.Animated（活动路径）与 Edge.Temporary（条件/错误路径）；支持拖拽新建连接时的贝塞尔曲线、缩放与适应视图按钮，以及画布上任意位置的自定义面板。组件详细属性见 references/components.md。
使用方式：在 Next.js 项目中安装使用。命令依次为 npx create-next-app@latest ai-workflow && cd ai-workflow（安装时选择 Tailwind）、npx ai-elements@latest（同时配置 shadcn/ui）、npm i @xyflow/react；随后按需添加组件，如 npx ai-elements@latest add canvas、node、edge、connection、controls、panel、toolbar。代码中从 @/components/ai-elements/... 引入各组件，定义 nodes 与 edges 数据、nodeTypes 与 edgeTypes，并通过 Canvas 渲染，可设置 fitView、connectionLineComponent={Connection} 等属性。节点数据包含 label、description、handles、content、footer。
限制：资料未提供价格、性能或平台兼容性等更多信息；具体组件 API 需参见 references/components.md。