II ElevenLabs UI

ElevenLabs UI 是一个基于 shadcn/ui 构建的组件库，旨在帮助您更快速地构建音频与智能代理应用。

概述

ElevenLabs UI 提供了一系列预构建、可定制的 React 组件，专为智能代理与音频应用而设计，包括音圈、波形图、语音代理、音频播放器等。通过 CLI 工具，您可以轻松将这些组件添加到您的 Next.js 项目中。

安装

您可以直接使用 npx 运行 ElevenLabs Agents CLI，或者将其全局安装：

# 直接使用（推荐）
npx @elevenlabs/cli@latest components add <component-name>

# 或者使用 shadcn cli
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json

先决条件

在使用 ElevenLabs UI 之前，请确保您的 Next.js 项目满足以下要求：

• Node.js 18 或更高版本
• 项目中已初始化 shadcn/ui（运行 npx shadcn@latest init）
• 配置好 Tailwind CSS

使用方法

安装所有组件

一次性安装所有可用的 ElevenLabs UI 组件：

npx @elevenlabs/cli@latest components add all

该命令将：

• 如果尚未配置，则设置 shadcn/ui
• 将所有 ElevenLabs UI 组件安装到您配置好的组件目录中
• 在您的项目中添加必要的依赖项

安装特定组件

使用 components add 命令安装单个组件：

npx @elevenlabs/cli@latest components add <component-name>

示例：

# 安装音圈组件
npx @elevenlabs/cli@latest components add orb

替代方案：配合 shadcn/ui CLI 使用

您也可以使用标准的 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

所有可用的组件均可在此处查看：这里，或浏览示例组件列表：这里。

贡献

如果您希望为 ElevenLabs UI 做出贡献，请按照以下步骤操作：

1. Fork 仓库
2. 创建新分支
3. 对注册表中的组件进行修改
4. 向主分支提交 PR

请参阅 贡献指南。

许可证

根据 MIT 许可证 发布。

由 ElevenLabs 设计。

ElevenLabs UI 快速上手指南

环境准备

• Node.js ≥ 18
• 已初始化 shadcn/ui：npx shadcn@latest init
• 已配置 Tailwind CSS

安装步骤

方式一：官方 CLI（推荐）

# 安装全部组件
npx @elevenlabs/cli@latest components add all

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

方式二：shadcn CLI

# 安装全部组件
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json

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

基本使用

安装完成后，直接在代码中引入即可使用。例如使用 Orb 组件：

import { Orb } from "@/components/ui/orb"

export default function Page() {
  return <Orb />
}

所有组件文档与示例：https://ui.elevenlabs.io/docs/components