House Design Tool

Inspiration

Every AI design tool today works like a vending machine: you describe what you want in a chat box, and a finished result drops out. That's backwards for spatial work. Nobody designs a home by describing it. They nudge a wall, stand in the kitchen, drag the sofa two feet, and look. We wanted the agent in the room with you, not on the other side of a chat log. WebMCP made that possible: if the page itself exposes its live state as tools, the human and the agent can finally work on the same object at the same time.

What it does

WebMCP Home Design is a 3D floorplan editor that registers 21 tools on document.modelContext. A human picks a shell (floors, then a template per floor), reshapes rooms, and furnishes by dragging, rotating, and resizing, while an agent in the browser reads the same live design and edits it through tools: placing furniture, moving walls, cutting doors, batching twenty edits in one call, even proposing three alternative layouts that ghost over the plan for the human to compare and apply. A simplified residential constraint engine (13 rules: door widths, bedroom egress, kitchen aisles, toilet clearances, furniture facing walls) referees both parties identically: every edit returns what changed and what it broke. Designs autosave locally, export as JSON, and travel as share links with the whole compressed design in the URL fragment. No server, no accounts.

How we built it

TypeScript end to end. The domain layer models rooms, shared walls, openings, and furniture in plan inches, with pure operations (clone in, result out) that both the UI and the agent tools call: one rulebook, two doors in. React Three Fiber renders the scene: procedural canvas-painted textures with bump and roughness maps, parametric furniture built from primitives (a resized sofa grows a third cushion), dollhouse-cut walls overhead and full walls in a street-view-style walkthrough. Zustand holds per-floor state with undo history; Zod schemas define tool inputs and compile to the JSON Schemas agents see. Everything is generated in code, with no model files and no fetched assets, so the app works fully offline.

Challenges we ran into

The hardest problems were about shared control. Coincident walls desynchronized until we rebuilt the model around one wall per partition. Agent calls serialize at roughly a second each in the browser, which pushed us to design apply_edits for single-round-trip furnishing. Grid snapping silently moved agent placements until every operation learned to echo where things actually landed. And a long tail of 3D truths: coplanar surfaces z-fight into flicker, room polygons run along wall centerlines so furniture sank 3 inches into walls, and an agent with no orientation guidance will happily face a wardrobe into a wall, which became both a smarter placement default and a new validation rule.

Accomplishments that we're proud of

The loop genuinely works both ways. An agent can validate a plan, fix a too-narrow door, furnish a bedroom, and then walk the human through the result with the camera; a human can drag a sofa and the agent's next get_layout reflects it. We're proud that refusals are as useful as successes (every rejected edit explains what would break and suggests a fix the grid can actually produce) and that 267 tests pin the whole thing down, from constraint rules to camera math to the persistence format.

What we learned

Tools-on-the-page is a different discipline from tools-on-a-server. The agent needs what a colleague needs: honest echoes of what actually happened, actionable refusals, bounds included in summaries so it doesn't ask twice, and documentation precise enough to reason about (our rotation docs went from "0 faces the bottom" to a full compass after watching agents guess wrong). We also learned that the referee matters more than either player: the constraint engine is what turns two editors sharing one document from chaos into collaboration.

What's next for House Design Tool

Furniture variants: extending propose_variants beyond wall moves so an agent can ghost three complete room arrangements, pre-validated, for the human to pick from. Stacked multi-floor 3D with stairs and alignment rules. Real collaboration transport (two humans plus an agent on one design). And a richer catalog with materials, lighting fixtures, and cost estimates, so the conversation can become "make it nicer for under $3,000."

Built With

• css
• html
• netlify
• react
• three.js
• typescript
• webmcp