Building Configurator

 

A practical research project exploring AI-assisted UI development workflows. The focus is on methods for generating, iterating and evaluating UI components with AI tools, with a structured feedback loop that converts user observations into tracked issues. The issues form a prioritised backlog from which developers decide how to handle each item.

The UI under test is a building property configurator for the EnerPlanET platform. It prepares building inputs for the ignis and BUEM energy simulation services.

Installing it in an application

The configurator publishes as @thd-spatial-ai/building-configurator, a React component that calls the EnerPlanET backend over a transport the host supplies. See Installing the component.

npm install @thd-spatial-ai/building-configurator

Running the code

npm install
npm run dev

npm run dev serves the demo application on bundled Loenen captures (PyLovo grid, City2TABULA envelopes and surfaces, ignis TABULA variants, BuEM demand), with no backend: a map of the area and the configurator on each building. A BuEM run answers with the building's stored result. npm run build:lib builds the package, which contains none of the demo or its data.

npm run capture-fixtures captures that data again from a running EnerPlanET dev stack, after a change in BuEM, ignis or City2TABULA. It needs FIXTURE_EMAIL and FIXTURE_PASSWORD for a dev account; BACKEND_URL (default http://localhost:8000/api) and REPOS_CONF (the EnerPlanET repos.conf, for version stamps) are optional. It creates a temporary model and deletes it when done.

Features

• Configure building geometry, envelope elements, and thermal parameters
• Visualise the building energy envelope and surface composition
• View simulated heating and cooling load profiles
• Step-by-step configuration workflow with live building snapshot

Contributing

See CONTRIBUTING.md for how to report bugs, request features, and submit pull requests.

Please read our Code of Conduct before participating.

AI Disclaimer

This project is itself an experiment in AI-assisted development. The concept, design decisions, and development methodology are the author's own. AI tools were used for implementation: the initial UI prototype was generated with Figma Make, and the majority of the code was written using Claude Code. The feedback pipeline, which captures user observations and converts them into GitHub issues, is part of the methodology being developed and tested here. All AI-generated output was reviewed, directed, and adapted by the author throughout.

Designed and developed by

Jay Ravani

Acknowledgments

This project is being developed in the context of the research project RENvolveIT (https://projekte.ffg.at/projekt/5127011). This research was funded by CETPartnership, the Clean Energy Transition Partnership under the 2023 joint call for research proposals, co-funded by the European Commission (GA N°101069750) and with the funding organizations detailed on https://cetpartnership.eu/funding-agencies-and-call-modules.