@canva/cli

The Canva Dev MCP server, powered by @canva/cli, offers AI-assisted development for Canva apps and integrations. It connects to your preferred MCP client (e.g., Cursor, Claude Desktop, VS Code) to provide specialized tools and documentation, enhancing your development workflow.

What it does:

• Provides AI-powered development assistance.
• Fetches Canva documentation from canva.dev and other sources.
• Enhances AI agent output and recommendations with context about your Canva app or integration.
• Operates locally on your device, ensuring privacy as it doesn't transmit your code or prompts to external sources other than your AI agent/LLM.

How to use it:

1. Prerequisites: Ensure you have git, Node.js v20+, npm, and a compatible MCP client installed.
2. Configure your MCP client: Add the following configuration to your client's MCP settings (e.g., .cursor/mcp.json, Claude Desktop Developer tab, .vscode/mcp.json):

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

   For VS Code, the configuration is slightly different:

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

3. Restart your MCP client: Save changes and restart your client to apply the new settings.
4. Verify connection: Look for visual indicators in your client or ask a simple question related to Canva development (e.g., "How many components are in the App UI Kit?") to test the connection and tool invocation.