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(인증 코드 + PKCE)을 사용합니다. 단계별 안내:

1. Canva Developer Portal에 접속하여 앱("Connect API integration" 유형)을 만듭니다.

2. Client ID와 Client Secret을 기록해 둡니다.

3. 리디렉션 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을 저장합니다(만료되므로 지속적인 재사용을 위해서는 refresh token을 구현해야 합니다. 이는 수강생을 위한 고급 과제로 남겨 둡니다).

3. 환경 변수 설정

export CANVA_ACCESS_TOKEN="seu_access_token_aqui"

(.env 파일을 선호하는 경우 저장소에 동일한 템플릿의 .env.example이 있습니다)

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 도구 추가(브랜드 템플릿 사용).

• 액세스 토큰 자동 새로고침 구현.

• MCP 모범 사례 가이드에 따라 response_format(markdown vs JSON) 지원 추가.

• 전송 방식을 stdio에서 Streamable HTTP로 변경하고 원격 서비스로 실행.

라이선스

MIT