今天，繼續聊 AI-driven Interface 這題目, 今天不聊趨勢, 直接來聊聊這樣的系統的架構該如何設計。

如果你想設計具備 AI-driven UI 的系統，那麼在設計上有兩個環節一定要注意。一個是 controller 必須搭配專屬的 AI (推理能力要夠好，必須具備 function calling 的能力)，另一個是你必須安排讓 AI 能感知使用者操作情境的能力。

這是架構設計層面的問題, 我相信你找不到太多參考資料跟範例的, 昨天的重心沒放在這環節上, 今天就來補一下實作的想法。我們就從最基礎的 MVC 開始吧..

MVC, Model / View / Control, 整個系統由中心的 Controller 來控制什麼樣的資料 (Model) 該如何對應到畫面 (View) 的架構。而這樣的結構，到了 AI 時代還是沒變。有變化的，就是 Controller 必須跟 AI 密切合作，來精準地控制 UI，回應使用者的需求了。

這時，AI 要能精準地回應使用者，讓 AI 充分感知使用者的一舉一動，是必要的條件。只有這樣，AI 才能 “生成” 使用者想要看到的內容跟介面。而 Controller 如何讓 AI “感知” 使用者的意圖?

目前最常見的設計, 就是畫面旁邊懸浮著一個聊天室窗, 你可以在裡面用自然語言跟 AI 溝通，如同 Agent / Copilot 一般。不過，如果你不跟 Agent 聊天，AI 就完全不知道你要幹嘛了啊，這樣是遠遠不夠的，因此另一個關鍵就是: Controller 必須不斷地跟 AI 回報使用者現在正在做什麼事。

我在去年初發表了 copilot 版本的 “安德魯小舖”，就是這麼做的。換來的效果就是，你可以用正常的方式操作，也可以用聊天的方式，AI 都能知道你想幹嘛，適時的協助你完成任務。

舉例來說，使用者操作購物車，將五瓶可樂放進購物車，Controller 就會送這 message 給 AI:

“使用者在購物車中 [加入] [可樂] x 5”

而大部分情況下，AI 都只會回應 “OK” 這類確認訊息而已。但是當 system prompt 有提醒的注意事項發生時 (比如一直清空購物車的話, 店長就該出來關心一下之類的), AI 就能立即回應注意事項, 或是驅動 Controller 在 UI 上做出對應的反應。

順帶提一下，A16Z 這篇報告中，有提到另一個 AI 的發展趨勢: “Accessibility as the universal interface”, 意思是說未來應用程式開始會利用作業系統的 “輔助功能” (accssibility settings) 的功能來感知使用者的操作環境, 這時 AI 多了更精準的管道來得知使用者的操作狀態.. 也能做出更到位的回應…

總之，當 AI 理解你的意圖，而 AI 也有 function calling 的能力能選擇操作系統，這一切就串的起來了。這頁簡報是我去年在 DevOpsDays 2024 Keynote 講的內容, 要傳達的是當你想做出這樣的 UI 的話，你的系統架構該怎麼設計。核心就是 controller + AI, 以及暢通的使用者操作感知能力。

因此，若你想實作這樣的系統，好好看一下這張圖吧! 為了讓 LLM 表現能夠更個人化一點, Agent 必備的幾個要素自然也不可少 (chat history, instruction, knowledge base, personal information 等)。這些配置，都是為了建構 AI 更完整的 context windows 而設計的，當 context 的內容越貼近你個人喜好, 越貼近你現在的狀況 (聊天的上下文)，AI 的回應就會越精準地貼近你的期待

趨勢報告, 告訴了我們未來發展的方向。但是這份報告並沒有告訴你這些該如何實現。我去年的研究，正好補足了這塊。現在看到了報告，更進一步證實了去年我的想像。

因此，看到報告這樣寫，其實我還挺開心的 (因為我前年底就想通了，而且實作出來了啊 :D )。藉著解構這份趨勢報告的同時，也把去年實作 copilot 版本的安德魯小舖的心得, 重新複習了一下。希望這些心得能對大家有幫助~

相關資訊，我留在第一則留言，歡迎大家討論，也歡迎給我回饋