> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Chat Interface
> Your command center for building apps
# Chat Interface
The chat interface is where you spend most of your time in Nativeline. It's your command center for building, testing, and refining your app.
## Workspace Overview
When you open a project, you'll see the main workspace:
```
┌──────────────────────────────────────────────────────────────────┐
│ Toolbar (Home, Project Switcher, Simulator Settings, Profile) │
├──────────────────────────────────────────────────────────────────┤
│ Build | Database | Code | Settings │
├─────────────────────────────┬────────────────────────────────────┤
│ │ │
│ Conversation Area │ Embedded Simulator │
│ │ │
│ Your messages → (right) │ ┌──────────────────────┐ │
│ ← AI responses (left) │ │ │ │
│ Tool cards, code previews │ │ Your running app │ │
│ │ │ │ │
│ │ └──────────────────────┘ │
│ │ │
├─────────────────────────────┤ │
│ # Toolkit │ AI Mode │ Send │
│ Message Input │
└──────────────────────────────────────────────────────────────────┘
```
***
## Main Tabs
### Build Tab
Your primary workspace. Chat with the AI on the left, see your app running in the [embedded simulator](/features/embedded-simulator) on the right. For Mac projects, the chat takes the full width since Mac apps run in their own window.
### Database Tab
View and manage your Supabase database tables, schemas, and migrations. Appears when Supabase is connected. **Pro plan required.** See [Database Management](/features/database-overview).
### Code Tab
View and edit your app's Swift code directly. **Pro plan required.** See [Code Editor](/features/code-editor).
### Settings Tab
Configure your app's identity, permissions, capabilities, and appearance. See [Project Settings](/features/project-settings).
***
## Sending Messages
### Basic Input
Type your message and:
* **Enter** — Send message
* **Shift+Enter** — New line
* **Cmd+Enter** — Quick send
### AI Mode Selector
The AI mode selector sits in the chat input area. Click it to switch between:
* **Quick** — Fast & efficient, lowest cost
* **Enhanced** — Best designs, the default (recommended)
* **Max** — Deep reasoning for complex logic
See [AI Modes](/features/ai-modes) for details on choosing the right mode.
### Attaching Images
Drag and drop images into the chat, or use **Cmd+V** to paste from your clipboard:
* Up to **5 images** per message
* Formats: PNG, JPG, JPEG, GIF, WebP, HEIC
Images are used as visual references — the AI sees them and matches your designs. See [Using Images](/features/using-images) for best practices.
***
## Toolkit: # Commands
The Toolkit lets you attach real assets directly into your app. Type **#** in the chat input to open the toolkit popover.
### Available Commands
| Command | What It Adds |
| ----------- | ------------------------------------- |
| **#image** | Images to your asset catalog |
| **#font** | Custom TTF/OTF fonts |
| **#color** | Named colors (opens color picker) |
| **#sound** | Audio files (MP3, WAV, AIFF) |
| **#video** | Video files (MOV, MP4) |
| **#data** | JSON/CSV data files |
| **#lottie** | Lottie animations (auto-adds package) |
| **#3d** | 3D models (USDZ, Reality) |
### How It Works
1. Type **#** in the chat input — the toolkit popover appears
2. Click a command — a file picker opens (or color picker for #color)
3. Select your file — it appears as an **orange chip** below the input
4. Add a description: "Use this font for all headings"
5. Press Enter to send
The AI integrates the asset into your app automatically.
**#image** adds files to your app bundle. To show the AI a design reference or mockup, drag-and-drop images directly into the chat instead.
See the full [Toolkit documentation](/toolkit/overview) for details on each command.
***
## The Conversation Area
### Your Messages (Right Side)
When you send a message, it appears on the right:
* Your text
* Any attached images
* Toolkit file chips (if you used # commands)
* Timestamp
### AI Responses (Left Side)
The AI's responses include:
**Text Explanations**
The AI explains what it's doing, answers questions, or asks for clarification.
**Thinking Sections**
For complex requests, you may see collapsible thinking sections that show the AI's reasoning process. Click to expand/collapse.
**Tool Cards**
Actions the AI takes appear as cards showing:
* File operations (creating, reading, editing files)
* Build commands
* Other tool executions
**Build Status**
Indicators showing:
* **Building...** — App compiling
* **Success** — App running in the embedded simulator
* **Error** — Build failed, AI will attempt to fix
***
## Understanding AI Responses
### When Things Work
You'll see:
1. Tool cards indicating what actions are being taken
2. Files being created or edited
3. App automatically building and launching in the simulator
4. Success when the build completes
### When Errors Occur
Build failures are handled automatically:
1. AI detects the error
2. Shows what went wrong
3. Proposes a fix
4. Applies fix and rebuilds
This repeats up to 3 times. Don't panic — errors are normal. See [Debugging Guide](/guides/debugging) for details.
### When AI Needs Clarification
The AI may ask questions:
* "Did you mean the header at the top or the section title?"
* "What color for the button?"
* "Should this save locally or to the cloud?"
Answer naturally to continue.
***
## The Embedded Simulator
The simulator is embedded directly in the Build tab — no separate windows to manage:
* **Instant feedback** — See changes as builds complete
* **Real interaction** — Tap, scroll, use your app
* **Auto-launches** — Starts automatically on successful builds
Mac apps run natively in their own window instead of the simulator. The chat interface takes the full width when building Mac apps.
See [Embedded Simulator](/features/embedded-simulator) for the full guide.
***
## Conversation Management
### Scrolling History
Your conversation is saved. Scroll up to see:
* Previous requests
* What the AI built
* Earlier iterations
### Slash Commands
Nativeline supports several slash commands for power users:
| Command | What it does |
| ------------ | ----------------------------------------- |
| `/help` | Shows all available commands |
| `/plan` | Shows current plan status and progress |
| `/planclear` | Clears the current plan (keeps your code) |
| `/debug` | Toggles debug logging on/off |
`/planclear` is useful when the AI seems stuck or you want to start a new approach. It clears the internal plan but preserves all your code.
### Starting Fresh Conversation
If the conversation gets too long:
1. Clear conversation option in menu
2. Confirm
3. Your code is preserved — only chat history clears
Clearing conversation doesn't delete your app. Only the chat history is cleared. Nativeline also manages long conversations automatically with [smart context compression](/features/context-management).
***
## Keyboard Shortcuts
| Action | Shortcut |
| ------------ | ----------- |
| Send message | Enter |
| New line | Shift+Enter |
| Quick send | Cmd+Enter |
| Stop AI | Escape |
| Open Toolkit | Type **#** |
| Paste image | Cmd+V |
See [Keyboard Shortcuts](/features/keyboard-shortcuts) for the complete list.
***
## Tips for Effective Building
### Start Simple
Begin with core functionality. Add polish later.
### Use the Toolkit
Drop in your own fonts, colors, sounds, and data files with [# commands](/toolkit/overview). The AI integrates them perfectly on the first try.
### Test Frequently
Check after each change. Catching issues early saves time.
### Use Images
Visual references reduce iterations. See [Using Images](/features/using-images).
### Give Feedback
If something isn't right, tell the AI:
* "That's not what I meant..."
* "Make it more..."
* "Change the color to..."
***
## Related Features
Add fonts, colors, sounds, and more with # commands
Choose the right AI model for your project