Skip to main content

​
Overview

The chat interface is how you interact with AI agents to build, modify, and debug your application. You describe what you want in natural language, and the agent writes code, creates files, runs commands, and updates your project in real time.

Natural Language

Describe features, fixes, and changes in plain English

Real-Time Streaming

Watch the agent’s response generate token by token

Tool Execution

Agents read files, write code, run shell commands, and fetch web content

Project-Aware

Agents understand your full project structure and existing code

​
Chat Layout

The chat panel is part of the project builder workspace. Its position can be customized through user preferences (left, center, or right). A typical layout looks like this: 
+-----------------------------------+
|   Code Editor / Preview           |
|                                   |
+-----------------------------------+
|   Chat History                    |
|   +---------------------------+   |
|   | You: Build a login form   |   |
|   | Agent: [streaming...]     |   |
|   +---------------------------+   |
|                                   |
|   [Agent Selector] [Message Input]|
+-----------------------------------+

​
Sending Messages

1

Select an Agent

Choose which AI agent to use from the dropdown. Each agent has a different system prompt, tool set, and AI model. The selection persists per project (stored in localStorage).
2

Type Your Message

Describe what you want to build, change, or fix. Be specific about the desired behavior, technologies, and visual design.
3

Send

Press Enter to send the message (use Shift + Enter for a new line). The agent begins processing immediately.
4

Watch the Agent Work

The agent streams its response in real time. You will see text output, tool calls (file reads, writes, shell commands), and the results of each tool execution.
5

Review the Results

Check the generated code in the editor and the updated preview. Continue the conversation to refine or extend.

​
How Streaming Works

When you send a message, the frontend establishes a streaming connection to the backend. The agent’s response arrives as a series of Server-Sent Events (SSE), each containing a typed payload.

​
Message Types

Event TypeDescription
agent_responseA chunk of the agent’s text response (streamed token by token)
agent_tool_startThe agent is calling a tool (for example, write_file or execute_command)
agent_tool_resultThe result of a tool call (file content, command output, etc.)
agent_stream_endThe agent has finished its response
agent_errorAn error occurred during processing

​
Streaming Flow

1

Message Sent

Your message is sent over the WebSocket connection with the project ID, agent ID, container ID, and view context.
2

Agent Starts Thinking

A typing indicator appears while the agent processes the request.
3

Text Streams In

agent_response events arrive with text tokens. These are displayed character by character in the chat panel.
4

Tool Calls Execute

When the agent needs to read a file, write code, or run a command, agent_tool_start events appear. The UI shows which tool is running and on which file.
5

Tool Results Return

agent_tool_result events contain the outcome (file contents, command output). The agent uses these results to decide its next action.
6

Stream Completes

An agent_stream_end event signals that the agent has finished. The chat is ready for your next message.
The streaming connection uses native fetch() with getAuthHeaders() for SSE. An AbortSignal is passed for cancellation, so you can stop a response mid-stream by clicking the cancel button.

​
Agent Selection

​
Choosing the Right Agent

Different agents excel at different tasks:
Best for: UI components, visual design, CSS styling, and fast iteration.How it works: Streams responses in real time with interleaved tool calls. Produces output quickly, making it ideal for small to medium changes.

​
Container and View Context

When you send a message, the chat includes context about which container you are working in and which view mode is active. This allows agents to scope their file operations to the correct container directory and adjust their tool usage based on the current context.

​
Edit Mode

The chat supports two modes for how the agent applies changes:
The agent generates a response and applies changes directly. This is the default mode and is best for straightforward requests where you trust the agent’s output.

​
Tool Approval Flow

Some tool executions require explicit approval before they run. This is a safety mechanism for potentially destructive operations.

​
How Approval Works

1

Agent Requests a Tool

The agent decides to use a tool that requires approval (for example, deleting a file or running a shell command).
2

Approval Card Appears

An ApprovalRequestCard component renders in the chat, showing the tool name, parameters, and what the operation will do.
3

You Approve or Reject

Click Approve to let the tool execute, or Reject to skip it. The agent will adjust its plan based on your decision.
4

Execution Continues

