# 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

```bash
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/](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

```bash
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](https://github.com/falcoschaefer99-eng/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](https://ko-fi.com/falcothebard/shop) builds software.

## Credit

Based on [EmilyThaHuman/canva-mcp-server](https://github.com/EmilyThaHuman/canva-mcp-server). Security-hardened by [The Funkatorium](https://github.com/falcoschaefer99-eng/The-Funkatorium).

## License

MIT — see [LICENSE](./LICENSE)