AIGC 很火，各個(gè)領(lǐng)域都在嘗試。通過(guò) AI 自動(dòng)生成一個(gè)管理臺(tái)站點(diǎn)，這會(huì)帶來(lái)開(kāi)發(fā)效率的提升嗎？如果 AI 能快速開(kāi)發(fā)管理臺(tái)，那么 AI 生成能否完全取代低代碼的可視化配置？如果 AI 不能開(kāi)發(fā)整個(gè)管理臺(tái)，那么在什么場(chǎng)景下使用 AI 效果最好？

引言

隨著 ChatGPT 問(wèn)世，無(wú)極也開(kāi)始接入 AI，希望通過(guò) AI 進(jìn)一步提升低代碼的開(kāi)發(fā)效率。

無(wú)極 是一款面向管理臺(tái)的低代碼工具，初衷就是要解決企業(yè)內(nèi)部管理臺(tái)的開(kāi)發(fā)效率問(wèn)題，而 ChatGPT（下文簡(jiǎn)稱 AI）的能力讓我們看到了一種新的開(kāi)發(fā)方式，能否通過(guò)人與 AI 對(duì)話的方式來(lái)完成管理臺(tái)的開(kāi)發(fā)？考慮到 AI 的不確定性，要怎樣接入 AI 才能達(dá)到更好的提效？

基于這些問(wèn)題，無(wú)極團(tuán)隊(duì)探索了一段時(shí)間，有了些階段性的進(jìn)展；下文將按照 “AI 之前” ? “局部接入 AI” ? “全場(chǎng)景接入 AI” ? “AI 自定義” 的方向，介紹無(wú)極逐層接入 AI 的過(guò)程。

在 AI 之前，無(wú)極的拖拽已經(jīng)做到極致

在低代碼平臺(tái)上開(kāi)發(fā)頁(yè)面，常規(guī)的方案是先拖拽組件，然后再綁定數(shù)據(jù)。而無(wú)極提供了新的思路 – “智能推導(dǎo) UI”，用戶只需要接入數(shù)據(jù)或者接口服務(wù)，就能直接拖拽出 UI 組件。

AI 面世，無(wú)極開(kāi)始打造智能的低代碼平臺(tái)

通過(guò) AI 來(lái)取代單次拖拽組件，沒(méi)有任何意義，效率甚至更慢。想象一下，沒(méi)有 AI 時(shí)，直接從數(shù)據(jù)一鍵就能拖拽出列表組件；而為了使用 AI，我們需要敲很長(zhǎng)的一段指令（“基于 xxx 數(shù)據(jù)，生成一個(gè)可以增刪改查的列表組件“），然后等待 AI 的回復(fù)之后才得到列表組件（甚至有可能得到的是不符合預(yù)期的組件）。

所以說(shuō)不是所有的場(chǎng)景都適合使用 AI。因此我們選擇一些特定的場(chǎng)景，從局部功能漸進(jìn)式地接入 AI，在這些場(chǎng)景下發(fā)揮 AI 最好的效果。

場(chǎng)景一：組件定制

以表單組件為例，通過(guò)智能推到 UI生成一個(gè)表單后，往往需要進(jìn)一步的細(xì)節(jié)調(diào)整。而這些調(diào)整操作都是重復(fù)的，非常繁瑣，我們嘗試用 AI 來(lái)取代它。

下面視頻案例中，演示了表單的標(biāo)簽翻譯和下拉框的可選項(xiàng)配置。通過(guò) AI 取代簡(jiǎn)單重復(fù)的人工操作，降低低代碼平臺(tái)的使用門檻。

，時(shí)長(zhǎng)02:19

場(chǎng)景二：邏輯定制

