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

App Assets

Upload images, logos, and data files that become part of your app. Assets let you bring real branding and real data into your app without pasting URLs or describing files in chat.

Image Assets

Upload logos, icons, hero images, product photos, and other visuals. Supported formats include PNG, JPEG, GIF, WebP, SVG, and AVIF. Uploaded images are automatically moderated for safety.

Data Assets

Upload JSON or CSV files to populate your app with real data. Add a description of the data structure so the AI can load and use it correctly when building your app.

How It Works

  1. 1Open Settings (the gear icon) in the editor, then switch to the Assets tab
  2. 2Click Upload asset and select a file
  3. 3Give it a clear title (and optionally a description) so the AI knows what the asset is for
  4. 4Mention the asset in your Build prompt and the AI will wire it into your app automatically

Tips for Best Results

  • Use descriptive titles like "Company logo" or "Product catalog CSV" so the AI picks the right asset
  • For data files, describe the structure in the description field (e.g. "Array of objects with fields: name, price, category")
  • You can copy an asset's URL to reference it directly in code or prompts
  • Deleting an asset removes its URL permanently, which may break parts of your app that reference it

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"

6

Make theme changes apply everywhere

Theme controls update semantic tokens. If parts of your app still use hardcoded Tailwind colors, ask the AI to replace them with theme variables so your palette updates consistently.

Example: "Update my app to use theme colors instead of hardcoded color classes."

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

Customize AI Model Behavior

For technical users who want control over which AI models their apps use, including model tiers, providers, and reasoning effort.

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.