Canva + Amp: Complete MCP Integration

Canva is a MCP server that AI-powered development assistance for building Canva apps and integrations. Access Canva documentation, App UI Kit components, and Apps SDK resources directly through your AI coding assistant..

When integrated with Amp, you can:

• Instantly retrieve information from Canva developer documentation
• Get detailed information about Canva App UI Kit components and their usage
• Access comprehensive Apps SDK documentation and code examples

This guide provides step-by-step instructions to set up Canva in Amp, including configuration, examples, and troubleshooting.

What You'll Achieve

After completing this setup:

• Canva will be fully integrated and operational
• You can use Canva tools directly in Amp
• All Canva capabilities will be available for your workflows
• Access to 3 different tools

Prerequisites

Before starting, ensure you have:

• Node.js v20 or later installed
• npm package manager
• Git installed on your system
• Compatible MCP client (Claude Code, Cursor, Claude Desktop, or VS Code)
• Amp installed and configured
• Compatible operating system (macOS, Linux, Windows (WSL))

Installation

Step 1: Install Canva

Install using npm:

npx -y @canva/cli@latest mcp

Verify installation:

Ask your AI assistant about Canva App UI Kit components to verify the server is working

Configuration

Step 2: Configure Amp

1. Locate your configuration file:

2. Add server configuration:

Configure MCP servers in VS Code/Cursor settings.json:

```json
{
  "amp.mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--headless", "--isolated"]
    },
    "semgrep": {
      "url": "https://mcp.semgrep.ai/mcp"
    },
    "sourcegraph": {
      "url": "${SRC_ENDPOINT}/.api/mcp/v1",
      "headers": {
        "Authorization": "token ${SRC_ACCESS_TOKEN}"
      }
    },
    "linear": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.linear.app/sse"]
    }
  }
}

Or add servers via CLI:

# Add HTTP-based server
amp mcp add sourcegraph --header "Authorization=token your-token" https://sourcegraph.example.com/.api/mcp/v1

# Add SSE-based server
amp mcp add linear https://mcp.linear.app/sse

# OAuth login for authenticated servers
amp mcp oauth login my-server \
  --server-url https://example.com/.api/mcp/v1 \
  --client-id your-client-id \
  --client-secret your-client-secret \
  --scopes "openid,profile,email"

3. **Restart Amp**

Completely quit and restart Amp to load the new configuration.



## Examples

Once configured, you can use Canva in Amp:

### Query App UI Kit Components

Get information about available components in Canva App UI Kit

**Ask Amp:** "How many components are available in the Canva App UI Kit?"

**Expected Result:** The AI assistant will query the Canva documentation and provide the exact count and list of available components

### Get Component Documentation

Retrieve detailed documentation for specific UI components

**Ask Amp:** "Show me how to use the Button component from Canva App UI Kit with examples"

**Expected Result:** Complete documentation including props, usage examples, and best practices for the Button component

### Apps SDK Integration Help

Get assistance with integrating Canva Apps SDK features

**Ask Amp:** "How do I authenticate users in a Canva app using the Apps SDK?"

**Expected Result:** Step-by-step guide with code examples for implementing user authentication

### Debug App Development Issues

Get help troubleshooting common Canva app development problems

**Ask Amp:** "Why is my Canva app component not rendering correctly?"

**Expected Result:** Diagnostic steps and common solutions based on Canva documentation and best practices



## Testing Your Setup

1. Launch Amp
2. Verify Canva is available in the tools list
3. Test basic Canva functionality



## Troubleshooting

### Common Issues

#### Server not responding to Canva-related queries

**Symptoms:** AI assistant says it cannot find Canva documentation, Queries about App UI Kit return generic responses, No specific Canva component information provided

**Cause:** Server not properly installed or not loaded by the MCP client

**Solution:**
- Restart your IDE or MCP client completely
- Verify Node.js v20+ is installed: node --version
- Check MCP configuration includes the Canva server
- Try asking with specific keywords: "Canva App UI Kit" or "Canva Apps SDK"

#### Inconsistent or outdated information

**Symptoms:** Documentation seems outdated, Component information varies between queries, API methods mentioned do not exist

**Cause:** Cached responses or stale documentation

**Solution:**
- Start a new chat session in your AI assistant
- Ask the assistant to fetch the latest Canva documentation
- Clear any local caches if your MCP client supports it
- Verify you are using the latest @canva/cli package

#### Installation fails with npm errors

**Symptoms:** npm command returns errors, Package installation hangs or times out, Permission denied errors

**Cause:** npm configuration or permission issues

**Solution:**
- Update npm to latest version: npm install -g npm@latest
- Check Node.js version meets v20+ requirement
- Try running with explicit registry: npm config set registry https://registry.npmjs.org/
- On Windows, run terminal as administrator if permission issues occur

#### MCP Server Not Connecting

**Symptoms:** Server not appearing in tools, Connection timeout, Authentication errors

**Cause:** Invalid configuration, missing credentials, or network issues

**Solution:**
- Verify server URL and command are correct
- Check environment variables are set properly
- For OAuth servers, run amp mcp oauth login
- Review amp logs for error messages

#### Tool Execution Fails

**Symptoms:** MCP tools available but not working, Error messages during execution

**Cause:** Server dependencies missing or permission issues

**Solution:**
- Verify required environment variables are configured
- Check amp.permissions settings for tool restrictions
- Test MCP server independently
- Review server-specific documentation

#### Permission Denied

**Symptoms:** Tool blocked by permission system, Ask prompts for every action

**Cause:** Permission rules restricting MCP tool usage

**Solution:**
- Review amp.permissions in settings.json
- Add allow rules for trusted MCP servers
- Use amp permissions edit to modify rules

#### Canva not appearing in Amp

**Symptoms:** Server not listed, Tools not available

**Cause:** Configuration or installation issue

**Solution:**
- Verify configuration syntax
- Check Canva installation
- Restart Amp
- Check logs for error messages



## Next Steps

Now that Canva is integrated with Amp:

- Explore all Canva capabilities through Amp
- Check out other MCP servers that work with Amp
- Join the MCP community for tips and support
- Consider contributing to Canva development

## Need Help?

- Search for [Canva documentation](https://www.mcpstack.org)
- Check the [Amp MCP guide](https://www.mcpstack.org/clients)
- Join the MCP community discussions