SuperAPI AI 工具集

iblai-vibe-workflow

编程与开发

查看项目

更新于 10-15 22:16

技能介绍

用途:为 Next.js 应用添加 AI 工作流构建器功能,包含可视化编辑器、节点类型浏览侧边栏、节点配置面板、连接器管理,以及创建/删除工作流弹窗。画布支持拖拽、贝塞尔曲线连线、平移缩放、撤销重做与自动保存。

前置条件:需先完成认证设置(/iblai-vibe-auth),并配置 MCP 服务器与技能(.mcp.json 中的 @iblai/mcp)。项目根目录需存在 iblai.env,包含 PLATFORM、DOMAIN、TOKEN 变量;缺失时可用 curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env 下载模板。

主要能力与用法:工作流功能包含两个页面(列表页与编辑器页)和三个自定义组件(types.ts、workflow-canvas.tsx、node-config-panel.tsx)。SDK 组件直接从 @iblai/iblai-js/web-containers 导入,无 CLI 生成器;数据层使用 @iblai/iblai-js/data-layer 的 RTK Query hooks。必须在 store/iblai-store.ts 中注册 workflowsApiSlice 的 reducer 与 middleware,否则所有工作流 hooks 会静默返回 undefined。

组件属性:WorkflowSidebar 使用 onDragStart/onItemClick;ConnectorManagementDialog 使用 open/onClose;CreateWorkflowModal 使用 open/onOpenChange/onCreateWorkflow/isCreating;DeleteWorkflowModal 使用 isOpen/onClose/onConfirm/isDeleting/workflowName。节点数据须嵌套在 node.data 中。

限制与注意事项:属性名不可使用 isOpen、onClose、org、onCreate 等旧文档中的错误名称;配置面板需同时阻止 onClick 与 onMouseDown 冒泡,并在 mouseup 时打开;自动保存采用 2 秒防抖,手动保存需取消待执行定时器,卸载时清理。验证需运行 /iblai-vibe-ops-test,pnpm build 须零错误通过。画布与节点面板完整实现见 references/canvas-and-node-panel.md。