/setup-elevenlabs

description: "Lesson command"
duration: "約10分"
prerequisites: ["ブラウザが使える", "メールアドレスまたはGoogle/GitHubアカウントを持っている"]
level: "beginner"
tags: ["setup", "elevenlabs", "api", "tts", "voice"]
nonInteractiveMode: incompatible

ElevenLabs API セットアップ

Step 0: セットアップ進捗の確認

**AIが自動実行する内容:** 1. `uv run python tools/setup_progress.py show --current setup-elevenlabs` を実行して進捗を表示 2. 既存のAPIキーを自動検出:

• `uv run python tools/credential_manager.py status` を実行
• ELEVENLABS_API_KEY（または ELEVEN_API_KEY）が設定済みの場合、Step 4（APIテスト）のみ実行して完了にできる
• `.env` に平文で存在する場合、credential store への移行を提案

このセッションでやること

| 項目 | 内容 | |------|------| | ゴール | ElevenLabs でAPIキーを取得し、Credential Store に保存してテキスト読み上げ(TTS)・音声合成機能を使えるようにする | | 所要時間 | 約10分 | | 前提条件 | メールアドレスまたはGoogle/GitHubアカウントを持っていること、ブラウザが使えること | | 操作レベル | CLIコマンド入力なし（すべてAIが自動実行 + GUI操作のみ） |

**用途:** ElevenLabs はAI音声合成（TTS）サービスです。テキスト読み上げ、音声クローニング、多言語音声合成が可能で、動画のナレーション生成などに使用します。

**料金について:** 無料プランで月1万文字まで利用可能です。研修レベルでは無料枠で十分です。

**このセッションの流れ:** 1. ブラウザでElevenLabsを開く（AIが自動でブラウザを起動） 2. アカウント作成・ログイン（Google/GitHub認証でサインアップ可） 3. APIキーを取得する（設定画面からコピーするだけ） 4. Credential Store に保存する（別ターミナルでコマンド実行） 5. 動作テスト（AIが自動実行）

> **ヒント**: AIの応答が途中で止まった場合は「続きを表示して」「止まってるよ」と入力すると再開します。

---

準備チェック

**AskQuestionの設定:**

{
  "title": "セッション開始前の確認",
  "questions": [{
    "id": "readiness",
    "prompt": "準備はできていますか？",
    "options": [
      {"id": "ready", "label": "準備OK！始めましょう"},
      {"id": "chrome", "label": "/chrome でブラウザ操作を自動化する"},
      {"id": "check_prereq", "label": "前提条件を確認したい"},
      {"id": "different_lesson", "label": "別のレッスンに移動したい"}
    ]
  }]
}

(ready → Step 1へ) (chrome → Step 1 でブラウザを開いた後、「Chrome 統合で自動化する場合」セクションの手順で自動実行する) (check_prereq → 「メールアドレスまたはGoogle/GitHubアカウントがあればOKです。無料プランで月1万文字まで使えます」と案内) (different_lesson → モジュール一覧を表示)

---

Step 1: ブラウザでElevenLabsを開く

**AIが実行すること:** 1. OSを自動判定する（Mac / Windows / Linux） 2. 以下のコマンドを実行してブラウザを自動起動する:

# Mac:
open https://elevenlabs.io
# Windows:
start https://elevenlabs.io
# Linux:
xdg-open https://elevenlabs.io

**ブラウザが開いたら、以下のAskQuestionを表示:**

{
  "title": "Step 1: ElevenLabsにサインアップ / ログイン",
  "questions": [{
    "id": "signup_status",
    "prompt": "ブラウザが開きましたか？以下の手順でアカウントを作成してください:\n\n1. 右上の「Sign up」をクリック（既にアカウントがあれば「Log in」）\n2. Google / GitHub 認証、またはメールアドレスでサインアップ\n3. ログインできたら次に進みます\n\nログインできましたか？",
    "options": [
      {"id": "logged_in", "label": "ログインできました！"},
      {"id": "browser_not_open", "label": "ブラウザが開かない"},
      {"id": "signup_issue", "label": "サインアップがうまくいかない"},
      {"id": "already_have_key", "label": "すでにAPIキーを持っている"}
    ]
  }]
}

