ElevenLabs UI

ElevenLabs UI 是一套基于 shadcn/ui 构建的开源 React 组件库，专为在 Web 应用中集成 ElevenLabs 智能体与 Audio SDK 而设计，提供波形、球体、消息等可自定义 UI 组件。

核心组件与能力

库内包含两类开箱即用的示例组件：transcriber-01 是一款语音转写组件，可直接嵌入任意 Web 应用；voice-chat-03 则是一个内置状态管理的多模态聊天界面，只需传入 ElevenLabs Agent ID 即可运行。

• Orb 组件：通过 pnpm dlx @elevenlabs/agents-cli@latest components add orb 命令安装
• 组件完全基于 shadcn/ui 构建，支持深度自定义样式与行为
• 所有组件均通过 @elevenlabs/agents-cli 命令行工具获取，无需手动复制代码

快速上手

安装组件只需一条命令：pnpm dlx @elevenlabs/agents-cli@latest components add <component>。例如安装 Orb 组件时运行 pnpm dlx @elevenlabs/agents-cli@latest components add orb 即可。

• 命令行工具自动处理组件依赖与注册表配置
• 官方提供详细文档指导搭建智能体与音频界面
• 支持 TypeScript 类型定义，与现有 React 项目无缝集成

适用场景

该组件库面向需要快速为 Web 应用添加语音交互能力的开发者，尤其适合构建对话式 AI 前端、语音转写工具、多模态聊天界面等场景。

• 智能客服：基于 ElevenLabs Agents 构建语音聊天界面
• 内容创作：集成语音转写组件实现实时字幕生成
• 原型开发：利用预制组件快速验证语音交互产品概念

常见问题

Q1：ElevenLabs UI 是否需要付费？

A1：组件库本身开源免费，但使用时需要配合 ElevenLabs API，API 按量计费（具体价格见 ElevenLabs 官网定价页）。

Q2：如何将 ElevenLabs UI 集成到现有 React 项目？

A2：在项目根目录运行 pnpm dlx @elevenlabs/agents-cli@latest components add <组件名>，命令行会自动添加组件及其依赖。

Q3：ElevenLabs UI 支持哪些语音功能？

A3：支持语音转写（transcriber-01 组件）、多模态语音聊天（voice-chat-03 组件），以及通过 Orb 组件展示音频可视化效果。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。