Back home

Collaborative system design workspace

Ghost AI

AI
Real-time
React Flow

A collaborative workspace that turns plain-English ideas into editable architecture diagrams and technical specifications.

GitHub

Explore the architecture

01 · Workspace

A shared canvas where product ideas become editable system models.

  • Ghost AI combines a collaborative React Flow canvas with project access control, presence, and persistent workspace state.
  • Users can move from a plain-English idea to a visual architecture that remains editable instead of receiving a static generated image.

Collaboration flow

01

Idea

Describe a product or system in natural language.

02

Shared canvas

Edit nodes and relationships together in real time.

03

Specification

Generate a durable technical artifact from the model.

Purpose

Reduce the gap between discussing a system and communicating its structure to a team.

How it works

Authenticated users open a project, collaborate on the canvas, and persist the evolving model as shared state.

GitHub

02 · Real-time layer

Presence and shared state keep every collaborator aligned.

  • Liveblocks provides collaborative presence and shared workspace state around the React Flow editor.
  • The application separates transient collaboration concerns from durable project metadata and generated artifacts.

Architecture

The browser renders the graph while Liveblocks coordinates presence and shared state. Prisma/Postgres stores application metadata and Vercel Blob stores generated files.

Reliability

Keeping collaboration state, database metadata, and artifacts in explicit layers makes the product easier to recover and reason about.

03 · AI workflows

Durable generation turns a canvas into useful engineering output.

  • Trigger.dev runs long-lived generation tasks so AI work can retry and complete outside a single request lifecycle.
  • Gemini is accessed through the Vercel AI SDK to turn system context into markdown specifications and related technical output.

Working model

A user action starts a durable task, the task assembles the current project context, and the result is persisted as an inspectable artifact.

Design decision

Durable background execution avoids tying generation to a browser tab or short-lived HTTP request.

Engineering evidence

  • Shared canvas
  • Durable AI tasks
  • Markdown specifications

Stack

Next.js 16
React 19
TypeScript
Clerk
Prisma
Liveblocks
Trigger.dev
Gemini
Vercel Blob
SC