这可能是 Vue 生态最完整的语音智能体组件库

3,967 阅读3分钟

PixPin_2026-01-23_15-47-11.gif

大家好,我是 AI Elements Vuevue3-vant-mobile 的作者。

AI Elements Vue 发布后这段时间里,我们在做一个新的事情:ElevenLabs UI Vue,一个专为 AI 音频与语音智能体打造的开源组件库。他是 elevenlabs/ui移植版本,不是克隆,是完全的 Vue3 + 组合式 API 重写。同样基于 shadcn-vue 构建,旨在帮助您更快地构建多模态智能体体验。

• 涵盖聊天界面、语音转写、音乐处理等 22 个核心组件与示例
• 支持全方位自定义配置
• 采用 MIT 开源许可协议

探索地址:

话不多说,我们来看看有哪些组件。

组件

实时音频频率可视化工具,专为语音助手和音频界面设计,具备基于状态变化的动画效果。

PixPin_2026-01-23_14-21-10.gif

一个带有自动滚动和底部粘附行为的滚动对话容器,适用于聊天界面。

PixPin_2026-01-23_14-21-10.gif

一个完整的语音对话界面,包含麦克风控制、文本输入和实时波形可视化功能,专为智能体设计。

PixPin_2026-01-23_11-48-51.png

基于麦克风输入的实时画布音频波形可视化工具,支持自定义渲染模式。

PixPin_2026-01-23_14-44-08.gif

一款复古点阵显示组件,采用圆形单元格和平滑动画效果。非常适合复古显示屏、指示器和音频可视化应用。

PixPin_2026-01-23_14-44-08.gif

可组合的消息组件,具备头像、内容变体,以及针对用户和助手消息的自动样式设置。

PixPin_2026-01-23_15-05-16.gif

麦克风输入选择器,附带设备管理功能。

PixPin_2026-01-23_14-49-05.png

一个具有音频反应性、自定义颜色和代理状态可视化的 3D 动画球体,使用 Three.js 构建。

PixPin_2026-01-23_15-05-16.gif

使用 vue-stream-markdown 实现 AI 响应逐字平滑动画的流式 Markdown 渲染器。

PixPin_2026-01-23_15-26-21.gif

用于在时间轴上拖拽浏览的组件,通常用于音频或视频播放。

PixPin_2026-01-23_14-49-05.png

使用 Motion 实现带有渐变微光效果和视口触发动画的动效文本。

PixPin_2026-01-23_15-21-47.gif

一款紧凑的语音转文本输入组件,采用 ElevenLabs Scribe 实现实时转录。

PixPin_2026-01-23_15-37-12.png

一个用于显示音频转录的组件,支持逐字高亮并与音频播放同步。

PixPin_2026-01-23_15-23-56.gif

带有录音状态、实时波形可视化和自动反馈转换的交互式按钮。

PixPin_2026-01-23_15-24-43.png

带音频预览、球体可视化效果和 ElevenLabs 语音集成的可搜索语音选择器。

PixPin_2026-01-23_15-26-21.gif

基于 Canvas 的音频波形可视化组件,支持录音、播放进度条拖动和麦克风输入功能。

PixPin_2026-01-23_15-26-21.gif

一款可自定义的音频播放器,具备进度控制和播放管理功能,适用于音乐、播客及语音内容。

PixPin_2026-01-23_15-26-21.gif

接下来,让我们再看看 Blocks。

Blocks

PixPin_2026-01-23_14-21-10.gif

PixPin_2026-01-23_14-21-10.gif

PixPin_2026-01-23_14-21-10.gif

PixPin_2026-01-23_14-21-10.gif

PixPin_2026-01-23_14-28-33.png

最后,欢迎大家来试用 ElevenLabs UI Vue,并提出建议和反馈。

如果大家喜欢,请给个 star点赞收藏 支持一下,谢谢 😀🙏。