Skip to main content

​
Overview

Stage Web is the browser-based version of AIRI, powered by modern web technologies including WebGPU, WebAssembly, and Web Workers. It runs directly in your browser without any installation required.
Try the live version at airi.moeru.ai

​
Browser Requirements

​
WebGPU Support

AIRI Web requires a browser with WebGPU support for optimal performance:
  • Chrome/Edge: Version 113+ (recommended)
  • Safari: Version 18+ on macOS Sonoma or later
  • Firefox: Experimental support (requires manual enable)
Check WebGPU compatibility at webgpureport.org before running AIRI Web.

​
Additional Requirements

  • Modern browser with ES2022 support
  • WebAssembly support
  • Web Workers support
  • At least 4GB RAM available
  • Stable internet connection for initial load

​
Progressive Web App (PWA)

Stage Web includes PWA capabilities, allowing you to:
  • Install AIRI as a standalone app
  • Run offline after initial load
  • Receive push notifications
  • Access from your home screen or app launcher

​
Installing as PWA

  1. Visit airi.moeru.ai in a supported browser
  2. Click the install icon in the address bar (Chrome/Edge) or use “Add to Home Screen” (Safari)
  3. Follow the installation prompts
  4. Launch AIRI from your installed apps

​
Development Setup

​
Prerequisites

  • Node.js 20+
  • pnpm 10+
  • Git

​
Installation

Clone the repository and install dependencies: 
git clone https://github.com/moeru-ai/airi.git
cd airi
pnpm install

​
Development Server

Start the development server for Stage Web: 
pnpm dev:web
Or from the root: 
pnpm dev
The development server will start at http://localhost:5173 with hot module replacement enabled.

​
Project Structure

apps/stage-web/
├── src/
│   ├── pages/          # Route pages
│   ├── components/     # Vue components
│   ├── composables/    # Vue composables
│   ├── stores/         # Pinia stores
│   ├── styles/         # Global styles
│   ├── assets/         # Static assets
│   ├── workers/        # Web Workers
│   └── main.ts         # Application entry
├── public/             # Public static files
├── vite.config.ts      # Vite configuration
└── package.json

​
Building for Production

​
Standard Build

Build the web application: 
pnpm -F @proj-airi/stage-web build
Or from root: 
pnpm build:web
The production build will be generated in apps/stage-web/dist/.

​
Build Configuration

Key build features configured in vite.config.ts:
  • PWA Support: Service worker with offline caching
  • Code Splitting: Optimized chunks for faster loading
  • Asset Optimization: WASM, fonts, and models are optimized
  • Source Maps: Enabled for debugging
  • Tree Shaking: Removes unused code

​
Deployment Options

​
Static Hosting

Deploy to any static hosting provider: 
vercel deploy

​
HuggingFace Spaces

AIRI Web is configured for easy deployment to HuggingFace Spaces: 
# Set environment variable for HuggingFace build
export TARGET_HUGGINGFACE_SPACE=true
pnpm build:web

​
CDN Configuration

For large assets (WASM, models, fonts), configure S3-compatible storage: 
export S3_ENDPOINT="https://s3.amazonaws.com"
export S3_ACCESS_KEY_ID="your-access-key"
export S3_SECRET_ACCESS_KEY="your-secret-key"
export S3_REGION="us-east-1"
pnpm build:web

​
Platform-Specific Features

​
WebGPU Acceleration

  • Hardware-accelerated 3D rendering
  • Efficient model inference
  • Real-time avatar animation
  • Post-processing effects

​
Web Audio API

  • Real-time audio processing
  • Microphone input for voice chat
  • Audio worklets for low-latency processing
  • Spatial audio support

​
In-Browser Database

  • DuckDB WASM: Local SQL database
  • LocalForage: IndexedDB wrapper
  • Persistent storage for chat history and settings
  • No server required for data storage

​
Web Workers

  • Background processing for heavy tasks
  • Audio transcription
  • Model loading and inference
  • Non-blocking UI updates

​
Limitations

Some features available in desktop are not supported in the web version:
  • No native CUDA/Metal support (WebGPU only)
  • Limited file system access
  • No system tray integration
  • No auto-updater
  • Cannot access local Discord/Minecraft
  • Reduced performance compared to native desktop
  • Browser tab must remain open for background processing

​
Performance Considerations

​
Memory Management

  • Large models are lazy-loaded
  • Unused resources are automatically released
  • Service worker caches frequently used assets
  • Maximum file size for PWA cache: 64MB per file

​
Optimization Tips

  1. Close unused tabs: Free up GPU memory
  2. Use Chrome/Edge: Best WebGPU performance
  3. Enable hardware acceleration: Check browser settings
  4. Clear cache periodically: Refresh outdated cached assets
  5. Use wired connection: Reduce latency for real-time features

​
Performance Monitoring

// Check GPU capabilities
if (navigator.gpu) {
  const adapter = await navigator.gpu.requestAdapter();
  console.log('GPU:', adapter);
}

// Monitor memory usage
console.log('Memory:', performance.memory);

​
Troubleshooting

​
WebGPU Not Available

  1. Update your browser to the latest version
  2. Enable hardware acceleration in browser settings
  3. Check GPU drivers are up to date
  4. Try a different browser (Chrome/Edge recommended)

​
Poor Performance

  1. Close other GPU-intensive tabs
  2. Reduce model quality in settings
  3. Disable post-processing effects
  4. Check browser DevTools for performance bottlenecks

​
Service Worker Issues

# Clear service worker cache
Chrome DevTools → Application → Clear storage → Clear site data

​
Technology Stack

  • Framework: Vue 3 with Composition API
  • Build Tool: Vite 7
  • Graphics: WebGPU + Three.js
  • State Management: Pinia
  • Router: Vue Router 4
  • Database: DuckDB WASM
  • Audio: Web Audio API
  • 3D Models: Live2D + VRM support
  • Styling: UnoCSS
  • PWA: Workbox + vite-plugin-pwa

Desktop Platform

Electron app with native performance

Mobile Platform

iOS and Android support via Capacitor

Build docs developers (and LLMs) love

Get started for freeTalk to us