Canva MCP Server

Servidor MCP base para orquestar la creacion de presentaciones en Canva con un enfoque hibrido:

• planeacion narrativa con LLM

• composicion estructurada por slides

• integracion con Canva por API oficial donde exista soporte

• capa opcional de automatizacion web para cerrar huecos operativos

Objetivo

Este proyecto no intenta "hacer clics al azar" en Canva. La meta es traducir instrucciones de alto nivel a operaciones controladas como:

• crear un deck desde un brief

• aplicar branding

• rellenar placeholders

• insertar imagenes y graficos

• reordenar slides

• exportar el resultado

Estructura

• docs/architecture.md: arquitectura propuesta

• docs/tools.md: catalogo exacto de tools MCP

• src/index.js: servidor MCP con tools reales y fallback controlado

• src/planner.js: planner determinista para briefs

• src/smoke-tests.js: prueba real de create/export

• src/markdown-deck.js: generacion de decks .pptx desde markdown

Variables de entorno

Duplica .env.example en tu .env real y completa al menos:

• CANVA_CLIENT_ID

• CANVA_CLIENT_SECRET

• CANVA_REDIRECT_URI

• OPENAI_API_KEY

• CANVA_ACCESS_TOKEN

• CANVA_TEAM_ID

• CANVA_BRAND_TEMPLATE_ID

Para la integracion real ya implementada en el scaffold, el token debe tener scopes compatibles con:

• design:content:write para crear disenos

• design:content:read para exportarlos

• design:meta:read para consultar jobs de autofill

• folder:read para listar presentaciones

• brandtemplate:meta:read y brandtemplate:content:read para brand templates y autofill

El import de .pptx a Canva usa tambien design:content:write.

Instalacion

npm install

Ejecucion

npm start

Smoke test

npm run smoke

Ejecuta una prueba real de create_presentation y export_presentation con el token configurado.

Siguiente integracion real

1. Implementar DeckPlanner para generar outline y contenido por slide.

2. Añadir AssetPipeline para imagenes, iconos y graficos.

3. Completar mutaciones de slides cuando la API o el fallback de navegador lo requieran.

4. Añadir BrowserAutomationAdapter solo para acciones no cubiertas por API.

Estado actual

Ya hay integracion real para:

• create_presentation

• export_presentation

• list_presentations

• list_brand_templates

• get_brand_template_dataset

• create_autofilled_presentation

• generate_presentation_from_brief

• create_presentation_outline

• create_markdown_presentation

• get_import_job

La exportacion puede devolver el job inmediatamente o esperar a que termine haciendo polling del estado del export job.

Si quieres usar las tools nuevas de carpetas y brand templates, actualiza CANVA_SCOPES y vuelve a autorizar la integracion para obtener un token con esos scopes.

Si quieres generar un deck completo y bonito sin depender de brand templates, usa create_markdown_presentation: genera un .pptx estilizado y lo importa a Canva como una presentacion editable.

Como obtener el access token de Canva

Canva Connect usa OAuth 2.0 con Authorization Code + PKCE. Eso significa que en el Developer Portal normalmente no veras un access_token listo para copiar. Lo que si ves es:

• Client ID

• Client Secret

• scopes

• redirect URL

Con eso debes generar el token.

Paso 1

Completa en tu .env:

• CANVA_CLIENT_ID

• CANVA_CLIENT_SECRET

• CANVA_REDIRECT_URI

• CANVA_SCOPES

Paso 2

Genera una URL de autorizacion:

npm run oauth:url

Ese comando imprime:

• authorizationUrl

• state

Ademas guarda localmente el codeVerifier y el state en un archivo temporal para que no tengas que copiarlos a mano.

Abre la authorizationUrl en tu navegador, autoriza la app y copia el valor code que Canva devolvera al redirect_uri.

Paso 3

Intercambia el code por el token:

node src/oauth-helper.js exchange <authorization_code>

O pega directamente la URL completa de redireccionamiento:

node src/oauth-helper.js exchange-url "http://127.0.0.1:3001/oauth/redirect?code=...&state=..."

La respuesta devolvera:

• access_token

• refresh_token

• expires_in

• scope

Paso 4

Copia el access_token a tu .env como CANVA_ACCESS_TOKEN y el refresh_token como CANVA_REFRESH_TOKEN.

Si quieres, luego puedo dejar automatizado tambien el refresco del token con refresh_token.