Skip to main content

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

​
Code Tab

View and edit your app’s Swift code directly. Pro plan required. See Code Editor.

​
Settings Tab

Configure your app’s identity, permissions, capabilities, and appearance. See 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 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 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

CommandWhat It Adds
#imageImages to your asset catalog
#fontCustom TTF/OTF fonts
#colorNamed colors (opens color picker)
#soundAudio files (MP3, WAV, AIFF)
#videoVideo files (MOV, MP4)
#dataJSON/CSV data files
#lottieLottie animations (auto-adds package)
#3d3D 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 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 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 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:
CommandWhat it does
/helpShows all available commands
/planShows current plan status and progress
/planclearClears the current plan (keeps your code)
/debugToggles 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.

​
Keyboard Shortcuts

ActionShortcut
Send messageEnter
New lineShift+Enter
Quick sendCmd+Enter
Stop AIEscape
Open ToolkitType #
Paste imageCmd+V
See 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. 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.

​
Give Feedback

If something isn’t right, tell the AI:
  • “That’s not what I meant…”
  • “Make it more…”
  • “Change the color to…”

Toolkit

Add fonts, colors, sounds, and more with # commands

AI Modes

Choose the right AI model for your project