Code Mode

Open AI Chat and switch to Code mode using the mode selector (keyboard shortcut ⌘6).

Describe what you want to build — Theo generates the code and shows a live preview if the output is visual (HTML/CSS/JS, React, Vue).

Examples: "Build a todo app with dark mode", "Create a landing page for a SaaS product", "Make a Snake game with score tracking".

You can describe a full product too — "build an Airbnb-like platform for my two vacation homes", "a DoorDash-style food delivery app", "a marketplace for handmade furniture". Theo recognizes these as complex apps, ships a polished, on-brand runnable foundation (the core screen working end-to-end), and leaves a roadmap so you can keep building each remaining feature in Code Canvas.

Give Theo your brand and it builds to match instead of inventing generic styling. Three ways to supply it, strongest first:

• Upload a brand guide (PDF or deck) — Theo reads the whole document, extracts the exact palette, typography, and voice, and pulls the actual logo out of the file to inline it in the build (no redrawn or invented mark).
• Upload your logo or type your brand colors (e.g. #FF6F61) — Theo inlines the exact logo and applies your colors.
• Paste a website URL (e.g. acme.com) — Theo extracts the brand's palette, fonts, and logo from the live site before it builds.

The brand also flows into the architecture plan, so a multi-page site stays cohesive across every page.

Paste a URL and ask Theo to clone, recreate, or rebuildthe site "with the same content" (e.g. "extract everything from acme.com and rebuild it with a new design"). Theo reads the actual page — its real headings, copy, and images — instead of doing a generic web search, then reproduces that content in a brand-new layout you describe.

• The page's real text is reproduced faithfully — no invented placeholder copy.
• The page's real images are pulled in and inlined directly.
• The design is entirely new — Theo won't copy the source's layout or colors unless you ask it to.

This is different from Brand Matchabove: brand-match pulls a site's colors/fonts/logo to style a new project, while cloning reproduces the site's actual content.

Cloning an app, not a page?When the URL is a product (e.g. "clone doordash.com and build the same delivery app"), Theo builds a working foundation that replicates the product's core flow (browse → detail → action) with an original, on-brand design — not a copy of its marketing page. You can also just say "build the same kind of software as DoorDash" without pasting a URL.

When Theo generates visual code (HTML, React, Vue), a live preview appears in an iframe sandbox next to the source code. The preview updates automatically when you ask Theo to make changes.

The sandbox is fully isolated for security — external scripts, cookies, and navigation are restricted.

The preview and published sites run in a browser sandbox, so a normalfetch() to a third-party API or website is blocked by CORS. Theo-generated apps instead use a built-in global window.__fetch(url) — a drop-in replacement for fetch that routes the request through OpenCharts' own server (with a real browser User-Agent) and returns a normal response you can call .json() / .text() on.

This replaces the brittle public CORS proxies (corsproxy.io, allorigins.win, etc.) that protected sites routinely block. It works the same in the editor preview and in your published site — no setup required.

Limitation:a few sites block all server/datacenter traffic outright. If a request comes back blocked, that origin can't be reached from the browser — download the project and run it locally (from your own machine), where the request comes from your own IP.

Click Share on any code artifact to generate a public URL. The share page shows the live preview alongside the source code — no login required for viewers.