AITuber OnAir


日本語版はこちら
Build stream-ready AI VTubers with TypeScript
AITuber OnAir is an open source toolkit for building AI VTubers
that can chat, speak, react to viewers, use memory, and run with
PNG, VRM, or Live2D avatars. Start from the hosted web app, scaffold
a starter app, self-host a working example, or assemble your own stack
from modular TypeScript packages.
Live demo ・
Try the hosted web app ・
Quickstart ・
Examples ・
Avatar Guide ・
Packages

See it in your browser: the
Mesh Avatar Chat demo
runs Miko, the official character, with no server at all. Chat comes from
Chrome’s built-in Gemini Nano, her voice from a piper-plus model synthesised
in the browser, and the avatar from
Mesh Avatar Studio.
The source is in demo/mesh-avatar-chat.
Want your own AITuber today? Paste one prompt into Claude Code, Codex or
Copilot CLI and it sets up a streaming-ready AITuber on your machine, with
nine avatar styles to choose from.
Start AITuber with an AI agent →
What you can build
- AI VTubers that chat and speak with live viewers
- Streaming assistants that react to YouTube / Twitch comments
- AI character apps with text, voice, vision, and long-term memory
- Viewer relationship systems with points, levels, and achievements
- Browser- and Node.js-based integrations, composed from independent packages
Start in 10 minutes
If you want the shortest path to a local AI VTuber:
npm create aituber-onair@latest my-aituber
cd my-aituber
npm run dev
Then open the app, choose a template, and configure your LLM / TTS provider
from Settings. See the Quickstart for the full
walkthrough.
Choose your path
1. Try the hosted web app
AITuber OnAir is a full, standalone AITuber streaming web app built on top of @aituber-onair/core. It’s both the quickest way to experience the toolkit end-to-end and a working reference for what you can ship with it. No setup required.
2. Create a starter app
Use create-aituber-onair to scaffold your own app from the official
PNGTuber, VRM, Live2D, Pet, PuruPuru, PSD, or Inochi2D starter templates.
npm create aituber-onair@latest
The CLI asks for a project name, template, and whether to install
dependencies. You can also pass the project name up front:
npm create aituber-onair@latest my-aituber
cd my-aituber
npm run dev
For step-by-step setup and template selection, see
Quickstart.
3. Run an example app locally
Full, ready-to-run React apps built on @aituber-onair/core. Pick the
avatar style that fits your project. All of them share the same broad LLM / TTS
provider coverage and in-app Settings UI.
PNGTuber Chat — 2D PNG avatar

Swap in 4 PNG states (mouth/eyes open/close) and get real-time lip-sync driven from actual audio output. See packages/core/examples/react-pngtuber-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-pngtuber-app
npm install
npm run dev
PuruPuru PNGTuber Chat — 2D avatar with hair physics

Load a single-file .purupuru avatar package and get idle motion, blinking,
audio-driven lip-sync, hair spring physics, idle gaze turns with pseudo-depth
parallax, and emotion-driven reactions — no camera or tracking required. Miko,
the official AITuber OnAir character, is bundled as the default avatar. The
avatar format and motion design were created by rotejin in
PuruPuruPNGTuber; this example is
an AITuber-oriented reimplementation. See
packages/core/examples/react-purupuru-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-purupuru-app
npm install
npm run dev
VRM Chat — 3D VRM avatar

Render a 3D VRM avatar (miko.vrm) with optional idle VRMA animation, real-time mouth lip-sync driven from audio output, and camera controls (drag to rotate / wheel to zoom). See packages/core/examples/react-vrm-app.
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 — local Live2D folder loader

Live2D sample model: Hiyori Momose. Illustration: Kani Biimu;
Modeling: Live2D Inc. This content uses sample data owned and copyrighted
by Live2D Inc. See
Live2D Sample Data.
Load a local Live2D model folder that contains .model3.json, render it in
the browser, and drive mouth movement from actual audio output volume. This
example intentionally does not bundle any Live2D assets. See
packages/core/examples/react-live2d-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-live2d-app
npm install
npm run dev
Inochi2D Chat — Inochi2D avatar (experimental)

