Code Mode

Generate complete apps, games, websites, and code files with live preview. Code Mode uses a 128K token context window for large, complex projects.

Getting Started

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".

Capabilities

Live Preview

HTML/CSS/JS output renders in a sandboxed iframe — see your app running instantly.

Multi-File Projects

Generate complete projects with multiple files — an entry file plus supporting modules.

Iterative Editing

Ask Theo to update specific parts of your code without regenerating the whole thing.

Validation

Theo can validate syntax and check for common errors before you ship.

Shareable Artifacts

Share your code with a public URL — anyone can view the preview and source.

Framework Support

Generate React, Vue, or vanilla HTML/CSS/JS projects with proper structure.

Brand Match

Attach a brand guide, logo, or paste a website URL — Theo extracts the real palette, fonts, and logo and builds on-brand.

Brand-Aware Builds

Build on your real brand

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.

Live Preview

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.

Sharing Code Artifacts

Public share links

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.

Tips for Best Results

  • Be specific about functionality: "add a dark/light toggle with localStorage persistence" beats "add themes."
  • Mention your preferred framework if you have one (React, Vue, or vanilla).
  • For iterative changes, describe only what to modify — Theo will update the relevant parts.
  • Use "validate this code" to check for syntax errors before sharing.
  • Code Mode uses Think-tier credits due to the 128K context window.
Code Mode is automatically suggested when you ask to build, code, or create any software artifact — even in Fast mode, the intent classifier may upgrade to Code Mode.
Was this article helpful?

Related Articles

T

Theo AI Overview

Overview of Theo AI — 11 chat modes, creation tools, generative UI, memory, and the sidebar mascot.

A

AI Chat

Conversational AI that creates flowcharts, whiteboards, notes, and presentations from natural language.

L

Learn Mode

Orchestrated learning suite — flashcards, quizzes, study notes, and presentations generated in parallel from any topic.

Theo AIConsensus Mode