landing

Vibe Cloud

Inspiration 💡

Building cloud architecture usually means jumping between too many tools: someone sketches on a whiteboard, someone else turns it into an AWS diagram, another teammate explains tradeoffs in chat, and deployment becomes a separate handoff.

We wanted Vibe Cloud to make that whole process feel collaborative, fast, and visual. The inspiration came from how teams actually brainstorm: messy, live, and full of ideas. Vibe Cloud keeps that creative energy, then helps turn it into something structured enough to discuss, improve, and eventually deploy. ☁️

What it does 🛠️

Vibe Cloud is a collaborative cloud architecture studio where teams can sketch infrastructure ideas together, transform them into AWS-style diagrams, and keep discussing the system in one shared workspace.

With Vibe Cloud, users can:

Create or join shared architecture sessions.
Set their name and cursor color for live collaboration.
Sketch ideas on a collaborative whiteboard.
Vote when the team is ready to move forward.
Turn whiteboard ideas into structured architecture graphs.
Use an architect chat panel for feedback and iteration.
Work solo when they want to prototype privately.
Move toward deployable infrastructure from a shared design.

The goal is to help teams go from “we have an idea” to “we understand this system” without losing momentum.

How we built it

We built the frontend with Next.js, React, TypeScript, Tailwind CSS, and a shadcn-style component structure. The UI uses a light theme, custom typography, orange dither backgrounds, and a gooey cursor trail to make the first interaction feel playful without getting in the way.

For collaboration, we use Yjs-backed shared state with Hocuspocus for real-time multiplayer sessions. Solo sessions use local persistence so users can still sketch and explore without needing a live room.

The whiteboard experience is powered by tldraw. The architecture graph is built with React Flow. Shared project types live in the shared package so the frontend and backend can agree on sessions, graph nodes, chat messages, and architecture data.

The backend supports session APIs, collaboration plumbing, agent requests, reconstruction flows, and deployment-related workflows.

Challenges we ran into 🧩

One challenge was balancing a creative whiteboard experience with a structured cloud architecture workflow. Whiteboards are intentionally loose, but infrastructure diagrams need clear nodes, relationships, and decisions.

Another challenge was designing a collaborative interface that did not feel crowded. The app includes presence, cursor colors, voting, whiteboarding, graph editing, chat, API key setup, and deployment actions, so we had to keep the screens readable and focused.

We also spent time tuning the visual design. The dither background, orange color palette, typography, rounded surfaces, and cursor effects all had to feel consistent instead of distracting.

On the technical side, making live collaboration feel smooth while preserving session state across different phases was a big part of the work.

Accomplishments that we're proud of

We are proud that Vibe Cloud feels like a real product flow instead of a static prototype. Users can start a session, collaborate visually, move through phases, and keep working toward a cloud architecture.

We are also proud of the interface identity. The light theme, expressive headings, orange dither texture, and polished onboarding flow make the app feel memorable and approachable. ✨

Most importantly, the experience matches the mission: cloud design should feel like something a team builds together, not a file one person disappears into.

What we learned

We learned that collaborative tools need both freedom and structure. If a tool becomes structured too early, it blocks creativity. If it stays too loose forever, it becomes hard to act on.

We also learned how much small interaction details matter. Cursor colors, readable controls, clean session setup, voting states, and subtle motion all help users understand what is happening in the room.

Technically, we learned more about combining real-time state, visual editors, graph-based interfaces, and AI-assisted workflows into one cohesive frontend.

What's next for Vibe Cloud

Next, we want to make the architecture intelligence stronger. That means better sketch-to-graph reconstruction, clearer agent suggestions, and more useful explanations around cost, reliability, security, and scalability.

We also want to add more cloud resources, support reusable templates, improve deployment workflows, and make collaboration richer with comments, annotations, and version history.

Long term, Vibe Cloud could become a shared workspace where teams design, review, and ship cloud systems from the same place. 🚀