Canva Dev MCP Server

1 views

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: deja-vu

by Vladislav Shulcz

New

Indexes the coding-agent sessions already sitting on your disk — months of history from before you installed it — and serves them back over MCP. 3.5 GB searched in ~1.5 ms, no LLM, no embeddings.

Developer ToolsDatabases & Data

MCP: Azure DevOps MCP Server

by Microsoft

New

Microsoft's official MCP server for Azure DevOps - work items, repos, pipelines, wikis, test plans and iterations, reachable from any MCP client in plain language.

Developer Tools