Canva + LibreChat: 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 LibreChat, 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 LibreChat, 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 LibreChat
• 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)
• LibreChat installed and configured
• Compatible operating system (Docker (Recommended), Kubernetes, Local Installation, Cloud Platforms)

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 LibreChat

1. Open LibreChat settings
2. Navigate to MCP server configuration
3. Add Canva server with appropriate settings
4. Save and restart if needed

Examples

Once configured, you can use Canva in LibreChat:

Query App UI Kit Components

Get information about available components in Canva App UI Kit

Ask LibreChat: "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 LibreChat: "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 LibreChat: "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 LibreChat: "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 LibreChat
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: Status shows "Disconnected" or "Error", Server not appearing in list, Connection timeout

Cause: Invalid configuration, missing dependencies, or server startup failure

Solution:

• Check librechat.yaml syntax is valid YAML
• Verify npx and Node.js are available (for stdio/command-based servers)
• Check server command and args are correct
• Review LibreChat logs for error messages: docker logs librechat
• Increase timeout value if server takes longer to initialize
• Ensure required ports are not blocked (for HTTP-based servers)

OAuth Authentication Failing

Symptoms: Status shows "OAuth Required", Redirect loop during auth, Token refresh errors

Cause: OAuth credentials not configured or redirect URLs incorrect

Solution:

• Verify OAuth clientId and clientSecret in librechat.yaml
• Check redirect URL is correctly set in OAuth provider settings
• Ensure authorizationUrl and tokenUrl are accessible
• Complete OAuth flow by clicking "Initialize" in MCP Settings panel
• Check browser console for OAuth-related errors

User Credentials Not Working

Symptoms: Prompts for credentials not appearing, Variables not substituted, Authentication errors

Cause: User credential variables incorrectly formatted or not entered

Solution:

• Use correct format: {{USER_VARIABLE_NAME}} in librechat.yaml
• Enter credentials through MCP Settings panel in UI
• Verify variable names match between config and UI
• Check credentials are saved per-user (not shared globally)

Tools Not Appearing in Chat

Symptoms: No tool dropdown available, MCP tools missing from interface, Server connected but tools unavailable

Cause: MCP server not properly integrated with chat endpoint or agent

Solution:

• Verify you are using an endpoint that supports MCP (not all models do)
• Check if Agent Builder is enabled and MCP tools are assigned to agent
• Restart chat session after adding new MCP servers
• Verify MCP server actually provides tools (some servers are resource-only)
• Check server logs to confirm tools are being discovered

Docker Deployment Problems

Symptoms: Container fails to start, Database connection errors, Port conflicts

Cause: Docker configuration issues or missing environment variables

Solution:

• Verify .env file is properly configured with all required variables
• Check MongoDB connection string is correct
• Ensure ports 3080 (frontend) and 3081 (backend) are available
• Run docker compose logs to view detailed error messages
• Verify Docker and Docker Compose versions meet minimum requirements

Performance Issues with MCP

Symptoms: Slow tool execution, Timeout errors, UI freezing during tool calls

Cause: Server timeout too short, inefficient MCP server, or network latency

Solution:

• Increase timeout values in librechat.yaml (both init and operation timeouts)
• Use HTTP transport instead of stdio for remote servers
• Monitor MCP server performance independently
• Consider caching for frequently accessed resources
• Use Streamable HTTP transport for production environments

Canva not appearing in LibreChat

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check Canva installation
• Restart LibreChat
• Check logs for error messages

Next Steps

Now that Canva is integrated with LibreChat:

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

Need Help?

• Search for Canva documentation
• Check the LibreChat MCP guide
• Join the MCP community discussions