Persona

Freemium

访问

开源 VanillaJS 智能体 UI，为网站添加流式 AI 聊天

访问网站

什么是 Persona？

Persona 是一款开源 agent UI 库，可使用原生 JavaScript 为网站添加流式 AI 聊天体验。首页将其描述为轻量、可扩展且原生支持 WebMCP，并提供可通过 npm 或 script 标签完成的安装方式。

它的主要目的是为开发者提供一个可复用的前端层来承载 agentic 体验，而不将 UI 绑定到特定框架。同一个组件可以通过更改配置，而不是重建集成，来作为浮动面板启动、停靠在应用旁边，或展开为全屏助手。

Persona 能做什么？

多种启动器模式

Persona 可作为浮动启动器、停靠式 copilot 或全屏助手挂载。布局通过启动器配置控制，因此同一个代理可以以不同的 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 侧栏、答案表、快速回复和流式卡片的模式。

常见问题

如何安装 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 定位为开源库，但所提供证据中未显示任何商业方案详情。