Skip to main content

​
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:

​
Top toolbar buttons

​
The AI Chat panel

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:

​
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:
1

Enable the element picker

Click the crosshair icon in the preview toolbar.
2

Click an element in the preview

The element gets highlighted and selected. A chip shows the element tag, selector, and source file.
3

Edit properties

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
4

Preview changes live

Changes apply instantly in the preview as CSS overrides — no permanent modification yet.
5

Save or discard

  • 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

​
Preview tabs

​
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

Visual Designer

Generate screens on the canvas

Settings

Configure AI models and tool approval