How basketikun/infinite-canvas works
Infinite Canvas is a browser-based creative workbench centered on an infinite canvas: users create projects, arrange and connect nodes, request AI-generated or edited media, and retain results as canvas assets. The web app also provides standalone image/video workflows, prompt sources, plugins, and an assistant that can operate on canvas context. A local Canvas Agent exposes canvas operations over MCP to Codex or Claude Code. Browser storage is the default for configuration and media. README capabilities inform the broader map; sampled source confirms routing, media persistence, plugin management, and parts of the agent implementation, but not every subsystem’s internal wiring.
Main entry points: router.tsx App Routes · image.ts Generation APIs · video.ts Video API · mcp.ts Agent MCP Server
Components 26
Web App
- App Routes
web/src/router.tsx - Browser State
web/src/lib/localforage-storage.ts
Canvas Workflow
- Canvas Project
web/src/pages/canvas/project.tsx - Canvas Interface
web/src/components/canvas/infinite-canvas.tsx - Canvas State
web/src/stores/canvas/use-canvas-store.ts
Creation Services
- Image Workflow
web/src/pages/image/index.tsx - Video Workflow
web/src/pages/video/index.tsx - Generation APIs
web/src/services/api/image.ts - Audio API
web/src/services/api/audio.ts - Video API
web/src/services/api/video.ts - Prompt Sources
web/src/pages/prompts/index.tsx - Image Storage
web/src/services/image-storage.ts - Media Storage
web/src/services/file-storage.ts
Agents And Plugins
- Canvas Operations
canvas-agent/src/canvas/operations.ts - Plugin Manager
web/src/components/canvas/canvas-plugin-manager-modal.tsx - Plugin Runtime
web/src/lib/canvas/plugin-loader.ts - Plugin SDK
plugins/canvas/sdk/src/index.ts - Agent Panel
web/src/components/agent/agent-panel.tsx - Canvas Agent Bridge
web/src/pages/canvas/hooks/use-agent-bridge.ts - Agent MCP Server
canvas-agent/src/server/mcp.ts - Agent Runtime
canvas-agent/src/agent/codex-client.ts
Other components
- Creator
- Codex Or Claude
- Configured AI APIs
- IndexedDB
- Local Proxy
canvas-proxy/index.js
Connections 28
- Creator → App Routes: opens app
- App Routes → Canvas Project: routes to
- App Routes → Image Workflow: routes to
- App Routes → Video Workflow: routes to
- Canvas Project → Canvas Interface: renders
- Canvas Interface → Canvas State: updates state
- Canvas State → Browser State: persists state
- Image Workflow → Generation APIs: requests generation
- Video Workflow → Video API: requests generation
- Generation APIs → Configured AI APIs: sends requests
- Video API → Configured AI APIs: sends requests
- Audio API → Configured AI APIs: sends requests
- Generation APIs → Image Storage: stores results
- Video API → Media Storage: stores results
- Image Storage → IndexedDB: stores blobs
- Media Storage → IndexedDB: stores blobs
- Browser State → IndexedDB: stores state
- Prompt Sources → IndexedDB: caches prompts
- Plugin Manager → Plugin Runtime: manages plugins
- Plugin Runtime → Plugin SDK: loads plugins
- Creator → Agent Panel: starts conversation
- Agent Panel → Canvas Agent Bridge: sends canvas context
- Canvas Agent Bridge → Agent MCP Server: connects MCP
- Agent MCP Server → Canvas Operations: dispatches operations
- Agent Runtime → Codex Or Claude: communicates with
- Agent MCP Server → Agent Runtime: dispatches requests
- Generation APIs → Local Proxy: optionally forwards
- Video API → Local Proxy: optionally forwards