Overview

The Canva Dev MCP Server is a tool designed to transform AI assistants from generic coding helpers into Canva development experts. It builds on the Model Context Protocol (MCP), an open protocol that standardizes how applications provide context to Large Language Models (LLMs). The Canva Dev MCP Server provides comprehensive, real-time Canva development context and tools to LLMs to help you build on Canva faster.

Official Server:

Developed and maintained by Canva

Key Capabilities

✨

Generate Canva Apps

Create fully structured apps that follow established best practices by invoking the Canva CLI app generator, and add new features using the Apps SDK.

🎨

Adopt the App UI Kit

Migrate existing UI to the App UI Kit components for consistency in functionality and aesthetics.

🌐

Localize Your App

Integrate your app with the App I18n Kit to rewrite your UI to be localizable with clear translator notes.

✅

Comply with Canva's Design Guidelines

Run the Design Review tool to ensure your app UI adheres to Canva's standards, generating reports and suggestions for improvements.

💬

Integrate with AI Chat Assistants

Integrate with AI chat assistants to chat about the Canva Apps SDK or Connect APIs, making your assistant a personal Canva development expert.

🔗

Integrate with Canva via the Connect API

Build integrations with Canva by generating Canva Connect API client code to create new designs or upload assets.

Available Tools

Quick Reference

Tool	Purpose	Category
`canva_generate_app`	Generate new Canva apps or add features	Development
`canva_adopt_ui_kit`	Migrate UI to App UI Kit components	UI/UX
`canva_localize_app`	Integrate app with App I18n Kit for localization	Localization
`canva_design_review`	Run Design Review tool for compliance	Quality Assurance
`canva_chat_integration`	Integrate with AI chat assistants for SDK/API help	Integration
`canva_connect_api`	Generate Canva Connect API client code	API

Detailed Usage

canva_generate_app▶

Generate fully structured Canva apps or add new features using the Apps SDK.

use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_generate_app",
  arguments: {
    // arguments for app generation
  }
});

Invokes the Canva CLI app generator.

canva_adopt_ui_kit▶

Migrate existing UI to the App UI Kit components for consistency.

use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_adopt_ui_kit",
  arguments: {
    // arguments for UI migration
  }
});

Ensures consistency in functionality and aesthetics.

canva_localize_app▶

Integrate your app with the App I18n Kit to rewrite your UI to be localizable.

use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_localize_app",
  arguments: {
    // arguments for localization
  }
});

Provides clear translator notes.

canva_design_review▶

Run the Design Review tool to ensure your app UI adheres to Canva's standards.

use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_design_review",
  arguments: {
    // arguments for design review
  }
});

Generates reports and suggestions for improvements.

canva_chat_integration▶

Integrate with AI chat assistants to chat about the Canva Apps SDK or Connect APIs.

use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_chat_integration",
  arguments: {
    // arguments for chat integration
  }
});

Makes your assistant a personal Canva development expert.

canva_connect_api▶

Build integrations with Canva by generating Canva Connect API client code.

use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_connect_api",
  arguments: {
    // arguments for Connect API integration
  }
});

Create new designs or upload assets.

To unlock the full power of AI-assisted development for Canva Apps and Integrations, check out the official setup guide on the Canva Developers Blog.

Installation

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

Common Use Cases

1. Rapid App Prototyping

Quickly generate new Canva apps with best practices and integrate new features using the Apps SDK.

// Generate a new app
use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_generate_app",
  arguments: {
    appName: "MyNewCanvaApp",
    template: "default"
  }
});

2. UI Migration and Consistency

Migrate existing app UI to the App UI Kit components to ensure consistency in functionality and aesthetics.

// Migrate UI to App UI Kit
use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_adopt_ui_kit",
  arguments: {
    // specify components or files to migrate
  }
});

3. App Localization

Integrate your app with the App I18n Kit to make your UI localizable for a global audience.

// Localize app UI
use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_localize_app",
  arguments: {
    // specify localization settings
  }
});

4. Design Compliance and Quality Assurance

Run the Design Review tool to ensure your app UI adheres to Canva's design standards, generating reports and suggestions for improvements.

// Run design review
use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_design_review",
  arguments: {
    // specify design review parameters
  }
});

5. AI-Assisted Development

Integrate with AI chat assistants to get expert help on the Canva Apps SDK or Connect APIs.

// Get help on Apps SDK
use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_chat_integration",
  arguments: {
    query: "How do I use the Text component in Apps SDK?"
  }
});

6. Canva Connect API Integration

Generate Canva Connect API client code to create new designs or upload assets programmatically.

// Generate Connect API client code
use_mcp_tool({
  server_name: "canva",
  tool_name: "canva_connect_api",
  arguments: {
    apiEndpoint: "designs",
    action: "create"
  }
});

Canva Dev MCP Server