Skip to main content
Glama
GUIPETAV

canva-mcp-server

by GUIPETAV

canva-mcp-server

License: MIT Node

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:

Tool

What it does

canva_search_designs

Finds existing designs in the Canva account by title

canva_create_design

Creates a new blank design (poster, presentation, Instagram post, etc.)

canva_export_design

Exports a design as PNG, JPG, PDF, PPTX, GIF, or MP4

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

Available Tools

3 tools
canva_create_designCriar Design no CanvaA

Cria um novo design em branco no Canva a partir de um preset de tipo/tamanho.

Esta é uma ferramenta de escrita: cria um recurso novo e persistente na conta do Canva do usuário.

Args:

  • title (string): título do design

  • design_type (enum): um dos presets suportados (presentation, doc, poster, instagram_post, instagram_story, facebook_post, logo, flyer)

Retorna o id do design criado e o link de edição no Canva.

Exemplos:

  • "Crie uma apresentação chamada 'Aula 1 - Introdução'" -> title="Aula 1 - Introdução", design_type="presentation"

  • Não use para gerar conteúdo com IA a partir de um prompt de texto — esta ferramenta cria apenas um design em branco

ParametersJSON Schema
NameRequiredDescriptionDefault
titleYesTítulo do novo design (ex: 'Poster - Aula Mídias Criativas com IA')
design_typeYesTipo de preset de design a criar: presentation, doc, poster, instagram_post, instagram_story, facebook_post, logo, flyer

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate a non-read-only, non-idempotent, non-destructive operation. The description adds behavioral context: clarifies it is a 'ferramenta de escrita' that creates a persistent resource and returns the design id and edit link. This aligns with annotations and enriches the agent's understanding beyond the structured hints.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with a purpose statement, write-tool note, args, return value, and examples. It is slightly redundant with the schema in the Args section, but every section adds context. Front-loads the core purpose and negative usage, making it efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with only 2 params, no output schema, and moderate annotations, the description covers the essential aspects: what it creates, parameter semantics, return value, and a key exclusion. It is complete enough for an agent to decide when and how to invoke it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and includes descriptions for both params. The description adds value by providing a natural-language example mapping ('Crie uma apresentação chamada...' -> title/design_type) and summarizing the enum values. This helps the agent understand how to translate user requests into parameters.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific verb and resource: 'Cria um novo design em branco no Canva a partir de um preset de tipo/tamanho.' This clearly differentiates from sibling tools (search, export) since creating a blank design is a distinct action. It also specifies the scope and output.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context and a when-not: 'Não use para gerar conteúdo com IA a partir de um prompt de texto — esta ferramenta cria apenas um design em branco.' It does not explicitly mention alternatives like search or export, but the primary use case and exclusion are stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

canva_export_designExportar Design do CanvaA

Exporta um design do Canva para um arquivo (PNG, JPG, PDF, PPTX, GIF ou MP4).

Cria um job de exportação assíncrono e aguarda (com polling, até ~30s) a conclusão antes de retornar.

Args:

  • design_id (string): id do design a exportar

  • format (enum): png | jpg | pdf | pptx | gif | mp4 (padrão: png)

Retorna a(s) URL(s) de download do arquivo exportado.

Exemplos:

  • "Exporte o design X como PDF" -> design_id="X", format="pdf"

Erros:

  • Se o job falhar ou exceder o tempo de espera, retorna uma mensagem explicando o que houve.

