Canva + MCPHub (mcp.nvim): 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 MCPHub (mcp.nvim), 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 MCPHub (mcp.nvim), 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 MCPHub (mcp.nvim)
- 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)
- MCPHub (mcp.nvim) installed and configured
- Compatible operating system (Neovim 0.9+, 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 MCPHub (mcp.nvim)
- Open MCPHub (mcp.nvim) settings
- Navigate to MCP server configuration
- Add Canva server with appropriate settings
- Save and restart if needed
Examples
Once configured, you can use Canva in MCPHub (mcp.nvim):
Query App UI Kit Components
Get information about available components in Canva App UI Kit
Ask MCPHub (mcp.nvim): "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 MCPHub (mcp.nvim): "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 MCPHub (mcp.nvim): "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 MCPHub (mcp.nvim): "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
- Launch MCPHub (mcp.nvim)
- Verify Canva is available in the tools list
- 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
Plugin Not Loading or Command Not Found
Symptoms: :MCPHub command not recognized, Plugin not appearing in :PlugStatus, No errors but plugin inactive
Cause: Plugin not properly installed or configuration error
Solution:
- Verify plugin is added to plugin manager configuration
- Run plugin manager install command (:PackerInstall, :PlugInstall, or Lazy auto-install)
- Check for errors in :messages after sourcing config
- Ensure dependencies (plenary.nvim, nui.nvim) are installed
- Restart Neovim completely
MCP Server Won't Start
Symptoms: Server status shows "Error", Red indicator on server, Server immediately stops after starting
Cause: Invalid server configuration or missing dependencies
Solution:
- Verify npx is installed and in PATH: npx --version
- Check MCP server package exists: npx -y @modelcontextprotocol/server-filesystem --help
- Review server configuration in setup() - verify command and args
- Check server logs in MCPHub interface for detailed error messages
- Ensure required environment variables are set (e.g., GITHUB_TOKEN)
- Test server manually in terminal: npx -y @modelcontextprotocol/server-filesystem /path
UI Not Displaying Correctly
Symptoms: Blank window, Garbled text, Layout issues, Missing borders
Cause: Terminal or Neovim rendering issues
Solution:
- Verify Neovim version is 0.9 or higher: nvim --version
- Try different border style in ui.border config ("single", "double", "rounded")
- Check terminal supports Unicode and 256 colors
- Update nui.nvim dependency to latest version
- Test with different colorscheme to rule out theme conflicts
Integration with Avante/CodeCompanion Not Working
Symptoms: AI assistant not seeing MCP tools, Tool calls failing, Integration not recognized
Cause: Integration not enabled or incompatible versions
Solution:
- Verify integration is enabled in config: integrations.avante = true
- Ensure Avante.nvim/CodeCompanion.nvim is installed and loaded
- Check versions are compatible - update both plugins to latest
- Restart Neovim after enabling integration
- Check :checkhealth for integration-specific warnings
Marketplace Not Loading
Symptoms: :MCPHubMarketplace shows empty list, Network error in marketplace, Timeout loading servers
Cause: Network connectivity issues or marketplace service unavailable
Solution:
- Verify internet connectivity
- Check firewall allows HTTPS connections
- Try again later if marketplace service is temporarily down
- Review proxy settings if behind corporate firewall
- Check :messages for detailed network error messages
Project-Local Config Not Loading
Symptoms: .mcphub.json ignored, Project servers not appearing, Only global config loaded
Cause: Config file location or format issues
Solution:
- Verify .mcphub.json is in project root (same directory as .git)
- Check JSON syntax is valid using jsonlint or similar tool
- Ensure file name is exactly .mcphub.json (case-sensitive)
- Restart Neovim after creating/modifying project config
- Check file permissions are readable
Canva not appearing in MCPHub (mcp.nvim)
Symptoms: Server not listed, Tools not available
Cause: Configuration or installation issue
Solution:
- Verify configuration syntax
- Check Canva installation
- Restart MCPHub (mcp.nvim)
- Check logs for error messages
Next Steps
Now that Canva is integrated with MCPHub (mcp.nvim):
- Explore all Canva capabilities through MCPHub (mcp.nvim)
- Check out other MCP servers that work with MCPHub (mcp.nvim)
- Join the MCP community for tips and support
- Consider contributing to Canva development
Need Help?
- Search for Canva documentation
- Check the MCPHub (mcp.nvim) MCP guide
- Join the MCP community discussions