App Studio
Use chat interface
From first message to full app - all in chat. Rocket generates, edits, and evolves your project in a continuous, interactive thread.
In this guide, you’ll learn how to:
- Watch Rocket generate and structure your app.
- Compare changes, roll back versions, apply instant fixes, and explore files.
- Iterate with natural messages and images – no coding needed.
Before you begin
You’ll need:
- An existing project.
Want to learn how to start a new project from scratch?
Read: Start a new project.
Read: Start a new project.
Let’s chat your app into existence
Chat interface
Features you can use inside Rocket chat
Files (x): generated files
Files (x): generated files
Rocket adds a Files (x) dropdown under each generation message.
- Open it to see all the files created from your chat.
Generated files
Success check: The dropdown appears under the code generation message.
Fix errors instantly with Fix It
Fix errors instantly with Fix It
If Rocket runs into an issue during generation, it will try to fix it for you.
If it can’t fix it on its own:
Fixing error
- You’ll see a message: Error(s) found in code.
- Click it to see the problem in the Error window.
- Tap Fix It, and Rocket will resolve the issue.
Token tip: Using Fix It too fix errors is free for paid users and does not use tokens.
Success check: Rocket updates the chat with “Error fixed” after completing the repair.
Use code diff to compare changes
Use code diff to compare changes
What is Code diff?
Think of it like “track changes” in a document – but for your app.
Rocket shows you what lines of code were added, removed, or stayed the same when something is updated.This helps you:
How to use it:
Think of it like “track changes” in a document – but for your app.
Rocket shows you what lines of code were added, removed, or stayed the same when something is updated.This helps you:
- Understand what changed (visually, not technically).
Code diff window
- Click Code diff under any message where Rocket updated code.
- Red = removed. Green = added.
Success check: The Diff window opens, showing color-coded changes.
Rollback to a previous version
Rollback to a previous version
What is Rollback?
Made a change that didn’t work out? Rollback lets you go back to how things were before – like “undo” for your app.It’s helpful when:
How to rollback:
Made a change that didn’t work out? Rollback lets you go back to how things were before – like “undo” for your app.It’s helpful when:
- You preferred a previous version.
- A new change broke something.
- You want to explore other ideas without losing progress.
Rolling back is permanent – you can’t undo a rollback once it’s applied.
Also, any tokens used in the generation you’re rolling back will not be refunded.
Also, any tokens used in the generation you’re rolling back will not be refunded.
Rollback changes
- Click Rollback on any older generation message.
- Confirm when prompted.
- Rocket restores everything back to that version.
Success check: Rocket confirms the rollback and updates the file tree.
Message Rocket to add or improve anything
Message Rocket to add or improve anything
You don’t need to code. Just type what you want, like you would in a chat.Examples:
- “Fix the hero section layout.”
- “Add a login screen.”
- “Switch to dark mode.”
Attach image assets from chat
Attach image assets from chat
Want to swap a logo, icon, or background on a specific screen? Just upload the image in chat and tell Rocket where to use it.
How it works:Rocket handles the asset upload and applies the update to the screen or component you name - no digging through folders or renaming files.
Attaching image to update app asset
- Click the icon, drag and drop an image, or simply paste it into the chat bar.
- Then tell Rocket what to do with it.
- Make sure your image file is under 5MB for a smooth upload.
Examples:
- Replace the logo on the Splash screen with this.
- Use this as the background image for the Home screen.
- Update the product image on the Checkout screen.
- Add this avatar to the Profile screen.
Success check:
Rocket confirms the update in chat, and the visual change appears in your app preview.
Rocket confirms the update in chat, and the visual change appears in your app preview.
Turn your app fullstack with Supabase
Turn your app fullstack with Supabase
Need backend power? Just ask. Rocket connects Supabase to your app in seconds - no dashboards, no setup screens.How it works:
- In chat, say something like:
“Add Supabase auth to my app.”
“Connect a Supabase database to the Profile screen.” - Rocket prompts you to link your Supabase project.
- Once connected, backend features become part of your app - no manual wiring needed.
-
Authentication
“Add login and sign-up with email verification.”
Rocket sets up secure auth flows, sessions, and email handling. -
Database tables
“Create auserstable with name, email, and avatar.”
Rocket creates the schema and links it to your screens - like Home, Profile, or Dashboard. -
Real-time data sync
“Make the Activity screen update in real time.”
Rocket handles subscriptions and UI sync automatically. -
File storage
“Let users upload receipts on the Orders screen.”
Supabase Storage is connected and ready to go. -
Email workflows
“Send a welcome email when someone signs up.”
Rocket sets up triggers via Supabase events. -
Backend logic (Edge Functions)
“Create a serverless function that scores survey results on Submit.”
Rocket scaffolds and deploys custom logic using Supabase Edge Functions.
Success check: Rocket confirms Supabase is connected and starts generating backend features based on your prompts.
You did it!
Your app is now structured, generated, and refined – all through Rocket chat.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.