AITuber を AI エージェントで始める

PNGTuber 2D / 最速で試せる

2D PNG 差し替え方式のアバター。画像がなくても SVG フォールバックで起動するため、LLM プロバイダの API キーさえあれば最短で動きます。初めての方におすすめ。

AITuber 配信環境のテンプレート「react-pngtuber-app」（2D PNG 差し替えアバター方式のサンプル）を、このマシンに構築してください。

## ゴール
`https://github.com/shinshin86/aituber-onair` をローカルに clone し、`packages/core/examples/react-pngtuber-app` の開発サーバを起動して、ブラウザで `http://localhost:5173` にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- ブラウザは Chrome を想定（Web Speech API を使うため）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順

1. 現在の作業ディレクトリに `aituber-onair/` が無ければ clone してください。

   git clone https://github.com/shinshin86/aituber-onair.git

   既に存在する場合は再利用して構いません。

2. サンプルアプリのディレクトリに移動してください。

   cd aituber-onair/packages/core/examples/react-pngtuber-app

3. 依存をインストールしてください。

   npm install

4. 開発サーバを起動してください。

   npm run dev

   このコマンドはフォアグラウンドで動き続けます。あなたのツールでバックグラウンド実行ができるならそれで構いません。できない場合は「別ターミナルでこのコマンドを実行してください」とユーザーに案内してください。

5. ユーザーにブラウザで `http://localhost:5173` を開くよう伝えてください。

## ユーザーに任せる作業（あなたが勝手にやらないこと）

以下は API キーや手元の素材が必要なので、ユーザー自身に行ってもらってください。手順だけ案内すれば OK です。

- 使いたい LLM プロバイダの API キーを取得する（OpenAI / Gemini / Claude / OpenRouter / xAI / zAI / Kimi のいずれか1つ）
- ブラウザで画面右上の「Settings」を開き、選んだプロバイダの API キーを貼り付け、モデルを選択する
  - 設定は `localStorage`（キー: `react-pngtuber-app-settings`）に保存される
- （任意）アバター画像を `public/avatar/` に配置する:
  - mouth_close_eyes_open.png
  - mouth_close_eyes_close.png
  - mouth_open_eyes_open.png
  - mouth_open_eyes_close.png
  - 未配置でも SVG のフォールバックアバターで動作する

## 参考ドキュメント（詳細が必要なときに参照）

- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-pngtuber-app/README.md
- 3種類のアバター方式をまとめたセットアップガイド（日本語、AIエージェント向け詳細資料）: https://start-aituber-with-ai-agent.aituberonair.com/docs/setup-guide.md

## 注意事項（ユーザーに必ず伝えること）

- このサンプルは開発者向けです。API キー類はブラウザの `localStorage` に平文で保存されます。本番権限のクレデンシャルは入れず、共有・公開オリジンにそのままデプロイしないでください。
- 共有端末で使った場合は、使用後に API キーをローテーションすることを推奨します。

VRM 3D / VRM アバター

3D VRM アバター方式。VRM 表情にリアルタイムの口パクが乗り、カメラ操作（ドラッグで回転 / ホイールでズーム）にも対応します。起動には miko.vrm（または任意の VRM）を用意する必要があります。

AITuber 配信環境のテンプレート「react-vrm-app」（3D VRM アバター方式のサンプル）を、このマシンに構築してください。

## ゴール
`https://github.com/shinshin86/aituber-onair` をローカルに clone し、`packages/core/examples/react-vrm-app` の開発サーバを起動して、ブラウザで `http://localhost:5173` にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- ブラウザは Chrome を想定（Web Speech API を使うため）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順

1. 現在の作業ディレクトリに `aituber-onair/` が無ければ clone してください。

   git clone https://github.com/shinshin86/aituber-onair.git

   既に存在する場合は再利用して構いません。

2. サンプルアプリのディレクトリに移動してください。

   cd aituber-onair/packages/core/examples/react-vrm-app

3. 依存をインストールしてください。

   npm install

