无极低代码平台的AI之路

作者：vvdennis

AIGC 很火，各个领域都在尝试。通过 AI 自动生成一个管理台站点，这会带来开发效率的提升吗？如果 AI 能快速开发管理台，那么 AI 生成能否完全取代低代码的可视化配置？如果 AI 不能开发整个管理台，那么在什么场景下使用 AI 效果最好？

引言

随着 ChatGPT 问世，无极也开始接入 AI，希望通过 AI 进一步提升低代码的开发效率。

无极 是一款面向管理台的低代码工具，初衷就是要解决企业内部管理台的开发效率问题，而 ChatGPT（下文简称 AI）的能力让我们看到了一种新的开发方式，能否通过人与 AI 对话的方式来完成管理台的开发？考虑到 AI 的不确定性，要怎样接入 AI 才能达到更好的提效？

基于这些问题，无极团队探索了一段时间，有了些阶段性的进展；下文将按照 “AI 之前” ➜ “局部接入 AI” ➜ “全场景接入 AI” ➜ “AI 自定义” 的方向，介绍无极逐层接入 AI 的过程。

在 AI 之前，无极的拖拽已经做到极致

在低代码平台上开发页面，常规的方案是先拖拽组件，然后再绑定数据。而无极提供了新的思路 - “智能推导 UI”，用户只需要接入数据或者接口服务，就能直接拖拽出 UI 组件。

AI 面世，无极开始打造智能的低代码平台

通过 AI 来取代单次拖拽组件，没有任何意义，效率甚至更慢。想象一下，没有 AI 时，直接从数据一键就能拖拽出列表组件；而为了使用 AI，我们需要敲很长的一段指令（“基于 xxx 数据，生成一个可以增删改查的列表组件“），然后等待 AI 的回复之后才得到列表组件（甚至有可能得到的是不符合预期的组件）。

所以说不是所有的场景都适合使用 AI。因此我们选择一些特定的场景，从局部功能渐进式地接入 AI，在这些场景下发挥 AI 最好的效果。

场景一：组件定制

以表单组件为例，通过智能推到 UI生成一个表单后，往往需要进一步的细节调整。而这些调整操作都是重复的，非常繁琐，我们尝试用 AI 来取代它。

下面视频案例中，演示了表单的标签翻译和下拉框的可选项配置。通过 AI 取代简单重复的人工操作，降低低代码平台的使用门槛。

场景二：逻辑定制

在无极里面，有些页面逻辑需要编写少量的前端代码（Javascript）来实现，这块功能我们称之为 LessCode。在 LessCode 里面可以调用我们的 API 来 “获取页面的状态数据” 或者 “调用无极的工具方法”，这里的代码规模不大，技术要求也不高，难点在于要学习无极的文档，如果把这个文档交给 AI 呢？（世界瞬间清净了 ～）

下面视频案例中，演示如何在无极中使用 AI 来编写逻辑代码。AI 写出来后，我们可以人工 CR 一下，也可以跳过 CR，直接去预览状态下做“黑盒测试”，这样一来，对无极用户们的代码能力又降低了。

场景三：数据分析

上面两个场景中，通过 AI 辅助可以降低低代码平台的使用门槛，但还不够。无极解决的是从数据到 UI 的一个完整开发过程，能否通过 AI 实现全过程的自动化？ 这里我们进一步尝试“零代码”的开发，实现用户的“一句话需求”。

下面视频案例中，我们选择 BI 这个例子，通过 AI 自动编写 SQL、自动选择合适的图表组件、或者进一步调整组件细节；从 “接入数据” -> “生成组件” -> “组件调整"，全过程由 AI 独立完成。

全场景接入 AI

目前无极的功能已经成功接入 AI（局部 AI 化），其中最关键的方法就是 封装 DSL 层 ：

1. 封装 DSL，让 AI 了解无极
   • 首先，按原子性的原则，把无极的能力封装成 API 接口，比如 createData（新建数据）、createComp（拖出组件），这就是无极的 DSL
   • 然后把这些 API 以及对应的参数描述发送给 AI，这样 AI 能够根据用户的指令自行拼装 API；
   • 最终，AI 会把用户的指令解析成一连串 API 调用。
