# Add Realtime & Chat

> Realtime channels (Pusher-compatible) and an embeddable chat widget for your web app.

This path adds **live, interactive features to a web app**. It adds realtime
channels for presence, notifications, and live dashboards (a drop-in Pusher
alternative). It also adds an embeddable **chat widget** with AI + human agents.
The sidebar now shows only these steps. Follow them with **Next**.

## What you'll build

You will build:

- Public / private / presence channels that your frontend subscribes to over
  WebSocket or QUIC.
- Server-side event publishing.
- A `<script>`-tag chat widget that greets visitors with an AI agent and
  escalates to a human. The widget supports files, forms, and reactions.

  1. **Realtime, the Pusher way**
[Realtime overview](/modalities/realtime/details) — migrate `pusher-js` with
    one URL change, or use the QUIC-native client.
  2. **Wire the client & server**
[SDK & API](/modalities/realtime/sdk-methods), then the
    [cookbook](/modalities/realtime/cookbook) (subscribe, presence, private
    channels, server publish, webhooks) and [recipes](/modalities/realtime/recipes).
  3. **Drop chat on a page**
[Chat overview](/modalities/chat/details) and the
    [widget & API](/modalities/chat/sdk-methods).
  4. **Make it do real work**
[Chat cookbook](/modalities/chat/cookbook) (embed on a webpage, forms, skill
    routing, AI + human, files, reactions) and
    [recipes](/modalities/chat/recipes).

> **TIP:**
> To add a **voice** agent to the same app, see the
>   [Voice Agent path](/paths/voice-agent). It shares the same connection and auth.