加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
想象一下：你正在开发一款语音助手产品，好不容易接入了 ElevenLabs 的语音合成 SDK，却发现界面设计成了难题——波形图怎么做？对话气泡怎么渲染？用户按下麦克风按钮时，那个发光的悬浮球（Orb）动画从哪里找？这些问题在实际产品开发中会消耗掉数周的工程时间，而 ElevenLabs UI 正是来解决这个痛点的。
ElevenLabs UI 是由知名 AI 语音公司 ElevenLabs 开源发布的 React 组件库，基于 shadcn/ui 框架构建，专门面向多模态 AI 应用场景提供开箱即用的 UI 组件。2025年9月发布至今（2026年6月），已获得 2260 颗 GitHub Stars、164 个 Forks，是语音/音频 AI 应用界面开发领域最受欢迎的开源组件库之一。项目由 ElevenLabs 工程师 Louis Jordan 主责，采用 MIT 许可证，企业可免费商用。
语音 AI 应用的界面开发，长期处于「框架成熟、组件稀缺」的困境。主流 UI 框架（如 Material UI、Ant Design）提供的是通用业务组件，而非面向 AI 交互场景的专业 UI 单元——比如一个实时波形可视化组件、一个流式文本渐显效果、一组对话气泡消息流。这些看似简单的 UI 元素，实际开发时往往需要从 Canvas 绑定、Web Audio API、流式数据渲染等底层技术开始自研，投入巨大。
shadcn/ui 作为 2023 年以来最火的前端 UI 框架，采用了「代码复制而非 npm 安装」的独特理念，让开发者直接拥有组件源码并可自由修改。这种模式非常适合需要深度定制的 AI 应用场景。ElevenLabs 在 shadcn/ui 基础上构建自己的组件体系，兼具 shadcn/ui 的灵活性与 ElevenLabs 语音/Agent 领域的专业积累，形成了独特的定位优势。
ElevenLabs UI 提供两大类产物：独立 UI 组件（registry:ui） 和 完整页面区块（registry:block）。
| 组件 | 功能 | 依赖 |
|---|---|---|
| orb | 3D 发光悬浮球，语音交互时的视觉焦点，常见于 AI Agent 界面的「开始对话」按钮 | @react-three/drei, three.js |
| waveform | 静态音频波形可视化，展示预设音频的波形图 | - |
| live-waveform | 实时波形可视化，麦克风采集时实时绘制波形 | - |
| audio-player | 功能完整的音频播放器，含进度条、音量控制 | @radix-ui |
| conversation | 智能对话流容器，自动保持底部对齐，处理流式输出 | use-stick-to-bottom |
| message | 消息气泡组件，支持用户/AI 双角色、头像、时间戳 | class-variance-authority |
| response | 流式响应渲染组件，逐字显示 AI 返回内容 | streamdown |
| shimmering-text | 流光文字效果，AI 输出时的打字机视觉增强 | motion |
| voice-button | 一键语音按钮，内置 live-waveform | shadcn button |
| conversation-bar | 完整对话输入条，含麦克风、波形、发送按钮 | @elevenlabs/react |
| mic-selector | 多麦克风选择器，自动枚举系统可用麦克风 | shadcn dropdown |
| transcript-viewer | 实时转录查看器，Scribe V2 集成 | @elevenlabs/elevenlabs-js |
| speech-input | 语音输入框，麦克风+波形+语音转文字 | @elevenlabs/react, motion |
| bar-visualizer | 音频频谱柱状图可视化 | - |
| matrix | 矩阵雨视觉效果（黑客帝国风格） | - |
| voice-picker | ElevenLabs 音色选择器，内嵌 orb + audio-player | @elevenlabs/elevenlabs-js |
| scrub-bar | 音频进度条，可拖拽定位 | shadcn progress |
| Block | 场景 | 依赖 ElevenLabs 服务 |
|---|---|---|
| speaker-01 | 单音色播放器页面（包含 orb + waveform + audio-player） | 是 |
| transcriber-01 | 语音转文字页面，实时麦克风输入转写 | 是 |
| realtime-transcriber-01 | Scribe V2 实时转录（流式效果+语言切换） | 是 |
| voice-chat-01/02/03 | 完整语音对话界面，含 orb、对话流、shimmering text | 是 |
Blocks 机制的巧妙之处在于：开发者只需运行一条 CLI 命令，即可将一个完整的多模态页面「粘贴」到自己的 Next.js 项目中，同时附带必要的依赖声明和文件结构。这比单纯提供组件更进了一步，解决了「从零搭建语音 AI 页面」的启动成本问题。
项目采用 pnpm monorepo 架构，核心结构如下：
构建工具链：使用 Turbo（Turborepo）作为 monorepo 构建编排器，配合 Vite 作为组件开发环境，Vitest 作为测试框架。代码规范层面，项目配置了 ESLint + Prettier + Commitlint，commit message 必须符合 Conventional Commits 规范，从工程管理角度体现了较高的代码质量标准。
样式系统基于 Tailwind CSS + Radix UI 原子组件，继承了 shadcn/ui 的设计哲学。动画效果大量使用 Framer Motion 和独立的 motion 库，实现组件交互的流畅过渡。3D orb 组件依赖 React Three Fiber 生态（@react-three/fiber + @react-three/drei），将 Three.js 封装为 React 友好的组件。
# 安装单个组件
npx @elevenlabs/cli@latest components add orb
# 安装所有组件
npx @elevenlabs/cli@latest components add all
CLI 会自动配置 shadcn/ui 环境（如未初始化）、安装组件依赖、在项目中创建对应的 React 组件文件。
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json
# 或单个组件
npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json
值得注意的是，项目不提供 Docker 部署方式。对于希望在服务器端快速预览或演示的用户，需要自行在本地配置 Next.js 环境。这对非前端开发者有一定门槛，但组件本身以 npm 包形式分发，熟悉 Node.js 的开发者能快速上手。
尽管 ElevenLabs UI 大幅降低了语音 AI 界面的开发成本，但在实际使用中仍有一些需要注意的问题：
1. 强依赖 ElevenLabs SDK
部分核心组件（如 conversation-bar、voice-picker、transcriber-* 系列 blocks）依赖 @elevenlabs/react 或 @elevenlabs/elevenlabs-js SDK，这意味着项目与 ElevenLabs 平台深度绑定。如果需要在其他 TTS/ASR 提供商（如 OpenAI、Azure）上复用这些组件，需要自行做较大改造。orb 和 waveform 等纯展示型组件则相对独立。
2. 文档站点的网络可达性
组件文档和在线演示托管在 ui.elevenlabs.io，在部分地区可能存在访问限制。对于中文开发者群体，建议 ElevenLabs 能提供更稳定的访问方式或镜像站点。
3. 3D orb 组件的包体积
orb 组件依赖 three.js + @react-three/fiber + @react-three/drei，仅这一组依赖就会向项目增加数十 MB 的包体积。如果项目不需要 3D 效果，选择不安装 orb 组件是更合理的做法。
ElevenLabs UI 的出现，反映了 AI 应用开发领域的一个明确趋势：从「模型即产品」到「产品即体验」的转变。当底层模型能力趋于同质化，交互体验成为差异化竞争的核心，而 UI 组件库正是构建差异化体验的基础设施。
开源社区正在快速填补 AI 原生 UI 的组件空白：Replicate 社区的 Replicate UI、LangChain 的 LangServe UI、还有 ElevenLabs UI，都在从不同角度解决「如何让 AI 应用的界面更专业、更好用」的问题。可以预见，未来会有更多针对特定 AI 交互模式（如多模态对话、实时协作、Agent 执行流）的专业 UI 组件库涌现。
对于前端开发者而言，ElevenLabs UI 提供了进入 AI 应用开发领域的友好入口——不需要深入理解语音 AI 的底层算法，通过组件复用即可构建具备专业外观的语音/音频产品界面。
| 维度 | 评价 |
|---|---|
| 代码质量 | 高，TypeScript 严格模式，ESLint + Prettier + Vitest 完整配置 |
| 文档完整性 | 极高，交互式文档站 + shadcn/ui 风格文档 + 完整 README |
| 组件设计 | 优秀，基于 shadcn/ui 的代码复制模式，定制灵活度高 |
| 维护活跃度 | 高，最近更新 2026-06-09 |
| 社区生态 | 快速增长，配合 ElevenLabs 官方产品和文档形成完整生态 |
总结：ElevenLabs UI 是目前面向语音/音频 AI 应用界面开发的最完整开源组件库，基于 shadcn/ui 的代码复制模式兼顾了灵活性与易用性。对于需要快速构建 AI 语音助手、实时转录、音频播放等场景界面的开发者，这个项目能显著缩短从原型到产品的开发周期。