How Engineers Can Build Web Apps in Minutes Using AI

When I first started automating engineering tasks, it was very challenging. I remember spending long evenings and weekends just to create simple automation using MATLAB or Visual Basic. It was hard to find the extra time because I was already busy with my regular engineering work.

Fortunately, AI-powered platforms now offer a solution to this common struggle. These tools let anyone, regardless of their coding background, build complete web-based tools just by explaining their ideas in simple language. However, these tools are built for general web development and are not designed for engineering tasks.

This is where the VIKTOR AI Builder fills the gap. VIKTOR is already a great low-code platform that lets engineers build custom tools using simple Python. The AI Builder adds an AI agent on top of this. You just type your engineering idea, and the AI Builder immediately generates the Python code for you. This means you don’t need complicated software or advanced coding skills to quickly create useful tools.

In this blog, I'll demonstrate how quickly and easily you can automate common engineering tasks using the VIKTOR AI Builder. You’ll see firsthand how tasks that used to take me days can now be done in minutes. The following tasks will be covered:

• Check punching shear and one-way shear in footings
• Calculate footing bearing pressure under eccentric loads
• Create apps for data analytics and post-processing
• Turn images into interactive web apps
• Convert your existing workflow to VIKTOR web apps

Let’s explore how the VIKTOR AI Builder makes engineering automation simple and accessible!

Hands-on the AI Builder

Before we dive into the examples, it’s crucial to remember that the engineer must always be in the loop. You need to review the output of any AI agent with solid engineering knowledge. For VIKTOR, this transparency was the highest priority and an integral part of their development criteria.

Therefore, when you combine your engineering expertise with the AI Builder, it becomes a powerful tool. Features like live previews, easy editing, and safe version control help you see your app develop in real-time. You can make changes on the spot, and when you're satisfied, publish your app with just one click. You can check the complete list of features in the docs. Now, let’s look at some practical examples of how you can use the AI Builder for common engineering tasks.

Check punching shear and one-way shear in footings

Let’s start with a use case most structural engineers deal with: calculating punching shear and one-way shear of a concrete section. This model behind the App BuilderAI Builder has a lot of built-in knowledge regarding most structural standards, such as ACI 318, so the agent will be able to create a strong starting point for a web application that performs these calculations.

To build this app, you can use the following prompt that clearly states what we are looking for:

1Create a web application that checks footing shear in accordance with ACI 318. The app must verify both one way shear and two-way shear for an isolated rectangular footing that supports a concrete column. 
2**Requirements** 
3- Accept input for 
4    - Footing length and width, 
5    - Column length and width, 
6    - Footing thickness, 
7    - Effective reinforcement depth _d_, 
8    - Concrete compressive strength _f’c_, 
9    - Factored axial column load, 
10    - Factored moments about both axes (optional, for completeness). 
11- One-way shear check
12    - Evaluate shear along a critical section located a distance _d_ from each column face, on all four sides, 
13    - Compare the demand to the design shear capacity prescribed by ACI 318, 
14    - State “Pass” or “Fail” with the governing ratio. 
15- Two-way shear (punching) check 
16    - Evaluate shear around a perimeter at a distance _d / 2_ from the column faces, 
17    - Compare the demand to the punching shear capacity prescribed by ACI 318, 
18    - State “Pass” or “Fail” with the governing ratio. 

The AI Builder will use the VIKTOR SDK input blocks for letting users input data and a versatile set of results and visualization blocks, resulting in a complete application.

The best part is that this is not a black box; you can check the code, make changes yourself, or ask the AI Builder to make the changes for you! If you are not sure about a part of the code, you can just ask about it in the chat, and the AI Builder will explain it in detail for you.

Calculate footing bearing pressure under eccentric loads

Similar to the punching shear demo, we can take a step further and create an application that gets the most out of our results, like making beautiful and clear 3D visualizations of the results. A nice example will be the bearing pressure of a footing under eccentric loads. We can use a prompt like

1*- Display a single plot of the pressure distribution for each direction using a PlotlyView. *

And even for AI, making these kinds of engineering apps at the first attempt is difficult, so the AI Builder has a convenient button called "Fix with VIKTOR.AI", or you can debug the app yourself. The end result is a complete application that takes advantage of VIKTOR PlotlyView.

Create apps for data analytics and post-processing

Not only is the AI Builder strong at making 3D engineering visualizations, but we can also take advantage of VIKTOR's FileField to allow users to upload data to our application. power spectral density PSD analysis, and analysis and show vibration levels along each acceleration axis.

Let's make the following app for reading an Excel file filled with acceleration data. We can tell the App BuilderAI Builder the formatting of the Excel file, including the column names, and then the agent will handle everything!

