Coding with Cursor AI: My Real Time Builder AI App

A real-time website builder that already generates HTML and CSS from a text prompt now gains an image pipeline: it can call an external image model, receive an image URL, and embed that URL directly into the generated CSS/HTML so the page visuals match the user’s theme. The practical payoff is speed and iteration—users can generate a full page, then swap images without rewriting the entire layout, keeping the “modify” workflow responsive.

The workflow starts with a prompt like “2008 Reddit clone,” which produces a live preview of HTML/CSS being rendered as it’s generated. A “modify” action keeps the existing code and applies targeted changes (for example, adding up/down votes, switching to a dark mode, or adjusting title text). Early attempts to add links show limitations: URLs can end up as placeholders (like example.com), and the system doesn’t reliably create working external references.

The new feature focuses on images. The builder runs a fast text model (described as “GPT 40 mini” in the transcript) to return HTML and CSS separately, using regex-based extraction to ensure the API returns renderable code blocks. For real-time UX, the app streams tokens so the preview updates continuously while code is generated. Images are handled differently: instead of streaming pixels, the system calls an image generator API and waits for a returned URL.

To keep generation fast, the image step uses Replicate’s Flux model family (Black Forest Labs’ Flux “Schell” is mentioned as the fastest option). The developer installs Replicate, stores an API token in an environment variable, and builds a small “image service” module (imageService.js) that sends a prompt to Replicate and returns the resulting image URL. The prompt is wrapped with instructions that explicitly tie the image to the website description and request an image URL suitable for embedding.

Once wired in, the “generate website” flow expands: the app generates an image based on the user’s description, then injects the returned image URL into the page’s HTML/CSS so the preview shows a themed visual (e.g., an image linked to “Dark Knight,” or a World of Warcraft-themed page). A key issue appears during “modify”: if the image URL is regenerated every time code is modified (such as when toggling dark mode), the visual changes unexpectedly.

The fix is a workflow split. The app introduces a separate UI input for a “new image URL” (generated via a dedicated “generate image” step) so users can control when the image changes. With this separation, “modify” can update styling or layout while preserving the original image, and users can selectively swap visuals by generating a new image and then applying it.

The result is a rapid creative loop: landing pages and marketing copy can be generated, images can be inserted and resized, and additional styling effects (like centering, ordering elements, and even a 3D-ish animation effect) can be layered on top. The transcript ends with multiple example pages and a code extraction step, emphasizing that the image-embedding feature works well enough to support more advanced visual experiments.