> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/moeru-ai/airi/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Info>
  Try the live version at [airi.moeru.ai](https://airi.moeru.ai)
</Info>

## 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)

<Warning>
  Check WebGPU compatibility at [webgpureport.org](https://webgpureport.org) before running AIRI Web.
</Warning>

### 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](https://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:

```bash theme={null}
git clone https://github.com/moeru-ai/airi.git
cd airi
pnpm install
```

### Development Server

Start the development server for Stage Web:

```bash theme={null}
pnpm dev:web
```

Or from the root:

```bash theme={null}
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:

```bash theme={null}
pnpm -F @proj-airi/stage-web build
```

Or from root:

```bash theme={null}
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:

<CodeGroup>
  ```bash Vercel theme={null}
  vercel deploy
  ```

  ```bash Netlify theme={null}
  netlify deploy --prod --dir=apps/stage-web/dist
  ```

  ```bash Cloudflare Pages theme={null}
  wrangler pages deploy apps/stage-web/dist
  ```
</CodeGroup>

### HuggingFace Spaces

AIRI Web is configured for easy deployment to HuggingFace Spaces:

```bash theme={null}
# 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:

```bash theme={null}
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

<Warning>
  Some features available in desktop are not supported in the web version:
</Warning>

* 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

```typescript theme={null}
// 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

```bash theme={null}
# 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

<CardGroup cols={2}>
  <Card title="Desktop Platform" icon="desktop" href="/platforms/desktop">
    Electron app with native performance
  </Card>

  <Card title="Mobile Platform" icon="mobile" href="/platforms/mobile">
    iOS and Android support via Capacitor
  </Card>
</CardGroup>