# bsin-agent-ui

**Repository Path**: s11e-DAO/bsin-agent-ui

## Basic Information

- **Project Name**: bsin-agent-ui
- **Description**: Bsin AI Agent UI 是一个可视化的定义AI智能体的编排服务组件，根据用户个性化需求，定义智能体，实现业务自动化和智能化。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 1
- **Created**: 2024-07-26
- **Last Updated**: 2025-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bsin-agent-ui


Bsin AI Agent UI 是一个可视化的定义AI智能体的编排服务组件，根据用户个性化需求，定义智能体，实现业务自动化和智能化。

## 特性

- 📦 开箱即用，提高效率
- 🎨 多样化样式，避免单调
- 🔮 丰富功能，方便灵活
- 🥇 功能丰富，灵活方便
- 🥇 强大团队支持
- 🧐 可视化动态流程
- 👀 清晰文档，快速上手

## 快速入手

### 安装包

```powershell
npm i bsin-agent-ui
```

### 导入组件

```javascript
import { AiAgentDesign } from 'bsin-agent-ui';
```

### 使用组件

```html
<AiAgentDesign xmlStr="{}"></AiAgentDesign>
<!--传入你的数据-->
```

### 预览效果
使用以上步骤完成配置后，即可预览效果。

## 交互效果

![avatar](./doc/images/description.png)

![avatar](./doc/images/design.png)


## 节点介绍

* 1、流程开始(starEvent)：开场白
* 2、流程结束(endEvent)：把输入作为答案输出
* 2、知识检索(knowledgeBase)： 配置一个知识库检索（RAG）
* 3、dubbo请求(dubboInvoke)：dubbo接口调用节点，类似http
* 5、SQL脚本(sqlScript): 可根据输入变量执行sql脚本
* 6、智能决策(intelligentDecision)：根据输入json参数进入智能决策流程
* 7、大模型(llm)：选择大模型：配置key

### 流程开始
> 在开始节点中，您可以自定义启动工作流的输入变量

* 1、开场白输入
* 2、自定义输入变量：文本、数字

### 流程结束
>在结束节点中，您可以自定义最终输出内容变量和输出的形式

* 1、输出内容形式：文字、语音
* 2、自定义输入变量：文本、数字

### 知识检索
>构建基于外部数据/知识的 AI 问答系统（RAG）

* 1、可以选择一个或多个相同向量模型的知识库
* 2、展示选择的知识库列表

### dubbo请求
>允许通过 dubbo 协议发送服务器请求

* 1、调用的服务和方法输入框
* 2、自定义输入变量：文本、数字
* 3、自定义输出变量：文本、数字

### SQL脚本
>执行一段简单的sql脚本代码

* 1、选择sql类型：mysql,pgsql,ob,达梦
* 2、输入sql脚本
* 3、自定义输出变量: 字段变量名称、类型

### 智能决策
>在智能决策点中，您可以自定义最终输出内容变量和输出的形式

* 1、输出内容形式：文字、语音
* 2、自定义输入变量：文本、数字

### 大模型
> 选择合适的模型，配置模型参数

* 1、选择模型
* 2、配置模型参数：key，温度、TopP，最大标记、回复格式等

## 节点json数据规范
```
{
    "id": "1",
    "type": "startEvent",
    "data": {
      "prologue": ""
      "input": [
        {
          "valueTakingMethod?": "指标的取值方式：1、直接填写 2、请求参数中获取 3、通过泛化调用获取",
          "valueTakingMethod": "1",
          "type": "String",
          "name": "用户名",
          "metricsKey": "username",
          "metricsValue": "bolei"
        },
        {
          "valueTakingMethod?": "指标的取值方式：1、直接填写 2、请求参数中获取 3、通过泛化调用获取",
          "valueTakingMethod": "1",
          "type": "String",
          "name": "用户名",
          "metricsKey": "username",
          "metricsValue": "bolei"
        }
      ],
      "output": [
        {
          "prologue": "提示词",
          "prologue?": "我是一个app-agent助手，擅长json数据处理"
        }
      ]
    }
}

```


##  节点编排JSON格式：
```

{
  "nodes": [
    {
      "id": "1",
      "type": "startEvent",
      "input": [
        {
          "valueTakingMethod?": "指标的取值方式：1、直接填写 2、请求参数中获取 3、通过泛化调用获取",
          "valueTakingMethod": "1",
          "type": "String",
          "name": "用户名",
          "metricsKey": "username",
          "metricsValue": "bolei"
        },
        {
          "valueTakingMethod?": "指标的取值方式：1、直接填写 2、请求参数中获取 3、通过泛化调用获取",
          "valueTakingMethod": "1",
          "type": "String",
          "name": "用户名",
          "metricsKey": "username",
          "metricsValue": "bolei"
        }
      ],
      "output": [
        {
          "prologue": "提示词",
          "prologue?": "我是一个app-agent助手，擅长json数据处理"
        }
      ]
    },
    {
      "id": "2",
      "type": "llm",
      "input": [
        {
          "llm": "chatgpt",
          "model": "3.5",
          "label": "根据角色定义获取营销热点信息"
        }
      ]
    },
    {
      "id": "3",
      "type": "endEvent",
      "input": [
        
      ],
      "output": [
        {
          "label": "结束节点"
        }
      ]
    },
    {
      "id": "4",
      "type": "intelligentDecision",
      "input": [
        
      ],
      "output": [
        {
          "model": "3.5",
          "label": "关联规则事件模型"
        }
      ]
    },
    {
      "id": "5",
      "type": "dubboInvoke",
      "input": [
        
      ],
      "output": [
        {
          "model": "3.5",
          "label": "dubbo调用"
        }
      ]
    }
  ],
  "edges": [
    {
      "id": "e1-2",
      "source": "1",
      "target": "2"
    },
    {
      "id": "e2-3",
      "source": "2",
      "target": "4"
    },
    {
      "id": "e2-3",
      "source": "4",
      "target": "5"
    },
    {
      "id": "e3-4",
      "source": "5",
      "target": "3"
    }
  ],
  "viewport": {
    "x": 1,
    "y": 1,
    "zoom": 1
  }
}


```

## 贡献者

* [@博羸](https://gitee.com/boleixiongdi)
* [@河畔一角](https://gitee.com/jack-bean)


## TODO 
>[ ] 未完成 [x] 已完成

- [ ] 节点封装：提取节点的json数据（封装一个示例）
- [ ] 流程json数据：组合每个节点的json数据，形成最后的流程json数据
- [ ] 后端对json数据的解析 @博羸