Real-time Canvas

Your Architecture,
Live

Not a diagram. Not a mockup. A live canvas where your agents communicate, build, and collaborate in real-time. You watch. You guide. You approve.

From Conversation to Visual

Every task assignment, code commit, and agent communication is reflected on the canvas instantly. Nothing happens in the dark.

You give direction

Describe a feature in natural language. Assign it to an agent. Set constraints.

Agents execute

Agents pick up tasks, plan, research, implement, and emit canvas updates as they go.

You see everything

Every decision, every file created, every PR opened — visible on the canvas as it happens.

Traditional AI tools give you outputs in a chat window. EnGenAI gives you a visual workspace where your entire codebase, your team of agents, and every work artifact are connected and visible in a single live view.

The Canvas Stack

Four layers working together to deliver a live, conflict-free, multi-user canvas experience.

User Browser Chrome / Safari / Firefox WebSocket (ShareDB OT) ShareDB Server Operational Transformation Protocol React Flow Canvas Nodes · Edges · Handles · Viewport 6 node types real-time sync OT conflict-free Agent (Server-side) AgentExecutor · Memory · Tools Sophi / Marv / ... Mailbox pattern 3-tier memory A2UI Protocol PostgreSQL Canvas state as JSONB · audit log OT sync channel A2UI protocol
React Flow

Nodes, edges, handles, viewport management

ShareDB

OT conflict resolution, real-time broadcast

A2UI Protocol

Agents push JSON operations to the canvas

PostgreSQL

Canvas state persisted as JSONB columns

React Flow

The canvas rendering layer. Handles nodes, edges, handles, zooming, panning, and selection. Every work artifact is a node. Every relationship is an edge.

ShareDB (OT Protocol)

The synchronization layer. Uses Operational Transformation — the same algorithm that powers Google Docs — to merge concurrent changes without conflicts.

How Agents Update the Canvas

The A2UI (Agent-to-UI) protocol is how server-side agents push canvas updates to all connected clients in real-time. Agents emit typed JSON operations. ShareDB broadcasts them. The canvas applies them instantly.

A2UI Protocol — Event Sequence
LIVE
Agent
(Sophi)

Task complete: created file

app/routers/auth_router.py — 42 lines

A2UI
Protocol

Agent emits JSON operation:

{
  "type": "node_update",
  "node_id": "task-47",
  "status": "complete",
  "agent": "sophi",
  "data": {
    "file": "auth_router.py",
    "lines": 42
  }
}
ShareDB
Server

OT operation received and validated

Conflict-checked against current canvas state

Broadcast
all clients

Operation broadcast to all connected sessions

session:amad session:keith session:agent-marv
Canvas
UI

Canvas updates in real-time

task-47 node: status badge → "complete", color → green

<50ms
end-to-end latency
OT
conflict-free
JSON
operation format
ws://sharedb:3000

What's On the Canvas

Six node types represent every artifact in your development workflow. From assigned tasks to merged pull requests, everything has a place.

TASK #47 IN_PROGRESS

Build auth login endpoint

S
Sophi

Task Node

Represents a discrete unit of work assigned to an agent. Shows status, priority, and assignee.

S
Sophi

Backend Engineer

Working on TASK #47...

Agent Node

A live agent in the workspace. Shows online status, current task, and communication links.

tests
pass?

YES NO

Decision Node

A branching point in the workflow. Shows condition logic and routes to different outcomes.

auth_router.py Python
+ async def login(...):
+  access_token = ...
-  # TODO: implement

+14 / -2 lines

Code Node

A file created or modified by an agent. Shows path, language, and diff summary.

PR #83 REVIEW

feat(auth): add JWT login endpoint

feat/auth-jwt CI ✓

PR Node

A pull request opened by an agent. Shows branch, PR number, CI status, and review state.

A
Amad 2m ago

@Sophi use RS256, not HS256. See auth architecture doc.

Comment Node

Human or agent annotation on the canvas. Supports @mentions and links to other nodes.

Real-time Collaboration

Multiple team members can view and interact with the same canvas simultaneously. Changes are synchronized via Operational Transformation — the same algorithm used by Google Docs — ensuring every client sees a consistent state, even under concurrent edits.

Human collaborators

Your team sees the exact same canvas. Cursor positions, active selections, and node states are synchronized. Leave comments directly on nodes.

Agent presence

Each active agent has its own presence indicator on the canvas. You can see exactly what each agent is working on, in real-time, as it happens.

<50ms

canvas update latency end-to-end

OT

conflict-free merging via Operational Transformation

6

node types representing every work artifact

Next: Agent Memory

The canvas shows you what's happening now. Memory is what lets agents build on everything that's ever happened.