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

DESIGN.md ベースのデザイン移植が「仕様」のレイヤーをカバーするのに対し、ElevenLabs は同時に実装そのものも MIT で公開している。@elevenlabs/agents-cli で本家サイトと同じ primitive（Orb / waveform / messages 等）をプロジェクトに 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 と同様のコピーベース流儀で、依存は package に閉じず手元のコードになる。あとから自由に編集できる。

何が落ちてくるか

  • Orb — voice agent の状態（listening / thinking / talking）で変形する球。Three.js + React Three Fiber + WebGL shader。agentState getInputVolume colors を props で受ける
  • Waveform — 音声入出力の波形ビジュアライザ
  • Messages — 会話ログの UI primitive
  • Transcript — リアルタイム文字起こしのストリーミング表示

これらは ElevenLabs 本家サイトと同じソースなので、コピーした瞬間にトーンが揃う。手で再現する努力は不要。

DESIGN.md と併用するときの役割分担

| レイヤー | 担当 | |---|---| | color / typography / shadow / spacing トークン | DESIGN-elevenlabs-io.md（DesignMD で抽出） | | Button / Card / Input 等の汎用 primitive | shadcn/ui + Tailwind | | Orb / waveform / messages 等の ElevenLabs 固有 | @elevenlabs/agents-cli | | ブランド固有のレイアウト・コピー | プロダクト側で自前 |

DESIGN.md だけだと Orb は永久に再現できない（テキスト spec では shader を表現できない）。逆に agents-cli だけだと色や radius が ElevenLabs 仕様から離れる。両方使う前提でセットアップする。

失敗パターン

  • 「elevenlabs.io を見て真似て」と AI に投げる — 構造化されない曖昧指示、reference の質ガチャ。DESIGN.md + agents-cli の組み合わせで構造化する
  • 自前で Orb を再現しようとする — shader の noise 周波数、fresnel ブレンド、audio reactivity 曲線まで一致させるのは数日コース。公式実装を fork するのが速い
  • shadcn デフォルトのまま使う — DESIGN.md の token を globals.css で上書きしないと、agents-cli を入れても色だけ標準 shadcn に戻る
  • prefers-reduced-motion 無視 — Orb は楽しいが a11y で静止版が必須。agents-cli 提供版に props で対応があるかドキュメントで確認

プロダクトと corporate サイトの選択

  • プロダクト（SCAS の対話 UI 等） — agents-cli を入れる価値が最大。Orb / waveform / transcript は voice/agent プロダクトの差別化点
  • コーポレート / ランディングページ — Orb までは不要。DESIGN.md のトークンと shadcn/ui で十分 ElevenLabs feel が出る。重い WebGL を marketing ページに乗せると LCP が壊れる

判断軸: その UI が「音声 / agent との対話」をユーザーに見せるかどうか。見せないなら DESIGN.md のみで足りる。

検証ループ

  1. pnpm dlx @elevenlabs/agents-cli@latest components add <name> で導入
  2. ローカルで起動し、Playwright MCP で screenshot
  3. 本家 ui.elevenlabs.io/docs/components/<name> のスクショと並べる
  4. DESIGN.md の Do/Don't に対しても差分チェック
  5. 必要なら token を上書き、shader 定数を tune

参考・引用元

2026-05-20

関連ノート