办公AI

Persona.js

适用于网站的无框架开源 AI 聊天 UI 库。

价格以官网为准编辑评分 未评分
访问官网 ↗

产品与联系信息

使用平台
网页版
语言支持
未注明
资料更新
2026-11-09
www.persona-chat.dev
Persona.js 产品截图查看大图 ↗
Persona.js 产品截图图片来源 ↗产品页面预览

核心能力

7 项
  • 无框架且原生支持原生 JavaScript(Vanilla JS)
  • 支持用于客户端工具发现与执行的 WebMCP 标准
  • 灵活的布局方式,包括悬浮组件、停靠侧边栏和全屏助手
展开全部 7 项
  • 无框架且原生支持原生 JavaScript(Vanilla JS)
  • 支持用于客户端工具发现与执行的 WebMCP 标准
  • 灵活的布局方式,包括悬浮组件、停靠侧边栏和全屏助手
  • 通过影子 DOM(Shadow DOM)和前缀 CSS 实现样式隔离
  • 可插拔的 SSE 流式传输适配器
  • 内置语音输入和输出功能
  • 功能完善的基于 Token 的主题编辑器

典型使用场景

3 项
  • 在现有的静态 HTML 或单页面应用(SPA)中添加 AI 客服或新手引导聊天组件
  • 创建一个可调节大小的侧边栏副驾驶(Copilot),直接与应用状态交互并执行页面级工具
  • 部署一个全屏的 AI 助手看板,支持流式传输 Markdown 表格和分屏组件(Artifact splits)
查看完整说明
  • 在现有的静态 HTML 或单页面应用(SPA)中添加 AI 客服或新手引导聊天组件
  • 创建一个可调节大小的侧边栏副驾驶(Copilot),直接与应用状态交互并执行页面级工具
  • 部署一个全屏的 AI 助手看板,支持流式传输 Markdown 表格和分屏组件(Artifact splits)

快速上手

1 项
  • 快速上手

    要使用 Persona,可以通过 npm 安装(运行 'npm install @runtypelabs/persona'),或者在 HTML 文件中通过 CDN 引入其全局脚本标签(script tag)。然后,调用 'initAgentWidget' 函数进行初始化,指定目标容器的选择器并配置自定义服务器发送事件(SSE)后端 API 的 URL。此外,你也可以运行 'npx @runtypelabs/cli@latest persona init' 来生成一段可以直接复制粘贴的安装代码片段。

查看完整说明
  • 快速上手

    要使用 Persona,可以通过 npm 安装(运行 'npm install @runtypelabs/persona'),或者在 HTML 文件中通过 CDN 引入其全局脚本标签(script tag)。然后,调用 'initAgentWidget' 函数进行初始化,指定目标容器的选择器并配置自定义服务器发送事件(SSE)后端 API 的 URL。此外,你也可以运行 'npx @runtypelabs/cli@latest persona init' 来生成一段可以直接复制粘贴的安装代码片段。

工具详细介绍进一步了解 Persona.js 的产品定位与使用说明展开阅读收起介绍

Persona 是一个由 Runtype 开发的轻量级、开源、无框架 AI 聊天 UI 库。它允许开发者在任何网站或静态 HTML 中嵌入可自定义主题的 AI 聊天组件或全屏副驾驶(Copilot)体验。该库不依赖特定后端,且原生支持 WebMCP 标准。这意味着 AI 助手可以自动发现并安全地执行由宿主页面代码直接暴露的工具(如搜索、购物车、预订和表单),并内置了用户确认机制。它支持 SSE 流式传输、智能体循环(Agent loops)、利用影子 DOM(Shadow DOM)实现样式隔离以防止 CSS 污染、语音输入/输出,并包含一个功能丰富的内置主题编辑器。

适合人群

  • 前端高级开发工程师
  • 全栈开发工程师
  • 软件工程师
  • AI 应用开发者
  • Web 开发工程师

产品优势

  • 零框架依赖,兼容任何前端技术栈
  • 原生支持 WebMCP,允许工具保留在客户端代码中,无需后端集成
  • 采用影子 DOM(Shadow DOM)渲染,防止样式与外部相互污染
  • 支持 Vercel AI SDK、LangGraph.js、OpenAI Agents 和 Hono 等主流后端生态适配器

使用注意

  • 运行需要兼容 SSE 的后端接口或代理设置
  • 高级流控需要配合 @runtypelabs/persona-proxy 等独立工具使用
产品表现洞察

Persona.js 数据分析

外部网站访问表现 · 与本站浏览量和用户评分分别统计

月访问量暂无数据环比待补充
平均访问时长暂无数据分:秒
每次访问页数暂无数据页面 / 次
跳出率暂无数据来源标注的离开比例

访客国家与地区

来源占比

来源未明确统计范围

暂无地区分布数据

流量来源渠道

渠道构成

来源未明确统计范围

暂无流量渠道数据

常见问题

2 个问题
什么是 WebMCP?Persona 是如何使用它的?

WebMCP 是一种标准,它为浏览器提供了一个中心位置(document.modelContext)来管理客户端的页面工具。Persona 原生支持这一标准,能够自动发现这些工具(例如商品搜索、将商品加入购物车或预订表单),并在调用前提示用户授权,随后将结果流式传输回聊天对话中,全程无需后端进行工具集成。

嵌入 Persona 会破坏我网站现有的样式吗?

不会。Persona 使用影子 DOM(Shadow DOM)渲染和带前缀的 CSS 规则来确保绝对的样式隔离。宿主页面的样式不会污染组件,组件的样式也不会影响到你现有的应用布局。

评论与评分

总评分
请选择

正在载入评论…

真实会员评论,审核通过后公开展示。回复不重复计入评分。

探索更多相关工具

更多同类工具

AI提示词

AIPRM

★ 4.1

面向 ChatGPT 用户的提示词模板扩展和社区。

ChatGPT 提示词库了解详情 →
编程AI

Cursor

★ 4.5

强调上下文感知、代码生成和 Agent 化体验的 AI IDE。

AI IDE了解详情 →
编程AI

GitHub Copilot

★ 4.6

主流 AI 编程助手,适合代码补全、生成和仓库级开发协作。

主流编程助手了解详情 →
办公AI

Notion AI

★ 4.5

Notion 内置 AI,适合文档、知识库和项目协作。

工作空间 AI了解详情 →
对话AI

Perplexity

★ 4.6

以搜索为核心的 AI 答案引擎,适合资料查找与调研。

搜索问答助手了解详情 →

安全验证

请完成验证后继续操作。