Use chat interface

​

Before you begin

​

Let the chat build your app

Rocket chat interface

• Plan & usage – see your plan, token balance, and upgrade options.
• Visibility – manage access, switch between public or private.
• Settings – edit integrations, preferences, and configuration.
• Help – jump to documentation or contact support.
• Appearance – switch between light, dark, or system UI.

​

What you can do in Rocket chat

Files (x): view generated files

Each generation message includes a Files (x) dropdown.
Click it to browse the files created from your prompt.

Generated file preview

Success check: You’ll see a list of generated files under the message.

Fix errors instantly with Fix It

If Rocket runs into a code issue, it will try to fix it automatically.

Fixing errors with Fix It

If Rocket can’t fix it immediately:

• You’ll see a message: Error(s) found in code.
• Click to open the error window.
• Select Fix It to try automatic repair.

Token tip: Fix It feature is free for paid users. No token consumption for errors detected and prompted by Rocket in the chat.

Success check: Rocket confirms with “Error fixed” once resolved.

Use Code diff to compare changes

What is Code diff?
It highlights what changed between versions, like tracked edits for code.You can:

• See added or removed lines at a glance.
• Understand changes without digging into syntax.

Code diff view

How to use it:

• Click Code diff under any updated code message.
• Red = removed lines. Green = new lines.

Success check: Diff window opens with color-coded highlights.

Roll back to a previous version

What is Rollback?
If something doesn’t work, Rollback lets you restore an earlier version of your app.Use it when:

• You liked an earlier version better.
• A change introduced a bug.
• You want to try something new, but keep a backup.

Rollback is permanent. You cannot undo it.
Tokens used in the restored version are not refunded.

Rollback flow

How to use it:

• Click Rollback on an older message.
• Confirm when asked.
• Rocket restores that version and updates your file tree.

Success check: Confirmation appears and your files are updated.

Message Rocket to update anything

No coding needed. Just describe what you want to change, add, or improve.Examples:

• “Fix the hero section layout.”
• “Add a login screen.”
• “Switch to dark mode.”

Rocket updates your app based on your message.

Attach image assets in chat

Want to change logos or add illustrations? Upload your image and tell Rocket what to do with it.

Uploading assets via chat

How to upload:

• Click the , drag and drop, or paste an image into chat.
• Describe where or how to use it.
• Make sure it’s under 5MB.

Examples:

• Replace the logo on the splash screen.
• Use this as the background for Home.
• Update the product image on Checkout.
• Add this avatar to the profile.

Rocket uploads and applies the image to the component you mention. No need to rename files or dig through folders.

Success check: Rocket confirms the update and reflects it in preview.

Turn your app fullstack with Supabase

Need a backend? Rocket connects your app to Supabase instantly.How to use it:

• Say:
  “Add Supabase auth to my app.”
  “Connect a Supabase database to the profile screen.”
• Rocket prompts you to link your Supabase account.
• Once connected, backend features are ready.

What you can build:

• Authentication
  “Add login and sign-up with email verification.”
• Database tables
  “Create a users table with name, email, and avatar.”
• Real-time sync
  “Make the activity screen update in real time.”
• File storage
  “Let users upload receipts on the orders screen.”
• Email workflows
  “Send a welcome email when someone signs up.”
• Backend logic (Edge Functions)
  “Create a function to score survey results on submit.”

Success check: Rocket confirms Supabase is connected and begins backend generation.