canva-mcp-server

教育用 MCP（Model Context Protocol）服务器，将 AI 智能体连接到 Canva Connect API。作为关于 AI 创意媒体的课堂材料——实际展示了一个 MCP server 是如何构建的。

它做什么

它暴露了 3 个工具（tools），AI 智能体（Claude 等）可以调用：

Related MCP server: mcp-toolbox

项目结构

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. 安装依赖

cd canva-mcp-server
npm install

2. 获取 Canva 的 Access Token

Canva Connect API 使用 OAuth 2.0（Authorization Code + PKCE）。步骤如下：

1. 访问 Canva Developer Portal 并创建一个应用（类型为“Connect API integration”）。

2. 记下 Client ID 和 Client Secret。

3. 配置一个 Redirect URI（用于本地测试，例如 http://127.0.0.1:3333/callback）。

4. 定义所需的 scopes，至少包括：design:content:read、design:content:write、design:meta:read、asset:read。

5. 按照 Canva 的 OAuth 流程操作（在浏览器中授权 → 用 code 换取 access_token）——官方指南见 https://www.canva.dev/docs/connect/authentication/。对于课堂演示，最简单的方法是使用内置 OAuth2 流程的 Postman/Insomnia，或使用 Canva Developer Portal 自带的示例脚本。

6. 保存获取到的 access_token（它会过期——若要持续复用，需要实现 refresh token；这留给班级作为进阶练习）。

3. 配置环境变量

export CANVA_ACCESS_TOKEN="seu_access_token_aqui"

（仓库中有一个 .env.example，包含相同的模板，如果你更喜欢使用 .env 文件的话）

4. 构建与运行

npm run build
npm start

用于自动重载的开发模式：

npm run dev

5. 连接到 Claude Code / Claude Desktop

将其添加到你的 mcp 配置中（例如项目的 .claude/settings.json，或 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. 使用 MCP Inspector 进行测试

npx @modelcontextprotocol/inspector node dist/index.js

这会打开一个 Web 界面，用于手动调用工具并查看结果——非常适合在课堂上演示，然后再连接到真正的智能体。

课堂练习建议

• 添加一个 canva_list_brand_templates 工具（使用品牌模板）。

• 实现 access token 的自动刷新。

• 像 MCP 最佳实践指南中那样，增加对 response_format（markdown 与 JSON）的支持。

• 将传输方式从 stdio 改为 Streamable HTTP，并作为远程服务运行。

许可证

MIT