Canva Dev MCP Server

canvadesignapps-sdkdocumentationdeveloper-tools

Summary

Canva's official MCP server for building Canva apps — grounds an agent in the Apps SDK and App UI Kit docs instead of letting it guess the API.

Features

Grounds code generation in the current Canva Apps SDK documentation
Covers the App UI Kit component system so generated UI matches the editor
Runs locally over stdio via the Canva CLI — nothing to host
No API key or authentication step for the documentation surface
Works with Cursor, VS Code Agent mode, Claude Desktop and Claude Code
Companion llms.txt index published for direct documentation access

Installation

Set up this MCP server in your favorite AI agent — copy a ready-made configuration below.

Any MCP-compatible agent

Most agents (Claude, Cursor, Windsurf, VS Code, and more) read a standard mcpServers configuration.

Open your agent's MCP configuration file.
Merge the snippet below into it.
Restart the agent — the "Canva Dev MCP Server" tools will be available.

{
  "mcpServers": {
    "canva-dev": {
      "command": "npx",
      "args": [
        "-y",
        "@canva/cli@latest",
        "mcp"
      ]
    }
  }
}

Claude Code

Add the server with a single CLI command.

claude mcp add canva-dev -- npx -y @canva/cli@latest mcp

Claude Desktop

Add the server to claude_desktop_config.json (Settings → Developer → Edit Config).

{
  "mcpServers": {
    "canva-dev": {
      "command": "npx",
      "args": [
        "-y",
        "@canva/cli@latest",
        "mcp"
      ]
    }
  }
}

Cursor

Add to .cursor/mcp.json and use Agent mode.

{
  "command": "npx",
  "args": [
    "-y",
    "@canva/cli@latest",
    "mcp"
  ]
}

VS Code

Add to .vscode/mcp.json and use Agent mode.

{
  "command": "npx",
  "args": [
    "-y",
    "@canva/cli@latest",
    "mcp"
  ]
}

Description

The Canva Dev MCP server connects an AI coding assistant to canva.dev, the developer platform behind Canva apps and integrations. Its job is narrow and useful: when an agent is writing code against the Canva Apps SDK or laying out UI with the App UI Kit, this server puts the current documentation in front of it rather than letting it improvise from whatever it remembers.

That matters more for Canva than for most platforms, because the App UI Kit is a constrained component system — apps are expected to look native inside the Canva editor — and an agent that invents plausible props or reaches for arbitrary CSS produces something that will not pass review. Grounding the generation in the real component contracts is the difference between a scaffold you can ship and one you rewrite.

How it runs. A single command, npx -y @canva/cli@latest mcp, launched over stdio from your editor's MCP configuration. It executes locally on your machine and only fetches documentation from canva.dev — no code or prompt content is sent anywhere beyond the AI client you have already chosen. There is no separate authentication step and no plan requirement documented for the docs surface.

Supported clients. Cursor in Agent mode via .cursor/mcp.json, VS Code in Agent mode via .vscode/mcp.json, Claude Desktop through its settings file, and Claude Code. Tools are model-invoked, so they activate from the conversation rather than being called explicitly.

Canva also publishes a complete documentation index at https://www.canva.dev/docs/apps/llms.txt if you would rather feed the docs to an agent directly.

Related MCP Servers

MCP: GitLab MCP Server

by GitLab

New

GitLab's own MCP server — issues, merge requests, CI/CD pipelines, job logs, wikis and semantic code search over an OAuth-authorised HTTP endpoint.

Developer Tools

MCP: Mobile MCP

by Mobile Next

New

Platform-agnostic MCP server that drives iOS and Android apps on simulators, emulators and real devices through the accessibility tree rather than screenshots.

Developer Tools