Skip to main content
Glama
deenesjakoruzh
elisbanpaco

Canva MCP Server

by elisbanpaco
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

🎨 Canva MCP Server

CI License: MIT Node.js Version NPM Version MCP Standard TypeScript Tested with Vitest

Verbinde deine KI-Assistenten (Google Antigravity, Gemini CLI, Claude Desktop, Cursor) direkt mit deinem Canva-Konto über die offizielle API (Canva Connect API). Erstelle, suche, exportiere und lade Designs mithilfe natürlicher Sprache hoch.

⚡ Schnellstart (Quickstart)

1. Direkte Einrichtung über npx

Du kannst es direkt mit npx ausführen, ohne das Repository klonen zu müssen:

🤖 Google Antigravity / Gemini CLI (~/.gemini/config/mcp_config.json)

{
  "mcpServers": {
    "canva": {
      "command": "npx",
      "args": ["-y", "@elisbanpaco/mcp-canva-gemini-cli"],
      "env": {
        "CANVA_CLIENT_ID": "tu_client_id",
        "CANVA_CLIENT_SECRET": "tu_client_secret"
      }
    }
  }
}

🟣 Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "canva": {
      "command": "npx",
      "args": ["-y", "@elisbanpaco/mcp-canva-gemini-cli"],
      "env": {
        "CANVA_CLIENT_ID": "tu_client_id",
        "CANVA_CLIENT_SECRET": "tu_client_secret"
      }
    }
  }
}

💻 Cursor IDE (.cursor/mcp.json)

{
  "mcpServers": {
    "canva": {
      "command": "npx",
      "args": ["-y", "@elisbanpaco/mcp-canva-gemini-cli"],
      "env": {
        "CANVA_CLIENT_ID": "tu_client_id",
        "CANVA_CLIENT_SECRET": "tu_client_secret"
      }
    }
  }
}

Related MCP server: Canvelete

🧰 Verfügbare Tools

Sobald du verbunden bist, kannst du deiner KI Folgendes sagen:

Tool

Was macht es?

Beispiel-Prompt

canva_list_designs

Listet deine letzten Designs mit Miniaturansichten und Bearbeitungslinks auf.

"Zeig mir meine letzten Präsentationen in Canva"

canva_get_design

Ruft die Details, Seiten und URLs eines Designs anhand seiner ID ab.

"Gib mir die Informationen zum Design mit der ID DAHKDKZXFcQ"

canva_create_design

Erstellt ein neues Design (Präsentation, Dokument, Instagram-Post usw.).

"Erstelle einen Instagram-Post in Canva mit dem Titel Lanzamiento 2026"

canva_export_design

Exportiert ein Design als PNG, JPG, PDF oder PPTX und liefert dir den Download-Link.

"Exportiere meine Präsentation als PDF"

canva_list_folders

Durchsucht den Inhalt deines Canva-Stammordners.

"Welche Elemente habe ich in meinem Hauptordner in Canva?"

canva_list_folder_items

Listet die Elemente in einem bestimmten Ordner auf.

"Zeig mir die Dateien im Ordner mit der ID X"

canva_create_folder

Erstellt einen neuen Ordner in deinem Canva.

"Erstelle einen Ordner namens Proyectos 2026"

canva_upload_asset

Lädt ein lokales Bild von deinem Computer in Canva hoch.

"Lade das Bild ./banner.png in mein Canva-Konto hoch"

canva_get_auth_status

Überprüft den Verbindungsstatus und die Gültigkeit der Tokens.

"Prüfe, ob meine Verbindung zu Canva aktiv ist"

🔑 Ersteinrichtung der Anmeldedaten

  1. Gehe zu Canva Developers und klicke auf Your integrations.

  2. Klicke auf Create an integration $\rightarrow$ Wähle Public.

    Canva-Integration erstellen

  3. Kopiere unter Credentials deine Client ID und generiere dein Client Secret.

  4. Aktiviere unter Scopes die Berechtigungen (dies sind die einzigen unterstützten):

    • design:content:read, design:content:write, design:meta:read

    • asset:read, asset:write, folder:read, folder:write, app:read

    Scope-Konfiguration in Canva

  5. Füge unter Authentication die exakte Weiterleitungs-URL hinzu: http://127.0.0.1:3000/callback

    Redirect-URL hinzufügen

