Canva Connector MCP
README.md
<div align="center">
# 🎨 Canva Connector MCP
<img src="https://raw.githubusercontent.com/canva-sdks/canva-apps-sdk-starter-kit/main/public/canva-logo.svg" alt="Canva Logo" width="180" onerror="this.src='https://upload.wikimedia.org/wikipedia/commons/0/08/Canva_icon_2021.svg'; this.width=100;" />
### *Conector inteligente entre Model Context Protocol (MCP), Agentes de IA y Canva Connect API*
[](https://github.com/Ignaciobrenas/canva-connector-mcp)
[](https://www.canva.dev/)
[](https://nodejs.org/)
[](https://oauth.net/2/pkce/)
[](https://modelcontextprotocol.io/)
[](https://opensource.org/licenses/MIT)
<p align="center">
<b>Genera presentaciones profesionales, gestiona diseños y automatiza flujos visuales directamente desde tu asistente de Inteligencia Artificial.</b>
</p>
[Comenzar](#-guía-rápida-en-3-pasos) • [Configuración Canva](#-paso-a-paso-configuración-en-canva-developers) • [Herramientas MCP](#-herramientas-disponibles-mcp) • [Licencia](#-licencia)
---
</div>
## 🌟 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.
---
## 🏷️ 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
```bash
# 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](https://www.canva.com/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`:
```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:
```text
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:
| Scope | Categoría | Función |
| :--- | :---: | :--- |
| `design:content:read` | 📖 Diseños | Leer datos y elementos de los diseños existentes. |
| `design:content:write` | ✏️ Diseños | **Crear y modificar presentaciones** y documentos. |
| `asset:read` | 🖼️ Biblioteca | Consultar fotos, vectores e imágenes subidas. |
| `asset:write` | ⬆️ Subida | Subir nuevos activos y logos a la cuenta. |
| `profile:read` | 👤 Cuenta | Asociar diseños al usuario y equipo autorizados. |
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`:
```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
```text
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`](LICENSE) para más detalles.
<div align="center">
<sub>Construido por <b>Ignacio Brenas</b> • 2026</sub>
</div>
This server cannot be deployed
Maintenance
ActivityMaintained
ResponsivenessNo issues