社区案例

rtc-agent 的接入方式非常灵活 —— 从在线编辑器到完整业务应用，都可以用同一套”声明式 API + Agent”模式赋能 AI。本页汇总社区的真实案例。

💡 如果你的项目也接入了 rtc-agent，欢迎通过 GitHub PR 提交案例。

Mermaid Live Editor

社区案例 #1

Mermaid 官方在线图表编辑器。通过 不到 30 行胶水代码 接入，AI 通过自然语言画图、校验、修错。

• 暴露 window.editorAPI（getCode / setCode / validate / waitForReady）
• 不修改上游源码，改动率 < 2%

查看案例详情 → · 在线体验 ↗

Peep 命理工作台

社区案例 #2

React 构建的国学命理应用。通过 npm 安装 + 嵌入式最大化模式 接入，AI 操作人物档案、紫微 / 大六壬 / 六爻三大排盘引擎与知识库。

• 用 Zod Schema 声明 6 组业务函数（40+ 函数），自动生成 OpenAPI 文档
• 自定义 AuthProvider 鉴权 + 写操作确认机制
• 5:3 双栏布局，AI 助手始终嵌入在页面右侧

查看案例详情 → · 在线体验 ↗

RTC Agent 官方文档站

社区案例 #3

你正在阅读的 RTC Agent 官方文档站。通过 CDN NPM 包 接入，AI 助手帮助用户学习、导航和答疑。

• 使用 jsdelivr CDN，无需构建工具
• 悬浮窗口模式（右下角最小化）
• 6 个文档专用函数（搜索、导航、代码提取）

查看案例详情 → · 在线体验 ↗

接入模式一览

不同场景下，rtc-agent 的典型接入方式：

加载方式	宿主技术栈	窗口模式	适用场景	代表案例
CDN	Astro / 静态站点	悬浮窗	文档站、博客、落地页	RTC Agent Docs
npm / pnpm	Svelte	悬浮窗	单页应用、轻量集成	Mermaid Live Editor
npm	React / Vue / 任意框架	嵌入式	复杂业务应用、多模块	Peep

通用接入步骤

无论哪种模式，核心流程都只有三步：

1. 暴露宿主 API 到 window —— 让 Agent 能读写你的业务状态
2. 声明 Agent 身份与工具 —— 通过 agentConfig 描述 persona 和 functions
3. 挂载 <rtc-agent> 组件 —— 配置 app-label / scenarios-url / server-url

详细教程见 Getting Started →