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。这大大降低了开发门槛，使得任何前端开发者都可以在已有应用中快速集成智能代理交互。