在無(wú)極里面，有些頁(yè)面邏輯需要編寫少量的前端代碼（Javascript）來(lái)實(shí)現(xiàn)，這塊功能我們稱之為 LessCode。在 LessCode 里面可以調(diào)用我們的 API 來(lái) “獲取頁(yè)面的狀態(tài)數(shù)據(jù)” 或者 “調(diào)用無(wú)極的工具方法”，這里的代碼規(guī)模不大，技術(shù)要求也不高，難點(diǎn)在于要學(xué)習(xí)無(wú)極的文檔，如果把這個(gè)文檔交給 AI 呢？（世界瞬間清凈了 ～）

下面視頻案例中，演示如何在無(wú)極中使用 AI 來(lái)編寫邏輯代碼。AI 寫出來(lái)后，我們可以人工 CR 一下，也可以跳過(guò) CR，直接去預(yù)覽狀態(tài)下做“黑盒測(cè)試”，這樣一來(lái)，對(duì)無(wú)極用戶們的代碼能力又降低了。

，時(shí)長(zhǎng)00:56

場(chǎng)景三：數(shù)據(jù)分析

上面兩個(gè)場(chǎng)景中，通過(guò) AI 輔助可以降低低代碼平臺(tái)的使用門檻，但還不夠。無(wú)極解決的是從數(shù)據(jù)到 UI 的一個(gè)完整開(kāi)發(fā)過(guò)程，能否通過(guò) AI 實(shí)現(xiàn)全過(guò)程的自動(dòng)化？ 這里我們進(jìn)一步嘗試“零代碼”的開(kāi)發(fā)，實(shí)現(xiàn)用戶的“一句話需求”。

下面視頻案例中，我們選擇 BI 這個(gè)例子，通過(guò) AI 自動(dòng)編寫 SQL、自動(dòng)選擇合適的圖表組件、或者進(jìn)一步調(diào)整組件細(xì)節(jié)；從 “接入數(shù)據(jù)” -> “生成組件” -> “組件調(diào)整"，全過(guò)程由 AI 獨(dú)立完成。

，時(shí)長(zhǎng)00:59

全場(chǎng)景接入 AI

目前無(wú)極的功能已經(jīng)成功接入 AI（局部 AI 化），其中最關(guān)鍵的方法就是 封裝 DSL 層 ：

1. 封裝 DSL，讓 AI 了解無(wú)極
2. 首先，按原子性的原則，把無(wú)極的能力封裝成 API 接口，比如 createData（新建數(shù)據(jù)）、createComp（拖出組件），這就是無(wú)極的 DSL
3. 然后把這些 API 以及對(duì)應(yīng)的參數(shù)描述發(fā)送給 AI，這樣 AI 能夠根據(jù)用戶的指令自行拼裝 API；
4. 最終，AI 會(huì)把用戶的指令解析成一連串 API 調(diào)用。
5. 無(wú)極作為 AI 的命令行工具對(duì)于 AI 輸出的 DSL，無(wú)極直接解析并執(zhí)行

比如上圖左邊，用戶輸入了“生成柱狀圖”，然后 AI 輸出 createData 和 createComp（當(dāng)然這里 AI 會(huì)一并輸出對(duì)應(yīng)的參數(shù)），無(wú)極直接執(zhí)行后就可以在畫(huà)布里拖拽出一個(gè)綁定了用戶數(shù)據(jù)的柱狀圖；

另外，某些場(chǎng)景下單憑預(yù)置的 DSL 描述，AI 無(wú)法完成用戶的指令，這時(shí)候 AI 還需要一些頁(yè)面的狀態(tài)信息。這種場(chǎng)景下，我們需要給 AI 預(yù)置一些獲取信息用的 DSL，讓它在有需要的時(shí)候自行獲取。 比如上圖右邊，用戶想“切換圖表的橫縱坐標(biāo)”，這時(shí)候 AI 需要先獲取圖表的信息（getCompInfo），然后才能設(shè)置它（setComp）。