2. 无极作为 AI 的命令行工具对于 AI 输出的 DSL，无极直接解析并执行

比如上图左边，用户输入了“生成柱状图”，然后 AI 输出 createData 和 createComp（当然这里 AI 会一并输出对应的参数），无极直接执行后就可以在画布里拖拽出一个绑定了用户数据的柱状图；

另外，某些场景下单凭预置的 DSL 描述，AI 无法完成用户的指令，这时候 AI 还需要一些页面的状态信息。这种场景下，我们需要给 AI 预置一些获取信息用的 DSL，让它在有需要的时候自行获取。 比如上图右边，用户想“切换图表的横纵坐标”，这时候 AI 需要先获取图表的信息（getCompInfo），然后才能设置它（setComp）。

从产品的角度，目前无极只是把 AI 当成辅助工具，用户需要选定场景之后，再使用 AI 进行快速的功能开发；能否让 AI 做更多的事情，比如页面交互设计、视觉优化等等？比如说用户直接告诉 AI-“生成一个简洁美观的登录页面”，然后由AI 自行接入数据、设计表单、编辑登录逻辑等等。

从技术的角度，目前我们根据用户场景，给 AI 发送对应部分的 DSL，“Token 限制问题” 还不是特别明显；但是随着用户迭代输入的指令，或者是更复杂的使用场景，AI 的 这个 Token 限制将是致命的问题。另一方面，就算没有 “Token 限制”，AI 自身也存在上下文内容干扰，比如你让 AI “生成一个柱状图，然后再修改页面上某个饼图的标题”，它有可能给你生成一个饼图来，或者修改了柱状图的标题。

无论是从产品还是技术的角度，单靠一个 AI 实例是无法满足需求的，那是否可以使用多个 AI 实例呢？ 这里我们参考了 AutoGpt 的方案，尝试实现 自动拆解任务、自动下发任务或交付任务，让多个 AI 实例协同完成用户的指令。

1. 任务拆解首先我们需要对先前规划的 DSL 进行模块化，比如说无极所有 DSL 共分为四个模块，对应无极的四个能力--导航、物料、画布、组件配置。这就可以告诉 AI，用户的任何指令，都能拆解成这四个模块的组合。比如说刚才的指令--“切换图表的横纵坐标”，需要先从 画布 中获取到组件的信息，然后再通过 组件配置 修改组件的详细配置，用 AI 领域专业的术语讲，这个叫!!#9900ff “链式思维(CoT)”!!。

enter image description here#680px

1. 任务下发与交付对于上面“切换图表的横纵坐标”的例子，我们至少需要三个 AI 实例
   • “无极大管家”负责拆分任务，
   • “画布主管”负责画布功能
   • “组件配置主管”负责组件配置功能。

然后这里就涉及到 AI 之间的相互通信：“大管家”拆分任务后要下发给对应的“主管”，“主管”完成任务后要讲结果交付给“大管家”。因此需要新增一套独立的 DSL-用于 AI 通信，比如 assign(fromAI, toAI, content)。

解决了任务拆解和任务交付的问题之后，接下来就是 “重复的递归调用”（类似 DFS）。在任务拆解中，我们对 DSL 进行模块化，但是这个模块化不是水平的，而是引入了层级的概念，形成一颗 DSL 树。如下图左边，物料这个模块又可以继续拆分成数据和组件库，数据继续拆分等等，这样树的叶子结点就是一个个无法拆分的原子性 API 了；

根据上面的 DSL 树，我们把任何 DSL 节点以及它的子节点合并成一个 prompt 节点，就可以形成一个 prompt 树，由这个 prompt 树可以生成多个具有上下级观念的 AI 管家，形成一个AI 团队，为无极的用户打工！

PS：下图解释下 DSL 节点合并成 prompt 节点，一个 prompt 节点 由 “一个 DSL 节点功能”、“所有 DSL 子节点功能”、“再加上子节点功能的拆解方法”组成。这个“拆解方法”是可选的，如果逻辑比较简单，不跟 AI 说它也能无师自通。

