Ultracode

Building a production web application still requires a team of 3-5 specialists: a product engineer to design the architecture, a frontend developer to build the UI, a backend developer to wire up APIs and databases, a designer to make it look good, and DevOps to deploy it. Non-technical founders are locked out entirely. Developer velocity is capped by the slowest contributor. Every shipped feature represents 10-20x more effort than it needs to.

Existing AI code generators promise to close this gap but fall short in very specific ways. Lovable, v0, and Bolt use iframe previews — toy-grade rendering that isn't real execution, so users can't trust that what they see will actually work in production. Cursor and Claude Code are incredible at editing existing code but assume you already have a project scaffold and know how to run it. GitHub Copilot does inline completions but can't build anything end-to-end.

The gap between "AI writes code" and "AI ships production apps" is enormous — and it's primarily an infrastructure problem, not an AI problem. Real container execution, multi-LLM routing for different tasks, reliable incremental code application, live HMR sync, and one-click deploy all need to work together seamlessly. Get any one of those pieces wrong and the whole experience collapses back into "impressive demo, can't ship."

Building what is effectively a full IDE, a real execution environment, an AI orchestration layer, and a deployment pipeline as one cohesive product.

Browser-based VS Code IDE — Monaco Editor (the same editor powering VS Code) with full syntax highlighting, IntelliSense, folding, and minimap. xterm.js integrated terminal with command history and clickable URLs. Hierarchical file explorer with drag-drop and context menus. Multi-tab system with unsaved indicators. Light and dark themes. Read-only mode for AI-generated files to maintain integrity during generation. All of this in-browser with no native install.

Real container execution, not iframe sandbox — Iframe-based previews feel like a toy because they are one. Users don't trust that what they see will work in production. Ultracode uses Daytona Cloud Sandboxes as the primary runtime — real Node.js child processes with dynamic port allocation starting at 4000, proper npm install, genuine HMR via Vite dev server. E2B is integrated as a secondary sandbox for compute-intensive operations. Preview state persists across server restarts via `.preview-state.json`. Each project gets an isolated container with its own dependencies, preventing conflicts between users or projects.

Multi-LLM routing across 4 providers — Different tasks have different optimal models. Claude Opus 4 excels at architectural reasoning (what tech stack? what data models?). Claude Sonnet 4 is the default workhorse for full code generation. GPT-4o handles edge cases and serves as a fallback when Anthropic rate-limits. Gemini brings million-token context windows for codebase-wide refactors. Groq provides sub-200ms inference for lightweight autocomplete and syntax helpers. Routing by task type yields better output quality AND lower costs than defaulting to any single provider.

Fast Apply for incremental updates — Generating code is the easy part; applying code changes reliably and fast is where most AI tools fail. When a user asks "change the hero headline to X", the system has to edit one string in one file — not regenerate the entire app. Morph's Fast Apply model compresses what normally takes 5-10 seconds per file change into <500ms, with higher fidelity than naive diff-patch approaches. This is what makes Incremental Mode feel instant instead of laggy.

Incremental vs Full Generation mode detection — The single biggest source of user frustration with AI code generators is whole-app regeneration when the user asked for a small change. Prompt engineering alone isn't enough. Ultracode uses explicit mode detection with 20+ protection rules for Incremental Mode ("NEVER regenerate entire app," "READ existing file content carefully," "ONLY modify specific parts mentioned," "preserve existing state and handlers") and a separate Full Generation Mode that creates package.json, vite.config.ts, tailwind.config.js, postcss.config.js, index.html, src/main.tsx, src/App.tsx, src/index.css, and all component files from scratch.

Live synchronization across 4 services — WebSocket architecture needs to coordinate state between web (IDE), API (backend), preview (running container), and worker (background jobs) in real-time. When the user edits code in Monaco, the preview HMR updates instantly. When the AI generates new files, the IDE opens them, the preview rebuilds, and the terminal shows install logs — all without page refresh. PostgreSQL LISTEN/NOTIFY detects database changes for real-time file sync.

Production deployment — One-click deploy to Netlify and Vercel isn't just an API call. The system auto-generates `netlify.toml` with SPA routing (`/* → /index.html 200`), detects React-specific build commands, configures environment variables, sets NODE_VERSION, and monitors deployment status until the user can click a live URL. Custom domain mapping supported.