4. 開発サーバを起動してください。

   npm run dev

   このコマンドはフォアグラウンドで動き続けます。あなたのツールでバックグラウンド実行ができるならそれで構いません。できない場合は「別ターミナルでこのコマンドを実行してください」とユーザーに案内してください。

5. ユーザーにブラウザで `http://localhost:5173` を開くよう伝えてください。

## ユーザーに任せる作業（あなたが勝手にやらないこと）

以下は API キーや外部素材（VRM モデル）が必要なので、ユーザー自身に行ってもらってください。手順だけ案内すれば OK です。

- 使いたい LLM プロバイダの API キーを取得する（OpenAI / Gemini / Claude / OpenRouter / xAI / zAI / Kimi のいずれか1つ）
- ブラウザで画面右上の「Settings」を開き、選んだプロバイダの API キーを貼り付け、モデルを選択する
  - 設定は `localStorage`（キー: `react-vrm-app-settings`）に保存される
- VRM モデルを配置する（必須）:
  - 推奨は `miko.vrm` を https://miko.aituberonair.com/ からダウンロードして、`packages/core/examples/react-vrm-app/public/avatar/miko.vrm` に配置
  - 配置しない場合、アバターステージに読み込みエラーが表示されます（開発サーバ自体は起動します）
- （任意）待機アニメーション `idle_loop.vrma` を `public/avatar/idle_loop.vrma` に配置
  - pixiv/ChatVRM（https://github.com/pixiv/ChatVRM）の資産が流用できます
  - 配置しない場合はアニメーションだけスキップされ、他の機能は動作します
- （任意）背景画像は Settings からアップロード可能（メモリ保持のみ、リロードで初期化）

## 参考ドキュメント（詳細が必要なときに参照）

- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-vrm-app/README.md
- 3種類のアバター方式をまとめたセットアップガイド（日本語、AIエージェント向け詳細資料）: https://start-aituber-with-ai-agent.aituberonair.com/docs/setup-guide.md

## 注意事項（ユーザーに必ず伝えること）

- このサンプルは開発者向けです。API キー類はブラウザの `localStorage` に平文で保存されます。本番権限のクレデンシャルは入れず、共有・公開オリジンにそのままデプロイしないでください。
- 共有端末で使った場合は、使用後に API キーをローテーションすることを推奨します。

Live2D Live2D モデル読み込み

Live2D モデル方式。Cubism Core（Live2D 公式）のダウンロードにはライセンス同意が必要で、モデル本体もご自身で用意する必要があります。手動作業が多いサンプルなので、Live2D モデルを既にお持ちの方向けです。

このスクリーンショットは Live2D 公式サンプルデータ「桃瀬ひより」を読み込んだ表示例です。モデルデータは AITuber OnAir には同梱されません。サンプルデータ集 / 利用条件

AITuber 配信環境のテンプレート「react-live2d-app」（Live2D モデル読み込み方式のサンプル）を、このマシンに構築してください。

## ゴール
`https://github.com/shinshin86/aituber-onair` をローカルに clone し、`packages/core/examples/react-live2d-app` の開発サーバを起動して、ブラウザで `http://localhost:5173` にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- ブラウザは Chrome を想定（Web Speech API を使うため）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順

1. 現在の作業ディレクトリに `aituber-onair/` が無ければ clone してください。

   git clone https://github.com/shinshin86/aituber-onair.git

   既に存在する場合は再利用して構いません。

2. サンプルアプリのディレクトリに移動してください。

   cd aituber-onair/packages/core/examples/react-live2d-app

3. 依存をインストールしてください。

   npm install

4. 開発サーバを起動してください。

   npm run dev

   このコマンドはフォアグラウンドで動き続けます。あなたのツールでバックグラウンド実行ができるならそれで構いません。できない場合は「別ターミナルでこのコマンドを実行してください」とユーザーに案内してください。

5. ユーザーにブラウザで `http://localhost:5173` を開くよう伝えてください。

## ユーザーに任せる作業（あなたが勝手にやらないこと）

