Constellar

Inspiration

Ideating and designing concepts for a hackathon isn't easy. That's a problem we experienced firsthand this weekend. Whether you’re designing architectures, explaining a workflow, or even just brainstorming, there’s always a gap between what’s in your head and what’s on the board. We wanted to close that gap with AI — to make visual thinking as seamless and intuitive as talking.

We've seen how AI coding tools like Cursor and Copilot increase productivity and efficiency exponentially and make coding as easy as a conversation with a friend. But what if you could bring that same power to ideation and design — the very start of every project? That curiosity led to Constellar.

What it does

Constellar is an AI-powered whiteboard that understands what you're trying to build. If you need to visualize something like a system architecture, a workflow, anything, just chat with it like a teammate and it creates the diagram right there on the infinite canvas. Seamlessly integrate AI-generated diagrams with your own manual edits, chats, and boards saving across sessions automatically. It's the whiteboard brainstorming tool we wished existed when we started this project.

How we built it

We built Constellar with Next.js and React for the frontend, Supabase handling auth and our PostgreSQL database, and Excalidraw that powers the board. The AI assistant uses Google Gemini 2.5 Flash, with custom implemented function calling so the AI can intelligently decide when to generate diagrams and which tools to use. The crux of our project is the custom-built Python MCP server that translates Gemini's function calls into actual Excalidraw elements with proper positioning, styling, and connections. The trickiest part was getting the real-time chat, canvas updates, and database persistence to all work together smoothly.

Challenges we ran into

Early versions of the Constellar AI would spam the canvas with random shapes. We'd ask for a simple flowchart and get 30 overlapping rectangles covering everything. Gemini's function calling would sometimes loop and call the same tool 10+ times in a row for no reason. We resolved a lot of this with Dagre, a json library that reads your files and prevents overlaps. The Excalidraw API timing was also brutal; it wouldn't always be ready when we tried to add elements, so diagrams would just disappear. And of course, we hit nasty git merge conflicts when both of us were editing the chat and UI components simultaneously.

Accomplishments that we're proud of

Getting the AI to switch context based on input was a big part, especially from where it started. It took hours of tweaking input settings and prompt engineering, but now Constellar can hold conversations instead of only spitting out json. We're also really proud of the chat persistence implementation, connecting everything to the database so you can return and see all your project/chat history loaded. Also the fact that you can see the AI think through its devtools output was a last minute addition we thought up that turned out a lot more useful than expected.

What we learned

Building a custom MCP server taught us how to bridge AI models with real applications, translating Gemini's function calls into Excalidraw elements required careful schema design and a lot of coordinate math. We learned how to integrate multiple backend services: Next.js API routes calling Gemini, Gemini calling our Python MCP server, then syncing everything back through Supabase. Managing state across the frontend, database, and canvas while keeping the AI chat responsive was way harder than expected. We also got deep into Gemini's function calling API and learned that good prompt engineering is half art, half debugging why the AI thinks it needs 50 rectangles.

What's next for Constellar

Real-time collaboration is the obvious next step so we can have multiple people editing the same canvas and chatting with the AI together. We also want to improve the AI-contextual understanding abilities as it struggles with more complex topics and longer prompts. Another crucial aspect is full version control with branching and the ability to restore old versions would let people experiment without fear of breaking things. Better sharing features (public links, export to PNG/SVG), a template library for common diagram types, and customizable AI personalities would make Constellar way more useful.