Billing and rate limiting — Stripe integration with 4 tiers (Free 5 daily / 30 monthly credits, Lite $29, Pro $99, Enterprise custom). Credit deduction per API call via Supabase RPC. Rate limiting per plan (20 req/min free → 1000 req/min enterprise). Usage tracking for API calls, storage, and bandwidth.

Auth and security — GitHub OAuth + email/password + Supabase Row-Level Security. JWT with 15-minute access tokens + 7-day refresh tokens. bcryptjs for password hashing. Rate limiting, helmet, CORS, Zod validation on all API boundaries.

All of this as one cohesive product — 32,128 lines of TypeScript across 209 files in a 4-app Turbo monorepo, 36 React components, 6 core API modules, 5 core backend services.

Built as a Turbo monorepo with 4 apps: web (React + Vite + TypeScript frontend IDE), API (Express + Socket.io backend with streaming AI), preview (Vite dev server wrapper for compiling generated apps), and worker (background job processor for email, webhooks, and async tasks). Shared packages for database schema and common types.

IDE experience — Monaco Editor with TypeScript/JavaScript/JSX/TSX/CSS/HTML/JSON/YAML syntax highlighting, IntelliSense, code folding, line numbers, and minimap. xterm.js terminal with web-links addon. Hierarchical FileExplorer with filter/search, rename/delete/duplicate, drag-drop. Multi-tab system with unsaved indicators and quick switch. Framer Motion animations. shadcn/ui + Radix UI primitives for a cohesive component library.

Unified LLM Client — Routes across Anthropic SDK (Claude Sonnet 4 default, Claude Opus 4 for complex reasoning), OpenAI SDK (GPT-4o, GPT-4-turbo for fallback), Gemini (large-context refactors), and Groq (sub-200ms lightweight ops). Zod schema validation on every response. Automatic retries with exponential backoff. Rate-limit detection. Per-call token tracking logged to usage tables. Model selection configurable per request.

Code Generation Pipeline — Zod validates input (projectId, prompt length 10-4000 chars, context including currentFile/selectedCode/fileTree, model choice). Credit check runs before any API call. Redis lookup for prompt cache (24h TTL) returns cached results on hash match. AI streams response with server-sent events for token-by-token delivery. File extraction parses fenced code blocks. Import validation ensures every referenced file exists. Files save to Supabase + local `project_files` table. WebSocket broadcasts `chat:generation-complete` to connected clients. Credits deducted via Supabase RPC.

Dual Sandbox Runtime — Daytona Cloud Sandboxes provide primary execution with real Node.js child processes, dynamic port allocation starting at 4000, `.preview-state.json` persistence across restarts, graceful spawn failure handling, retry logic with exponential backoff for npm install. E2B serves as secondary sandbox for compute-intensive generation tasks. Port isolation prevents conflicts across concurrent projects.

Morph Fast Apply — When the AI produces an incremental update, Fast Apply compresses the change application step to <500ms. This is the single most impactful optimization for user perception — surgical edits go from "waiting" to "instant."

Real-time sync — Socket.io coordinates 4 event types: `files-updated` (database trigger broadcast), `preview-rebuild` (container HMR status), `ide-file-change` (editor diffs), `chat-generation-complete` (AI output). Bearer token auth on connections. 1MB max buffer. Ping every 25s with 60s timeout. PostgreSQL LISTEN/NOTIFY detects database changes. Vite HMR client handles hot reload with React Fast Refresh preserving component state.

Deployment Pipeline — DeploymentService gathers all project files from Supabase, verifies package.json with build scripts, generates `netlify.toml` (build command + dist output + SPA routing rule + NODE_VERSION 18), calls deployment provider API (Netlify or Vercel), polls status until complete, stores deployment record, updates project with live URL. Custom domain mapping via provider APIs.

Database — PostgreSQL via Supabase with 6 core tables (users, projects, project_files, chat_sessions, deployments, billing) using UUID primary keys, cascade-delete foreign keys, RLS policies enforcing user ownership, JSONB fields for flexible data. Redis for session storage (7-day TTL), prompt caching (24h TTL), general cache (1h TTL).

Monitoring — Winston structured JSON logs with timestamp, level, service, userId, requestId, duration, statusCode. AppError class with standardized error codes (AUTH001-AUTH004, PROJ001-PROJ004, GEN001-GEN004, BILL001-BILL004, SYS001-SYS004). Every error has a unique requestId for debugging.

