Back to Documentation

Building Apps

Learn how to build, customize, and debug apps on our platform using natural language and AI-powered tools.

Getting Started

Building apps on our platform is designed to be intuitive and accessible to everyone, regardless of technical background. You can create fully functional apps using natural language descriptions. No coding required.

No Coding Required

Simply describe what you want to build in plain English. Our AI system understands your intent and generates complete, working applications from your descriptions.

Technical Users Welcome

For those who prefer hands-on control, you can view and edit the generated code directly. Make precise changes, optimize performance, or add custom functionality.

How It Works

  1. 1Describe your app idea or the changes you want to make
  2. 2Our AI generates a complete version of your app
  3. 3Test your app in the preview pane
  4. 4Iterate by requesting changes or refinements
  5. 5Publish when you're happy with the result

Build Mode vs Chat Mode

The editor offers two distinct modes for different purposes. Choose the right mode based on whether you want to modify your app or just ask questions.

Build Mode

The default mode for making changes to your app. Each prompt generates a new version of your app with your requested changes applied.

Best for:

  • Adding new features
  • Modifying existing functionality
  • Fixing bugs or errors
  • Adjusting the UI and layout

Chat Mode

Ask questions and get guidance without making changes to your app. Toggle to this mode by clicking the "Ask" button in the editor.

Best for:

  • Understanding how your app works
  • Getting suggestions for improvements
  • Learning about platform features
  • Exploring ideas before implementing

Generation Modes

Choose the AI generation mode that best fits your needs. Different modes offer different levels of capability and resource usage.

Standard Mode

Default and recommended

Reliable AI that handles most app development tasks effectively. This is the default mode and works great for everyday apps and features.

Characteristics:

  • Balanced speed and quality
  • Moderate credit usage
  • Good for most use cases

Expert Mode

For complex apps

Smarter AI with enhanced reasoning capabilities for complex apps and challenging requirements. Takes longer and uses more credits, but delivers higher quality results.

Characteristics:

  • Advanced problem-solving
  • Higher credit usage
  • Longer generation time
  • Best for complex features

Tip: Start with Standard mode for most tasks. Switch to Expert mode when you need to build complex features, handle intricate data structures, or when Standard mode isn't producing the results you want.

Effective Prompting Tips

Get better results from the AI by following these proven prompting strategies. Clear, specific prompts lead to better apps.

1

Be specific about your data

Describe what information your app needs to track or display. Mention fields, categories, or attributes clearly.

Example: "Track my workouts with exercise name, sets, reps, weight, and date"

2

Describe the user flow

Explain how you want to interact with the app. What actions should users take? What screens or views do you need?

Example: "I want to add items to a list, mark them as complete, and filter by status"

3

Mention AI features explicitly

If you want AI capabilities like chat, text generation, or image analysis, say so directly.

Example: "Use AI to suggest recipes based on ingredients I have" or "Let me chat with an AI about my notes"

4

Start simple, then iterate

Begin with core functionality and add features in follow-up messages. This leads to better results than requesting everything at once.

Example: First: "Create a habit tracker" → Then: "Add a weekly view with progress charts"

5

Reference what you see

When making changes, describe what you want to modify by referencing visible elements. The AI can see your current app.

Example: "Move the add button to the bottom of the screen" or "Change the card layout to a list view"

Testing in Preview

The preview pane in the editor lets you test your app during development. It shows your app exactly as it will appear after publishing, allowing you to catch issues early and iterate quickly.

Preview vs Live App

Preview:

Test environment for the current version you're working on. Data entered here is temporary and won't be saved permanently.

Live App:

The published version accessible to you and your users. Data is permanently stored in your private database.

Testing Tips

  • Try different user flows to ensure everything works as expected
  • Test edge cases like empty states, long text, and invalid inputs
  • Check the app on different screen sizes by resizing the preview pane
  • If you find issues, describe them to the AI and it will fix them

Viewing and Editing Code

Technical users can view and edit the generated code directly for precise control over their app's implementation. This is optional. Most users never need to touch the code.

Accessing the Code Editor

Click the "View code" button to open the code editor. The editor shows your app's complete code.

You can:

  • View the complete app code
  • Make direct edits to the code
  • Save changes in-place (updates current version)
  • Create a new version with your changes

When to Edit Code Directly

Direct code editing is useful for:

  • Making small, precise changes faster than describing them
  • Adding custom logic or optimizations
  • Learning how the AI implements features
  • Fine-tuning UI details

Debugging and Error Handling

Errors are a normal part of app development. Our platform makes it easy to identify and fix issues with AI-powered debugging assistance.

How Error Handling Works

  1. 1Your app encounters an error during development or testing
  2. 2As the app author, you see a detailed error message with a "Copy message" button
  3. 3Click the button to copy a pre-formatted message for the AI
  4. 4Paste it into the editor in Build mode and send
  5. 5The AI analyzes the error and generates a fixed version

Alternative: Describe the Problem

You can also describe what's wrong in your own words instead of copying the error message. This works well for:

  • Behavior that seems wrong but doesn't error
  • UI issues or unexpected rendering
  • Features not working as intended

Common Error Scenarios

Runtime errors:

Errors that occur when the app runs, often from unexpected data or edge cases

Type errors:

Issues with data types or structure mismatches

API errors:

Problems with AI features or external data sources

Version History and Restore

Every change to your app creates a new version, and all versions are preserved in your version history. You can preview any past version and restore it if needed.

Viewing Previous Versions

The timeline shows a list of all your app versions in chronological order, with the latest version at the top.

To preview a version:

  1. 1.Click on any version block in the timeline
  2. 2.The preview pane updates to show that version
  3. 3.Test it just like you would the latest version

Restoring a Version

If you want to continue working from an older version, you can restore it. This doesn't delete any versions. It creates a new version based on the old one.

To restore a version:

  1. 1.Click on the version you want to restore
  2. 2.Click the "Restore Version" button that appears
  3. 3.A new version is created as an exact copy of that version
  4. 4.Continue building from there with new changes

Version Badges

Versions display badges to help you understand their status:

Live

Currently published version that users see

Viewing

Currently displayed in the preview pane

Latest

Most recently generated version

Customizing Themes

Every app can be customized with a theme to match your personal style. Change colors, typography, and visual style without writing any code.

Accessing the Theme Editor

Click the "Theme" tab in the editor to open the theme customization panel. You can adjust colors, border radius, fonts, and more.

You can customize:

  • Primary and accent colors
  • Background and foreground colors
  • Border radius and visual style
  • Typography and font choices

Theme Changes

Like code changes, theme modifications create new versions. You can save changes in-place or create a new version to compare different theme options.

Learn More About Themes

For detailed information about the theme system, available variables, and advanced customization options, check out our comprehensive theme documentation.

Ready to start building?

Now that you understand how to build apps on our platform, it's time to create something amazing.