canva-mcp-server

Educational MCP (Model Context Protocol) server that connects an AI agent to the Canva Connect API. Built as classroom material about creative media with AI — it shows in practice how an MCP server is structured.

What it does

It exposes 3 tools that an AI agent (Claude, etc.) can call:

Related MCP server: mcp-toolbox

Project structure

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. Install dependencies

cd canva-mcp-server
npm install

2. Get a Canva Access Token

The Canva Connect API uses OAuth 2.0 (Authorization Code + PKCE). Step-by-step:

1. Access the Canva Developer Portal and create an app (type "Connect API integration").

2. Note down the Client ID and the Client Secret.

3. Set up a Redirect URI (for local tests, something like http://127.0.0.1:3333/callback).

4. Define the required scopes, at minimum: design:content:read, design:content:write, design:meta:read, asset:read.

5. Follow Canva’s OAuth flow (authorization in the browser → exchange of the code for an access_token) — the official guide is at https://www.canva.dev/docs/connect/authentication/. For a class, the simplest approach is to use Postman/Insomnia with the built-in OAuth2 flow, or the example script from the Canva Developer Portal itself.

6. Keep the obtained access_token (it expires — for continuous reuse, you would need to implement the refresh token; this is an advanced exercise for the class).

3. Set up the environment variable

export CANVA_ACCESS_TOKEN="seu_access_token_aqui"

(There is a .env.example in the repository with the same template, if you prefer to use a .env file.)

4. Build and execution

npm run build
npm start

For development with automatic reload:

npm run dev

5. Connect to Claude Code / Claude Desktop

Add to your mcp config (e.g., the project’s .claude/settings.json or 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. Test with the MCP Inspector

npx @modelcontextprotocol/inspector node dist/index.js

This opens an interface to call the tools manually and see the results — great for demonstrating in class before connecting to a real agent.

Ideas for class exercises

• Add a canva_list_brand_templates tool (use brand templates).

• Implement automatic access token refresh.

• Add support for response_format (markdown vs JSON) as in the MCP best practices guide.

• Switch the transport from stdio to Streamable HTTP and run it as a service.

Licença

MIT