Weaver

weaver thumbnail

Inspiration

We were frustrated with how LLMs force all creativity, planning, and reasoning into a single linear chat. Long conversations become messy, context gets lost, and ideas blend together. We wanted something different: a way to visually branch thoughts, explore concepts in parallel, and maintain clarity without scrolling through endless chat logs.

This led us to build Weaver, a canvas-based, tree-structured interaction model where every idea becomes a node, every path becomes a branch, and conversations evolve visually rather than linearly. It transforms ideation with AI into something clear, collaborative, and structured, similar to the way people naturally think.

What it does

In one sentence: Weaver is a collaborative AI ideation canvas that replaces long chats with visual, branching conversation graphs. Weaver allows users to:

Create canvas boards for ideas, flows, and multi-threaded ideation.
Build branching LLM-powered conversations where each node represents a prompt or response.
Visually organize ideas so they don’t get lost inside a single long chat.
Collaborate in real time with up to four users, enabling team brainstorming or planning.
Treat the canvas as a shared creative space — like a collaborative board fused with ChatGPT and your colleagues.

How we built it

We built Weaver end-to-end using:

Frontend: React + React Flow for the board, nodes, and interactions.

Backend: FastAPI for routing, Supabase (Postgres) for database storage.

Real-time sync: WebSockets for multi-user collaboration.

Data flow: User Node → Server → Routes → Supabase or LLM Service → WebSocket Broadcast → Canvas

Each board stores:

Its own set of nodes with positions
Edges connecting nodes to represent conversational flow
Relationships between boards, nodes, and edges for fast sync and retrieval
This architecture allowed us to build a responsive graph-based AI system that feels fluid and intuitive.

Challenges we ran into

Graph storage design: We had to carefully structure how boards, nodes, and edges relate in the database. Every board contains its own spatial layout, and every edge connects nodes uniquely.

WebSockets from scratch: None of us had used WebSockets before, so we dove into documentation, experimented, and slowly formed a stable, minimal integration.

Node spacing & layout: At first, new nodes appeared in messy or overlapping positions. We solved this with a simple math-based offset algorithm to auto-place nodes cleanly.

Balancing UX with complexity: We had to streamline features to maintain clarity in the canvas without overwhelming the user.

Accomplishments that we're proud of

Finishing the MVP on time, despite using several technologies for the first time.
Building a sleek, user-friendly UI that feels smooth and natural for ideation.
Completing a fully functional backend with real-time multiuser collaboration.
Working together effectively over Git and GitHub, resolving merge conflicts, and iterating quickly.

What we learned

We learned:

Tons about LLM prompting, context management, and structured reasoning.
How to design and build graph-based applications, applying tree and graph concepts from school to a real-world project.
How to prioritize during fast development:
"Build just enough to work, then iterate toward the user’s ideal flow."
That trying to build too many features early causes clutter, slows down momentum, and distracts from the core experience.

What's next for Weaver

Authentication & secure session management, including RLS in the database.
Stronger WebSocket session control so users have isolated, protected collaboration spaces.
Expanding Weaver into a next-generation system design tool, where components and logic flow can be visually mapped and AI-augmented through a context pipeline (ie. RAG, embeddings, etc) in order to pull documentation outlines, API requirements, etc -- all to make the tool highly specialized for System Design.
Continuing to refine it as a powerful personal ideation and planning tool, with potential to grow into a full product.