ParametersJSON Schema
NameRequiredDescriptionDefault
formatNoFormato de exportaçãopng
design_idYesID do design a exportar (retornado por canva_search_designs ou canva_create_design)

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The description adds behavioral context beyond annotations: it mentions the asynchronous job, ~30s polling limit, and potential error handling. It does not contradict annotations and provides useful operational details.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with sections for args, examples, and errors, and is front-loaded with purpose. It is slightly verbose but each part serves a clear function, keeping it efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Since there is no output schema, the description correctly specifies the return type (download URLs) and covers error scenarios. It is complete for a simple two-parameter tool, covering all necessary aspects.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers 100% of parameters, but the description adds value by noting that design_id comes from canva_search_designs or canva_create_design, and giving an example. This aids selection beyond the schema's basic descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it exports a Canva design to a file, listing supported formats. It distinguishes from sibling tools (search, create) by focusing on exporting, with a specific verb and resource.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It explains the export process (async job, polling, timeout) and provides a clear example, though it does not explicitly contrast with sibling tools or give when-not-to-use scenarios. The context is sufficient to infer appropriate usage.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

canva_search_designsBuscar Designs no CanvaA
Read-onlyIdempotent

Busca designs existentes na conta conectada do Canva por título.

Não cria nem modifica nada — apenas lista designs já existentes.

Args:

  • query (string): termo de busca, comparado com o título dos designs

  • limit (number): máximo de resultados (padrão 20, máx 100)

Retorna uma lista de designs com id, título e links de edição/visualização.

Exemplos:

  • "Encontre os designs sobre 'workshop de IA'" -> query="workshop de IA"

  • Não use para criar um design novo (use canva_create_design)

ParametersJSON Schema
NameRequiredDescriptionDefault
limitNoNúmero máximo de resultados a retornar
queryYesTermo para buscar nos títulos dos designs (ex: 'poster aula IA')

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnly, idempotent, and non-destructive behavior. The description adds useful context by explicitly saying it does not create or modify anything, specifying the search is by title, and disclosing the return shape (id, title, edit/view links). No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with a clear opening, non-modification note, Args section, return-value note, and examples. It is front-loaded and every sentence contributes useful information without redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple read-only search tool with two well-documented parameters and no output schema, the description is complete: it covers purpose, constraints, return format, examples, and an alternative tool. The robust annotations also reduce the need for additional behavioral detail.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with parameter descriptions already explaining query and limit, so the description mostly restates this information. The example mapping and the explicit title-matching phrase add minor value but do not significantly go beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb and resource: 'Busca designs existentes na conta conectada do Canva por título' and clarifies it only lists existing designs. It also explicitly contrasts with canva_create_design, distinguishing it from the closest sibling.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description states when to use (search existing designs by title) and gives an explicit exclusion with alternative: 'Não use para criar um design novo (use canva_create_design)'. It also notes the tool does not modify anything, preventing misuse.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 3 tool updatesv1.0.0
    • First observedcanva_create_design
    • First observedcanva_export_design
    • First observedcanva_search_designs

TDQS

A4.4/5.0
Disambiguation5/5

Each tool targets a distinct operation: search lists existing designs, create makes a new blank design, and export handles file conversion. There is no overlap in purpose, and the descriptions explicitly differentiate them with usage examples.

Naming Consistency5/5

All tools follow a consistent 'canva_verb_noun' pattern: canva_search_designs, canva_create_design, canva_export_design. The snake_case convention is uniform, making it easy to predict tool names.

Tool Count4/5

With only 3 tools, the server is intentionally minimal, focusing on the core lifecycle of search, create, and export. While slightly sparse, the count is reasonable for a focused integration and does not feel excessive.

Completeness3/5

The surface covers searching, creating, and exporting designs, but lacks update, delete, or get-single-design operations. This creates minor gaps for agents that need to modify or remove designs, but the core workflow is functional.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    A comprehensive MCP server enabling LLMs to execute commands, manage files, interact with Figma, search the web, generate images, and more, extending their capabilities beyond text generation.
    Apache 2.0
  • A
    license
    Not graded
    quality
    D
    maintenance
    A Model Context Protocol (MCP) server for Canva integration. Connect Claude Code or any MCP-compatible AI client to your Canva account to search designs, generate AI designs, edit content, manage folders, and collaborate through comments.
    2
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/GUIPETAV/canva-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server