三种界面形态
同一套配置可在浮动启动器、停靠侧栏、全屏助手之间切换，只需改 launcher 参数，不必改动智能体或应用本身的代码结构。
价格免费
平台Web
归类AI 智能体
收录2026-10-11
复核2026-10-11
编辑评分
4.1 / 5
★★★★☆
Persona编辑总结
Persona 是 Runtype 团队打造的开源前端 UI 库，让开发者在纯 JavaScript 环境下为网站接入智能体聊天体验，无需前端框架。它提供浮动、停靠、全屏三种启动方式，通过 Shadow DOM 隔离样式，支持任意 SSE 后端流式输出，并原生集成 WebMCP 让智能体直接操作用户界面。官网未公开定价与免费额度上限，接入前需自行确认授权与费用细节。
Persona是什么？
Persona 由 Runtype 团队开发，定位是「VanillaJS 智能体 UI 库」。它面向需要在网页中加入 AI 聊天界面的开发者，强调不依赖 React、Vue 等框架，直接用原生 JavaScript 即可挂载。
按官网说明，核心形态是一个可定制的聊天组件：默认是页面角落的浮动启动器，也可以切换成紧贴应用侧边的停靠面板，或占据整页的全屏助手。切换方式只需改 launcher 配置，不必重写智能体或应用逻辑。组件通过 Shadow DOM 渲染并给 CSS 加前缀，隔离自身与宿主页面的样式。流式输出走 SSE，并提供 customFetch 与 parseSSEEvent 两个钩子来适配不同后端。它还支持把页面上的搜索、购物车、预订、表单等动作暴露为 WebMCP 工具，让智能体直接驱动这些操作，且内置用户审批环节。
不同角色的用法：独立开发者可以用 CDN 脚本标签或 npm 包快速挂载一个浮动客服窗口；产品团队可以选用停靠或全屏形态，把助手嵌进工作台或应用主体；需要配合自有后端的团队则通过 SSE 适配层对接，Runtype 自家的 CLI 也能在几秒内起一个 Persona 智能体和客户端令牌。官网提供了面向不同技术栈的预置示例。
Persona核心功能
操作宿主应用
把页面上的搜索、购物车、预订、表单等动作暴露为 WebMCP 工具，智能体即可直接驱动它们，且内置用户审批，无需额外后端集成。
样式完全隔离
借助 Shadow DOM 渲染与带前缀的 CSS，组件与宿主页面的样式互不影响，可以放进任意页面，不污染原有布局或全局样式。
适配任意 SSE 后端
通过 SSE 流式输出，并提供 customFetch 与 parseSSEEvent 两个可插拔解析钩子，可以按自有后端调整请求与事件格式，Runtype 只是快捷路径而非硬性依赖。
三层主题令牌
提供调色板、语义、组件三层级的 token 树，内置深色模式与实时主题编辑器，让界面贴合品牌视觉而无需 fork 组件源码。
两种接入方式
既可安装 npm 包 @runtypelabs/persona 并按需 import，也可用 CDN 脚本标签配合 window.siteAgentConfig 快速挂载，适配不同工程习惯。
Persona适合谁用？
独立开发者
推荐只想给已有站点加一个聊天窗口、不想引入前端框架时，用 CDN 脚本标签加一行配置即可起浮动启动器。
SaaS 产品团队
推荐需要把助手嵌进应用主体、共享工作区数据时，停靠或全屏形态更合适，侧栏宽度等可按页面区域调整。
自带后端团队
推荐已有自己的模型接口时，可用 customFetch 与 parseSSEEvent 适配请求与事件格式，不受 Runtype 绑定。
预算敏感的个人项目
有条件若要长期挂载或商用，需先确认费用与授权范围再决定是否采用。
Persona优点和缺点
优点
- 纯 JavaScript 即可接入，不需要 React、Vue 等前端框架
- 浮动、停靠、全屏三种形态靠改启动器配置切换
- Shadow DOM 加 CSS 前缀，组件样式与页面互不污染
- 支持任意 SSE 后端，customFetch 与 parseSSEEvent 可插拔
缺点
- 免费额度与服务等级
- 流式输出依赖 SSE，其他协议需自行适配
- WebMCP 工具需要页面侧先定义可操作动作
Persona常见问题
Persona 需要配合什么前端框架吗？＋
不需要。它以纯 JavaScript 形式分发，既可以用 npm 安装 @runtypelabs/persona 并 import，也可以直接引入 CDN 脚本并配置 window.siteAgentConfig，React、Vue 或原生页面都能挂载。
它可以接我自己的模型后端吗？＋
可以。组件通过 SSE 流式输出，并提供 customFetch 与 parseSSEEvent 两个解析钩子，让开发者调整请求与事件格式来匹配自有后端。Runtype 自家的接入只是快捷路径，并非强制依赖。
聊天窗口能直接操作我页面上的功能吗？＋
能。把页面上的搜索、购物车、预订、表单等动作暴露为 WebMCP 工具后，智能体即可直接驱动它们，并且过程中内置用户审批环节，无需额外的后端集成。
Persona竞品对比
| 工具 | 编辑评分 | 价格 | 核心功能 | 平台 |
|---|---|---|---|---|
| Persona本工具 | 4.1 | 免费 | 三种界面形态；操作宿主应用；样式完全隔离；适配任意 SSE 后端 | Web |
| FastbuildAI | — | 未标价 | 开源 AI 框架，用于快速、可定制的 AI 应用开发 | — |
| Claw Code | — | 未标价 | 基于 Python/Rust 的 Claude Code AI 智能体框架开源重写版 | — |
| Deploya | — | Free $0/mo；Pro $19.90/mo；Enterprise Cont | 使用 AI 在数秒内部署网站的无代码平台 | Web |
| Tambo AI | — | 免费与付费云套餐已不再开放注册 | 用于 React 前端的开源 AI 调度框架 | Web |
| Openclaw | — | MIT 开源，免费自托管 | 面向开发者，用于构建可编程、自托管 AI 工作流的开源 AI 自动化框架 | Web / macOS / Windows |
