Persona.js

Persona.js 是什么？

Persona 是一个轻量级、开源的 AI 聊天 UI 库，通过纯 JavaScript 嵌入任何网站。与基于 React 的聊天框架不同，Persona 无框架依赖、与后端无关，并且原生支持 WebMCP，因此您的助手可以发现并执行父页面暴露的工具。它无需重建前端或编写定制 API，即可添加流式聊天、语音、主题和交互式副驾驶体验。

适用人群

• 前端开发者：希望在任何网站中嵌入 AI 助手，无需重写技术栈或学习新框架
• 产品团队：需要构建智能代理体验，直接操作页面工具（如搜索、购物车、预订或表单）
• 初创公司与独立开发者：寻找快速、可嵌入的聊天 UI，兼容任何后端和托管方案

主要特性

三种布局模式

Persona 提供浮动、侧边或全屏三种用户体验模式。通过更改单个 launcher 配置值，即可在角落启动器（用于支持）、侧边副驾驶（可调整布局大小）或全屏助手（占据整个页面）之间切换。

WebMCP 原生工具执行

将页面操作、搜索、购物车、预订和表单暴露为 WebMCP 工具。代理可直接驱动这些工具，并内置用户审批机制，无需后端集成即可发现和执行工具。

Shadow DOM 隔离

Shadow DOM 渲染和带前缀的 CSS 确保组件与宿主页面样式完全分离。将 Persona 嵌入任何页面，样式不会相互泄漏，保留您现有的设计系统。

可插拔流式传输

SSE 流式传输配合可插拔解析器，通过 customFetch 和 parseSSEEvent 适配任意请求或事件格式。这适用于任何支持服务器发送事件的后端。

突出特点

Persona 是首个将浏览器视为一等运行时（而非仅显示界面）的代理 UI 库。

大多数聊天 UI 是被动的——它们显示文本并等待 API 响应。Persona 颠覆了这一模式，让代理成为页面的活跃参与者。它能发现父页面暴露的工具，在用户审批后执行这些工具，并实时流式传输响应。这意味着您的助手可以搜索文档、将商品加入购物车或填写预订表单，而无需为这些操作编写任何后端端点。

值得一试，如果……

您想为任何网站（从静态 HTML 页面到现代 SPA）添加 AI 助手，而无需采用新框架或重建前端。如果您需要流式聊天、语音、主题和代理工具使用功能，且兼容任何后端，Persona 只需几行代码即可提供生产级解决方案。