canva-mcp-server

Pädagogischer MCP-Server (Model Context Protocol), der einen KI-Agenten mit der Canva Connect API verbindet. Erstellt als Unterrichtsmaterial über kreative Medien mit KI – zeigt in der Praxis, wie ein MCP-Server aufgebaut ist.

Was er tut

Stellt 3 Werkzeuge (Tools) bereit, die ein KI-Agent (Claude usw.) aufrufen kann:

Related MCP server: mcp-toolbox

Projektstruktur

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. Abhängigkeiten installieren

cd canva-mcp-server
npm install

2. Ein Canva-Access-Token erhalten

Die Canva Connect API verwendet OAuth 2.0 (Authorization Code + PKCE). Schritt für Schritt:

1. Rufen Sie das Canva Developer Portal auf und erstellen Sie eine App (Typ „Connect API integration“).

2. Notieren Sie die Client ID und das Client Secret.

3. Konfigurieren Sie eine Redirect-URI (für lokale Tests, etwa http://127.0.0.1:3333/callback).

4. Definieren Sie die erforderlichen Scopes, mindestens: design:content:read, design:content:write, design:meta:read, asset:read.

5. Folgen Sie dem OAuth-Ablauf von Canva (Autorisierung im Browser → Austausch des code gegen access_token) – der offizielle Leitfaden ist unter https://www.canva.dev/docs/connect/authentication/. Für eine Unterrichtsstunde ist es am einfachsten, Postman/Insomnia mit dem integrierten OAuth2-Ablauf zu verwenden oder das Beispielskript des Canva Developer Portals selbst.

6. Bewahren Sie das erhaltene access_token auf (es läuft ab – für die kontinuierliche Wiederverwendung wäre die Implementierung des Refresh-Tokens erforderlich; das bleibt eine fortgeschrittene Übung für die Klasse).

3. Umgebungsvariable konfigurieren

export CANVA_ACCESS_TOKEN="seu_access_token_aqui"

(Es gibt eine .env.example im Repository mit derselben Vorlage, falls Sie eine .env-Datei verwenden möchten)

4. Build und Ausführung

npm run build
npm start

Für die Entwicklung mit automatischem Neuladen:

npm run dev

5. Mit Claude Code / Claude Desktop verbinden

Fügen Sie zu Ihrer mcp-Konfiguration hinzu (z. B. .claude/settings.json des Projekts oder 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. Mit dem MCP Inspector testen

npx @modelcontextprotocol/inspector node dist/index.js

Dadurch wird eine Weboberfläche geöffnet, um die Werkzeuge manuell aufzurufen und die Ergebnisse zu sehen – ideal, um es im Unterricht zu demonstrieren, bevor man es mit einem echten Agenten verbindet.

Ideen für Übungen für die Klasse

• Ein Werkzeug canva_list_brand_templates hinzufügen (Markenvorlagen verwenden).

• Automatisches Aktualisieren des Access-Tokens implementieren.

• Unterstützung für response_format hinzufügen (Markdown vs. JSON) wie im Leitfaden für bewährte MCP-Praktiken.

• Den Transport von stdio auf Streamable HTTP umstellen und als Remote-Dienst ausführen.

Lizenz

MIT