Persona

認領

Persona 是一套開源 VanillaJS agent UI 程式庫，可在網站加入串流 AI 聊天，支援浮動、停駐與全螢幕版面，並可連接 SSE 後端與透過 WebMCP 提供頁面工具。

AI代理開發 AI開發者工具 AI聊天機器人

訪問網站

Persona 是什麼

Persona 是一套開源 agent UI 程式庫，可使用純 JavaScript 在網站中加入串流 AI 聊天體驗。首頁將其描述為輕量、可擴充且原生支援 WebMCP，並提供可透過 npm 或 script 標籤使用的安裝方式。

其主要目的是為開發者提供可重用的前端層，用於 agentic 體驗，而不必把 UI 綁定到特定框架。只要變更設定，同一個 widget 就能以浮動面板、停駐在應用程式旁，或展開為全螢幕助理，而不需要重新打造整合。

功能

多種啟動模式

Persona 可以掛載為浮動啟動器、停駐式 copilot，或全螢幕助理。版面由 launcher 設定控制，因此同一個 agent 可嵌入不同的 UI 外觀。

彈性的安裝方式

產品同時支援 npm 安裝與 script 標籤安裝器。首頁展示了套件匯入流程、全域安裝 script，以及用於產生 client token 與安裝程式片段的 CLI 路徑。

與後端無關的串流

Persona 設計為可從任何 SSE 後端串流，並提供 customFetch 與 parseSSEEvent 等 hooks 以適配請求與事件格式。網站也列出多個後端堆疊的入門範例。

具核准機制的 WebMCP 工具使用

WebMCP 讓助理可以使用頁面上已存在的工具。示範顯示頁面工具註冊在 document.modelContext 下，執行前會先取得使用者核准，並將串流結果回傳到聊天中。

可主題化的 UI 系統

主題系統以 token tree 為核心，分為 palette、semantic 與 component 三層。網站也提到深色模式與即時主題編輯器，可在不分支 widget 的情況下配合主應用程式。

進階 agent UI 模式

進階範例包含工具核准卡、語音輸入與輸出、artifact 側邊欄、動態元件、串流 Markdown 表格與文字顯示效果。這些內容是以可運作的模式呈現，而非抽象宣稱。

常見使用情境

網站支援與上手引導
以最少的版面工作，為既有網站加入支援或上手引導助理。浮動啟動器被呈現為支援、文件、銷售或 onboarding 流程的預設即插即用選項。
工作區旁的應用內 copilot
將助理嵌入工作區或儀表板旁，讓它能在不佔據整個頁面的情況下提供協助。Persona 的停駐模式會包覆某個區域，並讓助理推移、調整大小或覆蓋版面。
全螢幕助理體驗
為需要更多畫面空間的任務建立全頁助理體驗，例如大量 artifact 或對話式工作流程。全螢幕模式可以掌控容器，並可選擇顯示分割的 artifact 區域。
具頁面工具的 agentic 網頁工作流程
將搜尋、購物車、預訂與表單等頁面層級動作，作為助理可呼叫的工具來曝光。Persona 的 WebMCP 做法會把這些工具留在頁面程式碼中，並在執行前要求使用者核准。
進階 agent UI 原型
原型化更豐富的對話式介面，例如語音 I/O、動態元件與串流內容窗格。進階範例展示了語音、artifact 側邊欄、答案表、快速回覆與串流卡片等模式。

Pros and Cons

Pros

可與任何能串流 SSE 回應的技術堆疊搭配使用。
支援多種嵌入模式，包括浮動、停駐與全螢幕版面。
提供透過 WebMCP 使用頁面中已曝光工具的途徑。
包含主題控制、主題編輯器與深色模式支援。
展示了核准、語音、artifact 與動態元件等實用範例。

Cons

所提供的證據中沒有定價頁，因此商業方案與成本尚不清楚。
部分進階功能是透過範例與展示頁呈現，而非單一產品參考資料，因此讀者可能需要查看文件才能理解實作細節。

FAQ

如何安裝 Persona？

Persona 可作為 widget 套件安裝，或透過 script 標籤安裝。首頁同時展示了以 npm 為基礎的設定與 CDN 安裝器，獨立範例也提供不同版面與流程的可複製貼上示例。

Persona 支援哪些 UI 版面？

範例顯示 Persona 支援浮動啟動器、停駐式側邊面板與全螢幕助理。你只需要變更 launcher 設定，不必重建 agent 或應用程式其餘部分。

Persona 可以連接哪些後端？

Persona 會從 SSE 後端串流，並可透過 customFetch 與 parseSSEEvent 調整不同的請求或事件格式。網站也列出 Hono、Express、SvelteKit、LangGraph.js、OpenAI Agents SDK、Vercel AI SDK，以及 Runtype proxy 的範例整合。

Persona 能處理進階 agent UI 模式嗎？

可以。文件與範例展示了主題 tokens、深色模式、即時主題編輯器、核准處理、語音輸入與輸出、artifact 側邊欄，以及動態元件，作為支援的模式。

Persona 的費用是多少？

網站上沒有可用的定價頁內容；/pricing 會回傳 404。首頁將 Persona 定位為開源程式庫，但在所提供的證據中沒有顯示任何商業方案細節。

Quick Facts

類別: 開發者工具 / AI 聊天
平台: Vanilla JavaScript / 網頁
安裝方式: npm 套件或 script 標籤
後端模型: SSE 串流後端
主要整合: WebMCP 頁面工具與核准流程
定價: 所提供的證據中沒有可用的定價頁