多种启动器模式
Persona 可作为浮动启动器、停靠式 copilot 或全屏助手挂载。布局通过启动器配置控制，因此同一个代理可以以不同的 UI 形态嵌入。
Persona
认领Persona 是一款开源 VanillaJS agent UI 库，可为网站添加流式 AI 聊天。支持浮动、停靠和全屏布局，并可连接 SSE 后端，通过 WebMCP 暴露页面工具。
Persona 是什么
Persona 是一款开源 agent UI 库，可使用原生 JavaScript 为网站添加流式 AI 聊天体验。首页将其描述为轻量、可扩展且原生支持 WebMCP，并提供可通过 npm 或 script 标签完成的安装方式。
它的主要目的是为开发者提供一个可复用的前端层来承载 agentic 体验，而不将 UI 绑定到特定框架。同一个组件可以通过更改配置，而不是重建集成，来作为浮动面板启动、停靠在应用旁边，或展开为全屏助手。
功能
灵活的安装路径
该产品同时支持 npm 安装和 script 标签安装。首页展示了包导入流程、全局安装脚本，以及用于生成客户端 token 和安装器片段的 CLI 路径。
与后端无关的流式传输
Persona 旨在从任何 SSE 后端进行流式传输，并提供 customFetch 和 parseSSEEvent 等钩子来适配请求和事件格式。网站还列出了一些后端栈的入门示例。
带审批的 WebMCP 工具调用
WebMCP 让助手可以使用页面中已存在的工具。演示展示了在 document.modelContext 下注册的页面工具，在执行前会获得用户批准，并将流式结果返回给聊天。
可主题化的 UI 系统
主题系统围绕一个包含调色板、语义和组件层的 token 树构建。网站还提到深色模式和实时主题编辑器，可在不分叉组件的情况下匹配宿主应用。
高级 agent UI 模式
高级示例包括工具审批卡片、语音输入输出、artifact 侧栏、动态组件、流式 Markdown 表格以及文本显现效果。它们展示的是可工作的模式，而不是抽象的宣称。
常见用例
网站支持与入门引导
以最少的布局工作为现有网站添加支持或入门引导助手。浮动启动器被呈现为支持、文档、销售或入门引导流程的默认即插即用选项。
应用内工作区旁的 copilot
在工作区或仪表板旁边嵌入一个助手，使其可以在不占据整个页面的情况下提供帮助。Persona 的停靠模式会包裹一个区域，并允许助手推动、调整大小或覆盖布局。
全屏助手体验
为需要更多屏幕空间的任务构建全页助手体验，例如以 artifact 为主或对话式工作流。全屏模式可以接管容器，并可选显示分栏的 artifact 区域。
带页面工具的 agentic Web 工作流
将搜索、购物车、预订和表单等页面级操作暴露为助手可调用的工具。Persona 的 WebMCP 方法将这些工具保留在页面代码中，并在执行前请求用户批准。
高级 agent UI 原型
原型化更丰富的对话界面，例如语音输入输出、动态组件和流式内容面板。高级示例展示了语音、artifact 侧栏、答案表、快速回复和流式卡片的模式。
Pros and Cons
Pros
- 可与任何能够流式返回 SSE 响应的技术栈配合使用。
- 支持多种嵌入模式，包括浮动、停靠和全屏布局。
- 提供通过 WebMCP 使用页面中已暴露工具的路径。
- 包含主题控制、主题编辑器和深色模式支持。
- 展示了审批、语音、artifact 和动态组件的实用示例。
Cons
- 所提供证据中没有定价页面，因此商业包装和成本不明确。
- 一些高级能力是通过示例和演示页面展示的，而不是单一产品参考，因此读者可能需要查看文档才能了解实现细节。
FAQ
如何安装 Persona？
Persona 作为一个组件包安装，或通过 script 标签安装。首页展示了基于 npm 的设置和 CDN 安装器，独立示例还包含适用于不同布局和流程的可复制示例。
Persona 支持哪些 UI 布局？
示例显示它支持浮动启动器、停靠侧边栏和全屏助手。你只需更改启动器配置，而不是重建代理或应用的其他部分。
Persona 可以连接哪些后端？
Persona 可从 SSE 后端进行流式传输，并可通过 customFetch 和 parseSSEEvent 适配不同的请求或事件格式。网站还列出了 Hono、Express、SvelteKit、LangGraph.js、OpenAI Agents SDK、Vercel AI SDK 以及 Runtype proxy 的示例集成。
Persona 能处理高级 agent UI 模式吗？
可以。文档和示例展示了主题 token、深色模式、实时主题编辑器、审批处理、语音输入输出、artifact 侧边栏以及动态组件等支持模式。
Persona 的价格是多少？
网站上没有可用的定价页面内容；/pricing 会返回 404。首页将 Persona 定位为开源库，但所提供证据中未显示任何商业方案详情。
Quick Facts
- 类别
- 开发者工具 / AI 聊天
- 平台
- 原生 JavaScript / Web
- 安装方式
- npm 包或 script 标签
- 后端模型
- SSE 流式后端
- 显著集成
- WebMCP 页面工具和审批流程
- 定价
- 所提供证据中没有定价页面