🎨 Canva Connector MCP

Conector inteligente entre Model Context Protocol (MCP), Agentes de IA y Canva Connect API

Comenzar • Configuración Canva • Herramientas MCP • Licencia

🌟 Características Principales

• ⚡ Creación Automática de Presentaciones: Genera borradores completos y listos para editar con una simple instrucción.

• 🔒 Autenticación Oficial OAuth 2.0 + PKCE (s256): Flujo seguro conforme a los estándares más recientes de Canva Connect.

• 🤖 Compatibilidad Nativa con MCP: Soporte para clientes como Antigravity, Cursor, Claude Desktop y agentes autónomos.

• 🖼️ Gestión de Recursos y Diseños: Consulta de biblioteca, subida de activos y enlaces directos de edición interactiva.

• 📦 Cliente Modular en Node.js: Estructura limpia y desacoplada con soporte ESM.

Related MCP server: Canvelete

🏷️ Etiquetas / Tópicos del Proyecto

canva • canva-api • canva-connect • mcp • model-context-protocol • ai-agent • presentation-generator • oauth2-pkce • nodejs • automation

⚡ Guía Rápida en 3 Pasos

# 1. Instalar dependencias
npm install

# 2. Iniciar servidor OAuth para autorizar tu cuenta con Canva
npm run auth

# 3. Crear una nueva presentación automáticamente
node src/create-presentation.js "Estrategia de Crecimiento 2026"

🛠️ Paso a Paso: Configuración en Canva Developers

Para permitir que el conector opere en tu cuenta, configura tu aplicación en el portal de desarrolladores:

1. Registrar la App

1. Ve al portal oficial: Canva Developers Apps.

2. Haz clic en Create an app.

3. Nómbrala Canva Connector MCP.

2. Obtener Credenciales

1. Entra a tu app y ve a la sección Credentials (en el menú lateral).

2. Copia tu Client ID (OC-XXXXXXXXX).

3. En Client secret, genera o copia tu clave secreta.

4. Pega estos valores en tu archivo local .env:

   CANVA_CLIENT_ID=OC-AaDUrYNotozK
   CANVA_CLIENT_SECRET=tu_client_secret_aqui
   CANVA_REDIRECT_URI=http://127.0.0.1:3000/oauth/callback
   PORT=3000

3. Configurar Redirect URL

1. En la pestaña Redirect URLs (dentro de Outside Canva / Authentication).

2. Añade exactamente:

   http://127.0.0.1:3000/oauth/callback

3. (Opcional) En Return URL, escribe http://127.0.0.1:3000.

4. Haz clic en Save changes.

4. Permisos Obligatorios (Scopes)

En la sección Configuration / Scopes, activa las siguientes casillas:

Guarda los cambios antes de autenticarte.

🔌 Conexión con Antigravity / MCP Server

Este repositorio está preparado para funcionar con el servidor remoto oficial de Canva:

Configuración en mcp_config.json:

{
  "mcpServers": {
    "canva": {
      "serverUrl": "https://mcp.canva.com/mcp"
    }
  }
}

🛠️ Herramientas Disponibles (MCP):

• generate-design: Diseña borradores de presentaciones desde un brief en lenguaje natural.

• create-design-from-candidate: Guarda el diseño elegido en tu cuenta.

• perform-editing-operations: Edita textos, fuentes, colores y elementos.

• search-designs: Busca presentaciones y documentos en tu biblioteca.

• export-design: Exporta el resultado en PDF, PPTX o PNG.

📂 Arquitectura del Proyecto

canva-connector-mcp/
├── .env                     # Variables de entorno privadas (ignorado en VCS)
├── .env.example             # Plantilla de variables de entorno
├── .gitignore               # Exclusiones de seguridad (tokens, dependencias)
├── LICENSE                  # Licencia MIT de código abierto
├── package.json             # Metadatos del paquete, dependencias y scripts
├── README.md                # Documentación oficial y guía de integración
└── src/
    ├── index.js             # Punto de entrada de exportación
    ├── auth-server.js       # Servidor OAuth local con flujo PKCE (SHA-256)
    ├── canva-client.js      # Cliente de comunicación con la API REST de Canva
    └── create-presentation.js # Script ejecutable para creación de presentaciones

📄 Licencia

Distribuido bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.