Skip to main content
How AI app generation works · danoh.com
Open the desktop
·Daniel Oh·3 min read

How AI app generation works

Behind the Run program: how a sentence becomes a working HTML/CSS/JS app in seconds, and where the AI takes shortcuts you would never notice.

engineeringai

Ever wondered how typing "paint app" into a text box creates a working painting application? Here is what happens behind the scenes, end to end. (If you are brand new to danoh.com, the launch post explains what the desktop is and what you can do with it.)

The pipeline

1. The prompt does most of the steering

Your description gets wrapped in a system prompt that turns a general model into a very specific kind of machine: one that emits a single, complete, standalone HTML document and nothing else. The rules in that prompt are where most of the quality comes from:

  • Output only raw HTML. No commentary, no markdown fences, no "here is your app".
  • The app runs inside a resizable window, so layout must use relative units. Fixed pixel layouts get you an app that breaks the moment someone drags a corner.
  • 98.css is preloaded for the retro chrome, so the model spends its effort on logic instead of reinventing buttons.
  • No external images. Assets get drawn with CSS, SVG, or canvas.
  • The OS injects a small API surface (a per-program key-value registry, file open and save hooks, an optional chat bridge) and the prompt documents exactly what is available.

2. Streaming, visibly

The browser fetches the generation as a stream and forwards each chunk into the program's window as it arrives. You watch the document assemble itself: head, styles, markup, then the scripts that make it interactive. The loading overlay drops at the first byte because the build is the show.

One detail I care about: the window the code streams into is sandboxed from the very first chunk. Generated code never shares an origin with the site, which means a prompt like "make a calculator that also reads my keys" produces a calculator that physically cannot.

3. Persistence and versions

When the stream completes, the raw HTML is saved as the program's code in a virtual filesystem that lives in your browser (IndexedDB underneath). The desktop gets an icon, and the next launch loads instantly with no AI call. Every regeneration writes a new version, so the File menu has real history you can roll back through.

Two small calls round it out: one names the program (so "an app that tracks how many cups of coffee I drink" becomes something that fits a title bar) and one draws its icon.

4. Fix and iterate

The ? button on any generated window opens a chat where the model has the app's full source as context. Report a bug, ask for a feature, or ask how something works. Fixes come back as a fresh version of the whole document and the window reloads into it. It is the same loop a developer runs, compressed to one text box.

Where the AI takes shortcuts

The summary of this post promises shortcuts you would never notice, so here are the honest ones:

  • It fakes persistence until you ask for it. A todo app will happily hold state in memory. Ask it to "remember my list" and it reaches for the registry API.
  • It draws instead of fetching. Every icon, sprite, and texture is CSS or SVG because the rules forbid external images. You read that as "clean retro style". It is also a constraint doing the work of a design system.
  • Responsive by decree, not by testing. The model never sees the app render. The relative-units rule is doing the job a QA pass would.
  • 98.css is a crutch and a costume. Native-looking widgets for free means the model rarely writes custom controls, which is exactly why the apps feel coherent.

Security, because someone always asks

Generated code is untrusted by definition, so it runs in an opaque-origin iframe with scripts allowed and nothing else. It cannot read the parent page, your storage, or your API key if you brought one. The only bridge is a message channel with an allowlisted set of operations, and each program's registry keys are namespaced so one app cannot read another's data. On the server side, generation sits behind layered rate limits with a global daily ceiling, because a fun demo should not become someone else's free compute.

Try it

Hit Start > Run and describe something small and weird. A unit converter for recipe measurements. A typing test that insults you gently. If you do not have an access code yet, Snake.exe on the desktop is a real output of this exact pipeline, saved as a program like any other.

Questions about how it works? The Mail program goes straight to my inbox.

How did this land?
Enjoyed this? I write a few times a month. Follow along via RSS, or just say hello: [email protected].
3 min readdanoh.com