Persona icon

Persona

Persona 是一款开源原生 JavaScript 库,用于为网站添加流式 AI 聊天。支持浮动、停靠和全屏布局,并提供 WebMCP 页面工具与 SSE 后端。

Persona

Persona 是什么

Persona 是一款面向原生 JavaScript 的开源代理 UI 库,可为网站添加流式 AI 聊天体验。它被定位为一种轻量、可扩展的组件,可在任何带有 SSE 后端的技术栈上运行,也可通过网站的安装器流程使用。

该产品支持多种呈现模式,包括浮动启动器、停靠式副驾驶面板和全屏助手。它还包含 WebMCP 支持,因此代理可以发现网站已暴露的页面工具,请求批准,然后直接在浏览器中执行搜索或购物车操作等动作。

核心能力

多种启动器布局

将 Persona 作为浮动启动器、停靠面板或全高助手挂载。主页显示,你可以通过修改启动器配置来在这些布局之间切换,而无需重写应用。

npm 和 script 标签安装

通过包导入或 script 标签进行安装。主页同时包含 npm 设置和 CDN 安装器,使其既可用于框架页面,也可用于无框架页面。

可插拔的 SSE 传输

将组件连接到支持 SSE 的流式后端。文档说明该传输层可插拔,并通过 customFetch 和 parseSSEEvent 支持自定义请求与事件解析。

带批准流程的 WebMCP 工具执行

将页面操作暴露为 WebMCP 工具,让代理可以使用现有站点功能,例如搜索、购物车、预订或表单。代理会在调用工具前请求确认,结果会流式返回到聊天中。

样式隔离

使用 Shadow DOM 渲染和带前缀的 CSS,让组件样式与宿主页面样式隔离。网站明确说明这可以防止样式双向泄漏。

主题编辑器和设计 tokens

通过分层 token 系统、深色模式和实时主题编辑器来自定义聊天体验。主页将主题定制定位为一种在不分叉组件的情况下匹配宿主品牌的方法。

Persona 适用场景

  • 网站支持与入门引导

    为支持、文档、销售或入门页面添加流式聊天启动器,而无需从头构建自定义聊天壳。

  • 停靠式产品助手

    当你希望助手与用户的主要任务并行存在,而不是替换整个页面时,可在工作区或仪表盘旁嵌入一个副驾驶。

  • 独立助手体验

    构建一个全屏助手界面,用于需要聊天 UI 接管页面并可选显示工件面板的类应用工作流。

  • 由代理驱动的页面操作

    通过带用户批准的 WebMCP 工具,将现有站点功能,例如搜索、购物车操作、预订或表单,暴露给代理。

  • 原型设计与实现参考

    在连接你自己的后端之前,可使用演示模式和高级示例作为批准流程、语音输入输出、工件侧边栏或流式 UI 行为的参考。

Pros and Cons

Pros

  • 可与原生 JavaScript 配合使用,无需前端框架。
  • 可通过同一启动器配置支持多种 UI 布局。
  • 可以连接 SSE 后端,并通过 customFetch 和 parseSSEEvent 适配不同的事件格式。
  • 让代理通过 WebMCP 使用页面工具,而不是要求把所有操作都重建到聊天 UI 中。
  • 使用 Shadow DOM 和带前缀的 CSS 将宿主样式隔离开。

Cons

  • 定价页面当前返回 404,因此价格和套餐详情并未在该页面上清晰公开。
  • 最丰富的示例位于演示页和高级页面,因此读者可能需要查看示例来理解完整的模式范围。
  • 部分集成以示例配方的形式展示,而不是单一统一的后端包,因此实现细节会因技术栈而异。

FAQ

如何将 Persona 添加到网站中?

Persona 会挂载一个聊天组件,从你的后端流式返回响应。网站展示了通过指定目标元素和 API URL 进行初始化的方式,也支持通过 script 标签安装以获得更快的设置路径。

它可以连接哪些后端?

产品页面说明 Persona 可与任何 SSE 后端配合使用,并提供了 Hono、Express、SvelteKit、LangGraph.js、OpenAI Agents SDK、Vercel AI SDK 等栈的示例集成。它还通过 customFetch 和 parseSSEEvent 支持自定义适配器。

Persona 支持哪些 UI 布局?

网站展示了三种启动器模式:浮动、停靠和全屏。它还提到了默认的浮动启动器、停靠侧边面板,以及全高助手布局。

Persona 能驱动页面上的操作吗?

Persona 支持 WebMCP 页面工具。文档说明你可以在页面上注册工具,让代理通过 document.modelContext 发现这些工具,并在工具执行前要求用户批准。

网站上有定价说明吗?

价格页面当前在 /pricing 下不可用,因此网站未在那里提供价格结构。主页和文档强调开源使用,并可通过 npm 或 CDN 脚本安装。

Quick Facts

类别
开发者工具 / AI 聊天 UI
主要技术栈
VanillaJS, SSE, WebMCP
安装方式
npm 包或 script 标签
品牌
Persona
源域名
persona-chat.dev
开源
是,主页描述为开源