Source: https://ai-sdk.dev/elements/components/canvas

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Workflow

Canvas

A React Flow-based canvas component for building interactive node-based interfaces.

The Canvas component provides a React Flow-based canvas for building interactive node-based interfaces. It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.

The Canvas component is designed to be used with the Node and Edge components. See the Workflow demo for a full example.

Installation

---

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add canvas

Features

---

• Pre-configured React Flow canvas with AI-optimized defaults
• Pan on scroll enabled for intuitive navigation
• Selection on drag for multi-node operations
• Customizable background color using CSS variables
• Delete key support (Backspace and Delete keys)
• Auto-fit view to show all nodes
• Disabled double-click zoom for better UX
• Disabled pan on drag to prevent accidental canvas movement
• Fully compatible with React Flow props and API

Props

---

<Canvas />

Prop

Type

children?ReactNode

...props?ReactFlowProps

Tool

A collapsible component for displaying tool invocation details in AI chatbot interfaces. Connection

A custom connection line component for React Flow-based canvases with animated bezier curve styling.

On this page

Installation Features Props <Canvas />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat