@ai-bots/flow
Advanced tools
流程编辑器组件库，用于可视化构建和编辑工作流。
# 使用 npm
npm install @ai-bots/flow
# 使用 yarn
yarn add @ai-bots/flow
# 使用 pnpm
pnpm add @ai-bots/flow
import React, { useState } from 'react';
import { FlowEditor, FlowData } from '@ai-bots/flow';
import '@ai-bots/flow/style.css'; // 导入样式
// 初始流程数据
const initialFlow = [
{
id: "node-start-123456",
version: "v1",
type: "node-start",
name: "开始节点",
next_nodes: ["node-model-234567"],
param: {
trigger: "api"
},
output: {
key: "response",
type: "object"
}
},
{
id: "node-model-234567",
version: "v1",
type: "node-model",
name: "大模型节点",
next_nodes: ["node-end-345678"],
param: {
provider: "deepseek",
modal: "deepseek-chat",
knowledge_config: {
max_recall_num: 10,
min_recall_score: 0.5,
knowledge_id: null
},
system_prompt: [{
type: "input",
value: "你是一个专业的AI助手"
}]
},
content: [{
type: "input",
value: "请根据我的需求回答问题"
}],
output: {
key: "response"
}
},
{
id: "node-end-345678",
version: "v1",
type: "node-end",
name: "结束节点",
next_nodes: [],
param: {},
output: {
type: "form",
content: [{
type: "input",
key: "code",
value: "200"
}]
}
}
];
function App() {
const [flowData, setFlowData] = useState(initialFlow);
const handleSaveFlow = (data) => {
setFlowData(data);
console.log('流程已保存:', data);
// 这里可以将数据发送到服务器或进行其他处理
};
return (
<div style={{ height: '100vh', width: '100%' }}>
<FlowEditor
flowData={flowData}
onSave={handleSaveFlow}
/>
</div>
);
}
export default App;
如果你需要在非React项目中使用，可以通过加载UMD格式的文件：
<!DOCTYPE html>
<html>
<head>
<title>Flow Editor Example</title>
<!-- 加载React和ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- 加载ReactFlow -->
<script src="https://unpkg.com/reactflow@11/dist/umd/reactflow.min.js"></script>
<link href="https://unpkg.com/reactflow@11/dist/style.css" rel="stylesheet">
<!-- 加载@ai-bots/flow -->
<script src="./node_modules/@ai-bots/flow/dist/index.umd.js"></script>
<link href="./node_modules/@ai-bots/flow/dist/style.css" rel="stylesheet">
<style>
body, html, #root {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
// 创建React应用
const App = () => {
const [flowData, setFlowData] = React.useState([/* 初始流程数据 */]);
const handleSaveFlow = (data) => {
setFlowData(data);
console.log('保存流程:', data);
};
return React.createElement('div', { style: { height: '100%' }},
React.createElement(AIBotsFlow.FlowEditor, {
flowData: flowData,
onSave: handleSaveFlow
})
);
};
// 渲染应用
ReactDOM.render(React.createElement(App), document.getElementById('root'));
</script>
</body>
</html>
主要组件，用于渲染完整的流程编辑器界面。
| 属性名 | 类型 | 必须 | 描述 |
|---|---|---|---|
| flowData | Array | 是 | 流程数据 |
| onSave | (data: Array) => void | 否 | 保存流程时的回调函数 |
流程节点的数据类型。
| 属性名 | 类型 | 必须 | 描述 |
|---|---|---|---|
| id | string | 是 | 节点唯一标识 |
| version | string | 是 | 版本信息 |
| type | string | 是 | 节点类型 (node-start, node-model, node-utils, node-end, node-custom) |
| name | string | 是 | 节点名称 |
| next_nodes | Array | 是 | 下一个节点IDs |
| param | Record<string, unknown> | 是 | 节点参数配置 |
| content | Array<{type: string, value: string, key?: string}> | 否 | 节点内容配置 |
| input | {type: string, content: Array<{type: string, value: string, key?: string}>} | 否 | 节点输入配置 |
| output | Record<string, unknown> | 否 | 节点输出配置 |
组件支持以下预定义节点类型：
开始节点 (node-start)
大模型节点 (node-model)
工具节点 (node-utils)
自定义节点 (node-custom)
结束节点 (node-end)
如果你想为此项目贡献代码或进行本地调试：
# 克隆仓库
git clone <repository-url>
cd ai-bots/apps/flow
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建库文件
npm run build:lib
如果你在monorepo中使用此组件，可以在UI项目中执行以下操作：
# 在UI项目中
cd apps/ui
npm run install-flow
这将构建flow库并在UI项目中链接它。
MIT
apps/flow/src/components/Flow/nodes/[YourNodeName].tsx
节点的外观和数据结构
import { Handle, Position } from 'reactflow';
interface CustomNodeProps {
data: {
name: string;
param: {
customField: string;
otherProperty: string;
};
};
}
export const CustomNode = ({ data }: CustomNodeProps): JSX.Element => {
return (
<div className="px-4 py-2 shadow-md rounded-md bg-white border-2 border-yellow-400">
<div className="flex items-center">
<div className="ml-2">
<div className="text-lg font-bold">{data.name}</div>
<div className="text-gray-500">自定义字段: {data.param.customField}</div>
<div className="text-gray-500">其他属性: {data.param.otherProperty}</div>
</div>
</div>
<Handle type="target" position={Position.Top} className="w-16 !bg-yellow-500" />
<Handle type="source" position={Position.Bottom} className="w-16 !bg-yellow-500" />
</div>
);
};
apps/flow/src/components/Flow/FlowEditor.tsx
const nodeTypes: NodeTypes = {
'node-start': StartNode,
'node-model': ModelNode,
'node-utils': UtilsNode,
'node-end': EndNode,
'node-custom': CustomNode, // 您添加的新节点
};
添加默认参数
else if (nodeType === 'node-custom') {
param = {
customField: '默认值',
otherProperty: '其他默认值'
};
}
apps/flow/src/components/Flow/NodePanel.tsx
const nodeTypes: NodeTypes = {
'node-start': StartNode,
'node-model': ModelNode,
'node-utils': UtilsNode,
'node-end': EndNode,
'node-custom': CustomNode, // 您添加的新节点
};
apps/flow/src/components/Flow/NodeProperties.tsx
const renderCustomNodeForm = () => (
<>
<div className="mb-4">
<label className="block mb-1 text-sm font-medium text-gray-700">节点名称</label>
<input
type="text"
className="w-full p-2 border rounded-md"
value={nodeData.name}
onChange={(e) => handleInputChange('name', e.target.value)}
/>
</div>
<div className="mb-4">
<label className="block mb-1 text-sm font-medium text-gray-700">自定义字段</label>
<input
type="text"
className="w-full p-2 border rounded-md"
value={nodeData.param?.customField || ''}
onChange={(e) => handleInputChange('param.customField', e.target.value)}
/>
</div>
{/* 其他属性字段... */}
</>
);
在 renderNodeForm 中添加对新节点的支持:
const renderNodeForm = () => {
if (!selectedNode || !nodeData) return null;
switch (selectedNode.type) {
case 'node-start':
return renderStartNodeForm();
// ...其他节点类型...
case 'node-custom':
return renderCustomNodeForm();
default:
return null;
}
};
FAQs
We found that @ai-bots/flow demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.