AI canvas workspace

Oricalcum

An Oracle for work, teams, and hobbies.

An AI-powered, canvas-first visual workspace that blends ClickUp structure with Notion flexibility — node-based planning, writing and coordination in one place.

Oricalcum canvas showing the Getting Started graph: a hexagon start node wired to three rows of cards

// how it works

Three moves

  1. 01 /

    add a node

    Double-click anywhere on the canvas. A node is an idea, a task or a document: a title plus a rich-text body.

  2. 02 /

    connect it

    Drag from a node's port onto another node to draw an edge. Pan by dragging, zoom with scroll or pinch, keep your bearings with the minimap.

  3. 03 /

    ask the oracle

    Say "add nodes for…" and the assistant builds and wires them in the open nodespace. Ask it to schedule a meeting and it lands on the calendar.

// capabilities

What ships

Everything below is in the live app today.

  • Canvas-first nodespaces

    A workspace holds many canvases, organised in a file explorer with folders. Shapes toolbar, minimap, view-only pan and pinch on phones.

  • Rich nodes

    A TipTap editor in every node: headings, bold, lists, resizable images, code blocks with language detection, and a read-only mode.

  • Edges & ports

    Drag from a port to connect. Built on React Flow with Zustand stores, so the graph stays responsive as it grows.

  • AI assistant & Chatspace

    Ask about your workspace from the spark button or the AI Chatspace. Node-building acts only on the nodespace you have open.

  • Meeting scheduler

    The assistant interviews you for title, date, time and duration, confirms, then adds the meeting to the Calendar.

  • MCP tool surface

    Twelve tools over nodes, edges and the calendar, served by fastMCP and bound to each request's auth and project scope.

  • Snapshots

    Capture a workspace state and restore it later.

  • Share & collaborate

    Invite collaborators from the People tab, or publish a read-only public share link.

  • S3 storage

    A per-workspace file drive. Upload and preview files; images dropped into nodes are stored there too.

  • Themes & tweaks

    Mono, Oracle, Cyber and Solar accents; background, node style, glow and motion adjustable from settings or the tweaks panel.

    • Mono
    • Oracle
    • Cyber
    • Solar
  • Command palette

    Keyboard shortcuts and a command palette for the whole workspace.

// architecture

One request, end to end

The backend is the source of truth; browser storage is only a cache. Every agent is built fresh per request with tools bound to that request's auth and project scope.

  1. Next.js client — React Flow · Zustand · TipTap
  2. FastAPI — Supabase JWT · SQLAlchemy
  3. LangGraph ReAct agent — Gemini · built per request
  4. fastMCP tools — nodes · edges · calendar
  5. Postgres (Supabase · Alembic) and S3 (per-workspace drive)

// mcp tools

12 tools, three groups

Served by fastMCP, consumed through langchain-mcp-adapters. Each request builds a fresh agent with these tools bound to its own auth and project scope.

nodes
list_nodesget_nodecreate_nodeupdate_nodefind_related_nodescreate_summary_node
edges
list_edgesconnect_nodesdisconnect_nodesget_node_connections
calendar
list_meetingscreate_meeting

// screens

In the app

  • Oricalcum canvas showing the Getting Started graph: a hexagon start node wired to three rows of cards
    01 / nodespaceOne canvas, eleven connected nodes: the Getting Started tour every new workspace opens with.
  • Workspace hub showing node, edge and crew counters and the Graphs, Storage, People and Settings modules
    02 / workspace hubA workspace's front door: live counters plus its Graphs, Storage, People and Settings modules.
  • Dashboard listing workspaces, with the Getting Started tour workspace ready to open
    03 / dashboardEvery workspace you belong to. New accounts open with a guided tour laid out on the canvas.
  • Splash screen: the Oricalcum logo suspended inside a wireframe orb on a starfield
    04 / splashThe three.js neural orb that greets you on the way in.

// stack

Built with

front
Next.jsReact 19TypeScriptReact FlowZustandTipTapthree.js
back
FastAPISQLAlchemyAlembicPostgresSupabase AuthLangGraphGeminifastMCPS3
ship
GitHub ActionsVercelVitestPlaywright