AI Coding Agent

The AI Coding Agent is your AI-powered assistant that can write, edit, and understand code right in your browser. Works just like Cursor - real-time streaming, multiple files, and 12+ models to choose from.

Beta Notice: This feature is currently in beta. Some things may not work perfectly yet, but we're actively improving it based on your feedback.

What Can the AI Agent Do?

• Write code - Ask it to create components, functions, or entire files
• Edit existing code - Refactor, fix bugs, or improve your code
• Understand your project - Read multiple files to understand context
• Answer questions - Explain code, suggest best practices, help debug
• Work with multiple files - Edit several files in a single conversation

How to Access

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

1. Open any project in PlayCode
2. Look for the AI chat panel on the right side (or click the AI icon)
3. Start typing your request

Choosing a Model

Click the model dropdown at the top of the chat to switch between AI models. Each model shows a cost indicator ($-$$$$) so you know what to expect. Hover for full details.

Budget Models ($): Most Affordable

• Grok Code Fast 1 (Default): Best value for coding. Fast, affordable, and produces quality code. Recommended for most users.
• Grok 4.1 Fast Reasoning: Deep thinking with 2M context for huge projects. Takes longer but reasons through problems.
• Grok 4.1 Fast Non-Reasoning: Quick responses with 2M context. Fast but less thorough than reasoning variant.
• Gemini Flash (Latest): Google's fast model. 1M context for large codebases. Great for quick iterations.

Standard Models ($$): Balanced

• Claude Haiku 4.5: Anthropic's fast model. Quick responses, good code quality. Great for rapid prototyping.
• GPT-5.1 Codex Mini: OpenAI's efficient coder. Faster and cheaper than full Codex. Good for simpler tasks.

Premium Models ($$$): Higher Quality

• Claude Sonnet 4.5: High-quality coding. Excellent code structure and design. Second best after Opus.
• GPT-5.1 Codex: OpenAI's specialized coder. Strong at complex algorithms and system design.
• Gemini 3 Pro (Preview): Google's flagship. 1M context for massive codebases. Great for complex refactoring.

Elite Models ($$$$): Best Quality

• Claude Opus 4.5: Best code quality overall. Superior design, efficient context usage. Worth it for production code.
• OpenAI o3: Advanced reasoning. Thinks deeply about complex problems. Use for tricky bugs and architecture decisions.

Basic Usage

Writing New Code

Just describe what you want:

• "Create a React component for a login form"
• "Add a dark mode toggle to App.tsx"
• "Write a function to fetch user data from an API"

Editing Existing Code

Reference the file you want to change:

• "Fix the bug in utils.ts"
• "Refactor the handleSubmit function to use async/await"
• "Add error handling to the API calls"

Asking Questions

Get help understanding your code:

• "What does this useEffect do?"
• "Why is my component re-rendering?"
• "How should I structure this data?"

Features

Real-Time Streaming

Watch the AI write code in real-time. You can see exactly what's happening as it generates and edits your files.

Multi-Tab Support

The AI can work on multiple files simultaneously. It reads your project context and makes changes across different files in a single conversation.

Undo Changes

Made a mistake? You can undo any changes the AI made with a single click.

Chat History

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

Pricing

The AI Agent uses a pay-as-you-go model on top of your Pro subscription ($9.99/month):

• 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 Grok Code Fast 1: It's the default for a reason, cheap and good quality
• Be specific: "Add a blue button" is better than "make it look nice"
• Provide context: Mention the file or component you're working with
• Start simple: Break complex tasks into smaller steps
• Review changes: Always review the AI's changes before accepting
• Use budget ($) models for exploration: Switch to premium/elite for final polish

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 .