AI Tutorial - 9 Steps to Build a BIM Web App with Lovable

What is Lovable?

Lovable is a Swedish company founded in 2023 and launched in late 2024.

Lovable is an AI-powered platform that enables vibe coding. You can build websites and web apps using plain-language prompts instead of writing code.

It's good to quickly prototype an application. Then, you can further develop the code by chatting or moving to a more standard development workflow.

In just seven months, it has achieved $75M in annual recurring revenues and has over 30k paying users. It's one of the fastest-growing applications in the world.

 Try Lovable (get 10 free credits): https://lovable.dev/invite/4c6677d9-f223-44a6-8128-16d8a16b0011

Watch the video:

Prototype: Building a Lean BIM Execution Plan Generator

You can try to build anything using Lovable. In this tutorial, we'll experiment with a BIM-specific workflow.

A BIM Execution Plan (BEP) is a document that defines how BIM will be used on a project, detailing processes, responsibilities, tools, and data standards for all stakeholders.

A problem is that most BIM execution plans out there are very complex.

They often need to comply with standards such as ISO 19650. That's good for massive projects, but it can create confusion on smaller projects.

Therefore, there is a need for a lean BIM execution plan that can fit in a 10-page document.

In this post, we'll attempt to build a web application to help firms generate a BIM execution plan.

Step 1 - Write Down the Goals of Your Project

Before prompting in Lovable, you should clearly define what you want. Write down a list of what you hope to accomplish with your app. For our lean BIM execution plan, I quickly wrote this:

I want to build a web application to generate a lean BIM execution plan. The goal isn't to follow international standards such as ISO 19650, but to generate a simple document for small to medium-sized projects. This is mostly aimed at architecture projects, involving the AEC professionals, consultants, and building owners.

Features:

Users can log in to an account, create projects, and invite teammates.

When creating a project, users are presented with a form-like setup with many pages, where they fill out information in a pleasant and modern UI/UX.

At the end of the process, users can copy all information to paste it inside of a document. Or they can click on "Create PDF" to generate a PDF document with all information.

What to Include in the BEP (BIM Execution Plan)

- Project overview (name, location, client, etc). Time line of the big steps: project start, DD, etc.
- Team & Responsibilities (List of companies, BIM responsible person for each team, contact info for each). Have a pleasant interface to add new companies/users.
- Software used for each team. Use a dropdown menu for the software with a few picks (Revit, Tekla, etc) and the version used (2024,2025, web app, non-applicable, etc)
- Modeling Scope: general LOD for each discipline (not complex matrix). Specify if some elements don't use the general LOD scope. What to model and not to model. What units are used? how and where the levels ,grid,s and datum elements are located (separate datum model, site model, arch model, etc)

- File naming conventions (if applicable to the project) such as prefix, discipline code if applicable, etc
- Collaboration and CDE. What platform is used? ACC most of the time, in that case how are Revit files linked? If using shared or consumed link, how often are the Revit files published and shared? Who creates the project on ACC, who is responsible?

- Geolocation and coordinates: how are the coordinates set? Is the project georeferenced? Where the origins located?

- Model check, clash, and coordination: What process is used for clash and quality control

- Output and deliverables: What should be delivered when?

As you can see, the text above isn't perfect. That's fine, because we will refine it using ChatGPT.

Step 2 - Refine Your Requirements with ChatGPT

You should be as clear as you can when writing down the goals of your projects. However, that's another task AI can help with.

We'll paste the goals and requirements of our project in ChatGPT, along with the following instructions. We ask ChatGPT to research the latest trends with Lovable, because it has a knowledge cutoff date and might give you outdated information. Also, we ask ChatGPT to ask us 5 good questions to help refine our requirements.

I am trying to build a web app using Lovable, a vibe-coding platform. I want you to help refine my requirements and clarify the writing so I can feed it to Lovable. Can you check what I wrote and improve it? Make sure to research the latest trends and up-to-date information about Lovable and how it is being used. In addition, as me 5 questions that would help you refine your research. Here is my requirements: [paste project requirement and goals here]

We paste this prompt into ChatGPT:

ChatGPT gives you a refined version of your requirements.

Then, it asks questions on how it could improve the process:

Make sure to answer these questions. 

Step 3 - Create a Mega-Prompt Using ChatGPT

Now, the project requirements should be crystal clear. But you still need one mega prompt inside ChatGPT. Ask this:

ChatGPT will give you the mega-prompt.

Step 4 - Paste the Mega-Prompt in Lovable

Create a free Lovable account. You get five free credits. Each prompt costs one credit.

Alright, now for the magic part. Paste the mega-prompt in Lovable and get started.

Step 5 - Wait and Explore the Design

Lovable will acknowledge your request and summarize what it will try to create:

Now, you need to be patient. Lovable will create your app in the background.

After a few minutes, you will have your prototype ready! Play around with it and enjoy.

Important: there is no backend yet! That means there is no database to store user data, save projects, etc. If you refresh your page, you'll lose the information. In the final steps, you can connect Lovable to Supabase and have a project where information is saved.

Step 6 - Prompt Again to Fix Issues

You will encounter things you dislike that don't make sense. You can ask Lovable to fix them for you with another prompt. However, remember each prompt costs one credit, so you'll eventually run out of your free credits.

Step 7 - Add Your Branding

You can ask for specific color schemes and fonts. You can also paste images. In this case, we paste the BIM Pure branding guide and a gradient background image to use on the website.

 After a few prompts, we get this result:

Step 8 - Try to Fix Automatically

Sometimes, you'll get this warning that the build is unsuccessful:

Click on Try to fix, and Lovable will attempt to auto-solve the issue.

Step 9 - Publish Your App

After playing around and sending many prompts, you might get a good enough minimum viable product.

Do you want other users to try the app? On the top right of Lovable, you can click on "Publish." However, that means your app will be publicly available. Don't publish if this is for a confidential project.

This is the link to the app developed in this post: https://bep-craft-guide.lovable.app

Important: This is a prototype for testing purposes only. Don't use it for your actual BIM Execution Plans.

Next step: Connect to Supabase

If you want to convert this prototype to a real website, you can connect your app to Supabase. This will provide an actual back end, where users can create accounts and save their projects. However, if you want to build a serious application, guidance from an actual web developer is advised.

If you enjoy this, you'll love our newsletter Kickstart 5, which sends a list of 5 interesting news, tutorials, and apps in the world of BIM, AEC tech, and AI. Get on the list now: