ArchMorph

Browser-based architecture studio where a human and an AI agent design a building together on the same live canvas.

Comment 1

Inspiration

I have a dream of building a house for my family and being involved in designing it myself.

For almost a year, I tried turning that dream into a floor plan using pen and paper and later Figma. I could imagine the house in my mind, but I was rarely satisfied with the result. Without architectural training, it was difficult to understand room relationships, circulation, dimensions, setbacks, and whether the design would actually feel comfortable.

The biggest limitation was that a flat drawing could not show me what the finished house would feel like. I wanted to see it from the outside, walk through it from the inside, find problems, and keep improving it without needing years of training just to explore an idea.

When I discovered the WebMCP Challenge, I realized I could build the tool I had been wishing for: an architecture studio where a person and an AI agent work on the same live building. That idea became ArchMorph.

ArchMorph is intended for people who want to explore their future home visually before taking the design to a professional architect. It does not replace architects or engineers; it makes the early stage of imagining, testing, and communicating a home much more accessible.

What it does

ArchMorph is a Human + Agent Architecture Studio for designing residential buildings in the browser.

A user can configure a plot, define its orientation and setbacks, and create a house using rooms, walls, doors, windows, stairs, floors, balconies, terraces, boundary walls, gates, and façade features.

The design can be experienced through three connected views:

  • Floor Plan for precise 2D planning and editing
  • 3D Orbit for inspecting the building from different exterior angles
  • Walk Mode for exploring the house from the inside

ArchMorph also calculates architectural measurements in real time, including room areas, gross covered area, open-site area, plot coverage, and floor-area ratio.

For example:

$$ \text{Floor Area Ratio} = \frac{\text{Total Gross Covered Area}}{\text{Plot Area}} $$

The application can inspect circulation and identify early layout problems such as disconnected rooms, missing exterior access, invalid openings, overlapping geometry, and incorrect stair connections. These checks are meant to support early design decisions, not provide final building-code or structural certification.

What makes ArchMorph WebMCP-native is that an AI agent can directly understand and operate the same project through 57 typed architectural tools. The agent can inspect the plot and existing design, create or modify elements, calculate measurements, validate the layout, control the 3D view, enter Walk Mode, capture snapshots, and export the project.

The human and the agent are not working on separate versions. They share one live model, and every change made by either side appears immediately on the same canvas.

How we built it

I built ArchMorph using Codex as my main development partner. I used it to help shape the product, research architectural workflows, plan the system, implement the interface, debug geometry, design the WebMCP tools, test interactions, and refine the final experience.

The foundation of ArchMorph is one canonical project model. The plot, floors, rooms, walls, openings, stairs, exterior elements, measurements, and validation results all come from the same structured state.

The 2D plan and 3D building are different representations of that state. When a room is moved or resized, its walls, hosted doors and windows, measurements, validation results, floor-plan geometry, and 3D model update together.

Each architectural element has a stable ID. This allows the agent to inspect a particular room, wall, door, window, or staircase and make precise changes to the correct object.

The WebMCP layer is organized around clear architectural operations:

  • Inspect the project, plot, floors, rooms, walls, openings, circulation, and exterior
  • Design rooms, walls, doors, windows, stairs, floors, and façade elements
  • Measure and validate areas, distances, coverage, access, and layout quality
  • Present and export the design through 2D, 3D, Walk Mode, snapshots, SVG, and structured JSON

Human edits and agent actions pass through the same operation system. This keeps the model synchronized and makes changes visible and understandable. Projects are also autosaved locally in the browser so users can continue working without creating an account.

Challenges we ran into

The hardest challenge was maintaining one reliable source of truth across the visual editor, WebMCP tools, calculations, layout checks, 2D plan, and 3D model.

Architectural elements are strongly connected. Moving one room can affect several walls, openings, measurements, circulation paths, and both visual views. Doors and windows must remain attached to valid host walls, while staircases must connect the correct floors and respond to changes in storey height.

Another challenge was making the WebMCP tools precise enough for an agent to use safely. The tools needed typed inputs, real measurement units, stable element IDs, useful inspection results, and clear errors. Invalid geometry had to be rejected without leaving the rest of the project in a broken state.

I also wanted agent actions to remain visible. ArchMorph is designed around collaboration, so the agent should not silently modify a hidden data model. When it changes something, the result must appear on the human’s canvas, update the measurements, and remain available in the project history.

Finally, balancing capability with simplicity was difficult. Architecture software can quickly become overwhelming, so I had to decide which controls should remain visible, which operations belonged in the inspector, and which details the agent could manage more efficiently.

Accomplishments that we're proud of

I am proud that ArchMorph became more than a visual prototype. It is a working architecture environment where a user can create a measured floor plan, generate the corresponding 3D building, walk through it, inspect layout problems, and continue editing the same design.

I am especially proud of the WebMCP integration. The agent can inspect the existing project before acting, reason about individual architectural elements, perform precise operations, and show the outcome directly in the live interface.

Building 57 connected WebMCP tools during the hackathon was a major accomplishment. Together, they allow an agent to participate across the complete early design workflow rather than performing a single isolated demo action.

Most personally, I am proud that I can now use ArchMorph to explore ideas for my own family home—the same need that originally inspired the project.

What we learned

The most important thing I learned is that WebMCP can turn a website from a human-only interface into a shared working environment for humans and agents.

I also learned that useful agent integration is not simply about exposing many tools. An agent needs to inspect before acting, identify objects reliably, understand exact units, receive structured results, and make changes that the human can immediately see and verify.

Building ArchMorph also gave me a much deeper appreciation for the complexity of architecture software. A simple-looking floor plan contains many connected systems: geometry, circulation, openings, measurements, floors, stairs, exterior features, and human experience.

Codex helped me move much faster across product thinking, design, implementation, debugging, and testing. However, I also learned that the human still provides the purpose, judgment, creativity, and final decisions. That became the central idea behind ArchMorph: the best result comes from a human and an agent contributing different strengths to the same project.

What's next for ArchMorph

The next step is to make the collaboration more conversational. A user should be able to describe their family size, plot, lifestyle, privacy needs, climate, and budget, then ask an agent to create a thoughtful starting design through ArchMorph’s existing tools.

I also plan to add deeper analysis for daylight, ventilation, accessibility, privacy, climate, and energy use. Location-aware planning guidance could help users make better early decisions while clearly distinguishing guidance from professional certification.

Other improvements will include richer interiors, furniture layouts, more realistic materials and lighting, stronger multi-floor navigation, real-time family collaboration, and professional CAD or BIM export options.

The long-term goal is for ArchMorph to become a bridge between homeowners and architects. People should be able to explore their ideas, understand what they truly need, and bring a clear, visual, and measurable starting point to a professional.

Designing a future home should begin with imagination, not confusion. ArchMorph is my attempt to make that imagination something people can see, experience, and improve together with an AI agent.

Built With

Share this project:

Updates

Submission history