AgenticRoom

Inspiration

Planning a room gets messy fast. Products live in one tab, measurements in another, and the budget usually ends up in a note or spreadsheet. By the time the pieces come together, the sofa may not fit or the total may no longer make sense.

AgenticRoom started with a simple idea: let the person and the agent work on the same room instead of passing suggestions back and forth.

What it does

AgenticRoom puts a furniture catalog, an editable 3D room, budget tracking, and a shopping cart in one workspace. Start with the room you have, describe the room you want, or share an inspiration image with a compatible browser agent.

The agent can inspect what is already in the room, search the catalog, place and move furniture, compare cheaper alternatives, check the layout, change the finishes, track the budget, add selected products to the cart, and save the design.

Nothing happens in a hidden result. Every change appears on the same canvas and remains editable by the person. You can let the agent handle a full furnishing pass, step in to move one chair yourself, then ask it to finish the room without losing context.

Why WebMCP fits

A room plan is a chain of connected decisions. A sofa changes the remaining space and budget. A window limits placement. Replacing an expensive item should preserve its position while changing the total. Free-form recommendations alone are not enough.

WebMCP gives the browser agent precise actions for those decisions. It can ask what fits, search within a price range, place a product in a valid zone, validate the layout, or add the selected marketplace pieces to the cart.

The person makes the taste calls. The agent handles the searching, placement, and arithmetic. Both see the same room and the same result as it changes.

How I built it

I built AgenticRoom as a browser-only Next.js application using React, TypeScript, React Three Fiber, Three.js, and Zustand.

I deliberately kept one source of truth: the human interface and the WebMCP tools call the same Zustand store actions and the same deterministic domain rules. The page registers 31 WebMCP tools through the browser's Model Context API: 11 read tools and 20 mutation tools.

Those rules check furniture footprints, placement zones, doors and windows, locks, stock, prices, budgets, room resizing, saved designs, finishes, and cart behavior. If an action is invalid, it returns a structured error and leaves the room unchanged.

There is no backend, account requirement, payment processing, API key, or remote runtime data. The furniture catalog and room rules are hand-authored and run entirely in the browser.

Features

• Shared human-and-agent 3D room planning
• Image-inspired room direction
• Furniture search by category, style, color, material, price, dimensions, and stock
• Layout and opening-clearance checks
• Budget-aware furnishing and cheaper alternatives
• Editable room dimensions, openings, and finishes
• Integrated furniture catalog and shopping cart
• Saved room designs
• Privacy-conscious agent activity feed
• 31 structured WebMCP tools for reliable agent actions

Testing

The project has 135 deterministic domain tests covering placement, validation, pricing, alternatives, resizing, appearance, saved designs, and cart behavior.

I also tested the deployed app in ChatGPT's in-app browser with a connected browser agent. No credentials are required. The README includes local setup instructions and reproducible WebMCP workflows.

Built With

• next.js
• openai-codex
• react
• react-three-fiber
• three.js
• typescript
• webmcp
• zustand