Ultracode sits in the rare tier of AI app builders that run generated code in real containers rather than iframe previews — a small club shared with Replit, Bolt, and StackBlitz. Within that tier, Ultracode differentiates on three axes that matter for developer adoption: multi-LLM routing across 4 providers (Claude, GPT, Gemini, Groq) rather than single-provider defaults, dual sandbox architecture (Daytona primary + E2B secondary) for execution reliability, and Morph Fast Apply reducing incremental updates to <500ms. The result is a full VS Code IDE in the browser — Monaco Editor, xterm.js terminal, file explorer, multi-tab system — where the AI's output actually behaves like production code.

Users don't care about AI accuracy percentages — they care whether clicking "Deploy" produces a working website. That's the bar Ultracode clears. Generated apps run in real containers, previews update via genuine HMR, and one-click deploy puts a live URL in their hands in under 2 minutes.

Performance: >90% code generation accuracy across full-stack applications. <2 second preview load. <500ms Fast Apply for incremental code updates. <200ms API response times.

Technical depth: 32,128 lines of TypeScript across 209 files. 4-app Turbo monorepo (web, API, preview, worker). 36 React components. 7 core API modules (auth, projects, generate, chat, billing, deployment, localPreview). 5 core backend services (WebSocket, Deployment, LocalPreview, DatabaseListener, FileSystem). WebSocket architecture coordinating 4 event types.

Integration breadth: 4 LLM providers routed by task type, dual sandbox (Daytona + E2B), 2 deployment providers (Netlify + Vercel), 6 project templates (landing, SaaS, e-commerce, dashboard, blog, internal tools), 4 plan tiers live with Stripe, GitHub OAuth + Supabase Auth.

Security: Row-Level Security on all Supabase tables, JWT with 15-minute access + 7-day refresh tokens, rate limiting per plan (20 free → 1000 enterprise req/min), Zod validation on all API boundaries, helmet + CORS + bcryptjs, credit-based abuse prevention.

Live pricing: Free (5 daily / 30 monthly credits, public projects only), Lite ($29/mo, 30 monthly credits, private projects, custom domains), Pro ($99/mo, 300 monthly credits, priority support, advanced integrations), Enterprise (custom, unlimited credits, SSO/SAML, SLA).

Real container execution is the critical breakthrough. Iframe sandboxes feel like a toy — users don't trust that what they see will work in production. When the AI-generated code runs in actual Node.js containers through Daytona and E2B, users can run `npm install`, see real console output, and deploy the exact container to production. The psychological shift from "AI playground" to "production development environment" is everything.

Streaming is non-negotiable for AI code generation. Showing code appear token-by-token in the Monaco Editor while the preview updates via HMR makes the experience feel magical rather than like waiting for a build. Users interpret instant feedback as intelligence. Batch-generated output with a single "done" notification, even if faster in total, feels slower psychologically.

Multi-LLM routing outperforms single-LLM strategies. Different tasks have different optimal models — Claude Opus for architectural reasoning, Sonnet for code generation, Gemini for large-context refactors, Groq for sub-200ms autocomplete. Routing by task type yields better output quality AND lower costs than defaulting to any single provider. The provider abstraction layer that makes this possible is the single most-used piece of infrastructure in the codebase.

Fast Apply is the unlock for incremental updates. Generating code is the easy part; applying code changes reliably and fast is where most AI tools fail. Reducing the 5-10 second naive diff-patch cycle to <500ms is what makes surgical updates feel instant instead of laggy. This single optimization transforms the product's perceived quality more than any AI model upgrade would.

Incremental vs Full Generation must be explicit, not prompt-hoped. The single biggest cause of user frustration with AI code generators is whole-app regeneration when the user asked for a small change — "I asked to change one word and you rebuilt the entire app." Prompt engineering alone isn't enough. It requires explicit mode detection, 20+ protection rules, and failure-fast validation. Building these guardrails into the system is what separates a demo-grade tool from one people use daily.

WebSocket coordination across 4 services was the hardest engineering problem, not the AI itself. Keeping chat state, IDE state, preview container state, and database state synchronized in real-time without race conditions required careful event sequencing, PostgreSQL LISTEN/NOTIFY for change detection, graceful reconnection logic, and a 1MB buffer for large generation payloads. Getting this right is the difference between "feels magical" and "feels broken."

The infrastructure layer is the moat, not the AI. Every AI code generator has access to the same Claude and GPT models. What separates products is how the generated code executes, how changes apply, how preview syncs, and how deployment works. Ultracode's advantage isn't the AI — it's that when the AI produces code, everything downstream actually works.