Skip to main content

Canvases, Design Mode & the Cursor SDK — Cursor Agent & MCP Features

[ ABORT TO HUD ]
SEQ. 1
SEQ. 2
SEQ. 3

Canvases, Design Mode & the Cursor SDK

🌌 Cursor Agent & MCP Features 15 min 500 BASE XP⌨ HANDS-ON LAB

Beyond Text: Interactive Artifacts

Canvases are interactive artifacts that both local and Cloud Agents (expanded October 16, 2026) build alongside your code - dashboards, reports, task boards, and small tools that live in the editor. Create one with the /canvas skill, or let the agent generate one automatically.

Shared Canvases

Teams can share canvases via a link: viewers get a live, read-only snapshot in the browser - no Cursor install required. Great for architecture reviews and status dashboards.

Design Mode

Design Mode (June 2026) brings direct-manipulation UI editing to canvases and the browser: multi-select elements, tweak them visually, and narrate changes with voice input while the agent writes the corresponding code.

The Cursor SDK & Agent SDK (October 2026)

The Cursor SDK (June 2026) exposes the agent runtime programmatically, while the Agent SDK (@cursor/agent-sdk, released October 20, 2026) lets you package, eval-test (agent-sdk dev), and deploy (agent-sdk deploy) custom bots defined as code folders (instructions.md, tools/, skills/, mcp-connections/, channels/):

npm install @cursor/sdk    # TypeScript
pip install cursor-sdk     # Python
npx @cursor/agent-sdk init ./my-bot  # Agent SDK (Oct 2026)
  • Custom tools: register your own functions the agent can call
  • Permissions: control auto-run behavior with allow/block instructions
  • Session stores: persist conversations to JSONL, SQLite, or custom backends
  • Nested subagents: compose agents that delegate to other agents
💡 Key Insight: The direction of travel is clear - Cursor is becoming a platform: skills, hooks, MCP, plugins, canvases, an SDK, and a marketplace. Learning the extension points now pays compound interest as the ecosystem grows.
⌨ HANDS-ON LABInstall the Cursor SDK
⭐ +150 XP

Script Cursor agent workflows programmatically. Install the official @cursor/sdk developer dependency.

1Install @cursor/sdk as a dev dependency via npm.
lab-sandbox — simulated environment
INFINITY LAB SANDBOX v2.6 — simulated shell
Type the command for the current objective. Helpers: "hint", "solution", "clear".
$
OBJECTIVE 1 / 1 — type "hint" if stuck
SYNAPSE VERIFICATION
QUERY 1 // 3
What is a Canvas in Cursor?
A drawing tool
An interactive artifact - dashboards, reports, and tools the agent builds alongside your code
A video call feature
A themes gallery