Skip to main content

Guide Index

Build Live2D AI characters that talk, react, and look at you.

Charivo is a modular TypeScript framework for voice, expression, motion, gaze, and real-time conversation — split into focused packages.

These guides are for integrators building an app on top of Charivo. Use them to choose the right packages, understand the layering, and get to a working setup quickly.

Default Stack​

For most browser apps, the default stack looks like this:

browser app
  -> @charivo/core
  -> modality root package
  -> remote browser runtime package
  -> your API route
  -> server provider package

That means:

  • @charivo/core orchestrates the app
  • modality root packages such as @charivo/llm, @charivo/tts, and @charivo/realtime own feature state
  • remote browser packages talk to your server
  • server provider packages such as @charivo/server/openai keep credentials on the server

Reading Order​

If you are new to the repo, read in this order:

  1. Getting Started
  2. Choosing Packages
  3. Architecture
  4. the subsystem guides you need

Common Paths​

Quickest route to a working browser app​

Choosing packages before wiring the app​

Reading the shipped reference app​

Guide Map​

  • Getting Started: minimal production-oriented setup
  • Architecture: package boundaries, layering, and event wiring
  • Choosing Packages: remote vs browser-direct vs browser-native
  • Rendering: @charivo/render and @charivo/render-live2d
  • LLM: conversation manager and client choices
  • TTS: speech playback and lip-sync wiring
  • STT: microphone recording and transcription paths
  • Realtime: session-based voice interaction and tool wiring
  • Examples Web: Next.js reference app and API routes

Guide Docs vs Package READMEs​

Use the guides for integration decisions, recommended stacks, and copy-paste recipes.

Use package READMEs for package-local details such as exports, request contracts, and provider-specific config: