AI 开发者工具
Persona
一个使用VanillaJS构建的开源Agent UI库，支持WebMCP、SSE流式传输和可定制主题，用于构建智能代理前端体验。
Persona
什么是 Persona？
Persona是一个开源、轻量级的JavaScript库，用于为AI代理创建智能用户界面（聊天UI）。它支持浮动、停靠或全屏布局，可与任何SSE后端集成，并使用WebMCP让代理使用页面工具。它不依赖于特定框架，并包含Shadow DOM隔离、主题和可插拔解析器。
Persona 与相似工具比较
| 计价模式 | 免费 | 免费 | 免费 | 免费 |
| 免费额度 | ||||
| 主要功能 |
|
|
|
|
| 优点 |
|
|
|
|
| 缺点 |
|
|
|
|
| 适合对象 |
|
|
|
|
如何使用 Persona？
- 1通过npm安装：npm install @runtypelabs/persona
- 2导入CSS：import '@runtypelabs/persona/widget.css'
- 3导入initAgentWidget：import { initAgentWidget } from '@runtypelabs/persona'
- 4使用目标元素和配置（API URL）初始化小部件：
- 5initAgentWidget({ target: '#chat', config: { apiUrl: 'https://your-api.com/chat' } })
- 6通过配置选项自定义启动器类型（floating, docked, fullscreen）。
Persona 主要功能
- 原生WebMCP支持：代理可通过document.modelContext使用页面上注册的工具
- Shadow DOM渲染实现样式隔离
- 支持SSE流式传输，带有可插拔解析器和自定义fetch
- 三层令牌主题（调色板、语义、组件），支持深色模式和实时编辑器
- 浮动、停靠或全屏用户体验模式
- 可插拔的传输层和解析器适配器
Persona 使用场景
- 客户支持聊天小部件
- 现有Web应用的AI副驾驶
- 新用户入门助手
- 文档问答代理
- 电商助手，用于产品搜索和预订
Persona 价格与免费额度
Persona 目前采用 免费 模式。
此工具完全免费使用
Persona 优缺点
优点
- 轻量级且框架无关（纯VanillaJS）
- WebMCP标准使代理能够使用现有的页面工具
- Shadow DOM将样式与宿主应用隔离
- 可插拔的传输层和解析器适用于任何SSE后端
- 全面的主题系统，便于品牌定制
缺点
- 文档和示例仍在完善中
- 需要后端SSE端点才能实现全部功能
Persona 最适合哪些用途？
- 构建自定义AI代理UI的开发者
- 希望将代理聊天集成到现有Web应用的团队
- 需要轻量级、可扩展聊天小部件的项目
Persona 常见问题
Persona 的免费替代工具
Manifest 将任意 URL 转换为 AI 代理可以在页面上交互的结构化 JSON 映射——按钮、表单、输入框和必填字段。
免费
Persona 的最佳替代 AI 工具
Magpie 是一款专为人类和 AI 代理设计的、有主见的会计 CLI 工具，提供复式记账、RBAC 以及基于 Jaybase 的不可变事件存储。
终端用户界面，用于在 tmux 中管理 AI 编码代理会话（Claude Code、OpenCode、Codex、Grok Build），支持实时状态、分组树和差异审查。