從產(chǎn)品的角度，目前無(wú)極只是把 AI 當(dāng)成輔助工具，用戶需要選定場(chǎng)景之后，再使用 AI 進(jìn)行快速的功能開(kāi)發(fā)；能否讓 AI 做更多的事情，比如頁(yè)面交互設(shè)計(jì)、視覺(jué)優(yōu)化等等？比如說(shuō)用戶直接告訴 AI-“生成一個(gè)簡(jiǎn)潔美觀的登錄頁(yè)面”，然后由AI 自行接入數(shù)據(jù)、設(shè)計(jì)表單、編輯登錄邏輯等等。

從技術(shù)的角度，目前我們根據(jù)用戶場(chǎng)景，給 AI 發(fā)送對(duì)應(yīng)部分的 DSL，“Token 限制問(wèn)題” 還不是特別明顯；但是隨著用戶迭代輸入的指令，或者是更復(fù)雜的使用場(chǎng)景，AI 的 這個(gè) Token 限制將是致命的問(wèn)題。另一方面，就算沒(méi)有 “Token 限制”，AI 自身也存在上下文內(nèi)容干擾，比如你讓 AI “生成一個(gè)柱狀圖，然后再修改頁(yè)面上某個(gè)餅圖的標(biāo)題”，它有可能給你生成一個(gè)餅圖來(lái)，或者修改了柱狀圖的標(biāo)題。

無(wú)論是從產(chǎn)品還是技術(shù)的角度，單靠一個(gè) AI 實(shí)例是無(wú)法滿足需求的，那是否可以使用多個(gè) AI 實(shí)例呢？ 這里我們參考了 AutoGpt 的方案，嘗試實(shí)現(xiàn) 自動(dòng)拆解任務(wù)、自動(dòng)下發(fā)任務(wù)或交付任務(wù)，讓多個(gè) AI 實(shí)例協(xié)同完成用戶的指令。

1. 任務(wù)拆解首先我們需要對(duì)先前規(guī)劃的 DSL 進(jìn)行模塊化，比如說(shuō)無(wú)極所有 DSL 共分為四個(gè)模塊，對(duì)應(yīng)無(wú)極的四個(gè)能力–導(dǎo)航、物料、畫(huà)布、組件配置。這就可以告訴 AI，用戶的任何指令，都能拆解成這四個(gè)模塊的組合。比如說(shuō)剛才的指令–“切換圖表的橫縱坐標(biāo)”，需要先從 畫(huà)布 中獲取到組件的信息，然后再通過(guò) 組件配置 修改組件的詳細(xì)配置，用 AI 領(lǐng)域?qū)I(yè)的術(shù)語(yǔ)講，這個(gè)叫!!#9900ff “鏈?zhǔn)剿季S(CoT)”!!。

enter image description here#680px

2. 任務(wù)下發(fā)與交付對(duì)于上面“切換圖表的橫縱坐標(biāo)”的例子，我們至少需要三個(gè) AI 實(shí)例
3. “無(wú)極大管家”負(fù)責(zé)拆分任務(wù)，
4. “畫(huà)布主管”負(fù)責(zé)畫(huà)布功能
5. “組件配置主管”負(fù)責(zé)組件配置功能。

然后這里就涉及到 AI 之間的相互通信：“大管家”拆分任務(wù)后要下發(fā)給對(duì)應(yīng)的“主管”，“主管”完成任務(wù)后要講結(jié)果交付給“大管家”。因此需要新增一套獨(dú)立的 DSL-用于 AI 通信，比如 assign(fromAI, toAI, content)。

解決了任務(wù)拆解和任務(wù)交付的問(wèn)題之后，接下來(lái)就是 “重復(fù)的遞歸調(diào)用”（類似 DFS）。在任務(wù)拆解中，我們對(duì) DSL 進(jìn)行模塊化，但是這個(gè)模塊化不是水平的，而是引入了層級(jí)的概念，形成一顆 DSL 樹(shù)。如下圖左邊，物料這個(gè)模塊又可以繼續(xù)拆分成數(shù)據(jù)和組件庫(kù)，數(shù)據(jù)繼續(xù)拆分等等，這樣樹(shù)的葉子結(jié)點(diǎn)就是一個(gè)個(gè)無(wú)法拆分的原子性 API 了；

