Plinth

Plinth

Inspiration

In India, before a single brick gets laid on a plot of land, a family typically has to go through an architect for the layout, a civil engineer for the structure, an interior designer for the finishes, and a quantity surveyor just to find out what it will cost. That process alone can take weeks and cost real money — and it's common for the final number to blow past the budget, sending everyone back to the drawing board.

I wanted to see how much of that early-stage consultation could be compressed into a few minutes, without faking the parts that make an architect's judgment valuable in the first place — real geometry, real site conditions, real costs. That constraint became the actual design challenge behind Plinth: build something that feels like magic in a demo but is honest about what's real underneath it.

What it does

Plinth takes a plot's dimensions, orientation, and a family's requirements (budget, room count, style) and generates:

A 2D floor plan, built by a rule-based layout engine using real architectural adjacency logic and municipal setback rules, refined by an AI reasoning layer for door and window placement
A 3D model, extruded from that exact same floor-plan geometry — not a separate hand-modeled asset — with live facade re-skinning (modern glass, traditional brick, minimal stucco)
A real sunlight simulation, using actual solar position data for the plot's real coordinates, casting real shadows on the 3D model across the day
A cost breakdown, computed against a sourced Indian construction-cost reference dataset, with a budget optimizer that recalculates genuine trade-offs (material swaps, area reductions) rather than issuing generic warnings
A grounded AI advisor, which only answers questions using the specific plan and estimate just generated — it won't invent a number it doesn't have

How I built it

The stack is Next.js (App Router) with TypeScript and Tailwind, Supabase for storing plots, floor plans, and cost estimates, and Gemini as the AI reasoning layer. The 3D scene uses React Three Fiber and Three.js.

The core design decision was making the 2D and 3D views share one underlying data structure. The layout engine computes room bounding boxes first — a real geometric allocation problem, not a generative one — and that same room data is rendered two ways: as an SVG blueprint, and as an extruded Three.js scene. This meant the 3D model is never out of sync with the floor plan, because they're literally the same data.

For location-based accuracy, plot addresses are geocoded through OpenStreetMap's Nominatim API, and the resulting coordinates feed both the map preview and the sunlight engine. The sunlight simulation combines Sunrise-Sunset.org, Open-Meteo, and the suncalc library to compute real sun azimuth and altitude, which drives an animated directional light and real cast shadows in the 3D scene rather than a scripted animation.

Cost estimation runs against a curated, sourced construction-cost dataset. Gemini's role there is strictly to reason over and phrase suggestions from that dataset — it's never allowed to generate a cost figure on its own.

Challenges I ran into

The biggest challenge was resisting the temptation to fake the parts of the original vision that don't have a genuine free API behind them yet — an AR walkthrough and resale-value prediction were both in the early plan, and both got cut, because building them convincingly would have meant either an expensive paid API or an AI just making numbers up. It was a hard cut to make, but a demo that can't survive a judge asking "what's actually powering this" isn't worth building.

The second real challenge was keeping the AI layer honest. It's very easy for an LLM to confidently produce a construction cost or a layout suggestion that sounds right but isn't grounded in anything — so a lot of the actual engineering effort went into constraining Gemini's role to reasoning over real geometry and real cost data, rather than generating either from scratch.

What I learned

The most useful realization was that "AI-powered" is more credible when the AI is doing less, not more — reasoning over real computed data, rather than generating outputs directly. The features that ended up feeling the most impressive in the demo (the sunlight simulation, the shared 2D/3D geometry) weren't the ones using the most AI — they were the ones backed by the most real math and real data, with AI used narrowly to explain and refine rather than invent.