canvas

Name: canvas
Availability: InStock
Author: liuharry1

Create live visual canvases beside chat using the Cursor canvas SDK.

4|Updated Mar 14, 2026

Search Tags:#analytics #react #interactive #visualization #canvas #data-visualization

Ready to run

npx skills add https://github.com/LiuHarry1/ai_coding_agent_intro --skill canvas-liuharry1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/LiuHarry1/ai_coding_agent_intro/tree/main/.ai-agent/skills/canvas
Command: npx skills add https://github.com/LiuHarry1/ai_coding_agent_intro --skill canvas-liuharry1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A Cursor Canvas is a live React app that the user can open beside the chat. It enables presenting standalone analytical artifacts—such as quantitative analyses, dashboards, data-heavy insights, or architecture reviews—with rich visuals instead of markdown tables or code blocks.

Core Features & Use Cases

Standalone visual artifacts: render charts, tables, timelines, and interactive explorations as a distinct canvas beside chat.
On-demand resources: load scripts/, references/, and assets/ to support deterministic tasks and contextual detail.
MCP-tool integration: ideal for results from Datadog, Databricks, Linear, Sentry, Slack, and other MCP tools where the data is the deliverable.

Quick Start

Open a canvas beside the chat and implement your analysis in a single .canvas.tsx file.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I render interactive data visualizations beside my chat?▼

To render interactive data visualizations beside your chat, you create a live React canvas using a .canvas.tsx entry point, which functions as a standalone analytical artifact powered by the Cursor canvas SDK.

What is a .canvas.tsx file used for in data analytics workflows?▼

A .canvas.tsx file is used to build standalone visual artifacts like dashboards and charts, replacing markdown tables with rich visuals that present data-heavy insights directly alongside your chat discussions.

Can I use MCP tool results from Datadog or Databricks to build a live dashboard?▼

Yes, you can use MCP tool results from Datadog, Databricks, Linear, or Sentry to build a live dashboard, as the canvas is specifically designed to integrate and present data deliverables from these tools.

How do I add supporting scripts and assets to a React canvas?▼

You add supporting scripts and assets to a React canvas by placing them in optional scripts/, references/, and assets/ directories, which load on-demand to provide deterministic tasks and contextual detail.

Does the canvas skill work without external dependencies?▼

Yes, the canvas skill works without external dependencies, allowing you to render live analytical artifacts using only the Cursor canvas SDK and your specified resource directories.