根據(jù)上面的 DSL 樹(shù)，我們把任何 DSL 節(jié)點(diǎn)以及它的子節(jié)點(diǎn)合并成一個(gè) prompt 節(jié)點(diǎn)，就可以形成一個(gè) prompt 樹(shù)，由這個(gè) prompt 樹(shù)可以生成多個(gè)具有上下級(jí)觀念的 AI 管家，形成一個(gè)AI 團(tuán)隊(duì)，為無(wú)極的用戶打工！

PS：下圖解釋下 DSL 節(jié)點(diǎn)合并成 prompt 節(jié)點(diǎn)，一個(gè) prompt 節(jié)點(diǎn) 由 “一個(gè) DSL 節(jié)點(diǎn)功能”、“所有 DSL 子節(jié)點(diǎn)功能”、“再加上子節(jié)點(diǎn)功能的拆解方法”組成。這個(gè)“拆解方法”是可選的，如果邏輯比較簡(jiǎn)單，不跟 AI 說(shuō)它也能無(wú)師自通。

進(jìn)一步的視頻演示請(qǐng)期待無(wú)極的下一個(gè) AI 版本～～

為了加深理解，這里再貼一個(gè)大管家的 prompt 和 AI 返回。

# 系統(tǒng)上下文部分，定義大管家的基本規(guī)則，以及大管家下面的主管能力role: systemcontent: 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: 物料模塊包括了數(shù)據(jù)庫(kù)和數(shù)據(jù)源的操作,頁(yè)面變量,等和數(shù)據(jù)相關(guān)的部分,連接db數(shù)據(jù),使用臨時(shí)變量,讀取url參數(shù),讀取用戶信息等 canvas: 獲取可以添加的組件類型、添加組件到頁(yè)面 component: 每個(gè)組件有一個(gè)唯一的組件id(componentId)，提供componentId，此機(jī)器人可以選中組件、或者當(dāng)前選中的組件、以及修改組件的屬性,樣式,行為/事件、刪除組件或者獲取組件的位置 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# 用戶輸入指令“生成一個(gè)登錄頁(yè)面，用戶需要輸入用戶名和密碼進(jìn)行登錄”role: usercontent: Determine which agents use and respond using the format specified above. Task: <生成一個(gè)登錄頁(yè)面，用戶需要輸入用戶名和密碼進(jìn)行登錄># AI的返回是一個(gè)JSON，把任務(wù)下發(fā)給畫(huà)布主管role: assistantcontent: { "thoughts": "首先，我們需要?jiǎng)?chuàng)建一個(gè)新的頁(yè)面，然后在頁(yè)面上添加用戶名和密碼的輸入框以及登錄按鈕。", "command": { "name": "runAgent", "args": { "agentId": "canvas", "task": "創(chuàng)建新頁(yè)面" } }, "next": true }

不止如此，無(wú)極還能開(kāi)發(fā)智能的管理臺(tái)應(yīng)用

前面章節(jié)說(shuō)的都是在無(wú)極的編輯端引入 AI 的能力，但是，低代碼平臺(tái)的 AI 能力不應(yīng)該限制在編輯端，用戶可以在無(wú)極平臺(tái)上，開(kāi)發(fā)出一個(gè)具備 AI 能力的應(yīng)用，也就是“AI 低代碼化”

為此，我們新增了 “chatGPT”調(diào)用的行為原子（關(guān)于行為原子的概念，點(diǎn)擊進(jìn)入無(wú)極文檔搜索行為原子），支持用戶配置 AI 的各種行為。

