RoomCraft

Rearrange your room with an agent via WebMCP.

Watch the demo video (1:39, narrated)

TL;DR

Tell RoomCraft what is happening. It changes the room with you.

  • “Eight people are coming over.” The agent adds chairs and rearranges the room. Every piece moves together on the live 3D canvas.
  • “My mom uses a wheelchair.” The agent checks a 90 cm route between the doors, finds the tight spots, and moves what is blocking them. Red paths turn green.
  • Drag the sofa in front of the balcony door. Ask, “What do you think?” The agent sees what you changed, tells you the door is blocked, and fixes it when you ask.
  • It is using the room, not looking at a screenshot. WebMCP lets the agent read the live layout, move real objects, measure gaps, and check clearance inside the page.

That is RoomCraft: you arrange the room by hand, by conversation, or both.

RoomCraft turns a living room into an eight-person dining room, then verifies a green 90 cm wheelchair route.


Try it live

  • Open roomcraft.nihsett.workers.dev in ChatGPT's in-app browser (or Chrome 149+ with chrome://flags/#enable-webmcp-testing).
  • Wait for WebMCP connected in the header.
  • Paste these in order and watch the room react:
  1. “I’m hosting a dinner party for eight people tonight. Can you rearrange the room?”
  2. “Actually, my mom is coming and she uses a wheelchair. Can you make sure she can get around?”
  3. Drag the sofa in front of the balcony door, then ask: “What do you think?”
  4. “Fix it.” — or just keep improvising: “Get rid of the sofa,” “add more chairs,” “make the room bigger.” Anything goes.

Watch the activity panel on the right log every real WebMCP call as it happens.

Source: https://github.com/nihsett/roomcraft

What we built

RoomCraft is a complete 3D room planner in the browser. A person can orbit the room, select furniture, drag it, rotate it, and remove it. The agent gets 18 always-available WebMCP tools plus four controls for whichever object the person selects.

The number is not the point. The behavior is:

  • One shared room. Pointer gestures and WebMCP tools use the same Zustand state.
  • No half-finished rearrangements. RoomCraft validates every object in a batch before moving any of them.
  • The agent keeps up. Human drags and edits are journaled and returned with the next tool result.
  • The room has meaning. The agent receives facing direction, facing target, wall placement, and layout warnings—not just raw coordinates.
  • Constraints show up in the room. Clearance checks draw green and red routes directly across the 3D floor.

How we used WebMCP

  • 18 tools on the live room. Read, add, move, rotate, remove, save — every call hits the real state, never a screenshot.
  • Intent, not coordinates. place_facing, place_against_wall — the agent says what it wants, the engine finds valid spots.
  • Atomic batches. Multi-piece rearrangements validate fully first, or nothing moves.
  • Meaning, not raw numbers. Tool results carry facing, wall placement, and layout warnings.
  • Visible constraints. check_clearance draws the real 90 cm route on the floor — red blocked, green clear.
  • You can interrupt anytime. Your drags since the last call ride back as human_actions_since_last_call.

One state. Your mouse, its tools.

How it works

You see the room as a live 3D scene. The agent reads the same room as numbers and constraints. Both change one shared state — you with your mouse, the agent via WebMCP tools.

The picture is the whole point: there is one measured room, not two copies. When you drag the sofa, the agent’s next read already shows the new position. When the agent rearranges for eight guests, the room you are looking at is the room it changed.

RoomCraft is a React and TypeScript single-page app rendered with React Three Fiber. It has no backend. Layouts can be saved in the browser.

The agent asks, calls real WebMCP tools, the room changes, and every response returns the updated state plus your latest edits.

Built with

  • WebMCP — the agent's hands on the live room: 18 tools, zero screenshots.
  • React Three Fiber — the live 3D canvas.
  • Zustand — one shared state for human and agent.
  • TypeScript + Vite — fast, typed, no backend.
  • Cloudflare Workers — where the live link lives.

What's next

  • Your actual floor plan. Upload it. RoomCraft rebuilds the room.
  • Real furniture catalogs. Real sizes. Real prices. Agent picks what fits.
  • More room types. Bedrooms, offices, kitchens — the same shared-state magic.

The loop stays: say it, drag it, done.

Built With

Share this project:

Updates