Skip to main content

​
Overview

The chat interface is your primary way to communicate with AI agents. Describe what you want to build, and agents generate the code for you.

Natural Language

Describe features in plain English

Real-Time Streaming

See responses generated live

Code Generation

Agents write code directly to your project

Context-Aware

Agents understand your full project

​
Chat Layout

The chat panel appears at the bottom of the workspace: 
┌─────────────────────────────────┐
│     Code Editor / File Tree     │
│                                 │
├─────────────────────────────────┤
│  Chat History                   │
│  ┌──────────────────────────┐   │
│  │ You: Build a login form  │   │
│  │ Agent: [generating...]   │   │
│  └──────────────────────────┘   │
│                                 │
│  [Agent Selector] [Type here]  │
└─────────────────────────────────┘

​
Sending Messages

1

Select Agent

Choose which AI agent to use from dropdown
2

Type Message

Describe what you want to build or change
3

Send

Press Enter or click Send button
4

Agent Responds

Agent generates code and explanation
5

Review Changes

Check generated code in editor

​
Message Types

​
Your Messages

What you can ask for:
  • Build Features
  • Modify Code
  • Debug Issues
  • Ask Questions
Examples:
  • “Create a login form with email and password”
  • “Add a navigation bar with logo and menu”
  • “Build a product card component”
  • “Make a contact form with validation”

​
Agent Responses

Agents can respond with:

Code Generation

Creates or modifies files in your project

Explanations

Explains what it did and why

Suggestions

Recommends improvements or alternatives

Questions

Asks for clarification when needed

​
Agent Selection

Choose the right agent for your task:
  • Stream Agent
  • Iterative Agent
Best for:
  • UI components
  • Visual design
  • Fast iteration
  • Simple features
Behavior:
  • Streams code in real-time
  • Faster responses
  • Good for HTML/CSS/React
You can switch agents mid-conversation. Each agent maintains separate context.

​
Streaming Responses

​
How Streaming Works

1

Agent Starts

Agent begins thinking about your request
2

Code Streams

Code appears token-by-token in real-time
3

Files Update

Files are created/modified as code generates
4

Preview Updates

Live preview shows changes immediately
5

Complete

Agent finishes and awaits next instruction

​
Streaming Indicators

  • Typing Indicator: Agent is thinking
  • Code Blocks: Syntax-highlighted as it generates
  • File Tags: Shows which files are being modified
  • Progress: See generation progress

​
Chat History

Your conversation history is preserved:
  • Scroll Up: See previous messages
  • Context: Agents remember conversation
  • Threads: Each agent has separate history
  • Persistence: History saved with project

​
Managing History

  • Remove all messages
  • Start fresh conversation
  • Agents lose context
  • Use when switching topics
  • Click to copy code blocks
  • Share conversations
  • Save prompts
  • Document solutions
Coming soon:
  • Bookmark useful exchanges
  • Create snippets
  • Build prompt library

​
Writing Effective Prompts

​
Be Specific

Good

“Create a blue primary button with rounded corners, white text, and a hover effect that makes it darker”

Bad

“Make a button”

​
Include Details

Good

“Add a navigation bar with logo on left, menu items (Home, About, Contact) centered, and a Login button on right. Use Tailwind CSS”

Bad

“Add navigation”

​
Specify Technology

Good

“Create a form using React Hook Form with Zod validation for email and password fields”

Bad

“Make a form”

​
Break Down Complex Tasks

Instead of:
“Build a complete e-commerce site with products, cart, checkout, and admin panel”
Try:
  1. “First, create a product card component”
  2. “Now create a product grid to display multiple cards”
  3. “Add filtering and search functionality”
  4. “Create a shopping cart component” …and so on

​
Best Practices

  • Start with basic structure
  • Add features one at a time
  • Test after each change
  • Refine through conversation
  • Always check generated code
  • Understand what was created
  • Test functionality
  • Ask for explanations
  • Use Stream for UI
  • Use Iterative for logic
  • Switch based on task
  • Each maintains context
  • Request improvements
  • Fix issues immediately
  • Ask “why” for learning
  • Clarify unclear responses

​
Chat Features

​
Code Blocks

AI responses include formatted code:
  • Syntax Highlighting: Color-coded
  • Copy Button: One-click copy
  • File Path: Shows target file
  • Language Tag: Indicates file type

​
File Operations

Agents can:
  • Create Files
  • Modify Files
  • Delete Code
  • Generate new components
  • Create utility files
  • Add config files
  • Make test files

​
Troubleshooting

Problem: No response after sending messageSolutions:
  • Check internet connection
  • Verify API keys are set
  • Try refreshing the page
  • Check if model is working in settings
Problem: Generated code doesn’t appear in filesSolutions:
  • Check for syntax errors in response
  • Look for error messages
  • Try regenerating response
  • Manually apply code from chat
Problem: Agent doesn’t understand requestSolutions:
  • Be more specific
  • Provide examples
  • Break down into smaller tasks
  • Clear chat and start fresh
Problem: Agent generates wrong codeSolutions:
  • Explain what’s wrong
  • Provide correct example
  • Ask to fix specific issues
  • Try different agent

​
Keyboard Shortcuts

Send Message

Enter: Send message Shift + Enter: New line

Navigation

Ctrl/Cmd + K: Focus chat input Esc: Blur chat input

​
Next Steps

Using Agents

Learn more about AI agents

Code Editor

Manually edit generated code

Live Preview

See your changes in real-time

Agent Types

Understanding agent differences