(logged_in → Step 2へ) (browser_not_open → 「ブラウザで直接このURLを開いてください: https://elevenlabs.io」と案内) (signup_issue → 「Google認証が最も簡単です。右上の Sign up → Continue with Google をクリックしてください。それでもダメな場合はメールアドレスで登録してみてください」と案内) (already_have_key → Step 3へスキップ)

---

Chrome 統合で自動化する場合（`/chrome` モード）

**前提条件:** Chrome に「Claude in Chrome」拡張機能（v1.0.36+）がインストール済みで、`claude --chrome` で起動しているか、セッション内で `/chrome` を実行済みであること。

**AIが Chrome 統合で自動実行する内容:** 1. ブラウザで https://elevenlabs.io を開く 2. Chrome 統合を使って以下の操作を順番に実行する:

• 「Sign up」または「Log in」をクリック
• Google、GitHub、またはメールで認証（ユーザーの操作を待つ）
• ログイン後、https://elevenlabs.io/app/settings/api-keys に移動
• 既存のキーがあればそのまま、なければ「Create API Key」をクリック

3. APIキーが表示されたことを確認したら、ユーザーに「APIキーのコピーボタンをクリックしてコピーしてください」と案内する 4. Step 3 に進む

**注意:** APIキーの値はブラウザ画面から読み取らないこと。ユーザーが手動でコピーする。

Chrome 統合が利用できない場合は、以下の手順を手動で実行してください。

---

Step 2: APIキーを取得する

**AIが実行すること:** 1. APIキー取得ページをブラウザで開く:

# Mac:
open https://elevenlabs.io/app/settings/api-keys
# Windows:
start https://elevenlabs.io/app/settings/api-keys
# Linux:
xdg-open https://elevenlabs.io/app/settings/api-keys

**ブラウザが開いたら、以下のAskQuestionを表示:**

{
  "title": "Step 2: APIキーを取得",
  "questions": [{
    "id": "key_status",
    "prompt": "APIキーの設定画面が開きましたか？以下の手順でAPIキーを取得してください:\n\n1. API Keys ページが表示されていることを確認\n2. 既存のキーがあればコピーアイコンをクリック\n3. なければ「Create API Key」をクリックして新規作成\n4. 表示されたAPIキーをコピー\n\nAPIキーをコピーできましたか？",
    "options": [
      {"id": "copied", "label": "APIキーをコピーしました！"},
      {"id": "page_not_found", "label": "設定ページが見つからない"},
      {"id": "no_create_button", "label": "「Create API Key」ボタンが見つからない"},
      {"id": "need_help", "label": "その他のヘルプが必要"}
    ]
  }]
}

(copied → Step 3へ) (page_not_found → 「ログイン後、左下のプロフィールアイコン → Profile + API key をクリックしてください。または直接このURLを開いてください: https://elevenlabs.io/app/settings/api-keys」と案内) (no_create_button → 「ページが完全に読み込まれるまで待ってください。API Keys セクションに既存のキーが表示されている場合は、そのキーの横にあるコピーアイコンをクリックしてください」と案内) (need_help → エラー状況をヒアリングして個別に対応)

---

Step 3: APIキーを安全に保存する

**セキュリティに関する重要な注意:** APIキーはこのチャットに貼り付けないでください。別のターミナルウィンドウで安全に保存します。

**AIが自動で実行すること:** 1. `keyring` パッケージがインストール済みか確認する

• 未インストールの場合: `uv add keyring` を自動実行する

2. `uv run python tools/credential_manager.py status` を実行して現在の状態を確認する

**ユーザーに案内するメッセージ:**

APIキーをコピーしたら、以下の手順で安全に保存してください:

┌──────────────────────────────────────────────────────────────────┐
│ 別のターミナルウィンドウで以下のコマンドを順番に実行してください:│
│                                                                  │
│ Cursor: Ctrl+` (バッククォート) で新しいターミナルを開く         │
│ Claude Code: 別のターミナルウィンドウを開く                      │
│                                                                  │
│ ① メインのキー名で保存:                                         │
│ uv run python tools/credential_manager.py store ELEVENLABS_API_KEY      │
│                                                                  │
│ → 「Enter value for ELEVENLABS_API_KEY:」と表示されます          │
│ → コピーしたAPIキーを貼り付けてEnterを押してください             │
│   （入力した文字は画面に表示されません。これは正常です）         │
│ → 「✅ Stored ELEVENLABS_API_KEY」と表示されたら保存完了です     │
│                                                                  │
│ ② エイリアスでも保存（一部のコードがこちらを参照します）:       │
│ uv run python tools/credential_manager.py store ELEVEN_API_KEY           │
│                                                                  │
│ → 同じAPIキーを貼り付けてEnterを押してください                   │
│ → 「✅ Stored ELEVEN_API_KEY」と表示さ