Canvas MCP Client
Canvas MCP Client is an open-source, self-hostable dashboard application built around an infinite, zoomable, and pannable canvas. It provides a unified interface for interacting with multiple MCP (Model Context Protocol) servers through a flexible, w
What is Canvas MCP Client?
Canvas MCP Client is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to canvas mcp client is an open-source, self-hostable dashboard application built around an infinite, zoomable, and pannable canvas. it provides a unified interface for interacting with multiple mcp (mod...
Canvas MCP Client is an open-source, self-hostable dashboard application built around an infinite, zoomable, and pannable canvas. It provides a unified interface for interacting with multiple MCP (Model Context Protocol) servers through a flexible, w
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Canvas MCP Client is an open-source, self-hostable dashboard
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx canvasmcpclientConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Canvas MCP Client
Canvas MCP Client is a self-hostable, open-source dashboard built on an infinite zoomable canvas that acts as a unified front-end for multiple MCP servers simultaneously. It provides 12+ modular widgets including AI chat, Kanban boards, sticky notes, spreadsheets, and markdown editors, all backed by a FastAPI Python backend and Next.js 15 frontend. Developers and AI power users deploy it locally or on their own infrastructure to interact with collections of MCP tools through a spatially organized, widget-based interface rather than a linear chat window.
Prerequisites
- Docker and Docker Compose installed (recommended path — starts both frontend and backend in one command)
- Alternatively: Node.js 18+ and Python 3.10+ for manual setup
- MCP servers you want to connect to (stdio, HTTP, or SSE transport)
- Optional: API keys for AI providers (OpenAI, Anthropic, Google, or Ollama endpoint) to power AI Chat widgets
Clone the repository
Clone the Canvas MCP Client source repository to your local machine.
git clone https://github.com/n00bvn/CanvasMCPClient.git
cd CanvasMCPClientStart with Docker Compose (recommended)
One command starts the Next.js frontend on port 3031 and the FastAPI backend on port 8081, with SQLite storage for canvas state.
docker-compose up -dOr set up the backend manually
For a non-Docker setup, configure and start the Python FastAPI backend with its required environment variables.
cd backend
python -m venv venv && source venv/bin/activate
pip install -r requirements.txt
mkdir -p data
export DATABASE_URL="sqlite:///./data/canvas_mcp.db"
export CORS_ORIGINS="http://localhost:3031"
export SECRET_KEY="your-secret-key-here"
uvicorn main:app --reload --host 0.0.0.0 --port 8081Start the frontend (manual setup only)
In a separate terminal, start the Next.js frontend pointing at the backend API.
cd frontend
npm install
export NEXT_PUBLIC_API_URL="http://localhost:8081"
npm run devOpen the application and configure MCP servers
Navigate to http://localhost:3031 in your browser. Click the MCP Servers button in the sidebar and add your MCP server configurations (command, args, and transport type for each server you want to connect).
Add widgets to your canvas
Click the + button on the canvas to add widgets. Use the AI Chat widget to interact with configured MCP servers, or add Kanban, Markdown, Sticky Notes, and other widgets to build your workspace layout.
Canvas MCP Client Examples
Client configuration
Canvas MCP Client is itself an MCP client — you configure MCP servers inside its UI. Here is an example of the Docker Compose command to get started.
{
"mcpServers": {
"canvas-mcp-client": {
"url": "http://localhost:3031"
}
}
}Prompts to try
Once Canvas MCP Client is running with MCP servers configured, use the AI Chat widget to interact with your connected tools.
- "List all tools available from the connected MCP servers"
- "Search my filesystem for Python files modified in the last week"
- "Show me the current weather in Tokyo using the weather MCP server"
- "Create a new task in my project management MCP server for 'Review pull request #42'"
- "Query my database MCP server for the top 10 users by signup date"Troubleshooting Canvas MCP Client
Docker Compose fails to start with port conflicts
Check if ports 3031 or 8081 are already in use with `lsof -i :3031` and `lsof -i :8081`. Edit docker-compose.yml to map to different host ports if needed, or stop the conflicting services.
MCP server connections show as failed in the sidebar
Verify the command and args for the MCP server are correct and the binary is available inside the Docker container's PATH. For stdio servers, the executable must be installed in the container. Consider using HTTP/SSE transport for MCP servers running outside Docker.
AI Chat widget returns no responses
Ensure you have configured an AI provider in the application settings. Go to Settings > AI Configuration and add your API key for OpenAI, Anthropic, or Google, or set an Ollama endpoint URL if using a local model.
Frequently Asked Questions about Canvas MCP Client
What is Canvas MCP Client?
Canvas MCP Client is a Model Context Protocol (MCP) server that canvas mcp client is an open-source, self-hostable dashboard application built around an infinite, zoomable, and pannable canvas. it provides a unified interface for interacting with multiple mcp (model context protocol) servers through a flexible, w It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Canvas MCP Client?
Follow the installation instructions on the Canvas MCP Client GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Canvas MCP Client?
Canvas MCP Client works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Canvas MCP Client free to use?
Yes, Canvas MCP Client is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Canvas MCP Client Alternatives — Similar Developer Tools Servers
Looking for alternatives to Canvas MCP Client? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Canvas MCP Client in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Canvas MCP Client?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.