# AITuber OnAir [](https://github.com/shinshin86/aituber-onair/actions/workflows/ci.yml) [](https://deepwiki.com/shinshin86/aituber-onair)  [Click here for the English README](./README.md) > **TypeScript で配信向け AI VTuber を作るためのツールキット** > > AITuber OnAir は、会話し、音声で話し、視聴者に反応し、 > メモリを使い、PNG / VRM / Live2D アバターで動く AI VTuber を > 作るためのオープンソースツールキットです。ホスティング済みの > Web アプリ、スターターアプリ、セルフホスト可能なサンプル、 > モジュール化された TypeScript パッケージのどこからでも始められます。
Web アプリを試す ・ クイックスタート ・ サンプル一覧 ・ パッケージ
 ## 作れるもの - ライブ視聴者と会話し、話しかける AI VTuber - YouTube / Twitch のコメントにリアルタイムに反応する配信アシスタント - テキスト・音声・Vision・長期記憶を備えた AI キャラクターアプリ - ポイント・レベル・実績を持つ視聴者との関係性システム - 独立した npm パッケージを組み合わせたブラウザ / Node.js 向けの統合 ## 10分で始める ローカルで AI VTuber を動かす最短ルートは次の通りです。 ```bash npm create aituber-onair@latest my-aituber cd my-aituber npm run dev ``` 起動後、アプリの **Settings** から LLM / TTS プロバイダーを設定します。 詳しい手順は [クイックスタート](./docs/quickstart.ja.md) を参照してください。 ## 使い始め方 ### 1. ホスティング済みの Web アプリを試す [AITuber OnAir](https://aituberonair.com) は `@aituber-onair/core` を使って作られた、独立した AITuber 配信 Web アプリです。ツールキット全体の雰囲気をいちばん早く掴めると同時に、このライブラリで実際にどこまで作れるかを示す実践的なリファレンスにもなっています。セットアップ不要。 ### 2. スターターアプリを作成する `create-aituber-onair` を使うと、公式の PNGTuber / VRM / Live2D スターター テンプレートから自分の AITuber OnAir アプリを作成できます。 ```bash npm create aituber-onair@latest ``` CLI がプロジェクト名、テンプレート、依存関係をインストールするかどうかを 対話形式で確認します。プロジェクト名を先に指定することもできます。 ```bash npm create aituber-onair@latest my-aituber cd my-aituber npm run dev ``` 手順ごとのセットアップとテンプレート選択については [クイックスタート](./docs/quickstart.ja.md) を参照してください。 ### 3. サンプルアプリをローカルで動かす `@aituber-onair/core` をベースにしたフル機能の React サンプルを4種類用意しています。プロジェクトに合うアバター方式を選んでください。LLM / TTS プロバイダー対応範囲と **Settings** UI はどれも共通です。 #### PNGTuber Chat — 2D PNG アバター  4状態の PNG(口・目の開閉)を差し替えるだけで、実際の音声出力ボリュームから駆動されるリアルタイムリップシンクが動きます。詳細は [`packages/core/examples/react-pngtuber-app`](./packages/core/examples/react-pngtuber-app) を参照。 ```bash git clone https://github.com/shinshin86/aituber-onair.git cd aituber-onair/packages/core/examples/react-pngtuber-app npm install npm run dev ``` #### VRM Chat — 3D VRM アバター  3D VRM アバター(`miko.vrm`)、任意のアイドル VRMA アニメーション、発話に合わせた口元のリアルタイムリップシンク、カメラ操作(ドラッグで回転 / ホイールでズーム)に対応。詳細は [`packages/core/examples/react-vrm-app`](./packages/core/examples/react-vrm-app) を参照。 ```bash git clone https://github.com/shinshin86/aituber-onair.git cd aituber-onair/packages/core/examples/react-vrm-app npm install npm run dev ``` #### Live2D Chat — ローカル Live2D フォルダ読み込み Live2D サンプルモデル: 桃瀬ひより。イラスト: かにビーム、 モデリング: Live2D Inc. このコンテンツは Live2D Inc. が著作権を 有するサンプルデータを使用しています。詳細: Live2D サンプルデータ集。
`.model3.json` を含むローカルの Live2D モデルフォルダをブラウザで読み込み、実際の音声出力ボリュームに合わせて口元を動かします。このサンプルは Live2D アセット自体は同梱しません。詳細は [`packages/core/examples/react-live2d-app`](./packages/core/examples/react-live2d-app) を参照。 ```bash git clone https://github.com/shinshin86/aituber-onair.git cd aituber-onair/packages/core/examples/react-live2d-app npm install npm run dev ``` #### Pet Chat — アニメーションする Codex Pet 風スプライト  Codex Pet 互換のスプライトシートを描画し、ステージ内を動き回らせながら、チャット状態、応答の雰囲気、実際の音声出力ボリュームに応じてアニメーションを切り替えます。詳細は [`packages/core/examples/react-pet-app`](./packages/core/examples/react-pet-app) を参照。 ```bash git clone https://github.com/shinshin86/aituber-onair.git cd aituber-onair/packages/core/examples/react-pet-app npm install npm run dev ``` いずれの場合もブラウザで `http://localhost:5173` を開き、**Settings** から API キーとプロバイダー設定を入力してください。 サンプル全体の一覧とおすすめの始め方は [サンプル一覧](./docs/examples.ja.md) を参照してください。 ### 4. パッケージを使って自分のアプリに組み込む 必要なものだけをインストールして、自分のアプリに差し込めます。 ```bash npm install @aituber-onair/chat ``` ```ts import { ChatServiceFactory } from '@aituber-onair/chat'; const chat = ChatServiceFactory.createChatService('openai', { apiKey: process.env.OPENAI_API_KEY!, }); await chat.processChat( [{ role: 'user', content: 'こんにちは!' }], (partial) => process.stdout.write(partial), async (full) => console.log('\nDone:', full), ); ``` プロバイダーの設定や詳しい使い方は、各パッケージの README を参照してください。 ## ドキュメント - [クイックスタート](./docs/quickstart.ja.md): スターターアプリの作成、 テンプレート選択、プロバイダー設定、ローカル起動まで。 - [サンプル一覧](./docs/examples.ja.md): フル機能の AI VTuber アプリ、 パッケージ別サンプル、Bot サンプル、ローカル実行例の選び方。 ## パッケージ ### [create-aituber-onair](./packages/create-aituber-onair/README.ja.md)