基于 AI 行為原子的能力，我們可以在無(wú)極上搭建更復(fù)雜的 AI 應(yīng)用，比如下面視頻這個(gè) AI 對(duì)話，支持多個(gè) AI 間的消息傳遞。

數(shù)據(jù)安全邊界

目前無(wú)極使用的是 ChatGPT，這里解釋下數(shù)據(jù)安全的邊界。

作為一個(gè)面向管理臺(tái)的低代碼平臺(tái)，其操作的數(shù)據(jù)都屬于企業(yè)內(nèi)部數(shù)據(jù)，不能對(duì)外泄漏。無(wú)論是無(wú)極的編輯器，還是由無(wú)極開(kāi)發(fā)出來(lái)的應(yīng)用，我們都應(yīng)該明確一個(gè)點(diǎn)：數(shù)據(jù)本身是敏感的，但是數(shù)據(jù)的結(jié)構(gòu)、頁(yè)面的結(jié)構(gòu)并不敏感。

比如上面介紹的“基于數(shù)據(jù)自動(dòng)生成分析圖表”的場(chǎng)景，我們只需給 AI 發(fā)送數(shù)據(jù)的結(jié)構(gòu)即可，整個(gè)交互過(guò)程不涉及明確的數(shù)據(jù)；又比如“AI 自動(dòng)提取文章簡(jiǎn)介”的場(chǎng)景，我們的文章本來(lái)就是對(duì)外發(fā)布的，所以發(fā)給 AI 也無(wú)所謂，但是如果是 “KM 文章”（僅限司內(nèi)查看），就不適合用 ChatGPT 來(lái)自動(dòng)提取了～

萬(wàn)物皆可 AI，但 AI 不是唯一

現(xiàn)在我們回過(guò)頭來(lái)繼續(xù)討論開(kāi)篇的問(wèn)題：

AI 是最高效的嗎？

根據(jù)前面的場(chǎng)景案例，AI 不一定是最高效的，由兩方面的因素決定：

1. 使用場(chǎng)景

對(duì)于一個(gè)非常具體的小場(chǎng)景，比如 “根據(jù)現(xiàn)有的 學(xué)生數(shù)據(jù)表 生成一個(gè)列表”，因?yàn)?學(xué)生數(shù)據(jù)表 的數(shù)據(jù)結(jié)構(gòu)已經(jīng)完全固定，低代碼平臺(tái)有很多方案可以實(shí)現(xiàn)一鍵生成它對(duì)應(yīng)的列表組件，這時(shí)候使用 AI 反而會(huì)更雞肋；但是如果需求換成 “根據(jù) 學(xué)生數(shù)據(jù)表 統(tǒng)計(jì)學(xué)生的男女比例”，這時(shí)候需要一定的思念成本，低代碼無(wú)法自動(dòng)化，這時(shí)候引入 AI 來(lái)理解自然語(yǔ)言、并生成 SQL，就能吊打低代碼；

再比如“把名稱這個(gè)表單項(xiàng)的標(biāo)簽，由 name 改成 '名稱'”，讓 AI 來(lái)處理，它會(huì)先尋找表單項(xiàng)、獲取表單項(xiàng)的信息、最后才是設(shè)置標(biāo)簽值，但是對(duì)于一個(gè)稍微熟悉低代碼的開(kāi)發(fā)者來(lái)說(shuō)，單擊一下配置框直接輸入“名稱”兩字就完事了，這樣跟 AI 對(duì)比，人工操作更快更準(zhǔn)。但是如果重復(fù)的操作量增大，比如“把整個(gè)表單的所有標(biāo)簽都翻譯成中文”，這時(shí)候讓 AI 來(lái)循環(huán)操作就非常合適。

所以，適合 AI 的場(chǎng)景：具備一定的思考成本 或者 操作體量大。

2. AI 的成熟度

