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

    Attaching enables every component with default settings, including components Tavus adds 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. See [Configuring your PAL](/sections/conversational-video-interface/magic-canvas/api/configuration).
  </Step>

  <Step title="Create a conversation">
    Video conversations get Canvas actions automatically.

    <Warning>
      Audio-only, text-chat, and external-meeting conversations (`meeting_url`, for example Zoom, Teams, or Meet) do not get Canvas actions.
    </Warning>
  </Step>

  <Step title="PAL shows a card">
    The PAL invokes a Canvas action; the card renders in a side rail beside the PAL video, and the PAL can 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 Canvas interaction history with your API key; see [Canvas interactions](/sections/conversational-video-interface/magic-canvas/api/interactions).
  </Step>
</Steps>

## When cards appear

The PAL decides when to show a card; you do not call an API to trigger one. Steer that behavior with `usage_guidance` on the skill, the PAL's system prompt, or per-conversation context. See [When cards appear](/sections/conversational-video-interface/magic-canvas/api/configuration#when-cards-appear) for how each lever fits.

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

Eight components: four interactive (submit an answer or skip) and four display-only (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 |
| [`image`](/sections/conversational-video-interface/magic-canvas/components/image) | Show an image from your Knowledge Base or an allowlisted website | 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).

## 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
* [Canvas interactions](/sections/conversational-video-interface/magic-canvas/api/interactions): webhooks, recording, and history


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