Canva MCP Server (Security-Hardened Fork)

A Model Context Protocol (MCP) server for Canva integration. Connect Claude Code or any MCP-compatible AI client to your Canva account — search designs, generate AI designs, edit content, manage folders, and collaborate through comments.

Quick Start

git clone https://github.com/your-username/canva-mcp-server.git
cd canva-mcp-server
npm install
cp .env.example .env
# Edit .env with your Canva credentials (see below)
./start.sh

Get Canva Credentials

1. Visit https://www.canva.com/developers/

2. Create a new app

3. Under Authentication, copy your Client ID and Client Secret

4. Add http://127.0.0.1:8001/auth/callback as a redirect URI

5. Enable these OAuth scopes: asset:read, asset:write, comment:read, comment:write, design:content:read, design:content:write, design:meta:read, folder:read, folder:write, profile:read

Set your credentials in .env:

CANVA_CLIENT_ID=your_client_id_here
CANVA_CLIENT_SECRET=your_client_secret_here
CANVA_REDIRECT_URI=http://127.0.0.1:8001/auth/callback

Related MCP server: tldraw-mcp

Claude Code Setup

claude mcp add --transport sse --scope user canva http://127.0.0.1:8001/mcp

Then start the server (./start.sh) before opening Claude Code. On first tool call, the server returns an OAuth URL — visit it in your browser to authenticate.

Available Tools

Security

This fork hardens the original with:

• 127.0.0.1 binding — server listens on loopback only, not exposed to the network

• Auth middleware — optional Bearer token (MCP_AUTH_TOKEN in .env) secures the MCP endpoint

• XSS protection — all UI widget templates use DOM API construction instead of innerHTML with API data

• CORS allowlist — configurable via CORS_ORIGINS env var, no wildcard in production paths

• Input validation — Zod schemas on all tool inputs, size limits enforced

• Error sanitization — Canva API errors logged server-side, not reflected to clients

The src/server/worker.ts file is a development/demo stub for Cloudflare Workers deployment. For production, use the Node.js server (src/server/server.ts).

Project Structure

canva-mcp-server/
├── src/
│   └── server/
│       ├── server.ts          # Main Node.js server
│       └── worker.ts          # Cloudflare Worker demo stub
├── src/components/            # React widget components (compiled to assets/)
├── ui-components/             # Standalone HTML widget templates
├── assets/                    # Compiled widget output (generated by npm run build)
├── .env.example               # Environment variable template
├── start.sh                   # Start script
├── quick-start.sh             # First-run setup script
└── README.md

Review Pipeline

This fork was security-hardened through a multi-agent parallel review pipeline built by The Funkatorium:

Three audit rounds. 12-point final gate check. All agents run in parallel — independent concerns, no bottleneck.

This is how MUSE Studio builds software.

Credit

Based on EmilyThaHuman/canva-mcp-server. Security-hardened by The Funkatorium.

License

MIT — see LICENSE