LinkedIn(opens in a new tab)GitHub(opens in a new tab)
All projects

WebJan 2025 – Apr 2025

Visio

An AI website builder: describe a site, get a live React app in the browser

  • React
  • TypeScript
  • Vite
  • Node.js
  • Express
  • OpenAI API
  • WebContainers
  • Monaco Editor
  • Vercel

Architecture (simplified)

PromptpageReactViteBackendExpressOpenAIParserfilescommandsBuildertreeMonacoWebContainerslivepreviewPromptpageReactViteBackendExpressOpenAIParserfilescommandsBuildertreeMonacoWebContainerslivepreview
A prompt goes to an Express backend that asks OpenAI for structured output; the app parses the files and commands out of it, shows them in a file tree and editor, and runs the project in the browser with WebContainers.

About the project

Visio is an AI website builder: describe a site in a sentence or two and it writes a React app and runs it live in the browser. I started it after wondering how tools like Bolt.new work, and built my own version to find out, then launched it in early 2025.

A short prompt (capped at 500 characters) goes to an Express backend that calls the OpenAI API with a long system prompt. The model answers with structured output: files, folders and shell commands wrapped in XML-like tags. The app parses those into a step list and a file tree, shows the code in a Monaco editor, and runs the generated Node project in a WebContainer for the live preview. The backend rate-limits requests by IP, and the whole thing is deployed on Vercel.

I wrote the build up in two posts on this site: one on the prompt engineering and parsing, and a beginner's guide to WebContainers (both linked above).