How n00bvn/canvasmcpclient works
Canvas MCP Client is a self-hosted infinite-canvas dashboard for creating and arranging configurable widgets, connecting widgets to MCP tools and AI providers, and persisting dashboards and configurations. The principal workflow runs from the canvas and widget renderer through frontend API services to FastAPI routes and database-backed state; optional MCP and AI integrations provide tool execution and conversion. The README also documents templates, import/export, and server-directory discovery. Some frontend-to-API links and unsampled capabilities are documented but their exact runtime wiring is not shown in the excerpts.
Main entry points: database.py Application Database · main.py FastAPI App · ai_chat.py AI Chat · widget_connections.py Widget Connections
Components 24
Canvas Workspace
- Canvas Workspace
frontend/src/components/Canvas/Canvas.tsx
Widget System
- Widget Renderer
frontend/src/components/Widgets/WidgetRenderer.tsx - Blueprint Engine
frontend/src/components/Widgets/UniversalWidgetEngine/UniversalWidgetEngine.tsx - Widget Builder
frontend/src/components/Modals/WidgetBuilderModal.tsx - Widget Connections
backend/routers/widget_connections.py - Connection Panel
frontend/src/components/Panels/ConnectionPanel.tsx
API and Persistence
- Dashboard API
backend/routers/dashboards.py - Widget API
backend/routers/widgets.py - Frontend API
frontend/src/services/api.ts - FastAPI App
backend/main.py - Application Database
backend/database.py
AI and MCP
- MCP Server Config
backend/routers/mcp_servers.py - MCP Runtime
backend/services/mcp_service.py - MCP Directory
backend/routers/mcp_directory.py - Registry Sync
backend/services/mcp_registry_service.py - AI Chat
backend/routers/ai_chat.py - AI Data Conversion
backend/services/ai_conversion_service.py
Configuration and Templates
- AI Configuration
backend/routers/ai_configs.py - Credential Encryption
backend/services/encryption_service.py - Widget Blueprints
backend/routers/widget_blueprints.py - Dashboard Import Export
frontend/src/components/Modals/DashboardImportExportModal.tsx
Other components
- Dashboard User
- MCP Servers
- AI Providers
Connections 33
- Dashboard User → Canvas Workspace: arranges workspace
- Canvas Workspace → Dashboard API: loads dashboards
- Canvas Workspace → Widget Renderer: renders widgets
- Widget Renderer → Blueprint Engine: renders blueprint
- Blueprint Engine → Widget API: loads widget data
- Widget Builder → Widget Blueprints: creates widgets
- Connection Panel → Widget Connections: manages connections
- Frontend API → FastAPI App: sends API requests
- FastAPI App → Dashboard API: registers routes
backend/main.py - FastAPI App → Widget API: registers routes
backend/main.py - FastAPI App → Widget Connections: registers routes
backend/main.py - FastAPI App → MCP Server Config: registers routes
backend/main.py - FastAPI App → MCP Directory: registers routes
backend/main.py - FastAPI App → Application Database: initializes storage
backend/main.py - Dashboard API → Application Database: reads and writes
backend/routers/dashboards.py - Widget API → Application Database: reads and writes
backend/routers/widgets.py - Widget Connections → Application Database: reads and writes
backend/routers/widget_connections.py - Widget Connections → AI Data Conversion: converts widget data
backend/routers/widget_connections.py - AI Data Conversion → Application Database: loads configuration
backend/services/ai_conversion_service.py - AI Data Conversion → Credential Encryption: decrypts credentials
backend/services/ai_conversion_service.py - MCP Server Config → Application Database: persists server configs
backend/routers/mcp_servers.py - MCP Server Config → MCP Runtime: manages connections
backend/routers/mcp_servers.py - MCP Runtime → MCP Servers: connects to servers
backend/services/mcp_service.py - MCP Directory → Application Database: reads directory data
backend/routers/mcp_directory.py - Registry Sync → Application Database: syncs registry data
backend/services/mcp_registry_service.py - AI Chat → Application Database: loads AI config
backend/routers/ai_chat.py - AI Chat → Credential Encryption: decrypts credentials
backend/routers/ai_chat.py - AI Chat → MCP Runtime: executes tool calls
backend/routers/ai_chat.py - AI Chat → AI Providers: requests completions
- AI Configuration → Application Database: stores configurations
backend/routers/ai_configs.py - AI Configuration → Credential Encryption: encrypts credentials
backend/routers/ai_configs.py - Dashboard Import Export → Dashboard API: imports and exports
- Dashboard User → MCP Directory: discovers servers