OpenUI

什麼是 OpenUI？

OpenUI 是一個革命性的開源工具包，旨在徹底改變人工智慧與使用者介面互動的方式。它為生成式 UI 建立了一個開放標準，讓 AI 模型不僅能理解使用者請求，還能動態生成並渲染相應的使用者介面元素。這意味著使用者不再只收到基於文字的回應，而是能獲得由 AI 直接生成、為其特定需求量身打造的互動式且視覺豐富的介面。

OpenUI 的核心功能是作為一個翻譯器和渲染器。它定義了一種結構化的方式，讓 AI 能夠描述 UI 組件及其屬性，然後利用此描述，透過提供的 UI 函式庫來渲染這些組件。這種方法將 AI 對請求的理解與 UI 的具體實現分離開來，使其具有高度的靈活性和適應性。無論您需要一個簡單的按鈕、一個複雜的輪播圖，還是一個功能完整的互動式表單，OpenUI 都能促進 AI 建構這些元素。

主要功能

• 生成式 UI 標準： 為 AI 描述 UI 元素定義了一種通用語言，能夠在不同平台和 AI 模型之間實現一致的 UI 生成。
• 組件註冊： 開發者可以將現有的 UI 組件註冊到 OpenUI，供 AI 在生成介面時使用。
• AI 到 UI 的橋樑： 無縫連接 AI 模型與前端框架，將 AI 生成的描述轉換為實際的、互動式的 UI 組件。
• 框架無關： 透過轉接層設計，可與各種前端框架（例如 React、Vue、Angular）相容。
• 開源工具包： 提供實作生成式 UI 所需的工具、函式庫和 CLI。
• Zod 型別安全： 利用 Zod 進行強大的屬性驗證，確保 AI 生成的組件符合定義的結構描述。

如何使用 OpenUI

開始使用 OpenUI 涉及幾個關鍵步驟：

1. 定義您的組件： 使用 OpenUI 的 defineComponent 函式來註冊您現有的 UI 組件。這包括指定組件名稱及其屬性的 Zod 結構描述。
2. 建立函式庫： 使用 createLibrary 將您定義的組件聚合到一個函式庫中。此函式庫將作為 AI 模型可以參考的登錄檔。
3. 與 AI 整合： 將您的 AI 模型連接到 OpenUI 系統。AI 將會解釋使用者請求，並根據您註冊的函式庫輸出 UI 組件的描述。
4. 渲染 UI： OpenUI 接收 AI 的輸出，並使用您註冊的組件來渲染互動式使用者介面。

例如，若要建立一個 CarouselCard 組件：

import { z } from "zod";
import { defineComponent } from "@openuidev/react-lang";

const CarouselCard = defineComponent({
  name: "CarouselCard",
  props: z.object({
    title: z.string(),
    description: z.string().optional(),
    imageUrl: z.string().url(),
    ctaLabel: z.string(),
  }),
  component: ({ props }) => <YourActualCarouselCardComponent {...props} />,
});

export default CarouselCard;

然後，您會將其包含在函式庫中供 AI 使用。

使用案例

• 動態聊天機器人和虛擬助理： AI 助理可以直接在聊天中生成互動式表單、產品輪播圖或設定介面，而不僅僅是提供文字連結或描述。
• 個人化內容探索： AI 可以根據使用者的偏好和即時數據，生成自訂儀表板、推薦輪播圖或互動式指南。
• 快速原型設計： 開發者可以透過描述所需的介面，讓 AI 快速生成 UI માકઅપ和原型，然後由 OpenUI 進行渲染。
• 資料視覺化： AI 可以解釋資料並生成適當的圖表或表格，作為使用者可探索的互動式 UI 元素。
• 電子商務應用程式： AI 可以根據使用者查詢（例如「顯示巴黎的現代飯店」）來建立動態產品顯示、篩選介面或結帳流程。

常見問題

• 問：OpenUI 支援哪些程式語言和框架？ 答：OpenUI 的設計旨在與框架無關。核心函式庫基於 JavaScript，並且可以為 React、Vue、Angular 和 Svelte 等各種前端框架建立轉接層。組件定義使用 Zod 進行結構描述驗證，這也是基於 JavaScript 的。

• 問：OpenUI 如何確保生成 UI 的安全性？ 答：OpenUI 專注於翻譯結構化的 UI 描述。安全性取決於底層 UI 組件以及 AI 模型輸出的驗證。使用 Zod 進行屬性驗證有助於確保組件接收到預期格式的資料，從而降低因格式錯誤輸入而產生的風險。

• 問：我可以使用我現有的 UI 組件函式庫與 OpenUI 搭配使用嗎？ 答：是的，絕對可以。OpenUI 的主要目的是讓您能夠註冊現有組件。您需要將組件包裝在 defineComponent 中，使其與 OpenUI 標準相容。

• 問：OpenUI 是否適用於複雜的多步驟使用者流程？ 答：是的。透過為流程中的每個步驟或元素（例如表單、精靈程式、多步驟結帳）定義組件，AI 可以根據 AI 的能力和定義的組件，逐步或整體生成這些複雜的互動。

• 問：在哪裡可以找到 OpenUI CLI 和函式庫？ 答：OpenUI CLI 和核心函式庫可在 npm 上取得。您可以使用 npx @openuidev/cli@latest 來安裝 CLI，並直接從相應的套件（例如 @openuidev/react-lang）匯入 defineComponent 和 createLibrary 等必要函式。