Authentifizierung (Nur beim ersten Mal)

Da Canva pro Benutzer Anmeldedaten verlangt, öffne dein Terminal und führe Folgendes aus, um dich zu authentifizieren und die Tokens sicher zu speichern:

# En Linux/macOS
export CANVA_CLIENT_ID="tu_client_id"
export CANVA_CLIENT_SECRET="tu_client_secret"
npx -p @elisbanpaco/mcp-canva-gemini-cli mcp-canva-auth

# En Windows (PowerShell)
$env:CANVA_CLIENT_ID="tu_client_id"
$env:CANVA_CLIENT_SECRET="tu_client_secret"
npx -p @elisbanpaco/mcp-canva-gemini-cli mcp-canva-auth

Dein Browser öffnet sich zur Bestätigung. Fertig! Deine Tokens werden mit 0600-Berechtigungen in deinem Betriebssystem gespeichert.

🏗️ Architektur und Sicherheit

sequenceDiagram
    autonumber
    actor User as Usuario / Asistente IA
    participant MCP as Canva MCP Server (Stdio)
    participant Vault as Bóveda de Tokens (~/.config/canva-mcp)
    participant CanvaOAuth as Canva OAuth2 (PKCE S256)
    participant CanvaAPI as Canva Connect API (REST v1)

    Note over User,CanvaAPI: 1. Flujo de Autenticación (pnpm auth)
    MCP->>CanvaOAuth: Inicia flujo PKCE con desafío SHA-256
    CanvaOAuth-->>MCP: Redirección con Código de Autorización
    MCP->>CanvaOAuth: Intercambio de código por Tokens de acceso
    CanvaOAuth-->>MCP: Access Token + Refresh Token
    MCP->>Vault: Guarda en almacenamiento seguro (Permisos 0600)

    Note over User,CanvaAPI: 2. Ejecución de Herramientas en Tiempo Real
    User->>MCP: Llama a herramienta (ej. canva_list_designs)
    MCP->>Vault: Carga token válido (Auto-renovación con Mutex)
    MCP->>CanvaAPI: Petición HTTP Bearer con Exponential Backoff
    CanvaAPI-->>MCP: Respuesta JSON con metadatos y URLs
    MCP-->>User: Resultado estructurado

Technische Merkmale:

  • 🔐 Sicherer OS-Tresor: Die Tokens werden im Systemverzeichnis (~/.config/canva-mcp/ unter Linux/Mac oder %APPDATA%\canva-mcp unter Windows) mit POSIX-Berechtigungen 0600 gespeichert (nur für deinen Benutzer lesbar).

  • ⚡ Kollisionsschutz-Mutex: Verhindert Race Conditions, wenn das Modell während der Token-Erneuerung mehrere Tools parallel ausführt.

  • 🛡️ Exponentielles Backoff: Automatische Wiederholungsversuche mit exponentiellem Backoff bei Ratenbegrenzungen (HTTP 429) und vorübergehenden Ausfällen (5xx).

  • 🧪 100% Testabdeckung: Vollständige Suite an Unit-Tests mit Vitest.

🧪 Tests und Entwicklung

# Ejecutar suite de pruebas unitarias
pnpm test

# Verificación estricta de tipos TypeScript
pnpm typecheck

# Compilar paquete de producción
pnpm build

📄 Lizenz

Dieses Projekt steht unter der MIT-Lizenz. Weitere Details findest du in der Datei LICENSE.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd
A
license - permissive license
A
quality
A
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
0dRelease cycle
2Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • lsp

    Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.

  • lsp

    Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.

  • Stellary Project Management MCP Server

    Connect AI assistants to Stellary projects, boards, documents, and governed agent workflows.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/elisbanpaco/mcp-canva-gemini-cli'

If you have feedback or need assistance with the MCP directory API, please join our Discord server