If approved, the tool runs and the agent continues with the result. If rejected, the agent acknowledges the rejection and may propose an alternative.

​
What You Can Ask For

  • “Create a login form with email and password fields, validation, and a submit button”
  • “Add a responsive navigation bar with a logo on the left and menu items on the right”
  • “Build a product card component with image, title, price, and add-to-cart button”
  • “Create a dashboard page with a sidebar, header, and content area”

​
Agent Responses

Agents can respond with several types of content:

Code Generation

Creates new files or modifies existing ones. Code blocks show syntax-highlighted output with the target file path.

Explanations

Describes what was changed and why. Useful for understanding the agent’s reasoning.

Shell Commands

Runs commands like npm install, pip install, or custom scripts. Output is displayed inline.

File Reads

Reads existing files to understand context before making changes. The agent often reads several files before writing.

​
Chat History

Your conversation is preserved per project:
  • Persistence: Chat history is saved in the database and survives browser refreshes
  • Context: Agents maintain conversation context, so they remember what was discussed earlier
  • Per-agent threads: Each agent has its own conversation history within a project
  • Scroll back: Scroll up to review previous messages and tool calls

​
Managing History

Start a fresh conversation. The agent loses all context from previous messages. Useful when switching to a completely different task.
Click the copy button on any code block to copy the code to your clipboard. Useful for saving snippets or sharing solutions.

​
Writing Effective Prompts

​
Be Specific

Good

“Create a blue primary button component with rounded corners (8px radius), white text, and a darker blue hover effect. Use Tailwind CSS classes.”

Too Vague

“Make a button”

​
Include Technical Details

Good

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

Too Vague

“Add navigation”

​
Break Down Complex Tasks

Instead of asking for an entire e-commerce site in one message, break it into steps:
  1. “Create a ProductCard component with image, title, price, and an Add to Cart button”
  2. “Now create a ProductGrid that renders multiple ProductCards in a responsive grid”
  3. “Add a search bar above the grid that filters products by title”
  4. “Create a ShoppingCart sidebar that shows selected items with quantities”
Each step gives the agent a focused task, which produces better results than a single massive request.

​
Keyboard Shortcuts

ShortcutAction
EnterSend message
Shift + EnterNew line in message
Ctrl/Cmd + KOpen command palette
EscBlur chat input

​
Troubleshooting

Cause: WebSocket connection lost, API key issue, or the AI model is unavailable.What to try:
  • Check your internet connection
  • Verify your API keys are configured in Settings
  • Refresh the page to re-establish the WebSocket connection
  • Try switching to a different AI model
Cause: The agent generated code in its text response but did not use the write_file tool.What to try:
  • Ask the agent specifically: “Write that code to src/components/Button.tsx”
  • Check if the container is running (agents cannot write files to stopped containers)
  • Verify the agent has the write_file tool enabled
Cause: Ambiguous prompt or the agent lacks context about your project.What to try:
  • Be more specific about what you want
  • Reference specific files: “In src/App.tsx, change the header color to blue”
  • Provide examples of the desired output
  • Try a different agent (IterativeAgent for complex tasks, StreamAgent for UI work)
  • Clear the chat and start fresh if the context has become confusing
Cause: Network interruption or server-side timeout.What to try:
  • Click the cancel/stop button to abort the current stream
  • Refresh the page
  • Send your message again
  • If the problem persists, check if the backend is responding (try loading the Dashboard)

​
Best Practices

Start with basic structure, then add complexity one step at a time. Test after each change. This produces much better results than trying to build everything in a single prompt.
Always read through what the agent produced. Understand the patterns it used, check for edge cases, and verify that the code aligns with your project’s conventions.
Use StreamAgent for UI work and fast iteration. Switch to IterativeAgent for complex logic, multi-file refactors, and debugging. Each agent maintains its own context within the project.
If something is unclear or not quite right, ask the agent to explain, fix, or adjust. The conversation context means follow-up requests are often more effective than starting from scratch.

​
Next Steps

Manage Your Library

Customize agents, create your own, and manage AI models

Code Editor

Manually edit and refine AI-generated code

Live Preview

See changes in real time as the agent builds

Marketplace

Discover specialized agents for your workflow