> ## Documentation Index
> Fetch the complete documentation index at: https://docs.seemodo.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# AI Coder
> The full-featured chat interface for building and iterating on your applications. Includes voice input, file mentions, prompt queue, visual edits, and multiple AI modes.
# AI Coder
The AI Coder is Seemodo's conversational development interface. Available in the Project Editor (`/projects/[id]`), it lets you build complete applications through chat.
## The Project Editor layout
When you open a project, you see a split-screen workspace:
| Area | Purpose |
| ----------------- | ------------------------------------------------------------------------ |
| **Top toolbar** | Back button, project name, Visual Edits, History, Publish, GitHub, Share |
| **Left panel** | AI Assistant (chat), History, or Visual Edits โ switchable via tabs |
| **Resize handle** | Drag to adjust panel widths (320โ700px) |
| **Right panel** | Live Preview of your running app |
## Top toolbar buttons
| Button | Action |
| ------------------------------- | -------------------------------------------------------- |
| **โ Back** | Return to the Dashboard |
| **Project name** (with chevron) | Click to open Project Settings modal |
| **๐ Visual** | Switch left panel to Visual Edits mode |
| **๐ History** | Switch left panel to chat history view |
| **Publish** (green) | Open the Deploy panel to publish your app |
| **GitHub** | Open GitHub connection dialog (green dot when connected) |
| **Share** | Open sharing dialog to invite collaborators |
## The AI Chat panel
### Header
Shows "AI Assistant" with an "Active" indicator when the AI is streaming a response.
### Chat modes
Click the **mode selector** at the bottom of the chat input to switch between:
| Mode | Description | Tool limit |
| --------------- | -------------------------------------------------------------------- | ----------------- |
| **Chat & Edit** | Default mode. AI reads your code, plans changes, edits files. | Max 25 tool calls |
| **Planning** | Discussion-only mode. AI helps you plan without making code changes. | No tools |
| **Agent** | Extended mode with more powerful tools and longer tool chains. | Max 50 tool calls |
### Message input
The composer at the bottom provides:
* **Text area** โ Type your prompt. Supports multi-line (Shift+Enter for new line, Enter to send).
* **@ File mentions** โ Type `@` to open an autocomplete dropdown with up to 10 matching project files. Select a file (Tab/Enter) to include its content as context for the AI. Press Escape to dismiss.
* **๐ค Voice input** โ Click the microphone icon to dictate via Web Speech API. Continuous recognition with interim results. Transcribed text appears in the input for you to review before sending.
* **Send** โ Submit your message (or press Enter). While AI is streaming, this becomes **"Add to queue"** (amber styling).
* **Stop** โ Appears while AI is streaming; click to cancel the current response immediately.
When the AI is busy and you type a message, a hint appears: "Press Enter to add to queue ยท Message will be sent when AI finishes".
### Prompt Queue
When the AI is already working, you can keep sending messages. They enter a **queue**:
* **Queue badge** โ Shows count of pending messages
* **Pause/Resume** โ Pause queue processing
* **Expand** โ See all queued messages
* **Reorder** โ Drag messages to change execution order
* **Remove** โ Delete individual queued messages
The queue processes messages one at a time after each AI response completes.
### Streaming status
While the AI is working, a shimmer bar at the bottom shows:
* Spinner with status text (e.g., "Thinking...", "Writing code...")
* Step counter when processing multiple operations ("Step X/Y")
* The header shows a green pulsing dot with "Active"
### AI responses
Each response can show:
* **Markdown content** โ Formatted text with code blocks, lists, headings
* **Thinking** (collapsible) โ The AI's internal reasoning process
* **Tool Calls** (collapsible) โ Which tools the AI used (file edits, terminal commands, etc.)
* **Files Modified** (collapsible) โ List of files that were changed with file paths
* **Task progress** โ Structured checklist of steps the AI is working through (with progress bar)
* **Suggestion buttons** โ Bordered blue pills with context-aware next steps to click
* **Error messages** โ Red-highlighted when something went wrong
### Tool approval
When the AI wants to use a tool that requires confirmation:
* An **"Approval Required"** card appears
* Click **Approve** to allow the action
* Click **Deny** to reject it
Configure which tools need approval in **Settings** โ **Tool Approval**.
### Supabase connection prompt
If the AI detects your app needs a database, a special card appears:
* "Database required" message
* **Connect** button โ opens Seemodo Cloud setup
* **Skip** button โ continue without database
## Suggestion buttons
After each AI response, clickable suggestion buttons appear with logical next steps based on what was just built. Click any suggestion to send it as your next message.
## Task panel
During complex operations, the AI shows a structured task list:
* **Progress bar** โ Visual indicator of completion
* **Task items** โ Each with status (pending โ in progress โ done)
* **Subtasks** โ Nested under parent tasks
## History panel
Click the **History** tab to browse all past conversations:
* Chronological message list
* User and AI messages with timestamps
* Useful for reviewing what was built and decisions made
## Visual Edits panel
Click the **Visual** tab (or ๐ paintbrush icon) for point-and-click editing:
Click the crosshair icon in the preview toolbar.
The element gets highlighted and selected. A chip shows the element tag, selector, and source file.
The Visual Edits panel shows tabs for:
* **Text** โ Edit content, font size, font weight, text alignment, color
* **Colors** โ Background color, text color
* **Spacing** โ Margin and padding (top, right, bottom, left) with sliders
* **Border** โ Width, color, radius, style
* **Shadow** โ Box shadow configuration
* **Image** โ Background image URL, upload, or AI generation
Changes apply instantly in the preview as CSS overrides โ no permanent modification yet.
* **Save Changes** โ Converts your visual edits into a natural-language prompt that the AI applies as permanent code changes
* **Discard** โ Removes all temporary overrides
## Live Preview panel
The right panel shows your running application:
### Preview toolbar
| Button | Action |
| ------------------------- | -------------------------------------- |
| **Desktop/Tablet/Mobile** | Switch viewport width |
| **Crosshair** | Enable element picker for Visual Edits |
| **Refresh** | Manually reload the preview |
| **External link** | Open preview in a new browser tab |
### Preview tabs
| Tab | Content |
| ------------ | ------------------------------------------------- |
| **Preview** | Live running app in an iframe |
| **Code** | Browse project source code (file tree + viewer) |
| **Console** | Browser console output with error count badge |
| **Database** | Seemodo Cloud database interface (when connected) |
### Auto-refresh behavior
The preview automatically refreshes:
* After the AI finishes making changes (streaming ends)
* After package installation completes
* Via HMR (Hot Module Replacement) for file changes
If HMR heartbeat fails 3 times, the preview reloads automatically.
## Initial prompt
When you create a new project with a prompt (from Dashboard or template), the AI automatically starts building based on your description โ no need to send a first message.
## Tips for effective development
* **Use @ mentions** to point the AI at specific files: "@src/components/Header.tsx make the logo larger"
* **Use Planning mode** when you want to discuss architecture before making changes
* **Use Agent mode** for complex multi-file operations that need more tool calls
* **Queue multiple prompts** if you know what sequence of changes you want
* **Use Visual Edits** for quick styling tweaks without typing
* **Check the Console tab** if something looks broken โ errors appear there
## Next steps
Generate screens on the canvas
Configure AI models and tool approval