Gauntlet AI, 2025
CollabCanvas
A real-time collaborative design canvas where natural-language commands generate shapes and layouts.
Sign-in required. Open two tabs to see the sync.
The problem
Multiplayer design tools and AI assistants rarely meet: this puts live cursors, presence and GPT-4o design commands on one shared canvas.
Overview
CollabCanvas is a real-time collaborative design tool that combines multiplayer editing with AI-driven design assistance. I built it during the Gauntlet AI fellowship.
To try it, sign in and open the app in two browser tabs: you will see live cursors, presence indicators and shape changes sync between them.
What I built
- A multi-user canvas with live cursor tracking, presence awareness and smart object locking that prevents simultaneous edits.
- Shape creation and editing: rectangles, circles, text and lines, multi-select, resize handles, group and ungroup, alignment and distribution tools, and pan and zoom.
- An AI design assistant using GPT-4o: commands like "create a blue circle", "make a 4x4 grid of squares" or "create a navigation bar with Home, About, Services, Contact" are turned into shapes, and AI activity shows to collaborators.
Stack
- React 18, Firebase, Konva and the OpenAI API.
Stack
- React
- Firebase
- Konva
- GPT-4o
Status
Live demo and public source.