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

# Magic Canvas overview

> Let your PAL show interactive UI (questions, calendars, charts, and more) inside a live video conversation.

**Magic Canvas** lets a PAL show interactive cards, such as multiple-choice questions, calendars, charts, and text, during a live video conversation. User responses flow back to the PAL and your backend.

The PAL decides when to show a card; there is no per-card API call.

```
PAL invokes a Canvas action  →  card renders in the call
User responds to the card    →  PAL reacts to the response
                             →  your webhook receives the interaction
```

## Conversation Flow

<Steps>
  <Step title="Attach the Magic Canvas skill">
    Attach via `PUT /v2/pals/{pal_id}/skills/magic_canvas`; remove with `DELETE` on the same path:

    ```json theme={null}
    {
      "config": {}
    }
    ```

    Attaching enables every component with default settings, including components Tavus ships later. The exception is `scheduling_embed`, which stays inactive until you set its `scheduling_url`.

    `config.components` is a sparse overlay: add an entry only to configure or disable a component (`{"enabled": false}`); unlisted components stay on. Unknown keys are rejected. See [Configuring your PAL](/sections/conversational-video-interface/magic-canvas/api/configuration).
  </Step>

  <Step title="Create a conversation">
    Video conversations get Canvas actions automatically. Audio-only, text-chat, and external-meeting (`meeting_url`, e.g. Zoom/Teams/Meet) conversations never get them.
  </Step>

  <Step title="PAL shows a card">
    The PAL invokes a Canvas action; the card renders in a left or right side rail beside the face video (inline), and the PAL can update or clear it mid-conversation.
  </Step>

  <Step title="Interaction flows back">
    When the user submits, skips, or dismisses a card:

    * The PAL responds to it, as it does to speech.
    * Tavus records it and delivers a `canvas.interaction` event to your conversation webhook, once per interaction.

    Fetch a conversation's full interaction history with your API key; see [Interactions](/sections/conversational-video-interface/magic-canvas/api/interactions).
  </Step>
</Steps>

## Hosted vs SDK

Both use the same PALs, components, and webhook; the difference is how much of the UI you own.

|                                     | Hosted embed / widget                                          | `@tavus/cvi-ui` SDK                                                    |
| ----------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------- |
| **What it is**                      | A `<tavus-embed>` or `<tavus-widget>` tag you drop on any page | A `<MagicCanvas>` React component you add next to your conversation UI |
| **Rendering & interaction posting** | Automatic                                                      | Automatic, with `onInteraction` / `onError` callbacks for your app     |
| **Custom look**                     | Tavus-designed cards                                           | Cards by default, or bring your own React renderers per component      |
| **Best for**                        | Fastest path; any site, no framework needed                    | Apps that own their conversation UI                                    |

## Components

Seven components ship today, all at version `v1`: four **interactive** (submit an answer or skip) and three **display** (dismiss only).

| Component                                                                                               | What the PAL can do with it                                         | User can answer? |
| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------- |
| [`question`](/sections/conversational-video-interface/magic-canvas/components/question)                 | Ask a multiple-choice question, optionally with a free-text "Other" | Yes              |
| [`input`](/sections/conversational-video-interface/magic-canvas/components/input)                       | Ask for a single typed value: text, email, number, or phone (tel)   | Yes              |
| [`calendar`](/sections/conversational-video-interface/magic-canvas/components/calendar)                 | Let the user pick a date, a time slot, or a date range              | Yes              |
| [`scheduling_embed`](/sections/conversational-video-interface/magic-canvas/components/scheduling-embed) | Embed your real scheduling page (e.g. Calendly) for live booking    | Yes              |
| [`text`](/sections/conversational-video-interface/magic-canvas/components/text)                         | Show a card of formatted text                                       | Dismiss only     |
| [`chart`](/sections/conversational-video-interface/magic-canvas/components/chart)                       | Show a chart of data from the conversation                          | Dismiss only     |
| [`alert`](/sections/conversational-video-interface/magic-canvas/components/alert)                       | Show a dismissible notice                                           | Dismiss only     |

## Rendering

Components render in a sandboxed iframe that isolates styles and scripts in both directions, served from Tavus infrastructure.

To render cards in your own React tree, register a renderer per component in the SDK; interactions flow back identically. See [Custom rendering](/sections/conversational-video-interface/magic-canvas/integrations/cvi-ui-sdk#bring-your-own-renderer).

<Tip>
  The PAL drives card timing. Influence when cards appear through its system prompt and context.
</Tip>

## Next Steps

* [Configuring your PAL](/sections/conversational-video-interface/magic-canvas/api/configuration): attach the skill and configure components
* [Hosted embed and widget](/sections/conversational-video-interface/magic-canvas/integrations/hosted): the no-code path
* [React SDK](/sections/conversational-video-interface/magic-canvas/integrations/cvi-ui-sdk): `<MagicCanvas>` in your own app
* [Interactions](/sections/conversational-video-interface/magic-canvas/api/interactions): interaction API, webhook payloads, verification rules