canvas

Create interactive React canvases for charts, tables, and diff views.

Updated Aug 27, 2026

Search Tags:#charts #interactive #visualization #diff #canvas #artifact

Ready to run

npx skills add https://github.com/cuongnm-dev/team-ai-config --skill canvas-cuongnm-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/cuongnm-dev/team-ai-config/tree/main/cursor/skills-cursor/canvas
Command: npx skills add https://github.com/cuongnm-dev/team-ai-config --skill canvas-cuongnm-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cursor Canvas enables building and presenting standalone visual artifacts alongside chat, replacing clunky markdown dumps with interactive canvases that render charts, tables, diffs, and other rich content.

Core Features & Use Cases

Live React canvases that the user can open beside the chat and iterate on.
Rich rendering primitives such as charts (BarChart, LineChart, PieChart), tables, and diff views, enabling data-heavy analyses and cross-tool reporting.
Guided workflow and quality checks (pre-delivery self-check) to ensure accessible, consistent visuals across teams.
Real-world use cases include presenting MCP outputs, architecture reviews, security audits, and billing investigations with an interactive artifact.

Quick Start

Open Cursor and create a new canvas using the Canvas skill workflow to begin building your visual artifact beside the chat.

Frequently Asked Questions about canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I display interactive charts and tables beside chat instead of using markdown?▼

To display interactive charts and tables beside chat, use a canvas to host standalone visual artifacts. This replaces markdown dumps with live React components like BarChart, LineChart, and tables for data-heavy analyses.

Can I present MCP outputs and security audits as interactive visual artifacts?▼

Yes, you can present MCP outputs, security audits, and architecture reviews as interactive visual artifacts. The canvas renders these standalone analyses beside chat, enabling rich presentation without relying on markdown tables.

How do I create a live React canvas for data visualization in Cursor?▼

Create a new canvas using the canvas workflow to build a live React canvas for data visualization. It uses the cursor/canvas SDK and frontmatter definitions in SKILL.md to render interactive artifacts beside chat.

Does the canvas support diff views for code reviews and billing investigations?▼

Yes, the canvas supports diff views for code reviews and billing investigations. It provides rich rendering primitives for presenting data-heavy analyses and cross-tool reporting as interactive visual artifacts.

What theming rules apply when building visual artifacts with the canvas SDK?▼

Building visual artifacts requires enforcing theming with host tokens and avoiding network calls. A guided workflow with pre-delivery quality checks ensures accessible, consistent visuals across teams.

Are there limitations on network calls when creating interactive canvases?▼

Yes, creating interactive canvases has the limitation of avoiding network calls. The canvas SDK enforces this constraint while requiring theming with host tokens to maintain consistent visual presentation.