MCP server

How to configure the Canva Dev MCP server for an AI-assisted developer experience.

The Canva Dev Model Context Protocol (MCP) server provides AI-powered development assistance for Canva apps and integrations. By connecting your preferred MCP client (such as Cursor, Claude Desktop, or other compatible tools) to canva.dev, you can access specialized tools and documentation to enhance your development workflow.

Before you begin

To follow this guide, you'll need to install the following prerequisites:

git
Node.js v20 (or later)
npm
A compatible MCP client. For example, Cursor, Claude Desktop.

If you need help with any of these prerequisites, including how to set up the required tooling, see the Canva Apps Prerequisites.

Step 1: Configure your MCP client

Each MCP client requires specific configuration to communicate with the Canva Dev MCP server. Follow the instructions below for your client.

In your project directory, create the configuration directory and file:
```
mkdir -p .cursor
touch .cursor/mcp.json
```
SHELL

Add the following configuration to .cursor/mcp.json:

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

JSON

For more information, see the Cursor MCP documentation⁠(opens in a new tab or window).

Although Claude Desktop is good at documentation assistance, we recommend using Cursor or Claude Code for active development because of their superior feedback mechanisms.

Open Claude Desktop Settings.
Navigate to the Developer tab.

Click Edit Config and add the following configuration:

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

JSON

For more information, see the MCP quickstart guide⁠(opens in a new tab or window).

Run the following command in your terminal:

claude mcp add canva -e CANVA_CLI_MCP_ENABLED=true -- npx -y @canva/cli@latest mcp

SHELL

For more information, see the Claude Code documentation⁠(opens in a new tab or window)

VS Code support for MCP servers is currently in preview.

In your workspace, create the VS Code configuration directory and file:
```
mkdir -p .vscode
touch .vscode/mcp.json
```
SHELL

Add the following to .vscode/mcp.json:

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

JSON

For more information, see the VS Code MCP documentation⁠(opens in a new tab or window).

Step 2: Restart your MCP client

Save all configuration changes.
Restart your MCP client (for example, Cursor, Claude Desktop, or VS Code) to apply the new settings.

Step 3: Verify the connection

To confirm your MCP server is working:

Look for visual indicators in your client.

For example, in Claude Desktop, you should see:
- A hammer icon (indicating available tools).
- A plug icon (for Canva Dev resources access).
Ask a simple question to test the connection. For example:

How many components are in the App UI Kit?

If your connection is successful, your client should display a tool invocation prompt for you to accept.

MCP tools are LLM-controlled and can't be invoked directly. To invoke the MCP tools using your agent or LLM, include relevant keywords in your queries such as "App UI Kit", "Apps SDK", or request specific Canva documentation references.

Troubleshooting

If your MCP client can't find enabled tools:
1. Make sure the MCP server is configured correctly (see Step 1).
2. Restart the application to refresh your client.
If you receive incorrect or inconsistent responses:
- Try starting a new chat session to reset the conversation context.
- Be specific in your queries and include relevant keywords such as "App UI Kit" or "Apps SDK".
- Request explicit references to Canva documentation.

Security and privacy

The MCP server operates locally on your device, fetching Canva documentation from canva.dev and other sources. Your AI agent receives context and information regarding your Canva app or integration, and uses it to enhance its output and recommendations. The MCP server doesn't transmit your code or prompts to any other sources other than to your AI agent or LLM tool.