# basketikun/infinite-canvas architecture

> Architecture diagram of the GitHub repository basketikun/infinite-canvas, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/basketikun/infinite-canvas
- Repository: https://github.com/basketikun/infinite-canvas

## Overview

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: [`web/src/router.tsx`](https://github.com/basketikun/infinite-canvas/blob/main/web/src/router.tsx) (App Routes), [`web/src/services/api/image.ts`](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/image.ts) (Generation APIs), [`web/src/services/api/video.ts`](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/video.ts) (Video API), [`canvas-agent/src/server/mcp.ts`](https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/server/mcp.ts) (Agent MCP Server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Web App"]
  node_router["App Routes<br/>[router.tsx]"]
  node_browser_store[("Browser State")]
end

subgraph group_canvas["Canvas Workflow"]
  node_canvas_page["Canvas Project<br/>[project.tsx]"]
  node_canvas_ui["Canvas Interface"]
  node_canvas_store["Canvas State"]
end

subgraph group_creation["Creation Services"]
  node_image_page["Image Workflow<br/>[index.tsx]"]
  node_video_page["Video Workflow<br/>[index.tsx]"]
  node_generation_api["Generation APIs<br/>[image.ts]"]
  node_audio_api["Audio API<br/>[audio.ts]"]
  node_video_api["Video API<br/>[video.ts]"]
  node_prompt_library["Prompt Sources<br/>[index.tsx]"]
  node_image_storage[("Image Storage<br/>[image-storage.ts]")]
  node_media_storage[("Media Storage<br/>[file-storage.ts]")]
end

subgraph group_extensions["Agents And Plugins"]
  node_canvas_ops["Canvas Operations<br/>[operations.ts]"]
  node_plugin_manager["Plugin Manager"]
  node_plugin_runtime["Plugin Runtime<br/>[plugin-loader.ts]"]
  node_plugin_sdk["Plugin SDK<br/>[index.ts]"]
  node_agent_panel["Agent Panel<br/>[agent-panel.tsx]"]
  node_agent_bridge["Canvas Agent Bridge"]
  node_agent_server["Agent MCP Server<br/>[mcp.ts]"]
  node_agent_runtime["Agent Runtime<br/>[codex-client.ts]"]
end

node_user(("Creator"))
node_agent_engine["Codex Or Claude"]
node_model_services["Configured AI APIs"]
node_indexeddb[("IndexedDB")]
node_proxy["Local Proxy<br/>[index.js]"]

node_user -->|"opens app"| node_router
node_router -->|"routes to"| node_canvas_page
node_router -->|"routes to"| node_image_page
node_router -->|"routes to"| node_video_page
node_canvas_page -->|"renders"| node_canvas_ui
node_canvas_ui -->|"updates state"| node_canvas_store
node_canvas_store -->|"persists state"| node_browser_store
node_image_page -->|"requests generation"| node_generation_api
node_video_page -->|"requests generation"| node_video_api
node_generation_api -->|"sends requests"| node_model_services
node_video_api -->|"sends requests"| node_model_services
node_audio_api -->|"sends requests"| node_model_services
node_generation_api -->|"stores results"| node_image_storage
node_video_api -->|"stores results"| node_media_storage
node_image_storage -->|"stores blobs"| node_indexeddb
node_media_storage -->|"stores blobs"| node_indexeddb
node_browser_store -->|"stores state"| node_indexeddb
node_prompt_library -->|"caches prompts"| node_indexeddb
node_plugin_manager -->|"manages plugins"| node_plugin_runtime
node_plugin_runtime -->|"loads plugins"| node_plugin_sdk
node_user -->|"starts conversation"| node_agent_panel
node_agent_panel -->|"sends canvas context"| node_agent_bridge
node_agent_bridge -->|"connects MCP"| node_agent_server
node_agent_server -->|"dispatches operations"| node_canvas_ops
node_agent_runtime -->|"communicates with"| node_agent_engine
node_agent_server -->|"dispatches requests"| node_agent_runtime
node_generation_api -.->|"optionally forwards"| node_proxy
node_video_api -.->|"optionally forwards"| node_proxy

click node_router "https://github.com/basketikun/infinite-canvas/blob/main/web/src/router.tsx"
click node_canvas_page "https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/canvas/project.tsx"
click node_canvas_ui "https://github.com/basketikun/infinite-canvas/blob/main/web/src/components/canvas/infinite-canvas.tsx"
click node_canvas_store "https://github.com/basketikun/infinite-canvas/blob/main/web/src/stores/canvas/use-canvas-store.ts"
click node_canvas_ops "https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/canvas/operations.ts"
click node_image_page "https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/image/index.tsx"
click node_video_page "https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/video/index.tsx"
click node_generation_api "https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/image.ts"
click node_audio_api "https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/audio.ts"
click node_video_api "https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/video.ts"
click node_prompt_library "https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/prompts/index.tsx"
click node_image_storage "https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/image-storage.ts"
click node_media_storage "https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/file-storage.ts"
click node_browser_store "https://github.com/basketikun/infinite-canvas/blob/main/web/src/lib/localforage-storage.ts"
click node_plugin_manager "https://github.com/basketikun/infinite-canvas/blob/main/web/src/components/canvas/canvas-plugin-manager-modal.tsx"
click node_plugin_runtime "https://github.com/basketikun/infinite-canvas/blob/main/web/src/lib/canvas/plugin-loader.ts"
click node_plugin_sdk "https://github.com/basketikun/infinite-canvas/blob/main/plugins/canvas/sdk/src/index.ts"
click node_agent_panel "https://github.com/basketikun/infinite-canvas/blob/main/web/src/components/agent/agent-panel.tsx"
click node_agent_bridge "https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/canvas/hooks/use-agent-bridge.ts"
click node_agent_server "https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/server/mcp.ts"
click node_agent_runtime "https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/agent/codex-client.ts"
click node_proxy "https://github.com/basketikun/infinite-canvas/blob/main/canvas-proxy/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_router,node_browser_store toneBlue
class node_canvas_page,node_canvas_ui,node_canvas_store,node_indexeddb toneAmber
class node_image_page,node_video_page,node_generation_api,node_audio_api,node_video_api,node_prompt_library,node_image_storage,node_media_storage,node_model_services toneMint
class node_canvas_ops,node_plugin_manager,node_plugin_runtime,node_plugin_sdk,node_agent_panel,node_agent_bridge,node_agent_server,node_agent_runtime toneRose
class node_user,node_agent_engine toneIndigo
class node_proxy toneTeal
```

## Components

### Web App

- [App Routes](https://github.com/basketikun/infinite-canvas/blob/main/web/src/router.tsx): `web/src/router.tsx`
- [Browser State](https://github.com/basketikun/infinite-canvas/blob/main/web/src/lib/localforage-storage.ts): `web/src/lib/localforage-storage.ts`

### Canvas Workflow

- [Canvas Project](https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/canvas/project.tsx): `web/src/pages/canvas/project.tsx`
- [Canvas Interface](https://github.com/basketikun/infinite-canvas/blob/main/web/src/components/canvas/infinite-canvas.tsx): `web/src/components/canvas/infinite-canvas.tsx`
- [Canvas State](https://github.com/basketikun/infinite-canvas/blob/main/web/src/stores/canvas/use-canvas-store.ts): `web/src/stores/canvas/use-canvas-store.ts`

### Creation Services

- [Image Workflow](https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/image/index.tsx): `web/src/pages/image/index.tsx`
- [Video Workflow](https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/video/index.tsx): `web/src/pages/video/index.tsx`
- [Generation APIs](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/image.ts): `web/src/services/api/image.ts`
- [Audio API](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/audio.ts): `web/src/services/api/audio.ts`
- [Video API](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/api/video.ts): `web/src/services/api/video.ts`
- [Prompt Sources](https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/prompts/index.tsx): `web/src/pages/prompts/index.tsx`
- [Image Storage](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/image-storage.ts): `web/src/services/image-storage.ts`
- [Media Storage](https://github.com/basketikun/infinite-canvas/blob/main/web/src/services/file-storage.ts): `web/src/services/file-storage.ts`

### Agents And Plugins

- [Canvas Operations](https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/canvas/operations.ts): `canvas-agent/src/canvas/operations.ts`
- [Plugin Manager](https://github.com/basketikun/infinite-canvas/blob/main/web/src/components/canvas/canvas-plugin-manager-modal.tsx): `web/src/components/canvas/canvas-plugin-manager-modal.tsx`
- [Plugin Runtime](https://github.com/basketikun/infinite-canvas/blob/main/web/src/lib/canvas/plugin-loader.ts): `web/src/lib/canvas/plugin-loader.ts`
- [Plugin SDK](https://github.com/basketikun/infinite-canvas/blob/main/plugins/canvas/sdk/src/index.ts): `plugins/canvas/sdk/src/index.ts`
- [Agent Panel](https://github.com/basketikun/infinite-canvas/blob/main/web/src/components/agent/agent-panel.tsx): `web/src/components/agent/agent-panel.tsx`
- [Canvas Agent Bridge](https://github.com/basketikun/infinite-canvas/blob/main/web/src/pages/canvas/hooks/use-agent-bridge.ts): `web/src/pages/canvas/hooks/use-agent-bridge.ts`
- [Agent MCP Server](https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/server/mcp.ts): `canvas-agent/src/server/mcp.ts`
- [Agent Runtime](https://github.com/basketikun/infinite-canvas/blob/main/canvas-agent/src/agent/codex-client.ts): `canvas-agent/src/agent/codex-client.ts`

### Other components

- **Creator**
- **Codex Or Claude**
- **Configured AI APIs**
- **IndexedDB**
- [Local Proxy](https://github.com/basketikun/infinite-canvas/blob/main/canvas-proxy/index.js): `canvas-proxy/index.js`

## Connections

- 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