> ## Documentation Index > Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Chat with Rocket > Iterate on your Rocket.new app by chatting in plain language - the AI edits screens, adds features, and writes production code as you talk. Chat is how you build with Rocket. Describe what you want in plain language and Rocket writes the code, updates the live preview, and suggests what to build next. You do not need to know how to code. ## What you can do in chat * Add new pages, features, or components * Change layouts, colors, typography, and spacing * Fix bugs and errors * Connect integrations like Supabase, Stripe, or Resend * Ask Rocket to explain or refactor existing code ![Rocket chat interface showing a message thread with live app preview.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/chat/web-browser/chat-view-light.webp) ![Rocket chat interface showing a message thread with live app preview.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/chat/web-browser/chat-view-dark.webp) Chat interface **Example messages:** * "Add a pricing page with three tiers: Free, Pro, and Business" * "Make the hero section taller with a gradient background from blue to purple" * "Connect the contact form to send emails using Resend" * "Fix the signup form - the submit button is not responding" * "Add dark mode support across the whole app" After each message, Rocket returns the updated code and a live preview. If it detects errors, it fixes them automatically. When Rocket shows a **Fix it** button for an error it detected, clicking it is free for paid users and does not consume [credits](https://dhiwisepvtltd-5e04e6a4.mintlify.site/getting-started/credits.md). > [!NOTE] > > For faster, targeted edits on the web, use [slash and @ commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md) directly from the chat input. ## Attachments Attach a file to give Rocket a visual reference or content to work with. **1. Open the attachment picker** Click the **+** button at the lower left of the chat input and select **Add files & photos**. You can also drag and drop or paste an image directly. ![Chat input with the + button attachment picker open showing Add files & photos option.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/chat/web-browser/chat-attachment-light.webp) ![Chat input with the + button attachment picker open showing Add files & photos option.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/chat/web-browser/chat-attachment-dark.webp) Attachment picker in chat **2. Select your file** Choose a file from your device. Supported file types: images (`.png`, `.jpg`, `.jpeg`, `.ico`), PDFs, Excel (`.xlsx`), CSVs, and Markdown (`.md`). > [!NOTE] > > You can attach up to **5 files per message**. Each file must be under **5 MB**. **3. Add your instruction** Tell Rocket what to do with the attachment. Be specific about where and how to use it. | Attachment | What to say | | :- | :- | | Design screenshot | "Match this layout for the landing page" | | Logo image | "Replace the app logo with this file" | | CSV data | "Build a product catalog from this spreadsheet" | | PDF spec | "Build the onboarding flow described in this document" | ## Continuing a conversation Rocket remembers everything in the current task, so you can keep building without repeating context. > **Refine the last result** > > Ask Rocket to adjust, expand, or rework its previous output without starting over. > > * "Change the hero background to dark blue instead" > * "Add a section for customer testimonials below the pricing table" > * "Make the sidebar collapsible on mobile" > **Change direction mid-task** > > Change course at any point. Rocket adapts while keeping what came before. > > * "Actually, use a single-column layout instead" > * "Scrap the modal approach - use an inline form instead" > **Reference earlier outputs** > > Point back to something Rocket built earlier in the same task. > > * "Apply the same color scheme you used on the dashboard to this page" > * "Use the button style from the hero section throughout the app" ## Web vs mobile **Web Browser** The web browser provides the full experience: * [Slash and @ commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md) for targeted edits * [Visual edit mode](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/visual-edit.md) for direct manipulation * [Image generation](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/image-generation.md) for AI-generated images and SVGs * [Preview](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/preview.md) for testing on different screen sizes * [Version history](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/versions.md) with code diff, rollback, plus labels and per-version launch (web apps only) * [Code tab](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/code.md) for browsing and editing files directly * Smart suggestions for next steps * Full project settings and integrations access **Mobile App** The mobile app supports core chat features: * Send messages and receive responses * Attach images and files * View generated files * Version history with code diff and rollback * Smart suggestions Smart suggestions work the same way on web and mobile. Rocket recommends what to build or fix next based on your current app state. ![Rocket chat interface on mobile.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/chat/mobile-app/generated-file-preview-rocket-app.webp) Chat on mobile > [!NOTE] > > Commands, visual edit, and advanced project settings are only available in the web browser. ## Tips > **Be specific** > > Vague messages produce vague results. Name the element, its location, and what you want it to do. > > | Instead of | Try | > | :- | :- | > | "Make it look better" | "Increase the hero section height to 80vh and add a gradient from #1e3a5f to #0f172a" | > | "Fix the nav" | "The mobile navigation menu is not closing when a link is tapped" | > **One change per message** > > Break complex requests into individual messages. Rocket is more accurate when the scope is focused. > **Name sections and quote text** > > Reference the exact section, component, or file. Quote any text you want changed. > > * "In the hero section, change 'Get started' to 'Launch now'" > * "In the pricing table, swap the order of Pro and Business columns" > **Use commands for precise edits** > > [Slash and @ commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md) are faster and use fewer credits than describing everything from scratch. > **Attach visuals for layout work** > > Screenshots and mockups help Rocket match exactly what you have in mind, especially for layout and design changes. ## What's next? > **[Commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md)** > > Use slash and @ commands for precise, targeted edits. > **[Visual edit](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/visual-edit.md)** > > Click any element to change it directly without writing a prompt. > **[Generate images](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/image-generation.md)** > > Create AI-generated images and SVGs placed directly in your app. > **[Preview your app](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/preview.md)** > > Test your app on different screen sizes before deploying. > **[Versions](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/versions.md)** > > Compare, roll back, label, and launch specific versions. > **[Code tab](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/code.md)** > > Browse and edit your project files directly in the code view. > **[Environment variables](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/env-variables.md)** > > Store API keys and secrets your app needs at runtime. > **[APIs](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/apis.md)** > > Import and attach APIs to your UI elements. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.