1
2Create a web application that reads an uploaded XLSX file, computes power spectral densities, and plots both PSD curves and raw time-series data. 
3
4
5Input 
6
7• User uploads one XLSX file, 
8• The first row contains the headers TimeStamp, acc1, acc2, acc3, acc4,
9• The time step dt equals the difference between the first two TimeStamp values, 
10• The sampling frequency fs equals one divided by dt. 
11
12Processing 
13
141. For every acceleration column keep numeric data only, 
152. Use scipy.signal.periodogram with fs to obtain one frequency array and four PSD arrays, 
163. Store the time vector, the four acceleration arrays, the frequency array, and the PSD arrays in a results dictionary. 
17
18Output 
19
20– Plot the four PSD curves together in one figure, 
21– Axes: log–log scale, X = Frequency, Hz, Y = PSD, g² / Hz, 
22– Add a legend identifying acc1, acc2, acc3, acc4, 
23– Build a 3-row × 1-column subplot layout with `plotly.subplots.make_subplots(rows=3, cols=1, shared_xaxes=True)`,   
24– Row 1: overlay acc1 and acc2, Row 2: acc3, Row 3: acc4,   
25– X-axis (shared) = Time, s, Y-axes = Acceleration, g,   
26– Add titles for each subplot and a single legend,   
27– Return with `vkt.PlotlyResult(fig)`. 
28
29Make it look clean, no overlapping titles or legends 

Turn images into interactive web apps

The AI Builder also supports input images. This is super useful because it makes it easy to prompt the model. You can pass an image, hand calcs, diagrams, and the model will process the image and understand it. There are multiple use cases, for example, you can upload an image with some calculations from Mathcad that you want to convert to an app, or you can even let the AI Builder verify your calculations.

Let's test this capability with some typical wind load pressure calculation. Here's a nice prompt for it:

1You are a senior structural engineer who converts engineering calculations to web applications, you understand the content of the attached image, and you will create an application where the inputs have clear names, and the default parameters match those in the image so the app can be validated. 

Convert your existing workflow to VIKTOR web apps

Not only can you create applications from scratch in minutes, but you can convert your existing automations into VIKTOR apps, and then you can deploy them and share them with your colleagues! This will greatly improve collaboration within your company. So let's say we have a signal generator app that creates sinusoidal waves in PyQt5. You can give the user a prompt like this:

1Convert the PyQt5 sine-wave demo below to a web app. 
2**Requirements**
31. Replace the Matplotlib plot with a `PlotlyView`. 
42. Add gridlines, axis labels, legend, and a centered title. 
53. Expose three inputs—amplitude, frequency, and phase—as `NumberField`s: 
6   - amplitude : 0 to 10, step 0.1, default 1.0
7   - frequency : 0.1 to 10, step 0.1, default 1.0 
8   - phase     : –π to +π, step np.pi/20, default 0.0   

and then just paste the code below the prompt like:

1import sys, numpy as np 
2from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QLabel, QSlider 
3from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas 
4from matplotlib.figure import Figure 
5
6class SineApp(QMainWindow): 
7    def __init__(self)
8        super().__init__() 
9        self.setWindowTitle("Sine Wave") 
10        self.canvas = FigureCanvas(Figure(figsize=(6, 4))) 
11        self.ax = self.canvas.figure.subplots() 
12        # Rest of the code ... 

The AI Builder will understand the code and will make an equivalent VIKTOR app in a couple of seconds! Or you can ask it to make changes or add new features.

Best practices

• Always double-check the units in your web application. From my experience with the AI Builder, I've noticed it can sometimes struggle a bit with unit conversions, like changing kN*m to N*mm. While this seems simple to us, it's not always easy for LLMs, especially in complex engineering apps.

• The OCR (Optical Character Recognition) isn't perfect. Although the LLMs can detect most equations, characters, and numbers, there's still around a 10% chance of incorrect character recognition. As you know, this is enough to completely mess up an engineering calculation, so pay extra attention to it.

• When building engineering apps, use a known, verified calculation or a past project as a "ground truth" to check each engineering step. This helps you verify the application's results.

• Similar to the previous best practice, try to break down your application into smaller steps. For each step, have a ground truth or verification method!

Conclusion

In this blog, we've shown how the VIKTOR AI Builder makes engineering automation faster and simpler. It allows you to create web apps with AI and the VIKTOR low-code platform just by describing your ideas. It's like having an engineering assistant that helps you build applications quickly.

Ready to take your app from idea to reality, or want to make it even better? To get the most out of the AI Builder, mastering prompting techniques is key. You can learn more about essential prompting for AEC professionals in this blog.

Developing AI-powered web apps for engineering has never been simpler. Create your free VIKTOR account now and enhance your projects!