FloorPlan

Inspiration

I was exploring WebMCP and trying to find a use case where it does more than just help an agent fill a form or click around a website. Floor planning felt like a good fit because it is very visual. A person can easily drag rooms, doors, windows and furniture, but an agent would normally have to understand the editor UI and perform a lot of small browser actions. The idea was to let the person use the floor-plan editor normally, while giving the agent higher-level actions for working on the same plan.

What it does

FloorPlan is a simple floor-plan editor that both a person and an AI agent can use. A person can create and edit a plan manually by moving rooms, doors, windows, furniture and outdoor areas. Through WebMCP, the agent can read the current plan and perform larger actions such as creating a new layout from requirements, optimizing an existing plan, or generating another variation. One of the main demos is asking: I have 1,800 sq ft. I need 3 bedrooms, a maid room, storage, laundry, a closed kitchen, garden and parking. The agent creates another floor plan below the one the user already made. The user can then ask for another variation, edit the generated plan manually, and ask the agent to continue from those edits.

How we built it

I built the app with React, TypeScript, Vite and Zustand. The important part is that the UI and the WebMCP tools use the same floor-plan state. If the user moves something manually, the agent sees that updated state. If the agent changes the plan, the same editor updates immediately. I registered tools using document.modelContext.registerTool().

Some of the main tools are:

• get_floorplan_state
• create_floorplan_from_requirements
• generate_floorplan_variations
• optimize_floorplan
• replace_floorplan
• add_architectural_element I tried to keep the tools focused on floor-planning actions instead of browser actions. For example, the agent can ask the app to create a floor plan from requirements instead of trying to click the Room button and drag each room itself.

Challenges we ran into

The main challenge was deciding what should be a WebMCP tool. At first it was tempting to expose lots of small actions such as moving individual objects. But that starts to look like another version of browser automation. The more useful approach was to expose actions that match what the user actually wants, such as creating a complete plan or generating another layout with different priorities. I also had to make sure that manual edits and agent edits stayed in sync, so both now go through the same shared state.

Accomplishments that we're proud of

We are especially proud that WebMCP is not just an additional feature in FloorPlan; it fundamentally changes how the application can be used. A human can manually design a floor plan, and an agent can immediately understand and continue from that exact state. The agent can generate a complete floor plan from requirements such as:

• 1,800 sq ft available area
• 3 bedrooms
• maid room
• laundry room
• storage room
• closed kitchen
• garden
• car parking It can then generate multiple alternatives with different priorities such as larger living space, better bedroom privacy or more efficient circulation. The human can modify any generated option and the agent can continue working from those changes.

What we learned

The biggest lesson was that WebMCP is most powerful when websites expose domain outcomes instead of UI controls. For FloorPlan, useful agent actions are:

• create an efficient three-bedroom floor plan
• optimize a layout for daylight
• generate a privacy-first alternative
• add a window to the master bedroom rather than:
• click the Room button
• drag an object
• move something 100 pixels We also learned that genuine human-agent collaboration depends on shared state. The experience becomes much more natural when the person and agent are editing the exact same artifact.

What's next for FloorPlan

Future improvements could include:

• more advanced geometry and constraint solving
• irregular plot shapes
• multiple floors
• richer room-adjacency optimization
• side-by-side plan comparison
• undo/redo
• saved projects
• PDF and image export
• accessibility analysis
• daylight analysis
• optional 3D visualization
• configurable building-code rules FloorPlan is currently intended as a conceptual planning tool rather than construction documentation.

Built With

• css
• html
• javascript
• react
• svg
• typescript
• vercel
• vite
• webmcp
• zustand