Persona

主要特性

• ✓
  三种 UX 模式：通过修改启动器配置，即可在浮动、停靠或全屏布局间切换，无需改动 Agent 或应用代码。
• ✓
  原生 WebMCP 工具调用：将页面操作（如搜索、购物车、预订、表单）暴露为 WebMCP 工具，Agent 可直接驱动，内置用户确认。
• ✓
  Shadow DOM 样式隔离：组件与宿主样式完全隔离，通过 Shadow DOM 渲染和前缀 CSS，互不干扰。
• ✓
  SSE 流式支持：兼容任何 SSE 后端，实现 Agent 实时流式响应。
• ✓
  Agent 循环与工具调用：支持 Agent 循环，通过暴露的 WebMCP 工具操作应用，无需后端集成。
• ✓
  轻量纯 JavaScript：无框架依赖，纯 JS 运行在任何技术栈上。
• ✓
  简单安装方式：通过 npm（@runtypelabs/persona）或 CDN 脚本标签安装，配置极简。
• ✓
  可主题化编辑器：内置主题编辑器，可自定义组件外观。
• ✓
  全屏模式：关闭启动器，使用全屏模式让组件占据整个页面。

目标用户

Persona 面向前端开发者、Web 开发者和产品团队，他们希望为网站添加智能、可自主操作的聊天界面，而无需重写技术栈。特别适合构建客户支持组件、Copilot 体验或全屏 AI 助手，且需要通过 WebMCP 工具操作页面操作的团队。

如何使用 Persona？

通过 npm 安装（npm install @runtypelabs/persona）或在 HTML 中引入 CDN 脚本标签。导入 CSS 和初始化函数，然后配置 SSE 后端 API URL。通过设置启动器配置选择 UX 模式（浮动、停靠或全屏）。浮动模式使用默认启动器；停靠模式设置 mountMode: "docked" 并指定侧边和宽度；全屏模式禁用启动器并设置 fullHeight: true。将目标指向 DOM 元素（如 #chat 或 #workspace）即可挂载组件。

效果评价

Persona 提供了一种精致且对开发者友好的方式嵌入 Agent 聊天组件，核心优势在于灵活性和隔离性。三种 UX 模式覆盖了常见部署场景，无需后端改动。Shadow DOM 样式隔离是对担心 CSS 冲突团队的突出亮点。虽然演示案例（WebMCP 店铺、日历、幻灯片）展示了实际潜力，但该库的真正实力在于其零框架、纯 JavaScript 的设计和原生 WebMCP 工具调用。对于寻求轻量、可扩展且兼容任何 SSE 后端的 Agent UI 的开发者来说，Persona 是一个扎实、不花哨的选择。