幻覺(jué)問(wèn)題是大預(yù)言模型的致命問(wèn)題，我們可以通過(guò) “提示詞工程” 逐步優(yōu)化 AI，使它的回復(fù)更符合預(yù)期。但是無(wú)法避免的是某些場(chǎng)景下它會(huì)“抽風(fēng)”，讓我們的“苦苦等待”得到了錯(cuò)誤的答復(fù)，如此重復(fù)的輸入指令并驗(yàn)證 AI 的返回也會(huì)帶來(lái)更大的時(shí)間成本。

所以， AI 的輸出不一定是 100%準(zhǔn)確，在未來(lái)很長(zhǎng)一段時(shí)間，AI 和人工是共存的。一方面，我們可以先人工再 AI，使用無(wú)極的“智能推導(dǎo) UI”，快速生成固定模板的組件，然后配合 AI 完成細(xì)節(jié)調(diào)整；另一方面，我們也可以先 AI 再人工，用 AI 快速生成一個(gè)可用的 Demo，然后再通過(guò)低代碼的可視化配置能力進(jìn)行修正。

它能否取代低代碼？

接入 AI 后，無(wú)極的交互方式有了很大的變化，很多需求可以直接通過(guò)“AI 聊天框”完成，并且隨著接入功能越來(lái)越多，“AI 聊天框”的使用率將會(huì)更大，那么這個(gè)“AI 聊天框”最終能否取代低代碼的其他交互，成為唯一的交互入口呢？

很多領(lǐng)域都有 AIGC，但是所有的 AI 出品必須要經(jīng)過(guò)人工的審批、調(diào)整后才能被正式使用。從“AI 出文” ? “AI 出圖” ? “AI 出視頻” ? “AI 出網(wǎng)站”，專業(yè)性越來(lái)越強(qiáng)，審閱或二次編輯的成本越來(lái)越高。AI 出的圖片問(wèn)題，我們可以用 PS 進(jìn)行局部修復(fù)；視頻也有對(duì)應(yīng)的編輯器能夠逐幀調(diào)整；但是如果 AI 生成一個(gè)完整的網(wǎng)站代碼，讓程序員用代碼編輯器打開(kāi)來(lái)閱讀并修 bug，相信工作量只會(huì)更大；

AI 必須要結(jié)合工具，而在 AI 生成網(wǎng)站這一領(lǐng)域，低代碼就是最好的工具。我們需要讓 AI 結(jié)合低代碼的能力來(lái)生成網(wǎng)站，讓低代碼成為“AI 生成網(wǎng)站”的一個(gè)中間驛站，這樣人工介入時(shí)才能借助低代碼快速驗(yàn)證或修改 AI 生成的內(nèi)容。

萬(wàn)物皆可 AI

文章的最后，分享一下無(wú)極接入 AI 的經(jīng)驗(yàn)。

無(wú)極接入 AI 的方式是抽象出一層 DSL（領(lǐng)域特定語(yǔ)言），讓 AI 通過(guò) DSL 了解無(wú)極的能力，同時(shí)輸出 DSL 交給無(wú)極解析執(zhí)行。基于這一層抽象，任何領(lǐng)域的應(yīng)用都能夠接入 AI，只要它的能力能被原子性地描述出來(lái)。只需要三步 ：

1. 領(lǐng)域能力封裝成 DSL
2. 將 DSL 的組合方式（鏈?zhǔn)剿季S的方式，CoT）提煉成 Prompt
3. 執(zhí)行 AI 返回的指令

最后，無(wú)極的 AI 之路會(huì)繼續(xù)走下去，目標(biāo)不僅僅是借助 AI 來(lái)提效，更是讓無(wú)極成為 AI 生成管理臺(tái) 的一個(gè)可視化編輯工具；把低代碼和 AI 融合一體，相輔相成，敬請(qǐng)期待后續(xù)的更新。

作者:vvdennis

來(lái)源:微信公眾號(hào):騰訊技術(shù)工程

出處:https://mp.weixin.qq.com/s/7MDSJdEfRiDjBpH3vzsiHg