CanvasMCPClient

Canvas MCP Client is a self-hosted, customizable dashboard that integrates multiple MCP (Model Context Protocol) servers into a single workspace. It provides an infinite, pan-and-zoom canvas with a modular widget system, allowing you to configure MCP servers, manage AI providers, and build dashboards that orchestrate tools and services. The MCP integration is handled via the FastMCP library, enabling multiple transport methods and real-time status monitoring. Use it to connect to your MCP servers, organize widgets that display or interact with model contexts, and save your dashboards as templates for reuse or sharing.

Once set up, you can configure MCP servers within the app, test connections, and then add widgets that query or control those servers. The frontend supports a variety of widgets (notes, to-do lists, AI chat, image display, flash cards, Kanban, spreadsheets, markdown, web previews, world clock, weather, and more). You can also configure AI providers (OpenAI, Anthropic, Ollama, Google), set models and parameters, and route outputs to widgets or dashboards. The template system lets you save and reuse widget configurations, while the data persistence stack (local SQLite by default, PostgreSQL production-ready) keeps your workspace and templates intact across sessions.

Prerequisites:

• Docker and Docker Compose (recommended)
• Alternatively, Node.js 18+ and Python 3.10+ for manual setup

Option A: Docker (Recommended)

1. Clone the repository and navigate to the project:

git clone https://github.com/n00bvn/CanvasMCPClient.git
cd CanvasMCPClient

2. Start the application with Docker Compose:

docker-compose up -d

3. Open the application:

• Frontend: http://localhost:3031
• Backend API: http://localhost:8081
• API Docs: http://localhost:8081/docs

Option B: Manual Setup (Backend + Frontend)
Backend (Python FastAPI):
```bash
# Create and activate a virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Prepare data directory and environment
mkdir -p data
export DATABASE_URL="sqlite:///./data/canvas_mcp.db"
export CORS_ORIGINS="http://localhost:3031,http://127.0.0.1:3031"
export SECRET_KEY="your-secret-key-here"

# Run the backend
uvicorn main:app --reload --host 0.0.0.0 --port 8081

Frontend (Next.js):

cd frontend
npm install
export NEXT_PUBLIC_API_URL="http://localhost:8081"
npm run dev

Access the app at http://localhost:3031 once both backend and frontend are running.

Tips and common gotchas:

• If using Docker, ensure Docker daemon is running and you have network access to pull images.
• The Default deployment uses SQLite for development; switch to PostgreSQL in production for better concurrency.
• When configuring MCP Servers, you can mix transport protocols (stdio, HTTP, SSE). Use the UI to test connections and import/export server configurations.
• For AI providers, securely store API keys through the app's AI Config section; keep keys out of your version control.
• The frontend and backend expose API docs; consult them for available endpoints and models.
• If you encounter port conflicts, modify the docker-compose.yml or the FRONTEND/BACKEND port mappings accordingly.
• For manual setup, ensure environment variable values (DATABASE_URL, SECRET_KEY, CORS_ORIGINS) are set correctly to match your deployment.