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

# Web Quickstart

> Run the Web scenario demo with LiveKit Agents or Agora Convo AI.

<Card title="Web scenario demo" icon="github" href="https://github.com/spatius-ai/spatius-scenario-demo/tree/main/web" horizontal>
  Run four complete avatar scenes in the browser.
</Card>

The Web demo supports both recommended integrations. Choose `livekit` to run the conversation through LiveKit Agents on your machine, or `agora` to use Agora Convo AI.

## Prerequisites

* Python 3 and Node.js with pnpm
* Spatius API Key and App ID from [Spatius Studio](https://app.spatius.ai/apps)
* One realtime provider:
  * LiveKit URL, API Key, and API Secret from [LiveKit Cloud](https://cloud.livekit.io)
  * Or Agora App ID, App Certificate, and published Agent Pipeline ID

## Run it

<Steps>
  <Step title="Clone the scenario demo">
    ```bash theme={null}
    git clone https://github.com/spatius-ai/spatius-scenario-demo.git
    cd spatius-scenario-demo
    ```
  </Step>

  <Step title="Configure the shared backend">
    ```bash theme={null}
    cd backend
    python -m venv .venv
    source .venv/bin/activate
    pip install -r requirements.txt
    cp .env.example .env
    ```

    In `.env`, set `TRANSPORT=livekit` or `TRANSPORT=agora`, then fill the Spatius and matching provider credentials. The [backend README](https://github.com/spatius-ai/spatius-scenario-demo/tree/main/backend) lists every field. For Agora, also follow its required ASR resource-ID and TTS sample-rate setup.
  </Step>

  <Step title="Start the backend">
    ```bash theme={null}
    python server.py
    ```

    Keep it running. It listens on port `8787` and starts the LiveKit agent worker automatically when `TRANSPORT=livekit`.

    <Warning>
      The demo backend is unauthenticated. Run it only on your local machine or a trusted LAN; do not expose it publicly.
    </Warning>
  </Step>

  <Step title="Start the Web client">
    In a second terminal:

    ```bash theme={null}
    cd spatius-scenario-demo/web
    pnpm install
    pnpm dev
    ```

    Open `http://localhost:5180/spatius-scenario-demo/`, confirm the backend configuration, then choose a scene.
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="LiveKit Agents" icon="radio" href="/livekit-agents/overview" />

  <Card title="Agora Convo AI" icon="tower-broadcast" href="/agora-convoai/overview" />
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.