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

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 GitHub Copilot (VS Code)

1. Locate your configuration file:

   • Windows: .vscode\\mcp.json in your project directory
   • macOS: .vscode/mcp.json in your project directory
   • Linux: .vscode/mcp.json in your project directory

2. Add server configuration:

{
  "mcpServers": {
    "canva": {
      "command": "npx",
      "args": ["-y", "@canva/cli@latest", "mcp"],
      "env": {
        
      }
    }
  }
}

3. Restart GitHub Copilot (VS Code)

Completely quit and restart GitHub Copilot (VS Code) to load the new configuration.

Examples

Once configured, you can use Canva in GitHub Copilot (VS Code):

Query App UI Kit Components

Get information about available components in Canva App UI Kit

Ask GitHub Copilot (VS Code): "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 GitHub Copilot (VS Code): "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 GitHub Copilot (VS Code): "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 GitHub Copilot (VS Code): "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. Start a new conversation in GitHub Copilot (VS Code)
2. Ask GitHub Copilot (VS Code) to list available tools
3. Try using Canva functionality

Test prompts:

• "What MCP tools are available?"
• "Use Canva to help with my code"
• "Show me what Canva can do"

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 Configuration Not Loaded

Symptoms: MCP tools not appearing, Copilot does not recognize MCP server

Cause: Configuration file not in correct location or invalid JSON

Solution:

• Verify .vscode/mcp.json exists in project root directory
• Check JSON syntax is valid (no trailing commas, proper quotes)
• Reload VS Code window after making configuration changes
• Check VS Code Developer Tools (Help > Toggle Developer Tools) for errors

MCP Server Not Starting

Symptoms: Tools listed but not responding, Server connection errors

Cause: Server command path incorrect or dependencies missing

Solution:

• Test the MCP server command independently in terminal
• Verify all server prerequisites are installed
• Check that command path is correct (use absolute paths if needed)
• Ensure required environment variables are set in mcp.json
• Review VS Code Output panel for MCP server error messages

GitHub Copilot Subscription Required

Symptoms: Copilot features grayed out, Unable to access Copilot Chat

Cause: No active GitHub Copilot subscription

Solution:

• Sign up for GitHub Copilot subscription (Individual, Business, or Enterprise)
• Verify subscription is active in GitHub account settings
• Re-authenticate GitHub Copilot in VS Code
• Check that VS Code is using correct GitHub account

VS Code Version Too Old

Symptoms: MCP configuration ignored, No mcp.json recognition

Cause: VS Code version below 1.99 does not have native MCP support

Solution:

• Update VS Code to version 1.99 or later
• Check current version: Help > About
• Download latest version from code.visualstudio.com
• After updating, reload window and verify MCP support

{server_name} Tools Not Working

Symptoms: Server connected but tools fail, Error messages when invoking tools

Cause: Server-specific configuration or authentication issues

Solution:

• Verify all required environment variables for {server_name} are set
• Check {server_name} documentation for specific prerequisites
• Test {server_name} with another MCP client to isolate issue
• Review error messages in VS Code Output panel for specific failures

Canva not appearing in GitHub Copilot (VS Code)

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check Canva installation
• Restart GitHub Copilot (VS Code)
• Check logs for error messages

Next Steps

Now that Canva is integrated with GitHub Copilot (VS Code):

• Explore all Canva capabilities through GitHub Copilot (VS Code)
• Check out other MCP servers that work with GitHub Copilot (VS Code)
• Join the MCP community for tips and support
• Consider contributing to Canva development

Need Help?

• Search for Canva documentation
• Check the GitHub Copilot (VS Code) MCP guide
• Join the MCP community discussions