canva-mcp-server

Servidor MCP (Model Context Protocol) educativo que conecta un agente de IA a la Canva Connect API. Hecho como material de clase sobre medios creativos con IA — muestra en la práctica cómo está estructurado un servidor MCP.

Qué hace

Expone 3 herramientas (tools) que un agente de IA (Claude, etc.) puede llamar:

Related MCP server: mcp-toolbox

Estructura del proyecto

canva-mcp-server/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts              # ponto de entrada, registra as ferramentas
│   ├── constants.ts
│   ├── services/canva.ts     # cliente HTTP + tratamento de erros da API
│   └── tools/                # uma ferramenta por arquivo
│       ├── searchDesigns.ts
│       ├── createDesign.ts
│       └── exportDesign.ts

1. Instalar dependencias

cd canva-mcp-server
npm install

2. Obtener un token de acceso de Canva

La Canva Connect API usa OAuth 2.0 (Authorization Code + PKCE). Paso a paso:

1. Accede al Canva Developer Portal y crea una app (tipo "Connect API integration").

2. Anota el Client ID y el Client Secret.

3. Configura un Redirect URI (para pruebas locales, algo como http://127.0.0.1:3333/callback).

4. Define los scopes necesarios, como mínimo: design:content:read, design:content:write, design:meta:read, asset:read.

5. Sigue el flujo OAuth de Canva (autorización en el navegador → intercambio del code por access_token) — la guía oficial está en https://www.canva.dev/docs/connect/authentication/. Para una clase, lo más sencillo es usar Postman/Insomnia con el flujo OAuth2 integrado, o el script de ejemplo del propio Canva Developer Portal.

6. Guarda el access_token obtenido (expira — para reutilización continua, sería necesario implementar el refresh token; queda como ejercicio avanzado para la clase).

3. Configurar la variable de entorno

export CANVA_ACCESS_TOKEN="seu_access_token_aqui"

(hay un .env.example en el repositorio con la misma plantilla, si prefieres usar un archivo .env)

4. Build y ejecución

npm run build
npm start

Para desarrollo con recarga automática:

npm run dev

5. Conectar a Claude Code / Claude Desktop

Añade a tu configuración mcp (ej.: .claude/settings.json del proyecto, o claude_desktop_config.json):

{
  "mcpServers": {
    "canva": {
      "command": "node",
      "args": ["/caminho/absoluto/para/canva-mcp-server/dist/index.js"],
      "env": {
        "CANVA_ACCESS_TOKEN": "seu_access_token_aqui"
      }
    }
  }
}

6. Probar con el MCP Inspector

npx @modelcontextprotocol/inspector node dist/index.js

Esto abre una interfaz web para llamar a las herramientas manualmente y ver los resultados — ideal para demostrar en clase antes de conectar a un agente real.

Ideas para ejercicios de la clase

• Añadir una herramienta canva_list_brand_templates (usar plantillas de marca).

• Implementar la actualización automática del token de acceso.

• Añadir soporte para response_format (markdown vs JSON) como en la guía de buenas prácticas de MCP.

• Cambiar el transporte de stdio a Streamable HTTP y ejecutarlo como servicio remoto.

Licencia

MIT