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

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

Tool	Description
search-designs	Search designs by title, sort order, and ownership
get-design	Get metadata for a specific design
get-design-pages	List all pages in a design with thumbnails
get-design-content	Extract all text content from a design
generate-design	Generate AI design candidates from a text description
create-design-from-candidate	Convert an AI candidate into an editable design
start-editing-transaction	Begin an editing session, returns a transaction ID
perform-editing-operations	Update title, replace text, or replace media
commit-editing-transaction	Save all changes in a transaction
cancel-editing-transaction	Discard all changes in a transaction
get-design-thumbnail	Get a page thumbnail during editing
create-folder	Create a folder (root or nested)
move-item-to-folder	Move a design or folder into another folder
list-folder-items	Browse folder contents with filtering
comment-on-design	Add a comment to a design
list-comments	List all comments on a design
reply-to-comment	Reply to a comment thread
list-replies	List all replies to a comment
upload-asset-from-url	Import an image or video from a URL
get-assets	Retrieve metadata for multiple assets

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:

Agent	Role	What they caught
Michael	Senior Security Specialist	Zero-auth MCP endpoints, 0.0.0.0 binding, reflected XSS in OAuth callbacks, CORS misconfiguration, leaked infrastructure IDs
Reeve	Code Craft Reviewer	Mock import overriding production code, dead if/else branches, AI-generated docs committed to repo, unused hook subscriptions
Fischer	Static Analysis Specialist	20+ as any type assertions, z.any() bypassing validation, null-unsafe window.openai access
Nikita	Dependency Safety Specialist	Exposed Client ID in .env.example, dependency bloat analysis, license compatibility audit

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