I Built a CAD Editor in the Browser, Then Taught an LLM to Use It

I asked my app: "How many doors and windows are there?"

The AI answered with the counts. Then it added something unprompted:

"Note: D3 is only 300 mm wide. This is likely a mis-detected door. Want me to check it?"

It was right. My system had turned a piece of geometry into a 30 cm door. No human had noticed it. The model read the data, saw a door narrower than a shoebox, and flagged it.

That moment was the payoff for a massive engineering challenge. I had to parse AutoCAD DWG files, reconstruct building models from thousands of random lines, build a 2D editor from scratch, and connect it to Claude.

Here is how I built it.

The Data Problem A DWG file does not contain walls. It contains lines. Everything interesting in this project happens in the space between those two sentences.

I followed two rules to handle these files:

  • Run the parser as a subprocess. If the 30-year-old parser crashes, it does not kill my server.
  • Never trust the file. DWG headers often lie about units. I ignore the header and look at the actual numbers to find the true scale.

The Extraction Pipeline I turned a soup of lines into a structured model:

  • Walls are centerlines.
  • Doors and windows snap to host walls.
  • Rooms are polygons with names and areas.

I used a simple trick for classification. I used substring matching for layer names. If a layer says "WAND" or "MAUER," the system knows it is a wall. If a layer has no name, the system uses geometry to guess.

The Editor I built the editor using a raw Canvas 2D context. To keep it fast, I used three layers:

  • Layer 1: The static grid and original lines.
  • Layer 2: The model (walls, rooms, doors).
  • Layer 3: The active cursor and previews.

This kept the frame rate at 60 FPS even with nearly 1,000 walls.

The AI Copilot I did not want a chatbot that just talks. I wanted an agent that works. I gave Claude thirteen tools to read and edit the model.

To keep it safe, I followed three rules:

  • One write path: The AI uses the exact same validated code as the manual UI. If the UI cannot save it, the AI cannot save it.
  • Recoverable errors: If the AI tries to place a door where it does not fit, the tool returns an error. The AI reads that error and tries a different spot.
  • An undo story: Every AI action is folded into a single transaction. If the AI makes a mistake, one press of Ctrl+Z fixes everything.

The Lessons

  • Geometry bugs hide in the shapes you do not test. Rectangular buildings are easy. L-shaped buildings break everything.
  • Fuzz your tools. The LLM is a fuzzer. Meet it with strict code boundaries.
  • The hard part is not the AI. It is the data foundation. Because the geometry was solid, the AI integration took days instead of weeks.

Source: https://dev.to/arif/i-built-a-cad-editor-in-the-browser-then-taught-an-llm-to-use-it-1l92