ui

项目概述

想象一下：你正在开发一款语音助手产品，好不容易接入了 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）。

UI 组件库（18个核心组件）

组件	功能	依赖
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

页面区块（Blocks，可一键生成完整页面）

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 架构，核心结构如下：

• apps/www：文档网站（Next.js App Router）和组件展示站，包含完整的组件文档和交互式演示
• packages/：待扩展的独立发布包（当前为空，预留扩展空间）
• apps/www/registry/：组件注册表，定义所有可用组件的元数据、依赖和文件路径

构建工具链：使用 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 友好的组件。

安装与使用

方式一：通过 ElevenLabs CLI（推荐）

# 安装单个组件
npx @elevenlabs/cli@latest components add orb

# 安装所有组件
npx @elevenlabs/cli@latest components add all

CLI 会自动配置 shadcn/ui 环境（如未初始化）、安装组件依赖、在项目中创建对应的 React 组件文件。

方式二：通过 shadcn/ui CLI

npx shadcn@latest add https://ui.elevenlabs.io/r/all.json
# 或单个组件
npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json

前置要求

• Node.js ≥ 18
• 已初始化 shadcn/ui 的 Next.js 项目
• Tailwind CSS 已配置

值得注意的是，项目不提供 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 语音助手、实时转录、音频播放等场景界面的开发者，这个项目能显著缩短从原型到产品的开发周期。