SketchUp Bill of Materials - BOM

NOTE: This page is very much under construction. We’ll do our best to find time to complete it. Sorry :(

While drawing models of building structures in SketchUp, understanding what is the cost of the choices you make, typically requires one or more manual steps. That is not something you do during you draw but rather it is an after thought. It is a hassle to get the cost breakdown or summary. So we decided to create a web UI, backend and SketchUp Plugin that automates bill of materials (BOM) creation from SketchUp models.

The challenge

We had to sort out:

• how to match a drawn shape into a product type
• how to get material information
• how to choose which products to include in the bill of materials and which to leave out
• how to present the bill of materials to the user
• how to let the user to choose what material sources to use
• how to allow user to build custom material sources and to share them with other users
• how to streamline the process of turning the BOM into a shopping list

How we built it

Components of the puzzle:

• AI Tools:

  • Claude Code with various models
  • Claude Design & Google Sketch for UI design

• SketchUp Plugin:

  • Listens to the changes in the model
  • Sends events to the backend API about the changes
  • Receives BOM data
  • Displays a summary of the BOM in a SketchUp Window

• BOM Backend:

  • Node application
  • REST API, exposed OpenAPI.yaml
  • Storage, authentication, authorization from Supabase

• BOM Frondend:

  • React app
  • Live connection with active SketchUp model
  • Shows details of each model as detectect parts, their price details, measures etc.
  • Possibility to create custom material definitions and pricing info
  • Management UI for admins

• Envs, Runtime & QA

  • Source code on GitHub
  • Container: Multi-stage Docker on node:24-alpine
  • Issues as GitHub issues
  • AI Agent integration with GitHub Issues
  • CI/CD: GitHub Actions
  • Hosting Fly.io (production, staging & PR envs)
  • Local dev: OrbStack (Docker)
  • Database in Supabase
  • Tests: Vitest & Playwright E2E
  • Automatic creation of documentation site based on specs and automation tests

Results

Seeing the BOM changing live as you draw is actully pretty cool and addictive. You can toggle material sources and compare the costs. You can generate a shopping list and take that on the go using your mobile phone or by just printing your shopping list in the old fashion way.

This projects is actually an unlimited source of new ideas and we are submitting dozens of feature tickets for the AI to turn into PRs! Looking forward in publishing the ready product with details!