Skip to main content

​
AI Chat Interface

The AI chat is your primary tool for building apps in Natively. Through natural conversation, you can create features, fix bugs, and refine your app.

​
How It Works

The chat panel on the left side of the screen is where you interact with the AI. Simply describe what you want, and the AI will:
  1. Understand your intent
  2. Generate or modify code
  3. Build and deploy changes
  4. Show results in the preview
The AI maintains full context of your conversation and project. You can reference previous changes, screens, or features by name.

​
Writing Effective Prompts

The quality of your prompts directly affects the quality of results. Here are proven patterns for success:

​
Be Specific

Add a profile screen with:
- User avatar (circular, 100px)
- Username in bold, 24px font
- Bio text below, max 3 lines
- Edit Profile button at the bottom

​
Describe the Behavior

When the user taps the heart icon:
1. Change the icon from outline to filled
2. Increment the like count by 1
3. Save to their favorites list
4. Show a subtle haptic feedback

​
Reference Existing Elements

On the recipe detail screen, add a "Save Recipe"
button below the ingredients list. Use the same
button style as the "Start Cooking" button.

​
Common Use Cases

​
Creating New Screens

Create a settings screen with sections for:
- Account (name, email, profile picture)
- Notifications (push notifications toggle, email preferences)
- Privacy (data sharing, analytics)
- About (version, terms, privacy policy links)

Use a grouped list style with section headers.

​
Adding Interactive Features

Add a swipe-to-delete gesture on the task list items.
When the user swipes left:
- Show a red delete background
- Display a trash icon
- On full swipe, delete the item with animation
- Show an "Undo" toast for 3 seconds

​
Fixing Bugs

The login button isn't working on the sign-in screen.
When I tap it with valid credentials, nothing happens.
Expected: navigate to the home screen after successful login.

​
Styling Changes

Update the app's color scheme:
- Primary color: #6366F1 (indigo)
- Background: #F8FAFC (light gray)
- Text: #1E293B (dark slate)
Apply to all screens consistently.

​
Adding Backend Features

Add user authentication:
- Sign up with email and password
- Login with existing account
- Password reset via email
- Keep users logged in across sessions
Store user data so they can access it on any device.

​
Understanding AI Responses

As the AI works on your request, you’ll see:

​
Status Indicators

IconMeaning
🧠 ThinkingAI is analyzing your request
📝 WritingCode is being generated
🔧 BuildingApp is being compiled
✅ CompleteChanges are ready in preview

​
Activity Feed

The chat shows what actions the AI is taking:
  • Reading files - Analyzing existing code
  • Writing files - Creating or modifying code
  • Installing packages - Adding dependencies
  • Building - Compiling the app
  • Committing - Saving changes to version history
Each commit includes a summary of what changed, making it easy to track progress and revert if needed.

​
Image-Based Prompts

You can attach images to your prompts for:
  • Design references - “Make it look like this screenshot”
  • Bug reports - “Here’s what I’m seeing, it should show X instead”
  • Inspiration - “Build something similar to this app”
To attach an image:
  1. Click the image icon in the chat input
  2. Upload or paste an image
  3. Add context in your message
[Attached: screenshot of a competitor app]

Build a home screen similar to this but with our color scheme.
Keep the card layout but use rounded corners.

​
Multi-Step Requests

For complex features, break them into steps:
1

Core Feature

Create a shopping cart screen that shows:
- List of items with image, name, price
- Quantity selector for each item
- Total at the bottom
2

Add Interactions

Add functionality to the cart:
- Increase/decrease quantity with +/- buttons
- Remove item on swipe left
- Update total automatically when quantities change
3

Checkout Flow

Add a checkout button that:
- Validates cart is not empty
- Shows a confirmation modal with total
- Navigates to payment screen on confirm
Breaking complex features into steps gives the AI clearer context and produces better results.

​
Conversation Context

The AI remembers your entire conversation. Use this to your advantage: 
User: Add a product listing screen with cards showing product images and prices.
AI: [Creates product screen]

User: Make the cards tappable and navigate to a detail page.
AI: [Adds navigation without needing to be told what cards]

User: The detail page should show the full product info.
AI: [Knows which product data to display]

​
Asking Questions

Not every prompt needs to generate code. You can ask:
  • How does X work? - Get explanations of features
  • What’s the best way to…? - Get recommendations
  • Can you explain this code? - Understand generated code
  • What files were changed? - Review recent updates
When asking questions (vs. making changes), the AI will respond with explanations without modifying code.

​
Troubleshooting

​
AI Not Understanding

If the AI misinterprets your request:
  1. Be more specific about what you want
  2. Reference exact screen or component names
  3. Describe the current vs. expected behavior

​
Changes Not Appearing

If changes don’t show in preview:
  1. Wait for the build to complete (check status indicators)
  2. Reload the preview if needed
  3. Check the activity feed for errors

​
Reverting Changes

If something breaks:
  1. Tell the AI: “Revert the last change” or “Undo that”
  2. Or use version history to restore a previous commit

​
Best Practices

Begin with core features, then add complexity. It’s easier to build up than fix a complex broken system.
Make one request per message for clearer results. Multi-feature requests can confuse the AI.
Check the preview after each change. Catching issues early is easier than debugging later.
Instead of “button”, say “blue Submit button at the bottom of the form”.
“The third item in the list isn’t showing correctly” is clearer with context from what you see.

​
Next Steps

Live Preview

Learn to use the preview effectively

Code Editor

Edit code directly when needed