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

# Welcome to Spatius

> What Spatius is, the core components, and how to start integrating.

export const SpatiusArchitectureDiagram = () => {
  return <div className="spatius-diagram not-prose" aria-label="Spatius on-device rendering architecture">
      <svg viewBox="0 0 1640 520" role="img">
        <defs>
          <marker id="spatius-arch-arrow" viewBox="0 0 12 10" refX="10.5" refY="5" markerWidth="4.5" markerHeight="6" orient="auto-start-reverse">
            <path d="M0 0L12 5L0 10Z" fill="var(--spatius-diagram-ink)" />
          </marker>
        </defs>

        <g className="spatius-audio-visualizer" aria-label="user audio">
          <rect className="spatius-audio-bar" x="74" y="264" width="8" height="54" rx="4" />
          <rect className="spatius-audio-bar" x="92" y="250" width="8" height="82" rx="4" />
          <rect className="spatius-audio-bar" x="110" y="272" width="8" height="38" rx="4" />
          <rect className="spatius-audio-bar" x="128" y="244" width="8" height="94" rx="4" />
          <rect className="spatius-audio-bar" x="146" y="260" width="8" height="62" rx="4" />
        </g>
        <text x="114" y="370" textAnchor="middle" fill="var(--spatius-diagram-muted)" fontSize="28" fontWeight="500">user audio</text>

        <g className="spatius-agent-pipeline">
          <polyline points="178,292 265,292" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />

          <rect x="275" y="242" width="165" height="100" rx="10" fill="var(--spatius-diagram-box)" stroke="var(--spatius-diagram-stroke)" strokeWidth="3" />
          <text x="357" y="306" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="30" fontWeight="500">ASR</text>
          <polyline points="446,292 510,292" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />

          <rect x="520" y="242" width="165" height="100" rx="10" fill="var(--spatius-diagram-box)" stroke="var(--spatius-diagram-stroke)" strokeWidth="3" />
          <text x="602" y="306" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="30" fontWeight="500">LLM</text>
          <polyline points="690,292 755,292" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />

          <rect x="765" y="242" width="165" height="100" rx="10" fill="var(--spatius-diagram-box)" stroke="var(--spatius-diagram-stroke)" strokeWidth="3" />
          <text x="847" y="306" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="30" fontWeight="500">TTS</text>
          <text x="1010" y="232" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="28" fontWeight="500">
            <tspan x="1010">Agent</tspan>
            <tspan x="1010" dy="38">Audio</tspan>
          </text>
          <polyline points="938,292 1088,292" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />
        </g>

        <g className="spatius-agent-speech">
          <polyline points="178,292 300,292" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />
          <rect x="310" y="242" width="610" height="100" rx="12" fill="var(--spatius-diagram-box)" stroke="var(--spatius-diagram-stroke)" strokeWidth="3" />
          <text x="615" y="300" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="30" fontWeight="500">Speech-to-Speech Model</text>
          <text x="615" y="330" textAnchor="middle" fill="var(--spatius-diagram-muted)" fontSize="22" fontWeight="500">direct realtime voice model</text>
          <text x="1010" y="232" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="28" fontWeight="500">
            <tspan x="1010">Agent</tspan>
            <tspan x="1010" dy="38">Audio</tspan>
          </text>
          <polyline points="928,292 1088,292" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />
        </g>

        <text x="1245" y="48" textAnchor="middle" fill="var(--spatius-diagram-brand)" fontSize="30" fontWeight="500">Spatius Managed</text>
        <rect className="spatius-diagram-zone" x="1100" y="78" width="300" height="400" rx="18" fill="var(--spatius-diagram-managed)" stroke="var(--spatius-diagram-brand)" strokeWidth="3" />
        <rect x="1137" y="115" width="225" height="120" rx="10" fill="var(--spatius-diagram-box)" stroke="var(--spatius-diagram-stroke)" strokeWidth="3" />
        <text x="1249" y="187" textAnchor="middle" fill="var(--spatius-diagram-ink)" fontSize="30" fontWeight="500">
          <tspan x="1249">Motion Server</tspan>
        </text>
        <rect x="1137" y="300" width="225" height="120" rx="10" fill="var(--spatius-diagram-box)" stroke="var(--spatius-diagram-stroke)" strokeWidth="3" />
        <text x="1249" y="360" textAnchor="middle" dominantBaseline="middle" fill="var(--spatius-diagram-ink)" fontSize="30" fontWeight="500">AvatarKit SDK</text>
        <polyline points="1238,290 1238,246" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="3" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />
        <polyline points="1262,246 1262,290" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="3" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />
        <polyline points="1365,360 1488,360" className="spatius-diagram-flow" fill="none" stroke="var(--spatius-diagram-ink)" strokeWidth="4" strokeLinecap="round" markerEnd="url(#spatius-arch-arrow)" />
        <text x="1510" y="370" textAnchor="start" fill="var(--spatius-diagram-ink)" fontSize="28" fontWeight="500">
          <tspan x="1510">Avatar</tspan>
        </text>
      </svg>
    </div>;
};

Spatius turns avatar speech audio into real-time motion data. Your client renders the avatar locally, so you do not need to stream finished avatar video.

<Frame>
  <SpatiusArchitectureDiagram />
</Frame>

## Core components

| Term              | What it is                                                                                                                                                      |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Spatius**       | The platform — [Spatius Studio](https://app.spatius.ai) for managing apps and avatars, Motion Server in the cloud, and the AvatarKit SDKs you ship in your app. |
| **AvatarKit**     | The client SDK family that downloads avatar assets, renders the avatar locally, and plays synchronized audio. Available for Web, iOS, Android, and Flutter.     |
| **Motion Server** | The Spatius cloud service that receives avatar speech audio and returns lip-sync motion data, \~10–15 KB/s.                                                     |

## Pick your path

Spatius integrations split into two categories.

Not sure which path fits your team? Start with [Choose Your Integration Path](/getting-started/how-to-integrate) to compare latency, production ownership, and developer effort.

### Already using a third-party agent or realtime platform?

<CardGroup cols={2}>
  <Card title="LiveKit Agents Integration" icon="radio" href="/livekit-agents/overview">
    Add `livekit-plugins-spatius` to your LiveKit Agents worker. Web client today.
  </Card>

  <Card title="Agora Convo AI Integration" icon="tower-broadcast" href="/agora-convoai/overview">
    Add Spatius as a Convo AI avatar provider and render from an Agora channel.
  </Card>
</CardGroup>

### Building directly with Spatius SDKs?

<CardGroup cols={2}>
  <Card title="Direct Mode" icon="bolt" href="/direct-mode/overview">
    Your client connects to Motion Server directly. Smallest footprint; your backend only mints Session Tokens.
  </Card>

  <Card title="Backend Mode" icon="server" href="/backend-mode/overview">
    Your backend owns ASR, LLM, TTS, the Server SDK, and the downstream transport.
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Get credentials" icon="key" href="/getting-started/credentials">
    App ID, Avatar ID, Session Token, API Key — who issues each and where each is used.
  </Card>

  <Card title="Choose your integration path" icon="route" href="/getting-started/how-to-integrate">
    Compare latency, client support, production ownership, and developer effort.
  </Card>

  <Card title="Run a quickstart" icon="bolt" href="/quickstarts/overview">
    Web, iOS, Android, and Flutter first-run quickstarts.
  </Card>
</CardGroup>
