Persona 是什麼？
Persona 是一套開源、純 Vanilla JS 的代理 UI 函式庫，讓開發者能為任何網站打造具備代理能力的前端互動體驗。它相容於任何技術棧與任何 SSE 後端，提供輕量、可擴充、且原生支援 WebMCP 的聊天元件。Persona 支援 SSE 串流、代理迴圈、工具呼叫，以及樣式隔離，完全不需要依賴任何框架。你可以將它嵌入頁面中，作為浮動啟動器、固定式副駕駛，或全螢幕助手——只需調整啟動器設定即可切換。
Application scenarios
客戶支援
加入浮動聊天啟動器，處理客服、文件、銷售或入門引導，無需調整版面配置。
副駕駛介面
在應用程式旁固定一個側邊面板，可調整大小、推擠或疊加版面，提供即時輔助。
全螢幕助手
填滿容器作為應用程式表面，並可選用工件分割畫面，打造沉浸式代理互動。
電子商務店面
透過 WebMCP 工具，讓代理直接操作商品搜尋、購物車與預約功能。
日曆排程
將日曆操作整合為 WebMCP 工具，透過聊天完成預約。
簡報投影片
透過代理驅動的 WebMCP 工具控制投影片，並內建使用者核准機制。
烘焙坊助手示範
在主題示範中展示訂購、庫存或客製需求的代理工作流程。
Core Features
三種 UX 模式
只需調整啟動器設定，即可在浮動、固定或全螢幕版面間切換——無需修改代理或應用程式。
原生 WebMCP 工具呼叫
將搜尋、購物車、預約、表單等頁面操作暴露為 WebMCP 工具，由代理直接驅動，並內建使用者核准。
Shadow DOM 隔離
透過 Shadow DOM 渲染與前綴 CSS，元件與主機樣式完全分離——不會互相干擾。
SSE 串流支援
可搭配任何 SSE 後端，即時串流代理回應。
代理迴圈與工具呼叫
支援代理迴圈，透過暴露的 WebMCP 工具操作你的應用程式，無需後端整合。
輕量 Vanilla JS
無框架依賴——純 JavaScript，可在任何技術棧上執行。
簡易安裝選項
可透過 npm（`@runtypelabs/persona`）或 CDN 的 script 標籤安裝，設定極簡。
可主題化編輯器
內建主題編輯器，可自訂元件外觀與風格。
全高度模式
關閉啟動器後啟用全高度模式，讓元件佔據整個頁面作為應用程式表面。
目標使用者
Persona 專為前端開發者、網頁開發者與產品團隊設計，讓他們能在不重寫技術棧的情況下，為網站加入具備代理能力的智慧聊天介面。特別適合正在打造客戶支援元件、副駕駛體驗，或需要透過 WebMCP 工具操作頁面動作的全螢幕 AI 助手的團隊。
如何使用 Persona？
透過 npm（npm install @runtypelabs/persona）安裝 Persona，或在 HTML 中加入 CDN script 標籤。匯入 CSS 與初始化函式，然後設定你的 SSE 後端 API URL。透過調整啟動器設定，選擇 UX 模式（浮動、固定或全螢幕）。浮動模式使用預設啟動器；固定模式設定 mountMode: "docked" 並指定側邊與寬度；全螢幕模式則停用啟動器並設定 fullHeight: true。將目標指向一個 DOM 元素（例如 #chat 或 #workspace）來掛載元件。
效果評價
Persona 提供了一套精緻且對開發者友善的方式來嵌入具備代理能力的聊天元件，重點在於靈活性與隔離性。三種 UX 模式——浮動、固定與全螢幕——涵蓋了常見的部署情境，無需修改後端。對於擔心 CSS 衝突的團隊來說，Shadow DOM 隔離是一大亮點。雖然示範案例（WebMCP 店面、日曆、投影片）展示了實際應用潛力，但這套函式庫真正的優勢在於其零框架、純 Vanilla JS 的設計，以及原生 WebMCP 工具呼叫能力。對於正在尋找輕量、可擴充、且能搭配任何 SSE 後端的代理 UI 的開發者來說，Persona 是紮實且不囉嗦的選擇。
Frequently Asked Questions
什麼是 Persona？
使用 Persona 需要付費嗎？
Persona 是否支援即時串流回應？
我可以自訂 Persona 的外觀來配合網站設計嗎？
Persona 的「代理循環」是什麼？
Persona 需要搭配特定框架才能使用嗎？
Persona - AI Tool Detail
Persona 是一款開源、可自訂主題的 AI 對話小工具，專為在網站上加入智慧聊天而設計。支援 SSE 串流、代理循環、工具使用與樣式隔離，無需依賴任何框架即可輕鬆整合。
Category：聊天機器人
Visit Link：https://www.persona-chat.dev/
Tags：開源、聊天小工具、AI聊天機器人、網站整合、可自訂