til/…/elevenlabs-ui-components
elevenlabs-ui-components.mdupdated 2026-08-012,610 chars

ElevenLabs 公式 OSS UI コンポーネントの​導入

DESIGN.mdに​よる​デザイン移植が仕様の​層を​カバーするのに​対し、​ElevenLabs​（イレブンラボズ）は実装​その​ものも​MITライセンスで​公開している。@elevenlabs/agents-cliを​使えば、​本家サイトと​同じ​UIプリミティブ​（＝再利用​可能な​最小単位の​UI部品。​Orb・波形表示・メッセージ​表示など）を​1行で​プロジェクトに​導入できる。​仕様と​実装の​両方を​組み合わせる​ことで、​再現度が​もう​一段​上がる。

あわせて​参照：DESIGN.mdに​よる​デザイン移植の​手引き（仕様層の​全体​像）。

リポジトリ

  • 公開先：github.com/elevenlabs/ui（MITライセンス、​shadcn/uiの​上に​構築されている）
  • CLI​（＝コマンドラインツール）​：@elevenlabs/agents-cli
  • 公式ドキュメント：ui.elevenlabs.io/docs/components

注意点と​して、eleven-labs/design-system（パリの​別会社）は​別組織である。​混同しない​こと。

1行での​インストール

pnpm dlx @elevenlabs/agents-cli@latest components add orb

これに​よりcomponents/ui/orb.tsxなどが​生成される。shadcn addと​同じ​コピー方​式であり、​依存関係が​パッケージの​中に​閉じ込められるのではなく、​自分の​プロジェクトの​コードと​して​手元に​来る。​以後は​自由に​編集できる。

手に​入る​もの

  • Orb —— 音声エージェントの​状態​（待機／​思考／発話）に​応じて​形を​変える​球体。​Three.js​（スリー・ジェイエス）​＋React Three Fiber＋WebGLシェーダー​（＝GPU上で​動く​描画プログラム）で​作られている。agentState、getInputVolume、colorsを​propsと​して​受け取る。
  • Waveform —— 音声の​入出力を​可視化する​波形表示。
  • Messages —— 会話ログ表示用の​UIプリミティブ。
  • Transcript —— リアルタイム文字起こしを​ストリーミング表示する​部品。

これらは​ElevenLabs本番サイトと同一の​ソースである​ため、​コピーした​瞬間から​トーンが​一致する。​手作業で​再現する​手間は​不要である。

DESIGN.md併用時の​役割分担

層担当
色・書体・影・余白の​トークンDESIGN-elevenlabs-io.md（DesignMDで​抽出）
Button／Card／Inputなどの​汎用プリミティブshadcn/ui + Tailwind
Orb／波形／メッセージなど​ElevenLabs固有の​部品@elevenlabs/agents-cli
ブランド固有の​レイアウトと​文言プロダクト側で​自前対応

DESIGN.mdだけでは​Orbを​再現できない。​テキストの​仕様書では​シェーダーを​表現できないからである。​逆に​agents-cliだけでは、​色や​radius​（角丸の​半径）が​ElevenLabsの​仕様から​ずれていく。​両方を​併用する​前提で​設計する。

よく​ある​失敗パターン

  • 「elevenlabs.ioを​見て​真似て」と​AIに​丸投げする —— 構造化されていない​曖昧な​指示であり、​参照の​質に​左右される​運任せに​なる。​DESIGN.md＋agents-cliの​組み合わせで​構造化する​こと。
  • Orbを​自力で​再現しようとする —— シェーダーの​ノイズ周波数・フレネル反射​（＝見る​角度に​よって​反射の​強さが​変わる​光学効果）の​ブレンド・音声反応の​カーブを​合わせ込むのは​数日が​かりの​作業に​なる。​公式実装を​フォーク​（＝複製して​自分の​管理下に​置く​こと）する​方が​速い。
  • shadcnの​既定値を​そのまま​使う —— globals.cssで​DESIGN.mdの​トークンを​上書きしない​限り、​agents-cliを​導入しても​色だけは​標準の​shadcnに​戻ってしまう。
  • prefers-reduced-motion（＝動きを​減らす設定を​尊重する​CSS機能）を​無視する —— Orbは​魅力的だが、​a11y​（アクセシビリティ＝様々な​利用者が​支障なく​使える​こと）の​観点で​静止版の​用意が​必須である。​agents-cli提供版が​これに​対応する​propsを​持つかは​ドキュメントで​確認する。

プロダクトと​コーポレートサイトでの​使い分け

  • プロダクト​（例：SCASの​対話UI） —— agents-cliを​導入する​価値が​最も​高い​場面である。​Orb・波形・トランスクリプトは​音声／エージェント型プロダクトの​差別化要素に​なる。
  • コーポレートサイト／ランディングページ —— ここで​Orbは​やり過ぎである。​DESIGN.mdの​トークンと​shadcn/uiだけで​ElevenLabsらしさは​十分再現できる。​マーケティングページに​重い​WebGLを​載せると​LCP​（Largest Contentful Paint＝ページ​表示速度を​測る​指標の​1つ）を​悪化させる。

判断軸は、​その​UIが​利用者に音声や​エージェントとの​会話を​見せる​ものかどうかである。​そうでなければ​DESIGN.mdだけで​十分である。

検証ループ

  • pnpm dlx @elevenlabs/agents-cli@latest components add <name>で​インストールする。
  • ローカルで​起動し、​Playwright MCPで​スクリーンショットを​撮る。
  • 本家のui.elevenlabs.io/docs/components/<name>の​スクリーンショットと​並べて​比較する。
  • DESIGN.mdの​Do／Don'tとも​突き合わせて​差分を​確認する。
  • 必要に​応じて​トークンを​上書きし、​シェーダーの​定数を​調整する。

出典・参考

関連ノート

148 notestil