以下はライセンス同意やユーザー所有の素材が絡むため、**あなた（AIエージェント）が自動ダウンロードしてはいけません**。手順だけ案内してユーザーに実施してもらってください。

- 使いたい LLM プロバイダの API キーを取得する（OpenAI / Gemini / Claude / OpenRouter / xAI / zAI / Kimi のいずれか1つ）
- ブラウザで画面右上の「設定」を開き、選んだプロバイダの API キーを貼り付け、モデルを選択する

- **Cubism Core for Web を Live2D 公式からダウンロード（必須・ライセンス同意あり）**:
  - 公式ダウンロードページ: https://www.live2d.com/sdk/download/web/
  - `Cubism Core for Web` または `Cubism SDK for Web` を入手
  - 含まれている `live2dcubismcore.min.js` を以下に配置:
    `packages/core/examples/react-live2d-app/public/scripts/live2dcubismcore.min.js`
  - このサンプルは Cubism 4 系前提のため `live2d.min.js` は不要

- **Live2D モデルフォルダを配置（必須）**:
  - `.model3.json` 単体ではなく、参照先アセット（textures/ や motions/）も含むフォルダ全体を配置
  - 配置先: `packages/core/examples/react-live2d-app/models/<モデル名>/`
  - 例:
    models/Hiyori/
      Hiyori.model3.json
      Hiyori.moc3
      Hiyori.physics3.json
      textures/texture_00.png
      motions/idle.motion3.json

- **モデルを追加したら dev サーバを再起動する**:
  - `models/` 配下はサーバ起動時に一覧解決されるため、モデルを後から追加した場合は `npm run dev` を再起動してください

- 起動後、ブラウザで「設定」を開き、モデル一覧から対象を選び「読み込む」を押す
  - モデルデータはメモリ保持のみで、ページリロードで消えます（LLM / TTS 設定は `localStorage` に保存）

## 参考ドキュメント（詳細が必要なときに参照）

- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-live2d-app/README.md
- 3種類のアバター方式をまとめたセットアップガイド（日本語、AIエージェント向け詳細資料）: https://start-aituber-with-ai-agent.aituberonair.com/docs/setup-guide.md
- Live2D Cubism SDK (Web): https://www.live2d.com/sdk/download/web/

## 注意事項（ユーザーに必ず伝えること）

- **Live2D の Cubism Core / SDK は Live2D 社のライセンスに従う必要があります。あなた（AIエージェント）が公式サイト以外から取得したり、リポジトリに同梱したりしないでください。** 必ずユーザー自身に公式サイトでダウンロードしてもらってください。
- このサンプルは開発者向けです。API キー類はブラウザの `localStorage` に平文で保存されます。本番権限のクレデンシャルは入れず、共有・公開オリジンにそのままデプロイしないでください。
- 共有端末で使った場合は、使用後に API キーをローテーションすることを推奨します。

Pet Chat 2D / アニメーション Pet

Miko ペットが地面を走ったりジャンプしたり、発話に合わせてリアクションするアニメーション Pet サンプル。Miko が同梱されているため、API キー設定だけで見た目つきの体験を始められます。

AITuber 配信環境のテンプレート「react-pet-app」（Miko ペット同梱のアニメーション Pet サンプル）を、このマシンに構築してください。

## ゴール
https://github.com/shinshin86/aituber-onair をローカルに clone し、packages/core/examples/react-pet-app の開発サーバを起動して、ブラウザで http://localhost:5173 にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- ブラウザは Chrome を想定（Web Speech API を使うため）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順

1. 現在の作業ディレクトリに aituber-onair/ が無ければ clone してください。

   git clone https://github.com/shinshin86/aituber-onair.git

   既に存在する場合は再利用して構いません。

2. サンプルアプリのディレクトリに移動してください。

   cd aituber-onair/packages/core/examples/react-pet-app

3. 依存をインストールしてください。

   npm install

4. 開発サーバを起動してください。

   npm run dev

   このコマンドはフォアグラウンドで動き続けます。あなたのツールでバックグラウンド実行ができるならそれで構いません。できない場合は「別ターミナルでこのコマンドを実行してください」とユーザーに案内してください。

