Back to Documentation

Best Practices

Learn the best practices for building amazing applications with CodeAI.

Writing Effective Prompts

Be Specific

Instead of vague requests, provide clear, specific instructions:

❌ Bad:

"Make it look better"

✅ Good:

"Change the hero section background to a dark gradient from #1a1a2e to #16213e and increase the heading font size to 4xl"

Provide Context

Reference existing components and structure when making changes:

❌ Bad:

"Add a button"

✅ Good:

"Add a 'Get Started' button to the hero section below the heading, styled to match the existing brand theme"

Break Down Complex Requests

For complex features, break them into smaller, manageable steps:

Instead of: "Build a complete e-commerce site"

Try:

  1. "Create a product listing page with cards"
  2. "Add a shopping cart component"
  3. "Implement checkout flow"

Use Examples

When describing design or functionality, reference examples:

"Create a navigation bar similar to Stripe's website with a glassmorphism effect"

Understanding Incremental vs Full Generation

When to Use Incremental Edits

CodeAI automatically uses incremental edits for:

  • Style changes: "Change the color to blue"
  • Text updates: "Update the heading to say 'Welcome'"
  • Adding elements: "Add a button to the header"
  • Small modifications: "Make the padding larger"
  • Fixing issues: "Fix the broken link"

Benefit: Incremental edits are faster and preserve your existing code structure.

When Full Regeneration Happens

CodeAI will regenerate when you use keywords like:

  • "Rebuild" or "Recreate"
  • "Start over" or "Begin again"
  • "Redesign" or "Overhaul"
  • "Completely change"

Note: Full regeneration creates a new app from scratch, so be sure this is what you want.

Optimizing for Incremental Edits

To ensure CodeAI makes targeted edits:

  • Reference specific components by name
  • Mention the file or location you want to change
  • Use action words like "update", "change", "modify"
  • Avoid words that suggest starting fresh

Managing Sandbox Lifecycle

Sandbox Timeout

Sandboxes automatically timeout after 30 minutes of inactivity. To prevent this:

  • Keep interacting with your workspace
  • Make regular code changes or edits
  • Refresh the preview periodically

Tip: If your sandbox times out, CodeAI will automatically create a new one when you make your next request.

Sandbox Providers

Choose the right provider for your needs:

Vercel Sandbox (Default)

  • Faster startup time
  • Better for Next.js/React apps
  • Automatic OIDC authentication

E2B Sandbox

  • More control over environment
  • Better for custom configurations
  • Requires E2B API key

Performance Optimization

To keep your sandbox running smoothly:

  • Avoid installing unnecessary packages
  • Keep file sizes reasonable
  • Don't create too many files at once
  • Use incremental edits instead of full regeneration when possible

Handling Errors and Debugging

Common Errors

Package Not Found

Solution: Ask CodeAI to "install [package-name]" or "check and install missing packages"

Import Errors

Solution: Verify file paths are correct, or ask CodeAI to "fix the import in [filename]"

Build Errors

Solution: Check the error message in chat, then ask CodeAI to "fix the build error" or describe the specific issue

Debugging Strategies

When something isn't working:

  1. Check the error message in the chat
  2. Review the file that's causing the issue
  3. Look at the browser console (if preview is open)
  4. Ask CodeAI to explain the error: "What's wrong with this code?"
  5. Request a fix: "Fix the error in [filename]"

Preventing Errors

Best practices to avoid errors:

  • Install packages before importing them
  • Check file paths when referencing components
  • Verify component names match imports
  • Test incrementally - don't generate everything at once
  • Review generated code before applying

Code Quality Tips

Component Organization

Keep your code organized:

  • One component per file
  • Group related components in folders
  • Use descriptive file and component names
  • Keep components focused and single-purpose

Styling Best Practices

For better styling:

  • Use Tailwind CSS classes (already configured)
  • Create reusable style patterns
  • Use CSS variables for theme colors
  • Keep styles consistent across components
  • Request responsive design: "Make it mobile-friendly"

Performance Considerations

Optimize your generated code:

  • Request code splitting: "Split into smaller components"
  • Avoid unnecessary re-renders
  • Use lazy loading for images and heavy components
  • Minimize bundle size by avoiding large dependencies
  • Ask CodeAI: "Optimize this component for performance"

Advanced Techniques

Leveraging Conversation Context

CodeAI remembers your conversation, so you can:

  • Reference previous components: "Update the header we created"
  • Build on earlier work: "Add the same styling to the footer"
  • Continue features: "Finish the login form we started"
  • Maintain consistency: "Match the design from the hero section"

Using Website Cloning Effectively

When cloning websites:

  • Start with a simple, well-structured site
  • Clone the structure first, then refine details
  • Ask for specific improvements: "Make the colors more vibrant"
  • Combine multiple sites: "Use the layout from site A with colors from site B"

Iterative Refinement

The best results come from iteration:

  1. Generate the initial version
  2. Review and identify improvements
  3. Make targeted edits
  4. Test and refine
  5. Repeat until satisfied

Pro Tip: Don't try to get everything perfect in one generation. Build iteratively for better results.

Key Takeaways

  • Be specific and provide context in your prompts
  • Use incremental edits for faster, targeted changes
  • Iterate and refine rather than trying to perfect everything at once
  • Leverage conversation context to build on previous work
  • Handle errors proactively by checking packages and imports
  • Organize code well from the start for easier maintenance