How a Web App Works, and How AI Builds One | LlamaPress AI
LlamaPress
LlamaPress Blog

How a Web App Actually Works, and How AI Can Build One for You

A plain-English guide for finance and operations leaders: the database, the page, the code between them, where it lives, and how AI now builds all of it.

Back to all articles
Kody Kendall

Written by

Kody Kendall

AI & Software Engineer | Creator of the Leonardo Coding Agent

Updated October 2026

You have probably seen it by now. Someone types one sentence into ChatGPT or Claude, and a dashboard appears. You know a few of the words too: database, HTML, server, GitHub. What nobody showed you is how those pieces click together into an app your team can use. That picture is what this guide gives you.

In short

  • AI can now write the code. The skill that matters is knowing how the pieces fit.
  • Every web app has three parts: a database that remembers, a page you see, and code in the middle that connects them.
  • The HTML file ChatGPT or Claude hands you is a picture of an app. It becomes an app when it is connected to a database.
  • To share an app, the code has to leave your laptop: a copy on GitHub, a rented server, a deploy, and a domain name.
  • LlamaPress gives you all of that already set up, and you build on it from the AI chat you already use.

Prefer to watch? The whole guide in 9 minutes

I build AI coding agents for a living. Most of the people I build software with are finance and operations leaders. They know their numbers cold, and they can make Excel do things that would scare a programmer. Many of them have already asked an AI to "build me a dashboard." Then they hit a wall they could not name. This article names it.

AI can write code now

For about fifty years, writing software meant learning a programming language. A programming language is a strict set of words and symbols a computer can follow. One missing bracket and nothing runs. Learning it took years, which is why software engineers were paid so well.

That changed fast. Large language models, the AI behind tools like Claude, ChatGPT and Codex, can now write working code from a plain-English request. You describe what you want, and the AI types it out. People call this "vibe coding."

So the typing got easy. What did not get easy is knowing what to ask for. An AI will happily build the wrong thing, very quickly. If you understand the big picture, you can steer it. The rest of this guide is that big picture.

Infographic: Then, you learned to write code yourself. Now, you describe it and AI writes it. The typing got easy; knowing how the pieces fit is the new skill.

What is an app? It starts with a database

Every business app starts with a database. A database is where the app keeps its information. You already know something close to it: an Excel workbook.

Picture a workbook with a tab for invoices and a tab for vendors. A database has the same idea. Each tab becomes a table. Each column becomes a field. Each line becomes a row, also called a record.

The difference is that a database is strict on purpose. Every column has one type. An amount column only takes money, so nobody can type "TBD" into it. Every row gets an ID number that never changes. Tables link to each other by those IDs, so an invoice points to vendor number 7 instead of retyping the vendor's name. That strictness is what lets twenty people use the same data at once without breaking it. For a longer look, read Excel vs databases.

HTML: the part you see

The part of an app you look at is written in HTML. HTML is the language of web pages. Your web browser (Chrome, Edge, Safari) reads HTML and draws the page.

HTML can do a lot of useful things on its own:

  • A form with input fields, such as "Vendor" and "Amount," and a Save button.
  • A table of rows, with page 1, page 2 and so on at the bottom.
  • A search bar that shows only the rows you asked for.

Two helpers come with it. CSS makes the page look good: colors, fonts and spacing. JavaScript makes it easier to use: a menu that opens, a chart that moves, a total that updates as you type.

Here is a fact most people never notice. You can open an HTML file straight from your computer. Double-click it, and your browser opens it. The address bar shows a file path, such as file:///Users/you/Downloads/dashboard.html, instead of a web address. That file is exactly what ChatGPT and Claude make when they "build you a dashboard." It is a single HTML file that does not change.

Why an HTML file is not an app yet

HTML is an amazing tool. AI models are very good at writing it, and it is the fastest way to sketch a screen and see if you like it. I use it for prototypes all the time.

But that HTML file is a picture of an app. The numbers inside it are frozen on the day it was made. The Save button has nowhere to save to. It lives on your laptop, so your team cannot open it. If you email it around, you are back to "which version is current?"

To become an app, the page needs a database behind it. Then the pages can link together, show live data, and save what people type.

Infographic: an HTML file opened from your Downloads folder, with frozen numbers and a Save button that saves nothing, next to the same page at a real web address, connected to a database with live numbers and a team signed in.

The middle layer: code that connects the page to the database

A web page cannot talk to a database by itself. Something has to sit in the middle and translate. That middle part is code, usually written in JavaScript, Python or Ruby. Developers call it the backend.

The middle layer has two jobs, and it does them over and over:

  1. Saving. You fill in the invoice form and click Save. The middle layer takes what you typed and writes a new row into the database.
  2. Showing. You search for "Acme." The middle layer asks the database for every Acme invoice, then builds an HTML page with those rows and sends it to your browser.

The middle layer asks the database questions in a language called SQL. A search for Acme looks like this:

SELECT * FROM invoices WHERE vendor = 'Acme'

That is the whole trick. Almost any programming language can do it, because the job is always the same: read data with SQL, turn it into HTML, and keep the two in sync. The page asks. The code translates. The database remembers.

Infographic: every web app is three parts. The page (HTML in your browser), the middle (code in Python, JavaScript or Ruby that turns clicks into SQL), and the data (database tables for invoices and vendors).

Why it is called a web app

This kind of app is called a web app. The code and the database live on a computer in a data center somewhere. You reach them through your browser, over the web. That is the same way you use Gmail or your bank's website. If you want the difference between a web app and an ordinary website, I covered it in website vs web app.

