canva-mcp-server

Образовательный MCP-сервер (Model Context Protocol), который подключает ИИ-агента к Canva Connect API. Создан как учебный материал о креативных медиа с ИИ — показывает на практике, как устроен MCP-сервер.

Что он делает

Предоставляет 3 инструмента (tools), которые может вызывать ИИ-агент (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. Получение Access Token Canva

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. Следуйте потоку OAuth Canva (авторизация в браузере → обмен code на access_token) — официальное руководство находится на https://www.canva.dev/docs/connect/authentication/. Для занятия проще всего использовать Postman/Insomnia со встроенным потоком OAuth2 или пример скрипта из самого 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

Это открывает веб-интерфейс для ручного вызова инструментов и просмотра результатов — отлично подходит для демонстрации на занятии перед подключением к настоящему агенту.

Идеи для упражнений для группы

• Добавить инструмент canva_list_brand_templates (использовать шаблоны бренда).

• Реализовать автоматическое обновление access token.

• Добавить поддержку response_format (markdown vs JSON), как в руководстве по лучшим практикам MCP.

• Заменить транспорт stdio на Streamable HTTP и запустить как удалённый сервис.

Лицензия

MIT