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

あなたのAIアシスタント（Google Antigravity、Gemini CLI、Claude Desktop、Cursor）を、公式API（Canva Connect API）を通じてCanvaアカウントに直接接続します。自然言語でデザインの作成、検索、エクスポート、アップロードができます。

⚡ クイックスタート (Quickstart)

1. npx による直接設定

🤖 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

🧰 利用可能なツール

接続後、AIに以下のように依頼できます：

ツール

機能

プロンプト例

canva_list_designs

最近のデザインをサムネイルと編集リンク付きで一覧表示します。

"Canvaで最近のプレゼンテーションを見せて"

canva_get_design

IDでデザインの詳細、ページ、URLを取得します。

"ID DAHKDKZXFcQ のデザイン情報を教えて"

canva_create_design

新しいデザイン（プレゼンテーション、ドキュメント、Instagram投稿など）を作成します。

"Canvaで「Lanzamiento 2026」というタイトルのInstagram投稿を作成して"

canva_export_design

デザインをPNG、JPG、PDF、PPTXにエクスポートし、ダウンロードリンクを提供します。

"私のプレゼンテーションをPDF形式にエクスポートして"

canva_list_folders

Canvaのルートフォルダの内容を探索します。

"Canvaのメインフォルダには何がありますか？"

canva_list_folder_items

特定のフォルダ内のアイテムを一覧表示します。

"ID X のフォルダ内のファイルを見せて"

canva_create_folder

Canvaに新しいフォルダを作成します。

"Proyectos 2026 という名前のフォルダを作成して"

canva_upload_asset

コンピュータのローカル画像をCanvaにアップロードします。

"./banner.png を私のCanvaアカウントにアップロードして"

canva_get_auth_status

接続状態とトークンの有効性を確認します。

"Canvaとの接続がアクティブか確認して"

🔑 認証情報の初期設定

  1. Canva Developers にアクセスし、Your integrations をクリックします。

  2. Create an integration をクリックし、$\rightarrow$ Public を選択します。

    Canva統合の作成

  3. Credentials で、Client ID をコピーし、Client Secret を生成します。

  4. Scopes で、権限を有効にします（これらが唯一の互換性のある権限です）。

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

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

    CanvaでのScopes設定

  5. Authentication で、正確なリダイレクトURLを追加します： http://127.0.0.1:3000/callback

    リダイレクトURLの追加

認証（初回のみ）

Canvaはユーザーごとに資格情報を要求するため、ターミナルを開いて以下を実行し、認証してトークンを安全に保存してください：

# 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

確認のためブラウザが開きます。完了です！トークンはオペレーティングシステムに 0600 の権限で保存されます。

🏗️ アーキテクチャとセキュリティ

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

エンジニアリングの特徴：

  • 🔐 OSセキュアボールト: トークンはシステムディレクトリ（Linux/Macでは ~/.config/canva-mcp/、Windowsでは %APPDATA%\canva-mcp）にPOSIX 0600 の権限（あなたのユーザーのみ読み取り可能）で保存されます。

  • ⚡ 衝突防止ミューテックス: トークン更新中にモデルが複数のツールを並行して実行する際の競合状態を防ぎます。

  • 🛡️ 指数バックオフ: レート制限（HTTP 429）や一時的な障害（5xx）に対して、指数バックオフで自動再試行します。

  • 🧪 100%テストカバレッジ: Vitestによる完全な単体テストスイート。

🧪 テストと開発

# Ejecutar suite de pruebas unitarias
pnpm test

# Verificación estricta de tipos TypeScript
pnpm typecheck

# Compilar paquete de producción
pnpm build

📄 ライセンス

このプロジェクトはMITライセンスの下で提供されています。詳細は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