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.

Prefer to skip chat? Start directly in Code Canvas at My Code → New Code Project — open a blank canvas, describe what to build, or pick a starter template (landing page, dashboard, store, and more). The project opens straight in the editor and Theo builds the first version there.

The New Code Project composer carries everything the in-editor chat does, so your first build starts with full context. You can attach images or paste a screenshot (great for "build this mockup"), upload files like PDFs, specs, or brand guides, dictate your prompt with the mic, and pick the model(Theo Code, Theo Code Max, and more) — all right there before you hit Start building.

Not every message has to be a build. Mid-project you can ask Theo questions ("what should the price be?", "which option is better?") or request documents ("write me a PRD", "give me a bill of materials table") — Theo answers in the chat, creating documents, tables, or notes as needed, without touching your code.

When one of these runs through the build panel, the panel reports "Theo answered in the chat" and points you back to the conversation — your project files stay exactly as they were.

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.

Paste a public GitHub repo URLand ask Theo to install / use / add it (e.g. "build a scrolling site usinggithub.com/oso95/scroll-world"). Theo reads the repo's actual source code — its README, package.json, and key files — and integrates the real component instead of inventing a look-alike.

• Install (default) — in Code Canvas, Theo vendors the repo's real files into a vendor/<repo>/ folder in your project (your own files are untouched), then imports the component and wires it in.
• Published packages — when the repo is on npm, Theo imports it straight from a pinned CDN instead of copying source.
• Reference — say "build something like" a repo and Theo follows its real approach as a guide.
• Deep links — point at a sub-folder with a /tree/<branch>/<path> link to install just that component.

Just paste the link — Theo figures out whether you want to install the whole project or reference it, and gets to work. Private repos aren't supported on this path (use the GitHub sync tab to connect your own repos).

So your builds look intentionally designed — not generically "AI-made" — Theo reaches for a curated shelf of production-grade libraries (all loaded from public CDNs, no setup) plus a built-in design-quality contract: purposeful motion, real spacing rhythm, layered depth, real icons over emoji, and a reduced-motion fallback on every animation.

• Motion — GSAP (incl. ScrollTrigger + SplitText) for scroll effects & kinetic type, Motion for React, plus Lottie and canvas-confetti.
• Icons — Lucide by default, with Phosphor and Font Awesome on request.
• 3D & depth — Three.js (WebGPU, with automatic WebGL fallback) and React Three Fiber.
• UX — Swiper carousels and Lenis smooth scrolling.
• Cinematic scroll — a Scroll World engine that scroll-scrubs a "fly through a world" hero (Apple-style) from your section images — just say "make it animate" or ask for a scroll-through world.
• Styling — Tailwind (Play CDN) plus curated Google Fonts type pairings.
• Charts — Chart.js and ApexCharts for analytics, dashboards, and KPIs.
• Maps — Leaflet with OpenStreetMap tiles (no API key) for locators and geo apps.
• App UI — daisyUI components on Tailwind for dashboards, admin panels, and forms.
• Interaction — SortableJS drag-and-drop (kanban, reorderable lists) and Tippy.js tooltips.
• Feedback & time — Notyf toasts, FullCalendar schedules, and Day.js dates & countdowns.
• Audio & effects — Howler.js players and tsParticles ambient effects.

You don't have to name a library — just describe the effect ("add a parallax scroll reveal", "a magnetic button", "a 3D hero", "a testimonials carousel") and Theo pulls in the right one. When you supply a brand (see Brand-Aware Builds above), your exact palette and fonts always win over the defaults.

When you ask for a rich design, Theo doesn't reach for stock photos or gray placeholder boxes — it generates the project's real media while it builds: hero and section imagery on the Theo image engines, short ambient video clips (rendered in the background and bound when ready), and UI sounds or music loops. Every asset is hosted and embedded directly in your pages.

• Upload your own video — attach an MP4, WebM, or MOV from the composer's + menu (or just drag it onto the chat) and ask Theo to use it. Your clip is used exactly as-is: never re-encoded, never swapped for stock footage. Up to 100 MB; clips over ~25 MB still upload, but a large file will slow down the published page.
• Assets tab — every upload and generation lands in your project's asset library with its placement context; add, restyle, swap, or delete assets and Theo wires them in. Videos show a real player you can hover to preview.
• Brand Kit — attach one of your Brand Studio kits in the Design tab and Theo applies its exact palette and fonts to the UI and every generated asset.
• Generated clips — ambient/hero clips render in the background (~1–3 minutes); Theo keeps building and binds the finished clip, or tells you honestly when it's still rendering.

Video plays right in the preview — you can watch it, scrub it, and check how it feels in the layout before you publish anything. Clips stream in byte ranges, so seeking is instant even on a large file.

Just describe it — "a cinematic hero with a slow ocean loop and a warm product shot" — and Theo generates, hosts, and binds the media for you.

Every substantial project carries a Theo.md— a living guide to the project's structure, stack, conventions, and key decisions. Theo reads it at the start of every build turn and keeps it current automatically as the architecture evolves, so a project you reopen weeks later still builds consistently. Open it any time from the editor menu (⋯ → Knowledge) or the file tree.

• Organization instructions — teams can set standing coding instructions in the org settings (General tab) that apply to every org-linked code project: stack conventions, style rules, review expectations.
• Personal preferences — set your own coding preferences in Settings → Preferences → Editor ("prefer Tailwind", "dark UIs first") and Theo follows them on every project you build.
• Repo guides — projects imported from GitHub that carry an AGENTS.md, CLAUDE.md, or WARP.md have that guide respected the same way.

When instructions conflict, the project's own guide wins, then your organization's instructions, then personal preferences.

Instead of describing where something lives, pin the exact code: type @ in the Code Canvas composer to pick a project file, or select lines in the Code view and click Reference in chat to pin that exact range. Pins show as removable chips on the composer and ride your next message only.

• Files — @styles.css tells Theo to treat that file as the focus of the request.
• Line ranges — app.js:120–180 scopes the edit to the exact region you selected.
• Another project — the @ picker's "Attach another project…" row pulls a different project in as read-only reference context.

Theo always reads the referenced code as it exists right now — so even in very large projects, the region you pointed at is front and center.

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.

Snapshot the preview:from the composer's + menu — or the camera button in the preview's top toolbar — you can capture a screenshot of the live preview and attach it to your next message — perfect for pointing at exactly what you want changed ("make THIS section darker").

Select just an area:the camera button's "Select area…" option captures the preview, then lets you drag a marquee over exactly the region you care about. The crop attaches to the chat immediately and flows straight into the annotation pen so you can mark it up in one motion — cancel the drawing step and the clean crop stays attached.

Annotate before you send:hover any image attachment in the composer and tap the pen to draw directly on it — circle a button, cross out a section, sketch where something should move. Your marks are flattened into the image so Theo sees exactly what you marked up.

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.

When Theo edits your project in Code Canvas, changes are applied with a precise patch engine that only touches code it can match unambiguously, and every edit is syntax-checked before the turn finishes. If a change introduces an error, Theo repairs it in the same turn.

Auto-fix runtime errors (on by default): if the live preview throws a new error right after an AI edit, Theo automatically dispatches a free fix turn instead of waiting for you to click "Try to fix". You can turn it off in the Code Canvas editor menu (⋯) — the preference is remembered per project.

Long builds keep going automatically: when a big build needs more time than a single turn allows, Theo continues it in bounded segments — and the largest requests can run entirely in the background, updating your files segment by segment and notifying you when they finish, even if you close the tab.

Larger build plans can also run in the background — task by task, each verified before the next starts — so a page reload never loses your progress.