Persona icon

Persona

Persona 是一款開源原生 JavaScript 函式庫,可為網站加入串流 AI 聊天,支援浮動、固定與全螢幕版面,並相容 WebMCP 與 SSE 後端。

Persona

Persona 是什麼

Persona 是一款適用於原生 JavaScript 的開源代理 UI 函式庫,可為網站加入串流 AI 聊天體驗。它被定位為一個輕量且可擴充的元件,可在任何具有 SSE 後端的技術堆疊上執行,或透過網站的安裝流程使用。

此產品支援多種呈現模式,包括浮動啟動器、固定的 copilot 面板,以及全螢幕助理。它也包含 WebMCP 支援,讓代理能發現網站已公開的頁面工具、請求批准,接著在瀏覽器中直接執行搜尋或購物車操作等動作。

核心功能

多種啟動器版面

將 Persona 掛載為浮動啟動器、固定面板或全高度助理。首頁顯示,您可以透過變更啟動器設定在這些版面之間切換,而不必重寫應用程式。

npm 與 script 標籤安裝

可透過套件匯入或 script 標籤安裝。首頁同時包含 npm 設定與 CDN 安裝器,讓它可用於使用框架與不使用框架的頁面。

可插拔的 SSE 傳輸

將元件連接到支援 SSE 的串流後端。文件指出傳輸層可插拔,並可透過 customFetch 和 parseSSEEvent 支援自訂請求與事件解析。

具備批准流程的 WebMCP 工具執行

將頁面操作以 WebMCP 工具形式暴露,讓代理可使用現有站點功能,例如搜尋、購物車、預訂或表單。代理會在呼叫工具前先詢問,結果再串流回聊天中。

樣式隔離

使用 Shadow DOM 渲染與加上前綴的 CSS,讓元件樣式與主機頁面的樣式彼此隔離。網站明確表示這可避免雙向的樣式外洩。

主題編輯器與設計 token

透過分層 token 系統、深色模式與即時主題編輯器自訂聊天體驗。首頁將主題化定位為在不分叉元件的情況下匹配主機品牌的一種方式。

Persona 適用於哪些場景

  • 網站支援與新手上手

    在支援、文件、銷售或新手上手頁面加入可串流的聊天啟動器,而無需從零打造自訂聊天外殼。

  • 固定式產品助理

    當您希望助理與使用者的主要工作並行,而不是取代頁面時,可在工作區或儀表板旁嵌入一個 copilot。

  • 獨立助理體驗

    為需要聊天 UI 主導整個頁面,並可選擇顯示素材面板的類應用工作流程,建立全螢幕助理介面。

  • 代理驅動的頁面操作

    透過 WebMCP 工具,將現有站點功能,例如搜尋、購物車操作、預訂或表單,暴露給代理,並由使用者批准。

  • 原型設計與實作參考

    在串接自己的後端之前,先將示範模式與進階範例作為批准流程、語音輸入與輸出、素材側邊欄或串流 UI 行為的參考。

Pros and Cons

Pros

  • 可與原生 JavaScript 搭配使用,不需要前端框架。
  • 可從相同的啟動器設定支援多種 UI 版面。
  • 可連接 SSE 後端,並透過 customFetch 和 parseSSEEvent 適應不同的事件格式。
  • 讓代理可透過 WebMCP 使用頁面工具,而不需要把所有操作都在聊天 UI 內重新實作。
  • 透過 Shadow DOM 與加上前綴的 CSS 將主機樣式隔離。

Cons

  • 目前定價頁面回傳 404,因此定價與方案細節未在該頁清楚公開。
  • 最完整的範例集中在 demo 與 advanced 頁面,因此讀者可能需要查看範例才能理解完整的模式範圍。
  • 部分整合是以範例配方呈現,而非單一整合式後端套件,因此實作細節會依技術堆疊而異。

FAQ

如何將 Persona 加到網站中?

Persona 會掛載一個會從您的後端串流回應的聊天元件。網站顯示它可透過目標元素與 API URL 初始化,或使用 script 標籤安裝器以更快完成設定。

它可以連接哪些後端?

產品頁面表示 Persona 可與任何 SSE 後端搭配,並提供 Hono、Express、SvelteKit、LangGraph.js、OpenAI Agents SDK、Vercel AI SDK 等堆疊的範例整合。它也透過 customFetch 和 parseSSEEvent 支援自訂轉接器。

Persona 支援哪些 UI 版面?

網站提供三種啟動器模式:浮動、固定與全螢幕。它也提到預設浮動啟動器、固定側邊面板,以及全高度助理版面。

Persona 可以直接驅動頁面上的操作嗎?

Persona 支援 WebMCP 頁面工具。文件說明您可以在頁面上註冊工具,讓代理透過 document.modelContext 發現這些工具,並在執行工具前要求使用者批准。

網站有記載定價嗎?

目前 /pricing 的定價頁面無法使用,因此網站未在該處提供定價結構。首頁與文件強調開源使用,以及可透過 npm 或 CDN script 安裝。

Quick Facts

類別
開發者工具 / AI 聊天 UI
主要技術堆疊
VanillaJS、SSE、WebMCP
安裝方式
npm 套件或 script 標籤
品牌
Persona
來源網域
persona-chat.dev
開源
是,首頁描述為開源