进一步的视频演示请期待无极的下一个 AI 版本～～

为了加深理解，这里再贴一个大管家的 prompt 和 AI 返回。

# 系统上下文部分，定义大管家的基本规则，以及大管家下面的主管能力
role:
    system
content:
    You are a website builder to help user to develop website on a low-code platform
    Constraints:
    1. Write command argument in JSON format.
    2. Please write the thoughts in Chinese
    3. You should only use the commands and agents below to solve the task
    4. When running the runAgent command, please provide the information obtained from the current task in the task argument. The task should be a string
    5. If you cannot solve the task, try to break down the task into smaller tasks that commands can solve
    6. if you have solved the task, please response `next` as false, or else response `next` as true to run next step

    Commands:
    1. taskComplete(): "run after the whole task is completed"
    2. runAgent(<"agentId">, "<task>">: "If the agent exists in Agents, run the agent to solve the task. The task should be a string. Don't pass agentId you don't have"

    Resources:
    1. You can use commands below to solve the task
    2. If the agent exists in Agents, You can use runAgent command to ask agent to solve the task

    Agents:
    material: 物料模块包括了数据库和数据源的操作,页面变量,等和数据相关的部分,连接db数据,使用临时变量,读取url参数,读取用户信息等
    canvas: 获取可以添加的组件类型、添加组件到页面
    component: 每个组件有一个唯一的组件id(componentId)，提供componentId，此机器人可以选中组件、或者当前选中的组件、以及修改组件的属性,样式,行为/事件、删除组件或者获取组件的位置


    You should only respond in JSON format as described below Response Format:
    {
        "thoughts": "thoughts summary to say to user",
        "command": {
            "name": "command name",
            "args": {
                "arg name": "value"
            }
        },
        "next": true
    }
    Ensure the response can be parsed by JavaScript JSON.parse

# 用户输入指令“生成一个登录页面，用户需要输入用户名和密码进行登录”
role:
    user
content:
    Determine which agents use and respond using the format specified above.
    Task: <生成一个登录页面，用户需要输入用户名和密码进行登录>

# AI的返回是一个JSON，把任务下发给画布主管
role:
    assistant
content:
    {
        "thoughts": "首先，我们需要创建一个新的页面，然后在页面上添加用户名和密码的输入框以及登录按钮。",
        "command": {
            "name": "runAgent",
            "args": {
                "agentId": "canvas",
                "task": "创建新页面"
            }
        },
        "next": true
    }

不止如此，无极还能开发智能的管理台应用

前面章节说的都是在无极的编辑端引入 AI 的能力，但是，低代码平台的 AI 能力不应该限制在编辑端，用户可以在无极平台上，开发出一个具备 AI 能力的应用，也就是“AI 低代码化”

为此，我们新增了 “chatGPT”调用的行为原子（关于行为原子的概念，点击进入无极文档搜索行为原子），支持用户配置 AI 的各种行为。下面是一些演示的例子：

AI 填写表单

下面视频引用 GIAC 会议课程录入表单，介绍如何在表单内实现 AI 自动提取文章简介的功能。

一个 AI 对话的 Demo

基于 AI 行为原子的能力，我们可以在无极上搭建更复杂的 AI 应用，比如下面视频这个 AI 对话，支持多个 AI 间的消息传递。

数据安全边界

目前无极使用的是 ChatGPT，这里解释下数据安全的边界。

作为一个面向管理台的低代码平台，其操作的数据都属于企业内部数据，不能对外泄漏。无论是无极的编辑器，还是由无极开发出来的应用，我们都应该明确一个点：数据本身是敏感的，但是数据的结构、页面的结构并不敏感。

比如上面介绍的“基于数据自动生成分析图表”的场景，我们只需给 AI 发送数据的结构即可，整个交互过程不涉及明确的数据；又比如“AI 自动提取文章简介”的场景，我们的文章本来就是对外发布的，所以发给 AI 也无所谓，但是如果是 “KM 文章”（仅限司内查看），就不适合用 ChatGPT 来自动提取了～

万物皆可 AI，但 AI 不是唯一

现在我们回过头来继续讨论开篇的问题：

AI 是最高效的吗？

根据前面的场景案例，AI 不一定是最高效的，由两方面的因素决定：

1. 使用场景

对于一个非常具体的小场景，比如 “根据现有的 学生数据表 生成一个列表”，因为 学生数据表 的数据结构已经完全固定，低代码平台有很多方案可以实现一键生成它对应的列表组件，这时候使用 AI 反而会更鸡肋；但是如果需求换成 “根据 学生数据表 统计学生的男女比例”，这时候需要一定的思念成本，低代码无法自动化，这时候引入 AI 来理解自然语言、并生成 SQL，就能吊打低代码；

再比如“把名称这个表单项的标签，由 name 改成 '名称'”，让 AI 来处理，它会先寻找表单项、获取表单项的信息、最后才是设置标签值，但是对于一个稍微熟悉低代码的开发者来说，单击一下配置框直接输入“名称”两字就完事了，这样跟 AI 对比，人工操作更快更准。但是如果重复的操作量增大，比如“把整个表单的所有标签都翻译成中文”，这时候让 AI 来循环操作就非常合适。

所以，适合 AI 的场景：具备一定的思考成本 或者 操作体量大。

2. AI 的成熟度

幻觉问题是大预言模型的致命问题，我们可以通过 “提示词工程” 逐步优化 AI，使它的回复更符合预期。但是无法避免的是某些场景下它会“抽风”，让我们的“苦苦等待”得到了错误的答复，如此重复的输入指令并验证 AI 的返回也会带来更大的时间成本。

所以， AI 的输出不一定是 100%准确，在未来很长一段时间，AI 和人工是共存的。一方面，我们可以先人工再 AI，使用无极的“智能推导 UI”，快速生成固定模板的组件，然后配合 AI 完成细节调整；另一方面，我们也可以先 AI 再人工，用 AI 快速生成一个可用的 Demo，然后再通过低代码的可视化配置能力进行修正。

它能否取代低代码？

接入 AI 后，无极的交互方式有了很大的变化，很多需求可以直接通过“AI 聊天框”完成，并且随着接入功能越来越多，“AI 聊天框”的使用率将会更大，那么这个“AI 聊天框”最终能否取代低代码的其他交互，成为唯一的交互入口呢？

很多领域都有 AIGC，但是所有的 AI 出品必须要经过人工的审批、调整后才能被正式使用。从“AI 出文” ➜ “AI 出图” ➜ “AI 出视频” ➜ “AI 出网站”，专业性越来越强，审阅或二次编辑的成本越来越高。AI 出的图片问题，我们可以用 PS 进行局部修复；视频也有对应的编辑器能够逐帧调整；但是如果 AI 生成一个完整的网站代码，让程序员用代码编辑器打开来阅读并修 bug，相信工作量只会更大；

AI 必须要结合工具，而在 AI 生成网站这一领域，低代码就是最好的工具。我们需要让 AI 结合低代码的能力来生成网站，让低代码成为“AI 生成网站”的一个中间驿站，这样人工介入时才能借助低代码快速验证或修改 AI 生成的内容。

万物皆可 AI

文章的最后，分享一下无极接入 AI 的经验。

无极接入 AI 的方式是抽象出一层 DSL（领域特定语言），让 AI 通过 DSL 了解无极的能力，同时输出 DSL 交给无极解析执行。基于这一层抽象，任何领域的应用都能够接入 AI，只要它的能力能被原子性地描述出来。只需要三步 ：

1. 领域能力封装成 DSL
2. 将 DSL 的组合方式（链式思维的方式，CoT）提炼成 Prompt
3. 执行 AI 返回的指令

最后，无极的 AI 之路会继续走下去，目标不仅仅是借助 AI 来提效，更是让无极成为 AI 生成管理台 的一个可视化编辑工具；把低代码和 AI 融合一体，相辅相成，敬请期待后续的更新。

体验无极，跳转 wujicode.cn