Render an Inochi2D avatar on a WebGL stage with a prebuilt Inochi2D runtime, and
drive mouth movement from actual audio output volume. This example bundles the
Aka Inochi2D model for first-run display, and you can also load a local .inx /
.inp file or register another model in public/inochi2d/manifest.json. See
packages/core/examples/react-inochi2d-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-inochi2d-app
npm install
npm run dev
Pet Chat — animated Codex Pet-style sprite

Render a Codex Pet-compatible spritesheet, move it around the stage, and switch
animations from chat state, reply mood, and real-time audio volume. See
packages/core/examples/react-pet-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-pet-app
npm install
npm run dev

Load a single PSD file at runtime, composite PSD layers on canvas, and drive
mouth/eye layers with real-time lip-sync and blinking. Supports both
PSDTool-style leading ! forced-visible / leading * radio layers and
Anime2.5DRig-compatible layer names for motion mode. The bundled
miko-anime25drig-cheer.psd featuring Miko animates with zero setup. See
packages/core/examples/react-psd-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-psd-app
npm install
npm run dev
Single Image Avatar Chat — audio-reactive motion
Use one PNG or JPG and choose between jumping Bounce motion and gentler Puppet
Wobble motion driven by TTS output volume. The example includes illustration
and felt-puppet Miko images, plus a motion preview that works without an API
key. See
packages/core/examples/react-single-image-avatar-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-single-image-avatar-app
npm install
npm run dev

Display images, animated GIFs or looping muted videos for six response emotions.
The example includes four GIFs and saves uploads in IndexedDB. See
packages/core/examples/react-media-avatar-app.
cd aituber-onair/packages/core/examples/react-media-avatar-app
npm install
npm run dev
Mesh Avatar Chat — Live2D-style motion from a single illustration

