Persona.js：一款原生WebMCP的輕量級Agent UI庫（MIT許可）

Persona.js 是一款由 Runtype 團隊開發的純 JavaScript Agent UI 庫，採用 MIT 許可釋出。它旨在幫助開發者快速構建具備智慧代理能力的互動式前端介面，而無需依賴特定的框架或複雜的後端整合。其核心設計遵循 WebMCP（Web Model Context Protocol）標準，使得瀏覽器中的頁面工具可以輕鬆暴露給 AI 代理使用。

庫的核心特性包括：

1. 原生 WebMCP 支援：透過 document.modelContext 註冊頁面工具，Persona 會自動發現這些工具，並在呼叫前徵求使用者同意。無論是搜尋、購物車、預訂還是表單操作，都可以在頁面程式碼中定義，然後透過聊天介面以自然語言方式觸發。

1. 隔離性：使用 Shadow DOM 渲染和字首 CSS，確保小部件的樣式與宿主頁面完全隔離，不會互相洩露。

1. 靈活的後端傳輸：支援 SSE（Server-Sent Events）流式傳輸，並帶有可插拔的解析器。透過自定義 fetch 和 parseSSEEvent 函式，可以適配任意請求或事件格式。

1. 可定製的主題：採用三層層級令牌系統——調色盤、語義、元件——同時支援深色模式和即時主題編輯器。可以輕鬆匹配品牌風格而無需修改小部件內部。

快速開始

Persona 提供了多種整合方式：

• 純指令碼標籤：無框架安裝，基於 Node.js HTTP 後端。
• AI SDK + WebMCP：在 Vercel AI SDK 後端上使用 WebMCP 頁面工具。
• OpenAI Agents：基於 OpenAI Agents SDK 的後端。
• LangGraph.js：將 LangGraph.js 圖流式傳輸到小部件。
• Hono、Express、SvelteKit 等框架的介面卡。

最簡安裝只需兩步：引入 CSS 和 JS，然後呼叫 initAgentWidget 並指向 SSE 端點。例如：

import "@runtypelabs/persona/widget.css";
import { initAgentWidget } from "@runtypelabs/persona";

initAgentWidget({
  target: "#chat",
  config: { apiUrl: "https://your-api.com/chat" },
});

對於使用 Runtype CLI 的使用者，可以一鍵生成代理和客戶端令牌，並自動生成安裝程式碼片段。此外，還提供了多個預構建示例，涵蓋商店、日曆、幻燈片等場景，每個示例都包含可克隆和適配的後端程式碼。

Persona.js 的設計哲學是“Agent UI”而非“UI for Agent”，即讓代理直接操作應用中的現有功能，而不是為代理單獨構建 UI。這大大降低了開發門檻，使得任何前端開發者都可以在已有應用中快速整合智慧代理互動。