5. ユーザーにブラウザで http://localhost:5173 を開くよう伝えてください。

## ユーザーに任せる作業（あなたが勝手にやらないこと）

- 使いたい LLM プロバイダの API キーを取得する（OpenAI / Gemini / Claude / OpenRouter / xAI / zAI / Kimi のいずれか1つ）
- ブラウザで画面右上の「Settings」を開き、選んだプロバイダの API キーを貼り付け、モデルを選択する
  - 設定は localStorage（キー: react-pet-app-settings）に保存される
- 同梱 Miko ペットは public/pet/pet.json と public/pet/spritesheet.webp から読み込まれるため、追加アセットなしで表示できます
- （任意）独自 Pet を使う場合は Settings の Pet セクションから pet.json と spritesheet を登録する

## 参考ドキュメント（詳細が必要なときに参照）

- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-pet-app/README.md
- セットアップガイド（日本語、AIエージェント向け詳細資料）: https://start-aituber-with-ai-agent.aituberonair.com/docs/setup-guide.md

## 注意事項（ユーザーに必ず伝えること）

- このサンプルは開発者向けです。API キー類はブラウザの localStorage に平文で保存されます。本番権限のクレデンシャルは入れず、共有・公開オリジンにそのままデプロイしないでください。
- 独自 Pet アセットを配布する場合は、利用権限と再配布条件を確認してください。
- 共有端末で使った場合は、使用後に API キーをローテーションすることを推奨します。

PuruPuru 2D / レイヤー物理演算

レイヤー分けされた PNG を使い、呼吸・髪の揺れ・視線・表情・口パクを表現する .purupuru アバター方式。Miko が同梱されているため、追加素材なしですぐ試せます。

AITuber 配信環境のテンプレート「react-purupuru-app」（.purupuru アバター方式のサンプル）を、このマシンに構築してください。

## ゴール
https://github.com/shinshin86/aituber-onair をローカルに clone し、packages/core/examples/react-purupuru-app の開発サーバを起動して、ブラウザで http://localhost:5173 にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- ブラウザは Chrome を想定（Web Speech API を使うため）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順
1. 現在の作業ディレクトリに aituber-onair/ が無ければ clone してください。
   git clone https://github.com/shinshin86/aituber-onair.git
2. サンプルアプリへ移動してください。
   cd aituber-onair/packages/core/examples/react-purupuru-app
3. 依存をインストールしてください。
   npm install
4. 開発サーバを起動してください。
   npm run dev
5. ユーザーにブラウザで http://localhost:5173 を開くよう伝えてください。

## ユーザーに任せる作業
- 起動後、Settings で使用する LLM / TTS と API キーを設定する
  - 設定は localStorage（キー: react-purupuru-app-settings）に保存される
- 同梱の public/avatar/miko.purupuru が既定で読み込まれるため、動作確認に追加素材は不要
- 独自アバターを使う場合は Settings → Visual から .purupuru ファイルを選択する
  - 対応する .purupuru は無圧縮 ZIP（ZIP_STORED）形式
  - ドラッグで移動、ホイールで拡大縮小、ダブルクリックで位置をリセットできる

## 参考ドキュメント
- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-purupuru-app/README.md

## 注意事項
- API キー類はブラウザの localStorage に平文で保存されます。本番権限のクレデンシャルは使用せず、共有・公開オリジンにそのままデプロイしないでください。
- 同梱 Miko アバターの画像を抽出・再配布・別キャラクターとして再利用したり、AI / モデル学習へ使用したりしないでください。

PSD 2D / PSD 立ち絵

1つの PSD をブラウザで読み込み、レイヤーの表示切替、目・口の自動検出、口パクや揺れを適用する立ち絵方式。権利上安全なサンプル PSD が同梱され、追加素材なしで起動できます。

AITuber 配信環境のテンプレート「react-psd-app」（PSD 立ち絵アバター方式のサンプル）を、このマシンに構築してください。