A mobile app is a little different. The screen you tap is a phone app, not an HTML page, and you do not open it in a browser. But most mobile apps still talk to a database in a data center, over the web. So the database and the middle layer are often the same. Only the screen changes.

So AI can build all three parts

Now the picture comes together. An AI can design the database tables. It can write the HTML pages, with the CSS and JavaScript. It can write the middle layer in Python, JavaScript or Ruby. All three are just text files, and writing text files is what these models do best.

The real question: where does the code live?

Here is where most people get stuck. If you ask Claude on your desktop, ChatGPT on your desktop, or Claude Code to build an app, it creates the files on your computer. It also installs the programming language and the database there, so the app can run. It works. You can open it in your browser.

Then you want to share it with your controller, your ops team or your CEO. And they cannot see it, because it only exists on your laptop.

How an app gets on the internet

To share an app, you put it on a computer that is always on and that anyone can reach. Here are the steps, in order.

  1. Save the code to GitHub. GitHub is a service that keeps a copy of your code off your computer. If your laptop dies, your code survives.
  2. Rent a server. A server is a computer in a data center that never turns off. You rent one from a hosting provider such as AWS, Google Cloud, Microsoft Azure, DigitalOcean or Cloudflare.
  3. Deploy. You sign in to the server, pull the code down from GitHub, install the language and the database, and start the app. That process is called a deploy.
  4. Point a domain at it. You buy a name, such as app.yourco.com. Then you add a DNS record called an A record. It tells the internet that this name lives at your server's IP address, a number like 203.0.113.7.
  5. Share the link. Now anyone you invite can type the address into a browser and use the app.
Infographic: from your laptop to a link in five steps. Your laptop, save it to GitHub, rent a server, deploy, and point a domain at it with a DNS A record.

Every one of those steps used to take real training. It is a large part of what a computer science degree teaches: the exact syntax, the setup, the hundreds of small details that have to be right. AI now handles most of those small details. If you understand the five steps above, you understand enough to direct the work.

Where AI still gets stuck

Even with that picture, doing it yourself is harder than the demos suggest. An AI in a chat window cannot rent a server or buy a domain for you. Those need your accounts and your credit card.

It also has to make a long list of decisions, and each one is easy to get wrong:

  • Which language: JavaScript, Python or Ruby?
  • Which database, and should it live on the same server or with a separate provider such as Supabase?
  • Plain HTML, CSS and JavaScript, or a newer front end tool such as React?
  • Do you also need a phone app?
  • How will your team sign in, and who can see what?
  • Where are the backups, and who fixes the app when it breaks?

An AI can pick an answer to each of these. But you want them picked right, because changing one later can mean rebuilding much of the app.

Infographic: ten decisions when doing it yourself, from language and database to backups, next to what LlamaPress already set up: database, middle layer, pages, sign-in, hosting, backups and a live link.

What LlamaPress does about it

That gap is why we built LlamaPress. Every app starts with the hard parts already done:

  • A database (PostgreSQL), ready for your tables.
  • A working middle layer (Ruby on Rails) that already connects the database to the pages.
  • Sign-in for you and your team.
  • Hosting in a data center, with backups, and a live web address you can open and share right away.

You can build on it from the AI chat you already use. LlamaPress has a connector for Claude and ChatGPT. A connector is a plug-in that lets your AI assistant use outside tools. With it, your assistant can create a hosted app, read and change its files, and look at its data.

How to connect it

  1. Create a free LlamaPress account at llamapress.ai.
  2. In Claude, open Settings, then Connectors, and add a custom connector. In ChatGPT, open chatgpt.com in a browser, then Settings, Connectors, Advanced, and turn on Developer mode to add one.
  3. Use this address: https://llamapress.ai/api/mcp
  4. Sign in with your LlamaPress account when it asks.
  5. Start a new chat and describe the app you want. You can attach a spreadsheet for it to build from.

Then you can spend your time on what you are good at: the business, the numbers, and what the report should show.

What finance and operations teams build with it

  • Custom reports from your exports. Upload a CSV or Excel export, and the app turns it into the exact report you want, the same way every month.
  • Shared dashboards. One link where you and your team see the current numbers, instead of a file emailed around on Friday.
  • Connections to your other systems. An API is a way for two systems to send data to each other. Your app can pull from the tools you already use, so the numbers stay up to date.
  • One place for the truth. Everyone signs in to the same data, so nobody argues about which spreadsheet is right.

Want a head start? Ask us for one

We have built these for clients: CRMs, profit and loss dashboards, cash flow and balance sheet reports, KPI reports, and a general ledger for bookkeeping. If one is close to what you need, ask us. We can start your app from it. Then you and your AI assistant can shape it to fit how your business works.

Works with Claude and ChatGPT

Skip the plumbing. Start with a working app.

A database, sign-in, hosting and a live link, ready on day one. Build on it from your own AI chat, or ask us for a head start.

Frequently Asked Questions

Do I need to learn to code to build a web app with AI?

No. You need to understand the big picture: a database, the pages, the code between them, and where the app is hosted. The AI writes the code. You decide what the app should do and check that it does it.

Is the HTML dashboard ChatGPT or Claude made for me useless?

No. It is a good prototype of the screen you want. It becomes an app when it is connected to a database and hosted on a server, so the numbers stay current and your team can open it.

What is the difference between a web app and a mobile app?

You open a web app in a browser, and its screens are HTML pages. A mobile app is installed on a phone and has its own screens. Both usually save their data in a database in a data center.

Can Claude Code build and host a business app by itself?

Claude Code can write the whole app on your computer. Hosting it still needs a server, a domain and many setup decisions. I wrote more about that in can Claude Code build your business app.