Canva + OpenCode: 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 OpenCode, 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 OpenCode, 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 OpenCode
• 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)
• OpenCode installed and configured
• Compatible operating system (macOS, Linux, Windows)

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 OpenCode

1. Locate your configuration file:

2. Add server configuration:

Configure MCP servers in your `opencode.json` or `opencode.jsonc`:

```json
{
  "mcp": {
    "my-mcp": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-everything"],
      "environment": {
        "API_KEY": "$API_KEY"
      },
      "timeout": 5000
    },
    "remote-server": {
      "type": "remote",
      "url": "https://mcp.example.com/sse",
      "headers": {
        "Authorization": "Bearer $API_TOKEN"
      }
    }
  }
}

Disable a server temporarily:

{
  "mcp": {
    "my-mcp": {
      "type": "local",
      "command": ["npx", "-y", "mcp-server"],
      "enabled": false
    }
  }
}

3. **Restart OpenCode**

Completely quit and restart OpenCode to load the new configuration.



## Examples

Once configured, you can use Canva in OpenCode:

### Query App UI Kit Components

Get information about available components in Canva App UI Kit

**Ask OpenCode:** "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 OpenCode:** "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 OpenCode:** "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 OpenCode:** "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. Run opencode in terminal
2. Add "use the mcp_name tool" to your prompts
3. Verify tool execution and response



## 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 Loading

**Symptoms:** Server not appearing in tools, Timeout errors, Command not found

**Cause:** Invalid configuration, missing dependencies, or timeout too short

**Solution:**
- Verify command array is correct in opencode.json
- Check environment variables are set properly
- Increase timeout value if server takes longer to start
- Test MCP server command independently in terminal

#### Context Limit Exceeded

**Symptoms:** Context too large errors, Slow responses, Truncated output

**Cause:** Too many MCP servers adding to context

**Solution:**
- Disable unused MCP servers with enabled: false
- Use per-agent tool configuration to limit active MCPs
- Avoid MCP servers that add many tokens (e.g., GitHub MCP)

#### Remote Server Connection Failed

**Symptoms:** Cannot connect to remote MCP, Authentication errors

**Cause:** Invalid URL, missing headers, or network issues

**Solution:**
- Verify remote server URL is correct
- Check authorization headers are properly configured
- Ensure environment variables for tokens are set

#### Canva not appearing in OpenCode

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

**Cause:** Configuration or installation issue

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



## Next Steps

Now that Canva is integrated with OpenCode:

- Explore all Canva capabilities through OpenCode
- Check out other MCP servers that work with OpenCode
- 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 [OpenCode MCP guide](https://www.mcpstack.org/clients)
- Join the MCP community discussions