Full-Stack Mode Guide

Build complete web applications with AI-powered file editing, terminal, and live preview.

What is Full-Stack Mode?

Full-Stack Mode transforms your chat into a complete development environment. AI can write, edit, and execute code while you see real-time results in an integrated IDE with file explorer, terminal, and live preview.

  • AI-powered file operations (create, edit, delete files)
  • Integrated terminal with command execution
  • Live preview with WebContainer technology
  • Multi-file project support (React, Next.js, Vue, HTML/CSS/JS)
  • Real-time code synchronization between AI and IDE

Key Features

Full-Stack Mode provides a complete development experience:

🔧 AI Tools

  • write_file - Create new files or overwrite existing ones
  • edit_content - Make precise edits with search & replace
  • read_file - Read file contents for context

🖥️ Integrated IDE

  • Monaco Editor - VS Code-like editing with syntax highlighting
  • Terminal - Full bash terminal with command history
  • Live Preview - See your app running in real-time
  • File Explorer - Navigate and manage project files

💡 How It Works

Full-Stack Mode uses WebContainers to run Node.js directly in your browser. The AI writes code to a virtual file system, and you can see changes instantly in the preview pane.

How to Use Full-Stack Mode

1. Enable Full-Stack Mode

Click the Full-Stack toggle in the chat input area to activate the mode.

2. Describe Your Project

Tell the AI what you want to build. Be specific about features and technologies.

3. Watch the AI Build

The AI will create files, install dependencies, and set up your project structure.

4. Iterate and Refine

Request changes, add features, or fix bugs through natural conversation.

Supported Templates

Full-Stack Mode supports various project templates:

⚛️ Next.js

Full Next.js 15 setup with App Router, TypeScript, and Tailwind CSS

⚡ Vite + React

Fast development with Vite + React and hot module replacement

🌐 HTML/CSS/JS

Simple HTML/CSS/JavaScript for quick prototypes

📦 Node.js

Node.js backend with Express or other frameworks

Tips & Best Practices

✅ Best Practices

  • Be specific about your requirements and preferred technologies
  • Let the AI finish one task before requesting another
  • Use the terminal to run custom commands when needed
  • Check the preview pane to see changes in real-time
  • Request incremental changes rather than complete rewrites

⚠️ Limitations

  • WebContainers run in the browser - some Node.js APIs may not work
  • Large projects may take longer to sync and preview
  • External database connections require additional setup
  • File size limits apply for the virtual file system

Getting Started

Ready to build your first project? Try one of these prompts:

"Create a Next.js landing page with a hero section and pricing table"
"Build a React todo app with local storage persistence"
"Make a dashboard with charts using Recharts"
"Create a simple REST API with Express"

The AI will automatically create the project structure, install dependencies, and start the dev server!