Web Platform

Run AIRI in your browser with WebGPU support

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

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

Related Resources

Desktop Platform

Electron app with native performance

Mobile Platform

iOS and Android support via Capacitor