RoomCraft

Inspiration

Most room-planning tools make you do all the work manually. Image generators have the opposite problem: they can show you a nice-looking room, but the result is not an actual plan. You cannot reliably move the bed, check whether the door is blocked, or ask the system to fit a piece of furniture into a specific space.

We built RoomCraft around a simple idea: the agent should edit the room itself, not generate an image of it. The person still decides what the room should feel like. The agent handles measurements, placement, and repetitive changes.

What it does

RoomCraft lets a user and an agent work together to design a 2D room layout through WebMCP tools.

You can ask the agent to resize the room, add a door or window, find furniture, create a custom item from provided details, and place everything in the room. The canvas updates as the agent works, so you can see exactly what changed.

RoomCraft also checks whether the layout works. It flags furniture that overlaps, extends outside the room, blocks a door, or leaves too little walking space. You can then move things yourself, ask the agent to fix them, save a layout variant, or undo the last change.

The important distinction is that the agent edits an actual floor plan. It is not generating a room image that looks right but cannot be meaningfully edited.

How we built it

We built RoomCraft as a visual editor and connected the agent directly to it through WebMCP.

The app uses Next.js, React, TypeScript, Tailwind CSS, and Konva. Instead of giving the agent a screenshot and asking it to guess, we expose the room’s dimensions, doors, windows, furniture, positions, and constraints through WebMCP tools.

The agent can call tools to inspect the room, change it, search for furniture, add custom items, place objects, and validate the result. Those changes go through the same update and history system as direct user edits. When the agent places a bed, it appears immediately on the canvas. The user can move it, inspect the result, fix it, or undo it.

The layout checks are deterministic, so problems like overlaps, blocked doors, and insufficient clearance are checked by RoomCraft rather than left entirely to the agent.

Challenges we ran into

Getting agents to discover and call the WebMCP tools was one of our main challenges. Registering the tools on the page was not enough. Agents did not always know that the website supported WebMCP or where to find the tool definitions.

We addressed this by documenting the tools and room conventions in /llms.txt, and by explicitly mentioning WebMCP support in the agent prompt. We also had to make the tool results clear enough for an agent to understand what changed and what to do next.

Accomplishments that we're proud of

We built an interactive webpage that an agent can work with without taking control of the browser. It does not need to pan, scroll, or move the pointer around just to make a change. It can use the WebMCP tools while the user keeps working in the editor.

It also feels like something we would actually use ourselves. That is the part we are most proud of.

What we learned

An agent does not need to use a webpage the same way a person does. For RoomCraft, having direct tools for changing the room works better than making the agent click through every control.

We also learned that registering tools is only half the job. Agents need to be told that the tools exist and given enough context to use them, which is why the prompt and llms.txt ended up mattering.

What's next for RoomCraft

RoomCraft currently supports rectangular rooms, USD prices, and projects stored locally in the browser.

Next steps are:

Support room shapes beyond rectangles, Add more currency options, Add project saving, Add export, Add project sharing

Built With

• cloudflare
• konva
• nextjs
• tailwindcss
• webmcp