ZenSpace: AI Architect
Inspiration
We’ve all stared at a messy room or an empty wall, struggling to visualize its potential. Professional interior design is expensive, and generic "AR furniture" apps feel clunky and disconnected. We wanted to build something that truly understands space—not just placing a 3D chair on the floor, but analyzing lighting, flow, and aesthetics like a human architect would.
Inspired by the concept of Spatial Intelligence, we envisioned ZenSpace: an AI that sees your environment through your camera, understands your personal style, and helps you transform it in real-time.
What it does
ZenSpace is an AI-powered interior architect that lives in your browser.
- Spatial Analysis: It analyzes room photos to evaluate $\text{Vibe Score}$, identify clutter, and suggest layout improvements based on architectural principles.
- Real-Time AR Assistant: Using the camera, it detects objects live and lets you "chat" with your room ("What lamp would look good here?").
- Style Transformation: You can instantly visualize different aesthetics (Cyberpunk, Zen, Minimalist) on your actual furniture using generative AI.
- Google-Grounded Shopping: It doesn't just suggest "a grey sofa"—it finds real, purchasable products via Google Search that match your specific room's dimensions and style.
How we built it
We built ZenSpace using Next.js for the frontend and Google Gemini 2.0 Flash as the core intelligence engine.
- Vision & Reasoning: We use Gemini's multimodal capabilities to process live video frames and uploaded images. The AI acts as a reasoning agent, breaking down visual data into structured JSON ("lighting: poor", "style: modern").
- Real-Time Interaction: The "Live Assistant" captures video frames and sends them to Gemini with a conversational history, enabling a seamless voice-to-voice dialogue about the user's environment.
- Generative AI: For the "Style Transform" feature, we use Gemini's image generation capabilities to overlay new textures and styles onto detected objects in the camera feed.
- Grounding: We integrated Google Search grounding to ensure product recommendations are real, priced accurately, and in stock.
Challenges we ran into
- Latency vs. Quality: Balancing real-time video analysis with the depth of Gemini's reasoning was tricky. We implemented a "smart sampling" system that runs lightweight detection every few frames while reserving deep reasoning for specific user queries.
- JSON Reliability: Getting the AI to consistently return structured data (for our UI charts and shopping lists) while maintaining a natural conversation flow required extensive prompt engineering and fallback handling.
- AR on the Web: Implementing believable AR-like overlays in a web browser without heavy libraries was a challenge. We used CSS blend modes and canvas manipulation to create "instant" style filters that feel like native AR.
Accomplishments that we're proud of
- The "Glass HUD" UI: We created a futuristic, deeply immersive interface that feels like "Iron Man's JARVIS" but runs smoothly in a web browser.
- Robust Fallback System: We engineered a multi-model fallback strategy (cycling through Gemini 2.5, 2.0, and 1.5) to ensure the app remains functional even during high API traffic or rate limiting.
- True Multimodality: Successfully blending text, voice, live video, and image generation into a single, cohesive workflow.
What we learned
Building ZenSpace taught us that context is king. AI is infinitely more useful when it can "see" what you see. We also learned the immense power of grounding—connecting generative creativity with real-world data (like Google Search) turns a fun toy into a genuinely useful tool.
What's next for ZenSpace
- 3D Room Mapping: Using WebXR to create full 3D depth maps of the scanned rooms.
- Budget & Cart: Integrating a budget tracker that automatically sums up the "grounded" product prices: $$ \text{Total Cost} = \sum_{i=1}^{n} (\text{Price}_i \times \text{Quantity}_i) $$
- Community Designs: A social feature to share your "transformed" room styles with other users.
Built With
- antigravity
- css3
- gemini-3
- google-gemini-api
- lucide
- next.js
- node.js
- radix
- react
- react.js
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.