---
title: Canvas
description: >-
  Auto-canvas cards, the tier system, and interactive visualizations in the Chat
  Workspace.
tags:
  - chat
  - canvas
---

  story as canvasCardStory,
  CanvasCardTier1,
  CanvasCardTier2,
  CanvasCardTier3,
} from "@/lib/docs/story/examples/CanvasResultCardStory";

The canvas is a visual workspace that sits alongside the conversation pane in [Ivy](/docs/chat), turning tool results into interactive cards as the AI produces them. Use it when you want to view, compare, and manipulate outputs without scrolling back through message history. Cards are added automatically as tools run, so results accumulate in one place while the conversation stays focused on your queries.

## Canvas

The canvas is a visual workspace that sits alongside the chat conversation pane. When the AI executes tools and produces results, those results are automatically added to the canvas as interactive cards. This lets you view, compare, and manipulate outputs without scrolling through message history.

> **Live tier comparison**

> Toggle `tier` in the playground below to switch between tier 1 (preview), tier 2 (full visualization), and tier 3 (deep dive). The card chrome (border, header, focus ring) is rendered with the **production styles** exported from `CanvasResultCard.styles.ts`, so changes to the real card's chrome show up here automatically.

  <canvasCardStory.WithControl />

## Auto-canvas

Auto-canvas is enabled by default. When a tool call completes, the platform automatically creates a canvas card from the result. You do not need to manually add cards -- they appear as soon as the tool finishes running.

The auto-canvas system uses the `canvasCardRegistry` to determine what type of card to create for each tool result. For example:

- An ESMFold result produces a **3D structure card** with an embedded Mol* viewer.
- A PubChem search produces a **compound table card** with molecular properties.
- A BLAST result produces an **alignment card** with sequence comparisons.
- A DiffDock result produces a **docking card** with pose selection and scoring.

> If you do not want a particular result on the canvas, click the dismiss (X) button on the card. You can always re-add it from the tool result in the chat message.

## Card tiers

Canvas cards operate on a tiered system that controls their visual complexity and interactivity.

### Tier 1 -- Preview

Every card spawns at Tier 1. It shows a title and the key metrics extracted from the result, and sizes itself to that preview. Heavy viewers are not mounted yet.

**Examples**: pLDDT and length for a folded structure, top docking score, hit counts for a search.

### Tier 2 -- Full visualization

The first click-expand. Tier 2 mounts the complete visualization: embedded viewers, interactive charts, sortable tables, and domain-specific controls.

**Examples**:
- **StructureRenderer** -- Mol* 3D viewer for protein structures with confidence coloring.
- **DockingRenderer** -- Pose selector with co-display of protein and ligand, and a scoring table.
- **GenerativeRenderer** -- Grid of generated molecules with 2D thumbnails, sort dropdown (score/QED/MW), and SAFE/SMILES toggle.
- **AnalyticsSuiteRenderer** -- Sub-renderers for dose-response curves, survival plots, enrichment analysis, and safety profiles.

### Tier 3 -- Deep dive

The deep-dive panel. Depending on the tool it adds sections for metadata, the raw data table, analytics, cross-references to other databases, and artifacts.

Field visibility is cumulative: everything shown at a lower tier stays visible at the tiers above it.

## Interacting with cards

### Selecting cards

Click a card to select it. Hold **Ctrl/Cmd** while clicking to multi-select. Selected cards are highlighted and can be acted upon through the contextual actions section of the action rail. **Ctrl/Cmd + A** selects every card on the canvas.

### Card menu

Right-click a card to open its menu: **Ask about this**, **Explain results**, suggested follow-up prompts, **Copy data**, and **Export**.

### Moving and resizing

Drag a card by its handle to reposition it. Double-click the handle to reset the card's size. Locked cards cannot be moved.

### Undo

**Ctrl/Cmd + Z** undoes a canvas change, and **Ctrl/Cmd + Shift + Z** or **Ctrl/Cmd + Y** redoes it.

## Composite cards

Some tools produce results that span multiple visualization types. Composite cards use a layout system to display multiple sections in a single card. For example, a comprehensive docking analysis might show a 3D viewer, a scoring table, and an interaction diagram in three stacked sections.

The layout is defined by the tool's registry entry and rendered using the `CompositeRenderer`.

## Custom renderers

Certain job types use custom renderers that go beyond the standard tier system:

| Renderer | Job types | Features |
|---|---|---|
| **DockingRenderer** | diffdock, gnina, colabdock | Pose selector, Mol* co-display (PDB + SDF), score table |
| **GenerativeRenderer** | genmol, reinvent4, reinvent, denovo | 2D molecule grid, sort by score/QED/MW, SAFE/SMILES toggle |
| **AnalyticsSuiteRenderer** | dose_response, survival, enrichment, safety, generic analytics | Domain-specific sub-renderers for each analysis type |

## Card data and exports

Each canvas card stores structured data that can be exported. Open the action rail's **Passports & Exports** panel to download card data as CSV, JSON, SDF, or PDB depending on the card type.

The **Available Exports** section of the action rail dynamically updates based on which data namespaces have been fulfilled by the current set of canvas cards.