canva-mcp-server

教育用のMCP（Model Context Protocol）サーバーで、AIエージェントを Canva Connect API に接続します。創造的なAIメディアに関する授業教材として作成され、MCPサーバーの構造を実際に示します。

機能

AIエージェント（Claude など）が呼び出せる3つのツールを公開します。

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のアクセストークンを取得する

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. 必要なスコープを最低限 design:content:read, design:content:write, design:meta:read, asset:read に設定します。

5. Canva の OAuth フロー（ブラウザでの認可 → code を access_token と交換）に従います。公式ガイドは https://www.canva.dev/docs/connect/authentication/ にあります。授業では、Postman/Insomnia の内蔵 OAuth2 フローを使うか、Canva Developer Portal 内のサンプルスクリプトを使うのが最も簡単です。

6. 取得した access_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 ツールを追加する（ブランドテンプレートを使用）。

• アクセストークンの自動更新を実装する。

• MCP のベストプラクティスガイドに従って、response_format（markdown か JSON か）のサポートを追加する。

• トランスポートを stdio から Streamable HTTP に変更し、リモートサービスとして実行する。

ライセンス

MIT