Skip to main content
Chat is where everything happens. Describe what you want in plain English and Rocket builds it. No coding required.You need an existing Rocket project. Do not have one yet? Create one to get started.

​
What you can do in chat

ActionExample
Build pages and features”Add a pricing page with three tiers: Free, Pro, and Business”
Change the design”Make the hero section taller with a gradient background from blue to purple”
Fix bugs”The signup form is not submitting. Fix the form validation and submission handler”
Connect a service”Connect the contact form to send emails using Resend”
Upload assetsAttach an image, PDF, spreadsheet, or Markdown file and say: “Use this as the hero background” or “Build from this data”
Use commands (web only)Type /seo, /accessibility, or @filename for precise edits
Attach a screenshotDrop in a design reference and Rocket matches it
Add custom codePaste scripts, analytics tags, or third-party snippets

​
Let the chat build your app

Rocket chat interface with messages and output preview.Rocket chat interface with messages and output preview.
At the top of the chat window, you will see the App menu, showing your project name and category. Click it to open a quick-control panel with:
  • Plan & usage: See your plan, token balance (tokens are the credits that power every action in Rocket), 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.
This panel stays accessible in the header, so you can make changes anytime.Once generation starts, Rocket sets up everything for you. From folder structure to live previews, your app is ready to build on.

​
Interface features

Files (x): view generated files

Each generation message includes a Files (x) dropdown.
Click it to browse the files created from your prompt.
Dropdown showing generated code files for the current prompt.Dropdown showing generated code files for the current prompt.
Success check: You will see a list of generated files under the message.
If Rocket runs into a code issue, it will try to fix it automatically.
Fix It resolving an error from a previous code generation.Fix It resolving an error from a previous code generation.
If Rocket cannot fix it immediately:
  • You will 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.
Window showing added and removed lines of code in different colors.Window showing added and removed lines of code in different colors.
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.
Use it when:
  • You liked an earlier version better.
  • A change introduced a bug.
  • You want to try something new, but keep a backup.
Warning: Rollback is permanent. You cannot undo it.
Tokens used in the restored version are not refunded.
Restoring an earlier generation using the Rollback feature.Restoring an earlier generation using the Rollback feature.
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.
Examples:
  • “Fix the hero section layout.”
  • “Add a login screen.”
  • “Switch to dark mode.”
File being uploaded directly into Rocket chat.File being uploaded directly into Rocket chat.
How to upload:
  • Click the icon at the lower left of the input box. You can also drag and drop or paste an image into the chat box.
  • Supported formats: images (.png, .jpg, .jpeg), PDFs, Excel spreadsheets (.xlsx, .xls), CSVs, and Markdown files (.md).
  • One attachment at a time. Describe where or how to use it.
Keep the file under 5 MB.
Examples:
  • Replace the logo on the splash screen.
  • Use this as the background for Home.
  • Build a product page from this spreadsheet.
  • Turn this Markdown file into a blog post.
Rocket reads the attachment and applies it to the component or page you mention. No need to rename files or dig through folders. Learn more about attachments.
Success check: Rocket confirms the update and reflects it in preview.
Smart suggestions appearing in chat with two build recommendations.Smart suggestions appearing in chat with two build recommendations.
Click any suggestion to convert it into a prompt in the chat input. Review the prompt, then press Enter to execute it and build the suggested feature.
Success check: Suggestions appear in chat, and clicking one converts it to a prompt ready to execute.

​
What’s next?

Commands

Use slash and at-commands for precise, targeted edits.

Visual edit

Click on elements to change styles, text, and spacing directly.

Preview

Test your app across different screen sizes and devices.

Inject custom code

Bring in external scripts, embeds, and UI components.