​

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

​

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:

​

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:

​

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