Guides

On the CodeAI homepage, describe what you want to build in the input field. For example:

Click "Generate" and CodeAI will automatically create a workspace and start building your app.

As CodeAI generates your app, you'll see:

• Real-time code streaming in the chat panel
• File structure being created
• Components being generated one by one
• Live preview updating as code is applied

Once generation is complete, you can:

• View the live preview in the right panel
• Browse generated files in the file explorer
• Make edits by chatting with the AI
• Install additional packages as needed

Instead of describing what you want, paste a URL directly into the input field:

CodeAI will automatically detect it's a URL and switch to clone mode.

CodeAI will:

• Scrape the website content and structure
• Capture a screenshot for reference
• Extract brand colors and styling
• Analyze the layout and components

Based on the scraped content, CodeAI generates:

• React components matching the original design
• CSS/Tailwind styles to replicate the look
• Layout structure and navigation
• Interactive elements and animations

After the initial clone, you can refine it by:

• Asking for specific adjustments: "Make the header darker"
• Adding new features: "Add a newsletter signup form"
• Improving responsiveness: "Make it mobile-friendly"
• Optimizing performance: "Reduce bundle size"

CodeAI intelligently determines whether to make targeted edits or regenerate:

To make changes to your app:

1. Type your request in the chat input at the bottom
2. Be specific about what you want to change
3. CodeAI will analyze your request and make targeted edits
4. Watch the preview update in real-time

After making edits, you can:

• See which files were modified in the chat
• View the updated code in the file explorer
• Check the live preview for visual changes
• Review the file diff if needed

CodeAI maintains context throughout your conversation:

• Remembers previously generated components
• Keeps track of scraped websites
• Maintains awareness of applied code changes
• Understands your project structure

This means you can reference previous work: "Update the header we created earlier" or "Make the button match the one in the hero section".

CodeAI can automatically detect missing packages:

• When you import a package that's not installed
• When you see errors like "react-router-dom not found"
• When the AI suggests installing specific packages

Simply type "install packages" or "check packages" in the chat, and CodeAI will detect and install what's needed.

You can also request specific packages:

CodeAI will install the packages and automatically restart the development server.

During installation, you'll see:

• Progress updates in the chat
• Package names being installed
• Installation status (success/failure)
• Automatic dev server restart

The chat input at the bottom of the workspace supports:

• Natural language requests
• Code generation prompts
• Edit instructions
• Package installation requests
• File operations

Messages in the chat are color-coded:

• User messages - Your requests and prompts
• AI responses - CodeAI's generated code and explanations
• System messages - Status updates and notifications
• File updates - Notifications about file changes
• Errors - Error messages and warnings

You can switch between AI models:

• Claude Haiku 4.5 - Fast and efficient (default)
• Claude Sonnet 4.5 - More powerful for complex tasks

Use the model selector in the chat interface to switch models. Different models may produce different results for the same prompt.

To get the best results:

• Be specific about what you want
• Reference existing components by name when possible
• Break complex requests into smaller steps
• Provide context when asking for changes
• Use natural language - no need for special syntax

The file explorer shows your project structure:

• Click folders to expand/collapse
• Click files to view their contents
• See file icons indicating file types
• Track which files have been modified

When you click a file:

• The file content appears in the code viewer
• Syntax highlighting is applied automatically
• You can copy code snippets
• File path is shown at the top

You can request file operations via chat:

• "Create a new component called Button.jsx"
• "Delete the old Header.jsx file"
• "Move the utils folder to src/lib"
• "Rename App.jsx to Main.jsx"