Animate one illustration Live2D-style with WebGL2 mesh deformation: head turns,
breathing, blinking, gaze, per-strand hair sway, idle and reaction motions,
audio-driven lip-sync, and emotion-driven expressions. Miko in a qipao is
bundled as the default avatar, and you can load any .mavatar exported from
Mesh Avatar Studio. This is
the same avatar runtime used in the
Mesh Avatar Chat demo.
See
packages/core/examples/react-mesh-avatar-app.
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair/packages/core/examples/react-mesh-avatar-app
npm install
npm run dev
Open http://localhost:5173 in any case, then set API keys and provider options in Settings.
See Examples for the full example map and recommended
starting points.
Node Newsdesk — text to vertical news video
Turn source text into a chaptered vertical news video with Core chat and voice.
packages/core/examples/node-newsdesk
keeps the pipeline in one folder; use --avatar to switch between PNGTuber,
Purupuru, Mesh, VRM, Live2D, Inochi2D, and PSD without changing the script.
The example README includes setup instructions and an animated gallery.
4. Build your own with the packages
Install only what you need and drop it into your own app:
npm install @aituber-onair/chat
import { ChatServiceFactory } from '@aituber-onair/chat';
const chat = ChatServiceFactory.createChatService('openai', {
apiKey: process.env.OPENAI_API_KEY!,
});
await chat.processChat(
[{ role: 'user', content: 'Hello!' }],
(partial) => process.stdout.write(partial),
async (full) => console.log('\nDone:', full),
);
See each package README for provider setup and fuller usage.
Documentation
- Quickstart: create a starter app, pick a template,
configure providers, and run locally.
- Examples: choose from full AI VTuber apps, package
examples, bot examples, and local runtime examples.
- Avatar Guide: choose avatar styles and expand avatar
expressions for richer AI character presentation.
Packages
CLI for creating an AITuber OnAir app from an official starter template.
Includes PNGTuber, VRM, Live2D, Pet, PuruPuru, PSD, and Inochi2D templates.
Live2D does not bundle licensed model assets, and Inochi2D offers its large Aka
sample model as an optional integrity-checked download.
npm create aituber-onair@latest
Core runtime tying chat, voice, memory, and conversation context together for full AITuber experiences.
npm install @aituber-onair/core
Unified LLM layer across OpenAI, Claude, Gemini, Z.ai, Kimi, DeepSeek, Mistral, and OpenRouter — streaming, tool/function calling, vision, and MCP support included.
npm install @aituber-onair/chat
Standalone TTS library with VOICEVOX, VoicePeak, OpenAI TTS, MiniMax, AIVIS Speech, and more, plus emotion-aware synthesis.
npm install @aituber-onair/voice
Provider-neutral realtime microphone transcription with Web Speech and OpenAI
Realtime support through a shared session API.
npm install @aituber-onair/transcription
Detects repetitive conversation patterns and injects topic-diversification prompts to keep dialogue fresh.
npm install @aituber-onair/manneri
Post-generation rewrite engine that keeps AI character replies from landing too safely: detects predictable phrasing, builds structured friction, asks an LLM for rewrite candidates, and selects the safest non-generic response.
npm install @aituber-onair/noise
Filters live comments before they reach an AI character: selects one comment to answer, blocks unsafe input, summarizes ignored comments, and builds compact LLM context. Rules-first with optional LLM-assisted analysis.
npm install @aituber-onair/comment-intelligence
Embeddable runtime for giving an AI character a job inside your product:
host-controlled tools, policies, approvals, hooks, and events, with Chat and Codex app-server backends.
npm install @aituber-onair/agent
WebSocket chat client with React hooks, auto-reconnect, rate limiting, mentions, and voice integration. Browser and Node.js.
npm install @aituber-onair/bushitsu-client
Relationship / bond system (絆) for AI characters and viewers: points, achievements, emotion-based bonuses, level progression, persistent storage.
npm install @aituber-onair/kizuna
Why AITuber OnAir
- Proven in production — powers AITuber OnAir, a live AITuber streaming web app, so you’re building on the same code path a real product ships on
- Pick any entry point: hosted web app, starter CLI, self-hosted example, or modular npm packages
- First-class coverage of the providers AITuber builders actually use — OpenAI / Claude / Gemini for chat, VOICEVOX / OpenAI TTS / AIVIS Speech and more for voice
- Chat, voice, streaming (YouTube / Twitch / WebSocket), and viewer relationships in a single, consistent stack
- MIT-licensed TypeScript — you keep control of hosting, data, and integrations
Project structure
aituber-onair/
└── packages/
├── create-aituber-onair/ # npm create CLI with starter templates
├── core/ # AITuberOnAirCore, memory, orchestration
├── chat/ # LLM providers, streaming, tools, MCP
├── voice/ # TTS engines, emotion, playback
├── manneri/ # Conversation pattern detection
├── noise/ # Post-generation response rewriting
├── comment-intelligence/ # Live comment filtering and context building
├── agent/ # Embeddable AI-character agent runtime
├── bushitsu-client/ # WebSocket chat client + React hooks
└── kizuna/ # Viewer relationship / bond system
For contributors
Working on the monorepo itself:
git clone https://github.com/shinshin86/aituber-onair.git
cd aituber-onair
npm install
npm run build
npm run test
npm run fmt
Agent Skills
Shared Agent Skills so Codex and Claude Code use the same workflow definitions.
See docs/agent-skills.md for the full guide,
including a
copy-paste Google Colab local LLM request.
Canonical sources live in skills/, with Claude Code runtime copies under
.claude/skills/.
Releases
Releases are driven by manual version bumps + per-package CHANGELOG.md, published automatically by GitHub Actions on merge to main. Do not run npm publish directly.
- Patch: bug fixes, dependency updates
- Minor: new features, backward-compatible changes
- Major: breaking changes to public API
release.yml uses Changesets to publish packages, create tags (@aituber-onair/<pkg>@x.y.z), and create GitHub Releases for packages published in that run. If CI fails mid-run, re-running publishes the remainder but does not backfill Releases for already-published packages — create those manually from the package CHANGELOG (tag will already exist). prerelease-next.yml only updates the next prerelease tag.
License
The software and documentation are licensed under the MIT License — see
LICENSE.
Bundled Miko avatar images, models, spritesheets, and packages are not covered
by the MIT License. They are governed by the authoritative Japanese
Miko Character Usage Guidelines; see
Miko Asset Terms for a short English summary. The assets may be distributed as an integral part of software, apps,
games, videos, websites, and other works or content, including third-party
projects. Standalone redistribution and asset collections are prohibited.
Special Thanks
This project is based on the work referenced here. Without the contributions of these pioneers, it would not exist.
评论