# Add lalia to this project

lalia is a fluid, audio-reactive WebGL2 orb that shows what a voice agent is doing: idle, connecting, listening, thinking, speaking or muted. Zero dependencies. React component or a framework-free engine.

## 1. Install

```bash
npm install lalia
```

## 2. Add the orb

Keep the design, colors and size exactly as given; they were picked by the user.

```tsx
'use client'

import type { AudioSampler, OrbState } from 'lalia'
import { Orb } from 'lalia/react'
import { wisp } from 'lalia/variants'

// Your orb. Pass it the live session: state from your voice agent, the user's microphone as
// input and the agent's voice as output, e.g. input={fromStream(micStream)}. ElevenLabs,
// OpenAI Realtime and Gemini Live have ready-made state mapping in lalia/adapters/*.
export function AgentOrb(live: { state: OrbState; input?: AudioSampler | null; output?: AudioSampler | null }) {
  return (
    <Orb
      variant={wisp}
      size={240}
      {...live}
    />
  )
}

```

## 3. Wire it to the voice session

- Find where this app's voice session lives.
- `state`: `idle` | `connecting` | `listening` | `thinking` | `speaking` | `muted`. ElevenLabs: `elevenLabsState(status, isSpeaking)` and `elevenLabsAudio(conversation)` for the audio, from `lalia/adapters/elevenlabs`. OpenAI Realtime and Gemini Live: reduce every server event with `openaiRealtimeState(event, previous)` from `/adapters/openai` or `geminiLiveState(message, previous)` from `/adapters/gemini`. Anything else: derive it yourself.
- Audio: the microphone as `input` (`fromStream(micStream)`), the agent's playback as `output` (`fromStream(remoteStream)` or `fromNode(playbackGain)`). The same stream or node always gives the same sampler, so inline is fine.
- Keep the component in a `'use client'` file (Next.js App Router).
- No live audio yet? `createVoiceSimulator()` fakes speech so the design can be checked.

## 4. Check your work

- Changing `state` glides; nothing should jump or remount.
- Leave `appearance` on `auto`: the orb reads the page behind it and works on light and dark backgrounds. Do not put it in a dark box on a light page.
- Keep it square. Size it with `size` (CSS pixels or any CSS length).
- Brand color? `createScheme('#hex')` from `lalia/schemes` fits it to every design.

Designs (import from `lalia/variants`):
- Mist: wisp, haze, cloud
- Silk: silk, satin
- Glass: glass, prism
- Lumen: lumen
- Chrome: chrome

Schemes (import from `lalia/schemes`):
- Neutral: graphite, pearl, linen, glacier
- Hue: cobalt, iris, orchid, rose, coral, ember, honey, citrus, sage, jade, lagoon
- Atmosphere: dusk, dawn, borealis, nocturne, abyss, opal, cosmic

Full reference: https://lalia.offbrand.design/llms-full.txt