AI Agent

The AI Agent is your personal website builder. Describe what you want in plain language, and the AI creates it for you - building pages, generating images, writing content, and handling all the technical details. Choose from 3 modes and 10 AI models.

What Can the AI Agent Do?

  • Build websites from scratch - Describe your idea and watch it come to life
  • Edit anything - Change text, colors, layout, images - just ask
  • Generate images and icons - AI creates visuals, logos, and graphics for your site
  • Understand your project - Reads your entire project to make smart changes
  • Answer questions - Explain what's on the page, suggest improvements, help you decide

How to Use

Pro subscription required. The AI Agent is available to Pro subscribers.

  1. Open any project in PlayCode
  2. Look for the AI chat panel on the right side (or click the AI icon)
  3. Describe what you want - in any language

AI Modes

PlayCode offers 3 modes that balance cost and quality. You choose a mode when you start, and can change it anytime.

Economy Mode

Lowest cost. Uses Gemini for everything - reading your project, thinking, and building. May be slower for complex tasks, but great for simple changes and iterations.

  • Default economy model: Gemini 3 Flash
  • Best for: quick edits, text changes, simple tasks

Smart Mode (Recommended)

Best value. Uses a cheap model (Gemini) for reading and understanding your project, but switches to a premium model (Claude) when writing and building. This keeps costs low while maintaining high quality output.

  • Reading/thinking: Gemini 3 Flash (economy model)
  • Building/writing: Claude Opus 4.6 (quality model)
  • Best for: most tasks - you get great results at a balanced cost

Pro Mode

Best quality. Uses Claude for everything - reading, thinking, and building. Fastest responses, highest quality results. Costs more per message, but the difference in quality is immediately visible.

  • Uses Claude Opus 4.6 for everything
  • Best for: complex projects, impressive results, when quality matters most

Changing Models

You can customize which models each mode uses. Go to Menu → Preferences → AI Model to change the economy model or the quality model independently.

Economy Model Options

Used for reading/thinking in Economy and Smart modes:

  • Gemini 3 Flash (Default) - Google's fast model, great for quick tasks
  • Grok Code Fast - Fast and affordable
  • Grok 4.1 Fast - Quick responses
  • Grok 4.1 Fast Reasoning - Thinks more carefully, takes longer

Quality Model Options

Used for building in Smart and Pro modes:

  • Claude Opus 4.6 (Default) - Best quality overall, superior design
  • Claude Sonnet 4.6 - High quality, slightly faster than Opus
  • Claude Haiku 4.5 - Fast responses, good quality
  • GPT-5.4 - OpenAI's latest and most capable model
  • GPT-5.3 Codex - OpenAI's specialized builder
  • Gemini 3.1 Pro - Google's flagship, handles large projects well

What to Ask

Building

Start with what you want to achieve:

  • "Build a landing page for my photography business"
  • "Create a pricing page with three plans"
  • "Add a contact form with email, phone, and message fields"

Changing Things

Tell the AI what to fix or update:

  • "Make the header background dark blue"
  • "Move the testimonials section above the pricing"
  • "Replace the hero image with something more professional"

Getting Help

Ask questions about your project:

  • "How do I add a Google Maps embed?"
  • "What would look better here - a grid or a carousel?"
  • "Can you suggest a better color scheme?"

Features

Real-Time Preview

Watch the AI build in real-time. You can see your website taking shape as the AI works, and the preview updates instantly.

Undo Changes

Not happy with a change? Undo it with a single click and try a different direction.

Chat History

All your conversations are saved. You can rename or delete chats, and pick up where you left off.

Visual Editor

Click anything on your website preview and tell the AI to change it. No need to describe where things are - just click and say what you want.

Pricing

The AI Agent uses a pay-as-you-go model on top of your Pro subscription:

  • You only pay for what you use
  • Different models have different costs (cheaper models cost less)
  • Your balance never expires
  • Pro subscribers get bonus credits with their subscription

Learn more about AI credits →

Tips for Best Results

  • Start with Smart mode - Best balance of quality and cost for most tasks
  • Describe outcomes - "I need a modern landing page for a bakery" works better than vague requests
  • Let the AI ask questions - If you're unsure about details, the AI will guide you
  • Build step by step - Start with the basics, then add features one at a time
  • Give feedback - Tell the AI what you like and what to change
  • Use Economy for simple tasks - Quick text changes don't need premium models
  • Use Pro for important work - When quality matters most, Pro mode delivers the best results

Need Help?

Having issues with the AI Agent? Contact us through the chat button in the bottom right corner of any page, or report bugs at playcode.canny.io/bug-reports .

Need more help?

Can't find what you're looking for? Chat with us or send us an email.