## ゴール
https://github.com/shinshin86/aituber-onair をローカルに clone し、packages/core/examples/react-psd-app の開発サーバを起動して、ブラウザで http://localhost:5173 にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- ブラウザは Chrome を想定（Web Speech API を使うため）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順
1. 現在の作業ディレクトリに aituber-onair/ が無ければ clone してください。
   git clone https://github.com/shinshin86/aituber-onair.git
2. サンプルアプリへ移動してください。
   cd aituber-onair/packages/core/examples/react-psd-app
3. 依存をインストールしてください。
   npm install
4. 開発サーバを起動してください。
   npm run dev
5. ユーザーにブラウザで http://localhost:5173 を開くよう伝えてください。

## ユーザーに任せる作業
- 起動後、Settings で使用する LLM / TTS と API キーを設定する
  - 設定は localStorage（キー: react-psd-app-settings）に保存される
- 同梱の public/avatar/sample.psd が自動で読み込まれるため、動作確認に追加素材は不要
- 独自 PSD を使う場合は Settings → Visual → PSD avatar からローカルの .psd ファイルを選択する
  - PSD 本体はブラウザへ永続保存されないため、リロード後は再選択が必要
  - レイヤー表示や目・口の割り当ては、ファイル名とファイルサイズをキーに localStorage へ保存される

## 参考ドキュメント
- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-psd-app/README.md
- 対応 PSD 形式: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-psd-app/PSD-FORMATS.md

## 注意事項
- API キー類はブラウザの localStorage に平文で保存されます。本番権限のクレデンシャルは使用せず、共有・公開オリジンにそのままデプロイしないでください。
- 独自 PSD を配布する場合は、各レイヤー素材を含む利用権限と再配布条件を確認してください。

Inochi2D 2D / WebGL モデル

Inochi2D の .inx / .inp モデルを WebGL で表示し、モーション・口パク・タップやフリックの反応を扱う方式。ランタイムと Aka モデルが同梱されています。

AITuber 配信環境のテンプレート「react-inochi2d-app」（Inochi2D アバター方式のサンプル）を、このマシンに構築してください。

## ゴール
https://github.com/shinshin86/aituber-onair をローカルに clone し、packages/core/examples/react-inochi2d-app の開発サーバを起動して、ブラウザで http://localhost:5173 にアクセスできる状態にする。

## 前提条件
- Node.js（LTS 推奨）と npm が使えること
- git が使えること
- WebGL に対応した Chrome（Web Speech API も使用）

不足しているものがあれば、そこで止まってユーザーに知らせてください。

## 実行手順
1. 現在の作業ディレクトリに aituber-onair/ が無ければ clone してください。
   git clone https://github.com/shinshin86/aituber-onair.git
2. サンプルアプリへ移動してください。
   cd aituber-onair/packages/core/examples/react-inochi2d-app
3. 依存をインストールしてください。
   npm install
4. 開発サーバを起動してください。
   npm run dev
5. ユーザーにブラウザで http://localhost:5173 を開くよう伝えてください。

## ユーザーに任せる作業
- 起動後、Settings で使用する LLM / TTS と API キーを設定する
  - 設定は localStorage（キー: react-inochi2d-app-settings）に保存される
- WebGL ランタイムと Aka モデルが同梱されているため、動作確認に追加素材は不要
- 独自モデルをすぐ試す場合は Settings からローカルの .inx / .inp ファイルを選択する
  - ローカルファイル読み込みでは別の motion JSON は付与されない
  - モーション付きモデルを既定登録する場合は public/inochi2d/models/ と public/inochi2d/manifest.json を編集する

## 参考ドキュメント
- サンプル README: https://github.com/shinshin86/aituber-onair/blob/main/packages/core/examples/react-inochi2d-app/README.md

## 注意事項
- API キー類はブラウザの localStorage に平文で保存されます。本番権限のクレデンシャルは使用せず、共有・公開オリジンにそのままデプロイしないでください。
- ランタイムや同梱モデルを再配布する場合は、THIRD-PARTY-NOTICES.md と Aka の帰属表示・ライセンス条件を維持してください。