# Best practices Source: https://docs.rocket.new/build/best-practices Learn prompt patterns, iteration workflows, and complexity management tips for building reliable web and mobile apps with Rocket.new Build. This page is your reference for getting the most out of Build tasks. These patterns consistently produce better results: faster generation, cleaner code, fewer bugs, and apps that match your vision. ## Structuring prompts for complex apps The quality of your prompt directly determines the quality of the initial generation. A well-structured prompt saves rounds of iteration. Start by explaining what the app does and who it is for. This context shapes every decision Rocket makes about architecture, UI patterns, and component choice. **Good:** ```plaintext wrap theme={null} Build a project management tool for small marketing teams. They need to track campaigns, assign tasks to team members, and see progress at a glance. ``` **Less effective:** ```plaintext wrap theme={null} Build an app with a kanban board, user list, calendar, settings page, and charts. ``` The first prompt gives Rocket context to make intelligent design decisions. The second is just a list of features with no guiding purpose. Include three to five key features in your initial prompt. This is the sweet spot - enough detail to generate something useful, not so much that the app becomes unwieldy. After the initial build, add complexity through chat one feature at a time. This incremental approach produces cleaner, more reliable results than front-loading every feature. If you have strong visual preferences, state them separately from the feature list: ```plaintext wrap theme={null} WHAT TO BUILD: A client portal where users can view invoices, download receipts, and manage their subscription. HOW IT SHOULD LOOK: Clean and professional. White background, navy text, subtle gray borders. Use a sidebar navigation. Inspired by Stripe's dashboard. ``` This separation lets Rocket optimize each dimension independently. Instead of relying on Rocket to infer what screens you need, list them: ```plaintext wrap theme={null} Screens: Dashboard, Project List, Project Detail, Task Board, Team Members, Settings, Profile. ``` This ensures nothing important is missing and gives you control over the initial scope. Providing realistic example data makes the generated app much more useful for evaluation: ```plaintext wrap theme={null} Example data: Show 3 projects ("Q2 Brand Campaign", "Website Redesign", "Product Launch"). Each has 5-8 tasks with different statuses. Team members are "Sarah K.", "James L.", and "Priya M." ``` Without example data, Rocket uses generic placeholder text that makes it harder to evaluate the design. ## Iteration patterns Building a great app is an iterative process. These patterns help you iterate efficiently. After the initial generation, add complexity one feature per message: 1. "Add user authentication with email/password sign up and sign in" 2. "Add a settings page where users can update their profile and change their password" 3. "Connect Supabase and store task data in a tasks table" Each step builds on the last, and you can verify each addition before moving on. This is more reliable than asking for everything at once. If the initial generation missed the mark significantly, it is often faster to start a new task with a better prompt than to iterate the existing one into shape. Signs you should start over: * The app type or framework is wrong * The overall architecture does not match your needs * More than half the screens need major changes * The visual direction is completely off Copy what worked from the first attempt into your improved prompt. For apps where design matters (landing pages, consumer apps, portfolios), focus on getting the visual design right before adding functionality: 1. Generate the initial app 2. Use Visual edit and chat to perfect the layout, colors, and typography 3. Then add interactive features, data connections, and business logic This prevents logic changes from breaking visual progress. For internal tools, dashboards, and data-heavy apps, the opposite approach works better: 1. Generate the initial app 2. Add all features, data connections, and business logic 3. Then polish the visual design This prevents design polish from being wasted when feature changes restructure the layout. ## Managing complexity in large apps As apps grow, complexity becomes the main obstacle. These strategies keep large projects manageable. Break your app into logical phases and complete each phase before starting the next: **Phase 1: Core** - The essential screens and navigation. Your app should be usable (if basic) at the end of this phase. **Phase 2: Features** - Authentication, data persistence, connectors. The app becomes feature-complete. **Phase 3: Polish** - Responsive design, error handling, loading states, animations. The app becomes professional. **Phase 4: Optimization** - Performance, SEO, accessibility. The app becomes production-ready. Apps with more than 15-20 screens in a single task can become difficult to manage. If your app is larger: * Generate core screens in the initial task * Add additional screens through chat one at a time * Consider splitting into multiple tasks if sections are independent Rocket handles large apps well, but your ability to review and iterate effectively decreases as the screen count grows. When referring to specific elements during iteration, use precise names: * **Good:** "On the Dashboard page, move the revenue chart above the recent activity list" * **Too vague:** "Move the chart to the top" As your app grows, ambiguous references can cause Rocket to modify the wrong element. Check the preview after each feature addition or layout change. Catching issues immediately is much faster than discovering them later when the cause is unclear. See [Testing strategies](#testing-strategies) below for the full workflow. ## Working with generated code Understanding the generated code gives you more control over your app. When chat and Visual edit cannot achieve exactly what you want, open [Code](/build/editor/code) and edit the source directly. This is particularly useful for: * Adjusting specific pixel values * Adding conditional logic * Modifying component props * Fixing edge cases that chat cannot describe precisely [Custom code injection](/build/editor/custom-code) lets you add scripts, styles, and code snippets that Rocket does not generate natively. Use it for third-party widgets, custom analytics, advanced animations, or business logic that requires specific implementation. If you need capabilities beyond what the Rocket interface offers, such as automated testing, CI/CD pipelines, or custom build steps, download the project as a `.zip` from the Code toolbar (paid plan required) and continue in your preferred IDE. Familiarize yourself with where things live in the generated project. Knowing the structure helps you navigate Code and make targeted edits without guessing which file to open. ## Testing strategies Walk through the primary user flow from start to finish. Can a new user sign up, complete the core action, and see the expected result? If the happy path works, the app is functional. What happens when a list is empty? When a text field has 1,000 characters? When no image is provided? These edge cases reveal missing error handling and broken layouts. Resize the preview panel to mobile width (375px) and navigate every page. Mobile breakpoints are where most layout issues appear - overlapping elements, text overflow, unreachable buttons. After working on an app for hours, you lose perspective. Share the preview with someone who has not seen it. Fresh eyes catch confusing navigation, unclear copy, and broken flows that you may have become blind to. ## Common patterns and anti-patterns | Pattern | Why it works | | :- | :- | | Start with a focused prompt | Produces a cleaner initial generation that is easier to iterate on | | Add features incrementally | Each addition is isolated and testable | | Test after every change | Bugs are caught immediately, not compounded | | Reference specific designs | Anchors the visual direction and reduces ambiguity | | Separate design from logic | Lets you optimize each dimension without interference | | Anti-pattern | Why it fails | | :- | :- | | Front-loading every feature in one prompt | Produces cluttered, inconsistent results that need more rework | | Making many changes without testing | Bugs compound and become harder to diagnose | | Vague prompts ("make it better") | Produces generic improvements that miss your specific vision | | Ignoring mobile until the end | Forces major restructuring late in the process | | Over-iterating instead of shipping | Once the output looks good, ship it and get real feedback rather than polishing endlessly | ## What's next? Put these practices to work with a guided walkthrough. Add payments, databases, AI models, email, and more to your app. Live preview, responsive testing, and screenshot capture as you build. Publish your app to the web and connect a custom domain. # AdSense Source: https://docs.rocket.new/build/connectors/adsense Connect Google AdSense to Rocket and add display ads to your app - banner placements, in-article ads, and in-feed units, all wired up from chat. Describe where you want ads to appear in chat and Rocket generates the placement code, responsive ad units, and layout adjustments automatically. ## What you can do Place ads between articles, in the sidebar, and after post content to generate revenue from your blog traffic. Insert standard IAB ad units - leaderboard, medium rectangle, skyscraper - throughout your app. Insert ads after specific paragraphs in long-form content without disrupting the reading experience. Insert native-looking ads between items in content feeds, product listings, or search results. ## Before you connect You need your **Publisher ID** from Google AdSense. It looks like `pub-1234567890123456`. **Find your Publisher ID in the AdSense help center** Your Publisher ID (`pub-XXXXXXXX`) is embedded in your page's public HTML source and is not a secret. Entering it in the connection popup carries no security risk. AdSense is a **task-level** connector. Each Rocket task connects to its own Publisher ID independently. ## Connect AdSense You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions AdSense - for example, `Connect AdSense and add a banner ad to the homepage`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. AdSense connection prompt in the Rocket chat panel. AdSense connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **AdSense** card, then click **Connect**. Connectors panel showing the AdSense card with a Connect button. Connectors panel showing the AdSense card with a Connect button. **After clicking Connect** A popup opens. Enter your **Publisher ID**, then click **Connect**. A green dot appears next to AdSense when the connection is active. Connect AdSense popup with Publisher ID field. Connect AdSense popup with Publisher ID field. **Update or disconnect** Go to [**Connectors > AdSense**](#connect-adsense). Click **Edit** to update your Publisher ID or **Disconnect** to remove the integration. AdSense card showing Edit and Disconnect buttons. AdSense card showing Edit and Disconnect buttons. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions AdSense. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **AdSense** card, then tap **Connect**. **After tapping Connect** A popup opens. Enter your **Publisher ID**, then tap **Done**. A green dot appears next to AdSense when the connection is active. **Update or disconnect** Go back to the **AdSense** card in Integrations. Tap **Edit** to update your Publisher ID or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Header banner | `Add a responsive AdSense leaderboard ad below the navigation bar on every page.` | | Sidebar ad | `Place a 300x250 medium rectangle AdSense ad in the sidebar, sticky on scroll.` | | In-article ad | `Insert an AdSense ad after the third paragraph of every blog post.` | | In-feed ad | `Add an AdSense in-feed ad after every 5th post in my blog listing.` | | Footer ad | `Place a responsive AdSense banner above the footer on all pages.` | | Mobile-only ad | `Show a full-width AdSense ad between content sections, only on mobile devices.` | | Desktop-only ad | `Add a skyscraper ad in the right sidebar, visible only on desktop screens wider than 1024px.` | | Between sections | `Insert an AdSense ad between the features section and the testimonials section on the landing page.` | ## Tips * **Ads only display on deployed tasks.** AdSense will not render in the Rocket preview. Deploy your task and test on the live URL. * **Google must approve your site.** Your domain and content must comply with [AdSense program policies](https://support.google.com/adsense/answer/48182) before ads appear. Approval can take days to weeks. New sites with thin or limited content may be rejected, so ensure your site has substantial, original content before applying. * **Ad blockers will hide ads.** A significant percentage of users run ad-blocking extensions. Keep this in mind when projecting revenue. * **Too many ads hurt user experience.** Google may limit ad serving if your page has an unfavorable content-to-ad ratio. Follow AdSense best practices for ad density. * **One Publisher ID per task.** Each Rocket task connects to one AdSense account. Use different tasks for different Publisher IDs. ## What's next? Track how ads affect user engagement and bounce rates with GA4. Pair AdSense with a headless CMS to monetize your content-driven site. Deploy your task so AdSense can start serving ads on your live site. Browse every available integration. # AI connector comparison: OpenAI, Anthropic, Gemini Source: https://docs.rocket.new/build/connectors/ai Compare AI integrations in Rocket.new: OpenAI, Anthropic, Gemini, Perplexity, and ElevenLabs for chat, content, search, analysis, and voice. Rocket supports five AI providers. Each has different strengths. Use this page to pick the right one for your app. ## Quick answer * For **general-purpose chat and content generation**, use **OpenAI** (GPT models). * For **careful, nuanced analysis and long-form writing**, use **Anthropic** (Claude models). * For **multimodal tasks** involving images, text, or video, use **Gemini**. * For **factual search with cited sources**, use **Perplexity**. * For **voice generation, text-to-speech, and voice cloning**, use **ElevenLabs**. Rocket uses the latest model for each provider automatically. You do not need to specify a model version when connecting. ## Comparison table *Scroll right to see all four providers* | Feature | OpenAI | Anthropic | Gemini | Perplexity | ElevenLabs | | - | - | - | - | - | - | | **Best for** | General-purpose AI | Nuanced analysis, long-form content | Multimodal (text + images + video) | Factual search with citations | Voice generation and text-to-speech | | **Default model** | Latest GPT (auto-selected) | Latest Claude (auto-selected) | Latest Gemini (auto-selected) | Sonar (auto-selected) | Latest voice model (auto-selected) | | **Chat and conversational** | Excellent | Excellent | Excellent | Good (search-focused) | No | | **Content generation** | Excellent | Excellent (especially long-form) | Good | Limited | No | | **Code generation** | Excellent | Excellent | Good | Limited | No | | **Image understanding** | Yes | Yes | Excellent (native multimodal) | No | No | | **Web search and citations** | No | No | Limited | Excellent | No | | **Voice and audio** | No | No | No | No | Excellent | | **Pricing** | Per token | Per token | Per token | Per token + per request | Per character | | **Connection method** | API key | API key | API key | API key | API key | ## Detailed recommendations ### General-purpose AI chatbot or assistant **Use OpenAI.** GPT models are the most versatile option. They handle chat, content generation, code writing, summarization, and classification well. OpenAI has the largest ecosystem and the most community examples. ```plaintext wrap theme={null} Add an AI chat assistant to my app using OpenAI. Include a message history, streaming responses, and a text input with a send button. ``` ### Careful, nuanced content or long document analysis **Use Anthropic.** Claude excels at tasks that require careful reasoning, following complex instructions, and producing nuanced, well-structured long-form content. It handles very large context windows, making it ideal for analyzing long documents. ```plaintext wrap theme={null} Build a document analysis tool using Anthropic Claude. Users upload a PDF, and the app generates a structured summary with key findings and recommendations. ``` ### Image, video, or mixed media analysis **Use Gemini.** Gemini is natively multimodal, meaning it understands text, images, and video in a single model. It also supports very large context windows for processing long documents or transcripts. ```plaintext wrap theme={null} Build an image description tool using Gemini. Users upload a photo and the app generates an alt text description, color palette, and mood analysis. ``` ### Factual answers with cited sources from the web **Use Perplexity.** Perplexity is an AI-powered search engine that returns answers with inline citations. It is the best choice when accuracy and source verification matter more than creative generation. ```plaintext wrap theme={null} Build a research assistant using Perplexity. Users type a question and the app returns a summarized answer with numbered source citations. ``` ### Voice generation, text-to-speech, and audio **Use ElevenLabs.** ElevenLabs is the best choice for converting text into natural, lifelike speech, cloning voices, and generating multilingual audio content. ```plaintext wrap theme={null} Add a "Read aloud" button to each article that uses ElevenLabs to read the content to the user with a natural-sounding voice. ``` ### Multiple AI models in the same app **Connect multiple integrations.** You can connect OpenAI, Anthropic, Gemini, Perplexity, and ElevenLabs to the same project. Use different models for different features based on their strengths. ```plaintext wrap theme={null} Build a writing assistant that uses OpenAI for drafting, Anthropic for editing and fact-checking, Perplexity for research with citations, and ElevenLabs for reading the final text aloud. ``` ## Browse AI integrations GPT models for chat, content generation, and code. Claude models for nuanced analysis and long-form content. Google's multimodal AI for text, images, and video. AI-powered search with cited, fact-based answers. Voice generation, text-to-speech, and voice cloning. # Airtable Source: https://docs.rocket.new/build/connectors/airtable Connect Airtable to Rocket.new to build CRM dashboards, editorial content calendars, and inventory trackers backed by your no-code database. Describe the data views you need in chat and Rocket generates forms, dashboards, and filtered lists that read from and write to your Airtable bases automatically. ## What you can do Manage contacts, deals, and sales pipelines with a clean interface backed by Airtable data. Plan and schedule blog posts, social media content, and marketing campaigns from a shared calendar. Track stock levels, product details, and reorder thresholds for physical or digital goods. Organize tasks, assign team members, and track progress with a Kanban board. Collect RSVPs, manage attendee lists, and display upcoming events from Airtable. ## Connect Airtable Airtable uses OAuth so no API key is needed. Airtable is a **workspace-level** connector. No matter where you connect it (Settings, Connectors tab, or chat), it links to your entire Rocket workspace and is available across all tasks. You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Airtable, for example `Connect Airtable and show all leads from my base in a sortable table`. Rocket detects the intent and shows a **Connect** button inline. Click it and the OAuth flow opens. Rocket chat panel showing a Connect prompt for Airtable. Rocket chat panel showing a Connect prompt for Airtable. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Airtable** card, then click **Connect**. Connectors panel showing the Airtable card with a Connect button. Connectors panel showing the Airtable card with a Connect button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** An Airtable authorization screen opens in your browser. Airtable OAuth screen showing Rocket requesting access to your bases. Choose which bases Rocket can access: * **Add all resources** grants access to all current and future bases in your workspace. Recommended for most users. * **Add a base** grants access to specific bases only. Use this if you want to limit Rocket's access to a subset of your data. Click **Grant access**. A green dot appears next to Airtable when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from three places - all do the same thing. **Option 1: From workspace Settings** Open your workspace, go to **Settings**, and tap **Connectors**. Tap the **Airtable** card and tap **Connect**. **Option 2: From the Connectors tab inside a task** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Airtable** card, then tap **Connect**. **Option 3: From chat** Type a prompt that mentions Airtable. Rocket detects the intent and shows a **Connect** button inline - tap it. **After tapping Connect** An Airtable authorization screen opens. Choose which bases to grant access to: * **Add all resources** grants access to all current and future bases. Recommended for most users. * **Add a base** grants access to specific bases only. Tap **Grant access**. A green dot appears next to Airtable when the connection is active. **Disconnect** Go back to the **Airtable** card in Integrations. Tap **Disconnect** to remove the integration. ## Example prompts | What you want | Prompt to use | | :- | :- | | Lead dashboard | `Show all leads from my Airtable base in a sortable table with status filters.` | | Add-record form | `Create a form that adds new contacts to my Airtable Contacts table.` | | Content calendar | `Build a monthly calendar view of blog posts from my Airtable content base.` | | Inventory tracker | `Display products from Airtable with stock levels and a low-stock warning badge.` | | Kanban board | `Create a drag-and-drop Kanban board synced with my Airtable tasks base.` | | Search and filter | `Add a search bar and category filter to my Airtable product listing page.` | | Detail page | `When a user clicks a row, open a detail page showing all fields for that Airtable record.` | | CSV export | `Add an Export to CSV button that downloads all visible Airtable records.` | | Charts | `Show a bar chart of leads by status using data from my Airtable base.` | | Inline editing | `Let users edit Airtable records directly in the table without opening a separate form.` | ## Tips * **Choose base access carefully.** "Add all resources" is convenient but grants broad access. Use "Add a base" if you only want Rocket to work with specific bases. * **Base structure matters.** Make sure your Airtable base has clear table and field names. Rocket reads these to generate accurate views and forms. * **Rate limits apply.** Airtable limits API requests to 5 requests per second per base. High-traffic apps may need caching or a dedicated backend. * **Deleting records is permanent.** Airtable does not have a built-in undo for deleted rows. Be cautious with delete operations. * **One Airtable account per workspace.** All tasks share the same connected account. ## What's next? Need a full relational database with auth? Supabase pairs well with Airtable for hybrid setups. Send automated emails when new records are added to your Airtable base. Track how users interact with your Airtable-powered dashboards and forms. Browse every available integration. # Analytics comparison: Google Analytics 4 vs Mixpanel Source: https://docs.rocket.new/build/connectors/analytics-guide Compare Google Analytics 4 and Mixpanel inside Rocket.new to pick the right tool for page views, conversion tracking, or product funnel analysis. Not sure which analytics tool to connect? Here's how Google Analytics and Mixpanel differ and when to use each. ## Quick answer * For website traffic, audience insights, and marketing attribution, use **Google Analytics**. * For product analytics, user behavior, and conversion funnels, use **Mixpanel**. * For both: they complement each other well. GA4 covers where users come from; Mixpanel covers what they do after they arrive. ## Comparison table | | Google Analytics (GA4) | Mixpanel | | - | - | - | | **Best for** | Marketing teams, traffic analysis | Product teams, behavioral analytics | | **Tracks** | Page views, sessions, traffic sources, demographics | Events, funnels, retention, user journeys | | **Real-time data** | Yes | Yes | | **Funnel analysis** | Basic | Excellent | | **Retention tracking** | Limited | Excellent | | **User segmentation** | Audience-level | Individual user-level | | **A/B testing** | No native testing | Experiment tracking support | | **E-commerce tracking** | Built-in revenue reporting | Custom purchase events | | **Connection method** | Measurement ID (`G-XXXXXXXX`) | Service account username + secret | | **Pricing** | Free (GA4) | Free tier + paid plans | ## When to use each ### Google Analytics Best for understanding **where your users come from** and **how they move through your site**. GA4 excels at traffic source attribution, audience demographics, device and geography breakdown, and marketing campaign tracking. Use Google Analytics if you need to answer questions like: * Where is my traffic coming from? * Which pages have the highest drop-off rate? * How are my marketing campaigns performing? * What devices and locations are my users on? ```plaintext wrap theme={null} Add Google Analytics tracking to my app. I want to see page views, traffic sources, and user demographics in my GA4 dashboard. ``` ### Mixpanel Best for understanding **what users do inside your product** and **why they convert or churn**. Mixpanel tracks individual user actions and lets you build funnels, cohort comparisons, and retention charts. Use Mixpanel if you need to answer questions like: * Where do users drop off in my signup flow? * Which features do power users engage with most? * How many users come back after day 7? * Which user segments have the highest conversion rate? ```plaintext wrap theme={null} Add Mixpanel event tracking to my app. Track sign-ups, feature usage, and purchase completions so I can build conversion funnels. ``` ### Using both together Many teams run GA4 and Mixpanel in parallel. They solve different problems and do not overlap much. ```plaintext wrap theme={null} Add Google Analytics for traffic tracking and Mixpanel for event-based product analytics. Track page views in GA4 and user actions like sign-ups and feature usage in Mixpanel. ``` ## Browse analytics integrations Website traffic, audience insights, and conversion tracking with GA4. Product analytics, funnels, retention, and user behavior tracking. # Anthropic Source: https://docs.rocket.new/build/connectors/anthropic Add Claude to your Rocket.new app through Anthropic to power chatbots, long-document analysis, content moderation, and summarization workflows. Connect your Anthropic API key and describe the AI feature you need in chat. Rocket wires up Claude for chatbots, document analyzers, coding assistants, and more. ## What you can do Add a Claude-powered assistant that answers user questions, explains features, or supports your product. Let users upload contracts, reports, or articles and get structured summaries with key insights. Review user-generated content for policy violations with nuanced understanding of context and intent. Build an in-app code reviewer that explains logic, suggests improvements, and catches bugs. Help users improve their writing with feedback on tone, structure, clarity, and style. ## Before you connect **Get your Anthropic API key** from the Anthropic Console. Never paste your API key directly into chat. Always use the secure connector popup. If your key is exposed, rotate it immediately from the Anthropic Console. Anthropic is a **task-level** connector. Each Rocket task connects to its own API key independently. ## Connect Anthropic You can connect from two places. Both open the same popup. **Option 1: From chat** Type a prompt that mentions Anthropic or Claude, for example `Connect Anthropic and add a Claude chatbot to my app`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Anthropic connection prompt in the Rocket chat panel. Anthropic connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Anthropic** card, then click **Connect**. Connectors panel showing the Anthropic card with a Connect button. Connectors panel showing the Anthropic card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key** and click **Connect**. Connect Anthropic popup with an API key input field. Connect Anthropic popup with an API key input field. A green dot appears next to Anthropic when the connection is active. **Update or disconnect** Go to [**Connectors > Anthropic**](#connect-anthropic). Click **Edit** to update the key or **Disconnect** to remove the integration. Anthropic card showing Edit and Disconnect buttons. Anthropic card showing Edit and Disconnect buttons. You can connect from two places. Both open the same popup. **Option 1: From chat** Type a prompt that mentions Anthropic or Claude. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Anthropic** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key** and tap **Done**. A green dot appears next to Anthropic when the connection is active. **Update or disconnect** Go back to the **Anthropic** card in Integrations. Tap **Edit** to update the key or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Chatbot | `Add a Claude-powered chatbot that answers user questions about my product.` | | Document summary | `Let users upload a PDF and get a structured summary with key takeaways from Claude.` | | Content moderation | `Build a moderation queue that uses Claude to flag and explain policy violations in user comments.` | | Code review | `Add a code review panel where developers paste code and Claude suggests improvements.` | | Writing assistant | `Create a writing helper that gives feedback on tone, clarity, and structure.` | | Email drafter | `Add an AI email composer that generates professional responses based on bullet points.` | | Translation | `Build a translation tool that uses Claude to translate content between English, Spanish, and French.` | | Q\&A from data | `Create a Q&A interface where Claude answers questions based on data stored in Supabase.` | | Meeting notes | `Build a tool where users paste meeting transcripts and Claude extracts action items and decisions.` | | Lesson planner | `Generate a structured lesson plan from a topic and grade level using Claude.` | ## Tips * **Claude excels at nuanced, careful tasks.** For content requiring sensitivity, reasoning, or safety, Claude often outperforms other models. Compare results with OpenAI to find the best fit. * **Token usage affects your bill.** Long documents and multi-turn conversations consume more tokens. Monitor usage in the Anthropic Console. * **API billing is separate from Rocket.** Anthropic charges based on token usage. Check their [pricing page](https://www.anthropic.com/pricing) for current rates. * **Claude works with the context you provide.** By default, Claude does not fetch live data or search the web within Rocket. For real-time search, pair it with the Perplexity integration. * **One API key per task.** Each Rocket task connects to one Anthropic API key independently. ## What's next? Compare Claude with GPT models to find the best AI fit for your app. Add real-time web search with citations alongside Claude's reasoning. Store conversation history and user data for Claude-powered features. Send AI-generated content, summaries, or reports via email. # Azure DevOps Source: https://docs.rocket.new/build/connectors/azure-devops For teams building in Rocket from Azure DevOps: connect for work-item context, then set env vars so your app can call Azure DevOps APIs. For teams who plan work in Azure DevOps and build in Rocket. Connect so you can build or fix from a work item or wiki URL and update Azure DevOps from chat. After you set env vars, your app can call Azure DevOps APIs. You need two pieces: the **connector** (Azure DevOps as generation context for Rocket) and **environment variables plus a PAT** (so your generated app can call Azure DevOps APIs). Connect at **workspace** level (Settings, shared across tasks) or **task** level (Connectors tab or chat). **Before you start:** a Microsoft account with access to the target Azure DevOps organization and project; permission to approve OAuth (or an admin if you see **Need admin approval**); a Personal Access Token you can create (or an admin policy that allows it); and the organization name from `https://dev.azure.com/{organization}` plus the project name for env vars. Use the same organization in **Select Organization** and `AZURE_DEVOPS_ORG`. ## What you can do Paste a user story or task URL. Rocket reads requirements and acceptance criteria, then generates the feature. Paste a bug URL. Rocket reads reproduce steps and expected vs actual behavior, then produces a targeted fix. Ask Rocket to read the active sprint and build the highest-priority work first. Point Rocket at a repository or pull request so new code matches your existing patterns. Paste a failing build URL. Rocket checks the logs and fixes the issue in the app. Paste a wiki URL. Rocket follows the specs on that page when generating the feature. ## Connect Azure DevOps Authorize with Microsoft, then select the organization Rocket should use. You can also connect from [workspace Settings](/getting-started/workspace/connectors). In the preview toolbar, click the **`...`** button. Rocket preview toolbar with the three-dot overflow menu highlighted. Rocket preview toolbar with the three-dot overflow menu highlighted. Select **Connectors** from the menu. Overflow menu with Connectors highlighted. Overflow menu with Connectors highlighted. Click the **Azure DevOps** card. Connectors list with the Azure DevOps card highlighted. Connectors list with the Azure DevOps card highlighted. On the Azure DevOps connector page, click **Connect**. Azure DevOps connector detail page with the Connect button highlighted. Azure DevOps connector detail page with the Connect button highlighted. A Microsoft sign-in screen opens. Sign in with an account that has access to your Azure DevOps organization, review the permissions Rocket requests, and approve access. You return to Rocket when authorization completes. If Microsoft shows **Need admin approval**, ask your Microsoft Entra admin (your organization’s Microsoft login) to [grant admin consent](https://learn.microsoft.com/en-us/entra/identity/enterprise-apps/grant-admin-consent) or [review consent requests](https://learn.microsoft.com/en-us/entra/identity/enterprise-apps/review-admin-consent-requests). For OAuth scopes and consent, see [Microsoft Entra OAuth for Azure DevOps](https://learn.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/entra-oauth?view=azure-devops) and the [OAuth scope reference](https://learn.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/oauth?view=azure-devops#available-scopes). Under **Select Organization**, choose which Azure DevOps organization to connect, then confirm. When the connection is active, **Disconnect** is available on the connector page. Azure DevOps connector with Select Organization dropdown highlighted. Azure DevOps connector with Select Organization dropdown highlighted. Your account needs access to the organization and project you intend to use. Admins can [add organization users](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/add-organization-users?view=azure-devops) and [grant project access](https://learn.microsoft.com/en-us/azure/devops/organizations/security/add-users-team-project?view=azure-devops). OAuth approval alone does not grant admin rights; see the [Azure DevOps permissions reference](https://learn.microsoft.com/en-us/azure/devops/organizations/security/permissions?view=azure-devops). Disconnect or switch accounts from workspace Settings. Tap **More** in the header, then **Integrations**. Open **Azure DevOps**, tap **Connect**, authorize with Microsoft, then select your organization. ## Set environment variables These three values are for the **generated app**, not for signing into the connector. Use the same organization you chose under **Select Organization**. Create a Personal Access Token in Azure DevOps with Microsoft’s [Personal Access Token guide](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops\&tabs=Windows). If PAT creation or scopes are restricted, see [PAT policies for administrators](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/manage-pats-with-policies-for-administrators?view=azure-devops). The organization name appears in `https://dev.azure.com/{organization}`; the project name is in the project selector and URL. See Microsoft’s guides for [finding organizations](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/get-list-of-organizations-connected-to-microsoft-entra-id?view=azure-devops) and [viewing projects](https://learn.microsoft.com/en-us/azure/devops/organizations/projects/create-project?view=azure-devops#list-projects). | Variable | Purpose | | :- | :- | | `AZURE_DEVOPS_ORG` | Azure DevOps organization name | | `AZURE_DEVOPS_PROJECT` | Project within that organization | | `AZURE_DEVOPS_PAT` | Personal Access Token for app API auth | Reference them in server-side code as `process.env.AZURE_DEVOPS_ORG`, `process.env.AZURE_DEVOPS_PROJECT`, and `process.env.AZURE_DEVOPS_PAT`. Never paste your Personal Access Token into chat, and never share passwords, OAuth tokens, refresh tokens, client secrets, or PATs with support. Add placeholders in `.env`, then set real values in Environment settings. If a token is exposed, revoke it in Azure DevOps and create a new one. Open the Code tab and add: ```plaintext wrap theme={null} AZURE_DEVOPS_ORG=your-org AZURE_DEVOPS_PROJECT=your-project AZURE_DEVOPS_PAT=your-pat-here ``` Open **Settings → Environment** and fill in Staging and Production for all three variables. Ask Rocket to use these variables when building Azure DevOps-backed features in your app. How to add and manage Staging and Production values in Rocket. ## Example prompts Pick the tab that matches what you are doing. Paste an Azure DevOps URL when you have one. Review changes in Azure DevOps before sharing; they appear in your org immediately. | Goal | Say this in chat | | :- | :- | | Build from a story | `Build the feature described in [ADO_URL]. Read the requirements, acceptance criteria, and linked items first.` | | Fix a bug | `Fix the bug at [ADO_URL]. Read the steps to reproduce and expected vs actual behavior, then generate a targeted fix.` | | See my work | `Show my assigned Azure DevOps work items in this project and suggest which one to build first.` | | Search the board | `Search Azure DevOps for work items about checkout and summarize the open ones.` | | Create follow-ups | `Create Azure DevOps tasks for QA and edge cases from this build, and link them under the parent story.` | | Update and comment | `Move work item [ADO_URL] to Done and leave a comment describing what was built.` | | Goal | Say this in chat | | :- | :- | | Build from the sprint | `Read my team's current sprint in Azure DevOps and build the highest-priority story first.` | | Check the backlog | `Show the product backlog for our team and summarize what is ready to build.` | | See capacity | `Check our team's capacity for the current sprint and call out who is overloaded.` | | Set up a sprint | `Create a two-week sprint named Sprint 24 in Azure DevOps and assign it to our team.` | | Goal | Say this in chat | | :- | :- | | Match existing code | `Use the repository and recent pull requests at [ADO_URL] as context so the new feature matches our patterns.` | | Search the codebase | `Search our Azure DevOps repo for how we handle authentication and reuse that approach.` | | Open a pull request | `Create a branch and open a pull request for the changes we just made, with a clear title and description.` | | Review a PR | `Read the pull request at [ADO_URL], summarize the discussion, and apply any agreed fixes.` | | Goal | Say this in chat | | :- | :- | | Fix a failing build | `Read the failing build at [ADO_URL], check the logs, and fix the issue in the app.` | | Check status | `List our pipelines and tell me which builds failed in the last day.` | | Run a pipeline | `Run the main build pipeline on the branch we just created.` | | After a build | `Show the commits and work items associated with build [ADO_URL].` | | Goal | Say this in chat | | :- | :- | | Build from a spec | `Read the wiki page at [ADO_URL] and build the described feature following those specs.` | | Find the right page | `Search our Azure DevOps wiki for the onboarding runbook and use it as context.` | | Document what shipped | `Create or update a wiki page summarizing what we built and how to try it.` | | Goal | Say this in chat | | :- | :- | | See coverage | `List the test plans and suites for this project and summarize what is covered.` | | Results from a build | `Pull the test results from build [ADO_URL] and summarize what failed.` | | Create cases from the build | `Create a test plan with cases and steps that cover the feature we just built.` | ## What's next? Prefer Jira for tickets and sprints? Connect it for issue-driven builds. Already using Linear? Connect it for bi-directional ticket integration. Push your code to a repository and keep version history. Browse every available integration. # Brevo Source: https://docs.rocket.new/build/connectors/brevo Wire Brevo into Rocket.new to send transactional email, run SMS campaigns, and sync CRM contacts for onboarding and re-engagement flows. Connect Brevo and describe the messaging flow you want in chat. Rocket generates the complete logic: templates, API calls, contact management, and automation triggers. Brevo is a great choice when you need email, SMS, and CRM in a single platform. Pair with [Supabase](/build/connectors/supabase/overview) for user data and [Stripe](/build/connectors/stripe) for payment-triggered communications. ## What you can do Password resets, order confirmations, invoices, and verification emails triggered by user actions. Promotional emails, announcements, and seasonal campaigns to your contact lists. SMS messages for promotions, alerts, and time-sensitive notifications through Brevo's built-in SMS feature. Manage contacts, segment audiences, and automate workflows based on user behavior. Collect subscriber emails and deliver regular newsletters with dynamic content. ## Before you connect You need your **API key** from the Brevo dashboard. **Create or copy your Brevo API key** Never paste your Brevo API key directly into chat. Always use the secure connection popup. If your key has been exposed, revoke it from Brevo Settings and create a new one. ## Connect Brevo You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions Brevo - for example, `Connect Brevo and send a welcome email when a new user signs up`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Brevo connection prompt in the Rocket chat panel. Brevo connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Brevo** card, then click **Connect**. Connectors panel showing the Brevo card with a Connect button. Connectors panel showing the Brevo card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key**, then click **Save**. A green dot appears next to Brevo when the connection is active. Brevo API key input popup. Brevo API key input popup. **Update or disconnect** Go to [**Connectors > Brevo**](#connect-brevo). Update your key or click **Disconnect** to remove the integration. Brevo integration showing connected state with a Disconnect button. Brevo integration showing connected state with a Disconnect button. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions Brevo. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Brevo** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key**, then tap **Done**. A green dot appears next to Brevo when the connection is active. **Update or disconnect** Go to **Integrations > Brevo**. Update your key or tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Welcome email | `Send a welcome email through Brevo when a new user signs up, with onboarding steps.` | | Password reset | `Add a forgot-password flow that sends a reset link via Brevo with a 15-minute expiration.` | | Marketing campaign | `Build a campaign page where I can write a promotional email, select a Brevo contact list, and send it.` | | SMS notification | `Send an SMS through Brevo to users who opted in when their order ships.` | | Drip sequence | `Start a 5-email onboarding drip sequence through Brevo when a user creates an account.` | | Newsletter | `Add a newsletter signup form and send a monthly email through Brevo with the latest blog posts.` | | Abandoned cart | `Send an abandoned cart email through Brevo 1 hour after a user leaves items in their cart.` | | Contact tagging | `When a user upgrades to Pro, update their Brevo contact attributes and add a "pro" tag.` | | Event reminder | `Send an event reminder email through Brevo 24 hours before a user's scheduled appointment.` | | Re-engagement | `Send a re-engagement email to Brevo contacts who have not opened an email in 60 days.` | ## Tips * **Brevo combines email, SMS, and CRM.** Unlike standalone email services, Brevo includes SMS sending and contact management in one platform. * **Free tier includes 300 emails per day.** Brevo's free plan allows 300 emails daily with no contact limit. Upgrade for higher sending volume and advanced features. * **Transactional and marketing are separate.** Brevo treats transactional emails and marketing campaigns as separate categories with different sending limits. * **Manage contacts in Brevo.** You can add contacts through Rocket, but deleting contacts, managing unsubscribes, and editing campaign templates must be done in the Brevo dashboard. * **One Brevo account per project.** Each Rocket project connects to one Brevo API key. ## What's next? Store user data and trigger emails based on database events and user actions. Send payment confirmations and receipt emails after Stripe transactions. Compare with SendGrid for high-volume transactional email at scale. Compare with Resend for simpler developer-focused transactional email. # Calendly Source: https://docs.rocket.new/build/connectors/calendly Embed Calendly into your Rocket.new app to add booking widgets, sales demo schedulers, and round-robin team meeting flows straight from chat. Describe the scheduling flow you need in chat and Rocket generates the embedded scheduler, confirmation pages, and notification flows automatically. ## What you can do Let visitors book a free or paid consultation directly from your website with automatic calendar sync. Give prospects a frictionless way to schedule product demos with your sales team. Route meetings to available team members with round-robin or collective scheduling. Let users sign up for webinars, workshops, or group events with automatic capacity tracking. Combine a questionnaire with appointment booking so you have context before every meeting. ## Connect Calendly Calendly connects via OAuth, so no API key is needed. Calendly is a **workspace-level** connector. No matter where you connect it (Settings, Connectors tab, or chat), it links to your entire Rocket workspace and is available across all tasks. You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Calendly, for example `Connect Calendly and add a Book a Demo button to my pricing page`. Rocket detects the intent and shows a **Connect** button inline. Click it and the OAuth flow opens. Rocket chat panel showing a Connect prompt for Calendly. Rocket chat panel showing a Connect prompt for Calendly. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Calendly** card, then click **Connect**. Connectors panel showing the Calendly card with a Connect button. Connectors panel showing the Calendly card with a Connect button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** A Calendly authorization screen opens in your browser. Log in and grant Rocket access to your scheduling data. A green dot appears next to Calendly when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Calendly. Rocket detects the intent and shows a **Connect** button inline. Tap it and the OAuth flow opens. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Calendly** card, then tap **Connect**. **Option 3: From workspace Settings** Open your workspace, go to **Settings**, and tap **Connectors**. Tap the **Calendly** card and tap **Connect**. **After tapping Connect** A Calendly authorization screen opens. Log in and grant Rocket access to your scheduling data. A green dot appears next to Calendly when the connection is active. **Disconnect** Go back to the **Calendly** card in Integrations. Tap **Disconnect** to remove the integration. ## Example prompts | What you want | Prompt to use | | :- | :- | | Consultation page | `Embed a Calendly widget on my /book page for 30-minute consultations.` | | Sales demo | `Add a Book a Demo button on my pricing page that opens a Calendly popup.` | | Onboarding call | `Add a Calendly booking step after a user signs up for a 15-minute onboarding call.` | | Team scheduling | `Create a team booking page where clients are matched with an available rep.` | | Webinar registration | `Build an event page for my weekly webinar with Calendly registration.` | | Paid consultation | `Embed a Calendly booking widget and charge $50 per session via Stripe before confirming.` | | Intake plus booking | `Create a two-step flow: intake form first, then Calendly time picker on step two.` | | Office hours | `Add a Calendly embed for weekly office hours on my /support page.` | | Reminder email | `Send a custom reminder email via Resend 24 hours before each Calendly appointment.` | | Post-meeting survey | `After a Calendly meeting ends, email the attendee a Typeform feedback survey.` | ## Tips * **Calendar sync is automatic.** Calendly syncs with Google Calendar, Outlook, and iCloud. Availability updates in real time. * **Embedding options.** Rocket can embed Calendly as an inline widget, popup, or full-page view. Describe the style you want in chat. * **Free plan limits.** Calendly's free tier supports one event type. Upgrade for team scheduling, round-robin, and multiple event types. * **Webhooks for custom flows.** Calendly sends webhook events when meetings are booked or canceled. Use these to trigger Supabase inserts or email notifications through Rocket. * **One Calendly account per workspace.** All tasks share the same connected account. ## What's next? Store booking records in a database for reporting and in-app display. Send custom confirmation and reminder emails for each booking. Charge for consultations or demos by combining Calendly with Stripe checkout. # Confluence Source: https://docs.rocket.new/build/connectors/confluence Use Confluence pages, specs, and decision records as live context in Rocket.new so generated code follows your team's documented standards. Connect Confluence and Rocket reads your team's pages, specs, and decision records as context when generating code. Architecture docs, API references, and sprint notes feed directly into the generation process for tighter alignment between docs and code, without copying and pasting. Confluence is a **workspace-level** connector. Connect it once from Settings and it is available across all tasks. ## What you can do Link a product spec, PRD, or technical design doc in Rocket. Rocket reads the requirements and builds exactly what was specced. Feed your team's API reference, system design, and architecture docs into Rocket so generated code matches your actual patterns. Pull Confluence space pages into your app. Turn internal wikis into searchable help centers or onboarding tools. Sprint notes, ADRs, and runbooks become context so every output reflects your team's real decisions and conventions. ## Before you connect Confluence uses OAuth via Atlassian, so no API key is required. You authorize Rocket through Atlassian's login screen, then select your cloud instance and Confluence space inside Rocket. Rocket can only read pages in the Confluence space you select during the connection flow. To access a different space, disconnect and reconnect with the new space selected. ## Connect Confluence You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that references Confluence - for example, `Connect our Confluence space and use the API spec doc when building this feature`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the authorization flow. Chat showing a Connect button inline after a Confluence prompt. Chat showing a Connect button inline after a Confluence prompt. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Confluence** card, then click **Connect with Confluence**. Connectors panel showing the Confluence card with a Connect with Confluence button. Connectors panel showing the Confluence card with a Connect with Confluence button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect with Confluence** Atlassian's authorization screen opens. Review what Rocket is requesting access to in Confluence and User, then click **Accept**. Atlassian OAuth authorization screen showing Rocket requesting access to Confluence. Back in Rocket, select your **Atlassian cloud** from the dropdown, then select the **Confluence space** you want to use as context and click **Save**. A green dot appears next to Confluence when the connection is active. **Disconnect** Disconnect or switch spaces from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that references Confluence. Rocket shows a **Connect** button inline. Tap it to open the authorization flow. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Confluence** card, then tap **Connect with Confluence**. **After tapping Connect with Confluence** Atlassian's authorization screen opens. Review the permissions, then tap **Accept**. Back in Rocket, select your **Atlassian cloud** from the dropdown, then select the **Confluence space** you want to use as context and tap **Save**. A green dot appears next to Confluence when the connection is active. ## Example prompts Replace `[CONFLUENCE_URL]` with the link to your Confluence page or space. | Use case | Prompt | | :- | :- | | Build from spec | `Read our product spec at [CONFLUENCE_URL] and build the described feature with all data models and user flows.` | | Use API reference as context | `Use the API reference in our Confluence space when generating the integration layer for this service.` | | Architecture-aligned code | `Generate the authentication module following the patterns in our architecture doc at [CONFLUENCE_URL].` | | Help center from wiki | `Turn the FAQ page at [CONFLUENCE_URL] into a searchable help center with category filters.` | | Onboarding from runbook | `Build an onboarding checklist app using the steps from our new-hire runbook at [CONFLUENCE_URL].` | | Standards enforcement | `Generate the database schema following the conventions documented in our Confluence data model guide at [CONFLUENCE_URL].` | ## Tips * **Paste Confluence page URLs directly in chat.** Linking to a specific page gives Rocket focused context. Vague references may pull less relevant content from across the space. * **Connect the most relevant space.** If your team has multiple Confluence spaces, connect the one that contains the specs and docs closest to what you are building. * **Specs produce the most accurate code.** The more structured and detailed your Confluence doc, the more precisely Rocket can match your requirements. * **To switch spaces, reconnect.** You can only connect one Confluence space at a time per workspace. Disconnect and reconnect to switch to a different space. * **Confluence context is RAG-based.** Rocket retrieves the most relevant content from your space at generation time. It does not load the entire space into every prompt. ## What's next? Prefer Notion for your docs? Connect Notion as an alternative source of specs and wikis. Build directly from Linear tickets alongside your Confluence specs. Store app data with Supabase while Confluence provides the documentation context. Push generated code to GitHub to keep it in sync with your team's workflow. # Database and CMS comparison: Supabase, Airtable, Strapi Source: https://docs.rocket.new/build/connectors/databases-and-cms Compare Supabase, Airtable, Strapi, and Directus inside Rocket.new to choose the right backend or headless CMS for your app data and content. Rocket supports four backend integrations, each designed for different use cases. This page helps you choose the right one. ## Quick answer * For a full-stack backend with auth, database, storage, and edge functions, use **Supabase**. * For lightweight data management with a spreadsheet-style interface, use **Airtable**. * For content management with a visual admin panel, use **Strapi** or **Directus**. Supabase connects via OAuth. Airtable uses a personal access token. Strapi and Directus use an API token plus your instance URL. ## Comparison table *Scroll right to see all four services* | Feature | Supabase | Airtable | Strapi | Directus | | - | - | - | - | - | | **Best for** | Full-stack app backend | Lightweight data, CRM, internal tools | Blog and content management | Content management on any SQL DB | | **Database** | PostgreSQL (full SQL) | Proprietary (spreadsheet-style) | SQLite, MySQL, PostgreSQL | Any SQL database | | **User authentication** | Built-in (email, social, magic links) | No | Plugin-based | Admin-level (not end-user auth) | | **File storage** | Built-in | Attachment fields | Media library | Asset management | | **Edge functions** | Yes (Deno) | No | No | Flows (automation) | | **REST API** | Auto-generated | Yes | Yes | Yes | | **GraphQL** | Via extension | No | Yes | Yes | | **Admin panel** | Supabase Dashboard | Airtable UI | Visual admin | Visual admin | | **Self-hosted option** | Yes | No | Yes | Yes | | **Free tier** | 500 MB DB, 1 GB storage | 1,000 records per base | Self-hosted (free) | Self-hosted (free) | | **Connection method** | OAuth | Personal access token | API token + URL | Access token + URL | ## Detailed recommendations ### Building a web or mobile app that needs user accounts and a database **Use Supabase.** It provides a PostgreSQL database, user authentication (email, Google, GitHub, magic links), file storage, and edge functions in a single platform. Rocket connects via OAuth, so you do not need to manage API keys. ```plaintext wrap theme={null} Connect Supabase and add user signup with email and Google login. Create a profiles table with name, avatar, and bio fields. ``` ### Need a simple database for leads, inventory, or internal tools **Use Airtable.** It works like a spreadsheet with the power of a database. It is great for managing leads, content calendars, inventory, and lightweight CRM workflows. Non-technical team members can view and edit data directly in Airtable's interface. ```plaintext wrap theme={null} Connect Airtable and display my product inventory in a searchable table. Let users filter by category and sort by price. ``` ### Building a blog, docs site, or content-heavy website **Use Strapi or Directus.** Both are headless CMS platforms with visual admin panels for managing articles, pages, and media. Choose based on your database preference: * **Strapi** has a larger community, more plugins, and a built-in media library. It works with SQLite, MySQL, or PostgreSQL. * **Directus** wraps any existing SQL database with an instant API. Choose it if you already have a database or want GraphQL support. ```plaintext wrap theme={null} Connect Strapi and pull blog posts with categories, author pages, featured images, and an RSS feed. ``` ### Using multiple backends in the same app **Combine Supabase with a CMS.** Use Supabase for user accounts and dynamic data, and Strapi or Directus for editorial content. This is common for SaaS products with a blog, or e-commerce sites with a product catalog managed by a content team. ```plaintext wrap theme={null} Use Supabase for user accounts and Strapi for blog content. Show personalized content recommendations based on the user's reading history. ``` ## Browse database and CMS integrations PostgreSQL database, auth, storage, and edge functions. Spreadsheet-meets-database for lightweight data management. Open-source headless CMS with a visual admin panel. Open-source CMS wrapping any SQL database with instant API. # Directus Source: https://docs.rocket.new/build/connectors/directus Plug Directus into Rocket.new to build content-driven sites, product catalogs, and multi-language storefronts with a flexible headless CMS. Describe the content experience you want in chat and Rocket generates pages, listing views, and dynamic layouts that pull directly from your Directus collections. ## What you can do Publish articles, tutorials, and news posts managed entirely through Directus. Display products with images, descriptions, pricing, and variant options from Directus. Serve content in multiple languages using Directus translations with a language switcher. Searchable help center powered by Directus content, grouped by category. Image-heavy collections like projects, case studies, or creative work with filtering and detail views. ## Before you connect You need a running Directus instance and an access token. **Get your Directus access token** from the Directus documentation. Open your Directus project and go to your **User Profile**. Scroll to the **Token** field and click **Generate New Token**. Copy the token and note your **project URL** (e.g., `https://your-project.directus.app`). Never paste your Directus access token directly into Rocket chat. Always use the secure connection flow. If you think your token has been exposed, regenerate it from your Directus User Profile. ## Connect Directus You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Directus, for example `Connect Directus and build a blog listing page from my articles collection`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup. Rocket chat panel showing a Connect prompt for Directus. Rocket chat panel showing a Connect prompt for Directus. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Directus** card, then click **Connect**. Connectors panel showing the Directus card with a Connect button. Connectors panel showing the Directus card with a Connect button. **After clicking Connect** A popup opens. Enter your **Project URL** and **Access Token**, then click **Save**. Popup showing Project URL and Access Token fields for Directus. Popup showing Project URL and Access Token fields for Directus. A green dot appears next to Directus when the connection is active. **Update or disconnect** Open [**Connectors > Directus**](#connect-directus) and click the card. Replace the existing credentials to update, or click **Disconnect** to remove the integration. Directus card in edit state showing Disconnect option. Directus card in edit state showing Disconnect option. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Directus. Rocket detects the intent and shows a **Connect** button inline. Tap it to open the credentials screen. **Option 2: From the Connectors tab** Tap the **More** button in the header, then tap **Integrations**. Tap the **Directus** card, then tap **Connect**. **After tapping Connect** Enter your **Project URL** and **Access Token**, then tap **Done** to save. A green dot appears next to Directus when the connection is active. **Update or disconnect** Go back to the **Directus** card in Integrations. Update your credentials anytime or tap **Disconnect** to remove the integration. ## Example prompts | What you want | Prompt to use | | :- | :- | | Blog listing | `Show all articles from my Directus posts collection with thumbnails and publish dates.` | | Detail page | `When a user clicks an article, open a detail page with the full rich-text body from Directus.` | | Product catalog | `Create a product grid from my Directus products collection with images, prices, and a detail modal.` | | Multi-language | `Add a language switcher that toggles content between English and Spanish from Directus translations.` | | FAQ page | `Build an FAQ accordion from my Directus faqs collection, grouped by category.` | | Search | `Add a full-text search bar to my Directus-powered blog listing page.` | | Media gallery | `Display images from my Directus media collection in a responsive grid with lightbox preview.` | | Filtered listing | `Show Directus products filtered by category with a sidebar navigation.` | | Pagination | `Add pagination to my Directus blog listing, showing 10 posts per page.` | | Admin view | `Create a simple admin table for my Directus collection with inline editing and a delete button.` | ## Tips * **Choose token permissions carefully.** The access token inherits the permissions of the Directus user that generated it. Use a dedicated service account with scoped permissions for production apps. * **Your access token is stored securely.** Rocket encrypts it at rest and never exposes it in client-side code. * **Directus must be publicly reachable.** Local-only instances will not work. Your Directus URL must be accessible from the internet. * **Deleting content must happen in Directus.** Rocket can create and update records, but content and asset deletion should be managed directly in your Directus admin panel. * **One Directus project per Rocket project.** Each Rocket project connects to one set of credentials. Use different Rocket projects for different Directus instances. * **Licensing.** Directus is licensed under [BSL 1.1](https://directus.io/docs/self-hosting/overview). Organizations with over \$5 million in total finances require a commercial license. Smaller organizations and individuals can use Directus commercially without a license. ## What's next? Comparing headless CMS options? See how Strapi works with Rocket. Pair Directus content with Supabase auth and user management. Send notification emails when new content is published from Directus. Deploy your Directus-powered site to Netlify with one prompt. # ElevenLabs Source: https://docs.rocket.new/build/connectors/elevenlabs Connect ElevenLabs to your Rocket.new app and add AI-powered voice generation, text-to-speech, and voice cloning with a single prompt. Connect your ElevenLabs API key and describe the voice feature you need in chat. Rocket generates the complete integration: text-to-speech components, voice selection, audio playback, and content management. ## What you can do Convert any text into natural, lifelike speech with multiple voice options and language support. Clone a custom voice from audio samples and use it to generate speech unique to your brand or product. Generate speech in multiple languages from a single voice, ideal for global apps and localized content. Create voiceovers for videos, podcasts, courses, or product demos directly from your app. Manage generated audio files, organize voice projects, and stream or download audio from your app. ## Before you connect You need an ElevenLabs API key. Get your ElevenLabs API key from the dashboard | Key detail | Value | | :- | :- | | **Prefix** | `sk_` | | **Min length** | 20 characters | | **Where to find it** | ElevenLabs Settings > API Keys | Never paste your API key directly into chat. Always use the secure connector popup. If your key is exposed, rotate it immediately from the ElevenLabs dashboard. ElevenLabs is a **task-level** connector. Each Rocket task connects to its own API key independently. ## Connect ElevenLabs You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions ElevenLabs or text-to-speech - for example, `Connect ElevenLabs and add text-to-speech to my app`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. ElevenLabs connection prompt in the Rocket chat panel. ElevenLabs connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **ElevenLabs** card, then click **Connect**. Connectors panel showing the ElevenLabs card with a Connect button. Connectors panel showing the ElevenLabs card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key** and click **Connect**. Connect ElevenLabs popup with an API key input field. Connect ElevenLabs popup with an API key input field. A green dot appears next to ElevenLabs when the connection is active. **Update or disconnect** Go to [**Connectors > ElevenLabs**](#connect-elevenlabs). Click **Edit** to update the key or **Disconnect** to remove the integration. ElevenLabs card showing Edit and Disconnect buttons. ElevenLabs card showing Edit and Disconnect buttons. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions ElevenLabs or text-to-speech. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **ElevenLabs** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key** and tap **Done**. A green dot appears next to ElevenLabs when the connection is active. **Update or disconnect** Go back to the **ElevenLabs** card in Integrations. Tap **Edit** to update the key or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Text-to-speech page | `Add a text-to-speech feature where users type text and hear it spoken aloud using ElevenLabs.` | | Voice selector | `Build a voice selection page that lets users preview different ElevenLabs voices before generating speech.` | | Voiceover tool | `Create a voiceover generator where users paste a script and download the audio file using ElevenLabs.` | | Multilingual narration | `Add multilingual narration to my app. Let users pick a language and generate speech from their text with ElevenLabs.` | | Audio content library | `Build an audio content library where users generate, store, and replay voice clips using ElevenLabs.` | | Podcast intro generator | `Generate podcast intro audio from a text script using ElevenLabs and let users download it as MP3.` | | Accessibility reader | `Add a "Read aloud" button to each article that uses ElevenLabs to read the content to the user.` | | Custom voice setup | `Let users upload a voice sample to clone their voice with ElevenLabs, then use it for all generated audio.` | ## Tips * **API billing is separate.** ElevenLabs charges based on character usage. Monitor your quota in the [ElevenLabs dashboard](https://elevenlabs.io/app/subscription). * **Start with pre-made voices.** ElevenLabs offers a library of ready-to-use voices. Use them to prototype before investing in voice cloning. * **Character limits apply.** Each plan has a monthly character allowance. Keep generated audio concise and cache results where possible. * **Voice cloning requires samples.** To clone a voice, you need at least one minute of clean audio. Higher quality samples produce better results. * **One API key per task.** Each Rocket task connects to one ElevenLabs API key independently. ## What's next? Combine ElevenLabs speech with GPT-generated scripts for fully automated audio content. Use Claude to write long-form narration scripts, then voice them with ElevenLabs. Store generated audio files and user voice preferences in Supabase. Browse every available integration. # Email and messaging comparison: Resend, SendGrid, Twilio Source: https://docs.rocket.new/build/connectors/email-and-messaging Compare Resend, SendGrid, Brevo, MailerLite, Mailchimp, and Twilio in Rocket.new to pick the right transactional email, marketing, or SMS tool. Rocket supports six email and messaging integrations. This page helps you pick the right one for your project. **Quick answer:** * **Transactional emails** (receipts, password resets, notifications): Use **Resend** or **SendGrid**. * **Marketing emails** (campaigns, newsletters, drip sequences): Use **Mailchimp**, **MailerLite**, or **Brevo**. * **SMS messages** (verification codes, alerts, reminders): Use **Twilio**. * **All-in-one** (email + SMS + CRM in a single platform): Use **Brevo**. ## Comparison table *Scroll right to see all six services →* | Feature | Resend | SendGrid | Brevo | MailerLite | Mailchimp | Twilio | | - | - | - | - | - | - | - | | **Best for** | Transactional emails | High-volume transactional + marketing | All-in-one (email + SMS + CRM) | Newsletters and subscriber automation | Email campaigns and audience management | SMS messages | | **Transactional emails** | Excellent | Excellent | Good | Limited | Limited | N/A (SMS only) | | **Marketing emails** | No | Good | Good | Excellent | Excellent | N/A | | **SMS support** | No | No | Yes | No | No | Yes | | **Built-in CRM** | No | No | Yes | No | No | No | | **Free tier** | 3,000 emails/month | 100 emails/day | 300 emails/day | 500 subscribers, 12,000 emails/month | 500 contacts, 1,000 sends/month | Trial credits only | | **Developer experience** | Excellent (modern API) | Good | Good | Good | Good | Good | | **Supabase SMTP** | Yes | Yes | Yes | No | No | N/A | | **Connection method** | API key | API key | API key | API token | OAuth | API key | ## Detailed recommendations **Use Resend.** Resend is purpose-built for transactional emails with excellent deliverability and a clean developer API. It also works with Supabase SMTP, so you can route authentication emails (password resets, magic links) through Resend for consistent branding. **Pair with:** Supabase (auth) + Stripe (payments) ```plaintext wrap theme={null} Connect Resend and send a welcome email when a user signs up and an order confirmation after each Stripe payment. ``` **Use SendGrid.** SendGrid handles high volume reliably and includes both transactional and marketing email features. It has robust analytics for open rates, click tracking, and bounce management. ```plaintext wrap theme={null} Connect SendGrid and send order confirmation emails with tracking links after each purchase. Include open and click tracking. ``` **Use Mailchimp or MailerLite.** Both are excellent for marketing campaigns. **Mailchimp** has more advanced features (A/B testing, complex automations, audience segmentation). **MailerLite** is simpler and more affordable, with a generous free tier. * Choose **Mailchimp** if you need advanced segmentation and A/B testing. * Choose **MailerLite** if you want simplicity and a free plan for up to 500 subscribers. ```plaintext wrap theme={null} Add a newsletter signup form to the footer. When someone subscribes, add them to Mailchimp and send a welcome email sequence. ``` **Use Brevo.** Brevo (formerly Sendinblue) combines transactional email, marketing campaigns, SMS messaging, and a built-in CRM in one platform. It is the best choice if you want everything in one place without managing multiple integrations. ```plaintext wrap theme={null} Connect Brevo. Send a welcome email when a user signs up, then an SMS reminder if they have not logged in after 3 days. ``` **Use Twilio.** Twilio is the standard for SMS. Use it for verification codes, two-factor authentication, order updates, and appointment reminders. ```plaintext wrap theme={null} Add SMS verification to the signup flow using Twilio. Send a 6-digit code and verify it before creating the account. ``` ## Browse email and messaging integrations Developer-first transactional email with high deliverability. High-volume email delivery for transactional and marketing. All-in-one email, SMS, and CRM (formerly Sendinblue). Simple email marketing, newsletters, and automation. Email campaigns, audience management, and A/B testing. SMS messages for verifications, alerts, and notifications. # Forms and scheduling comparison: Typeform, Tally, Calendly Source: https://docs.rocket.new/build/connectors/forms-and-scheduling Compare Typeform, Tally, and Calendly in Rocket.new for embedding lead capture forms, customer surveys, and appointment booking into your app. Rocket supports three forms and scheduling integrations. This page helps you pick the right one. ## Quick answer * For conversational, branded forms (lead capture, quizzes, surveys), use **Typeform**. * For simple, free forms (contact forms, signups, feedback), use **Tally**. * For scheduling with minimal setup, use **Calendly**. ## Forms | Feature | Typeform | Tally | | - | - | - | | **Best for** | Branded conversational forms, quizzes, surveys | Simple forms, signups, feedback | | **Style** | One question at a time (conversational) | Traditional multi-field forms | | **Logic branching** | Yes (advanced) | Yes (basic) | | **File uploads** | Yes | Yes | | **Payment collection** | Yes (Stripe integration) | Yes (Stripe integration) | | **Free tier** | 10 responses per month | Unlimited responses | | **Branding** | Remove Typeform branding (paid) | Tally badge on free tier (remove on Pro) | | **Connection method** | OAuth | API key | **Recommendation:** * Use **Typeform** when the form experience is part of your brand and you need advanced logic, scoring, or a polished one-question-at-a-time flow. * Use **Tally** for everything else. Its free tier is extremely generous (unlimited responses, unlimited forms) and works great for contact forms, feedback, and waitlists. ## Scheduling Use **Calendly** if you want the fastest setup and your team is already using it. Minimal configuration needed, with calendar sync across Google, Outlook, and iCloud, embeddable widgets, and OAuth connection. ## Detailed recommendations ### Lead capture for a landing page **Use Typeform or Tally + Mailchimp or Brevo.** Embed a form on your page, then automatically add submissions to an email list for nurture sequences. ```plaintext wrap theme={null} Add a Typeform lead capture form to the hero section. When someone submits, add them to my Mailchimp audience and send a welcome email. ``` ### Contact form for a business website **Use Tally + Resend.** Tally's free tier covers unlimited forms and responses. Pair with Resend to send yourself a notification email for each submission. ```plaintext wrap theme={null} Add a Tally contact form with name, email, and message fields. Send me a notification email via Resend when someone submits. ``` ### Booking page for consultations or services **Use Calendly + Supabase.** Add a scheduling widget to your site and store booking history in Supabase for your dashboard. ```plaintext wrap theme={null} Add a Calendly booking widget to my services page with 30-minute and 60-minute consultation options. ``` ### Survey or quiz with scoring **Use Typeform.** Typeform's logic branching and scoring features make it the best choice for quizzes, assessments, and scored surveys. ```plaintext wrap theme={null} Embed a Typeform quiz that recommends a product based on the user's answers. Show the recommended product on a results page after they finish. ``` ## Browse forms and scheduling integrations Conversational forms for lead capture, surveys, and quizzes. Simple, free forms for signups, feedback, and contact pages. Scheduling and appointment booking with calendar sync. # Gemini Source: https://docs.rocket.new/build/connectors/gemini Connect Google Gemini to Rocket and add multimodal AI to your app: image analysis, visual search, and text generation in one integration. Connect your Gemini API key and describe the AI feature you need in chat. Rocket handles all the integration code automatically so you can focus on what your features should do. This connector is only available for **Next.js TypeScript** web build tasks. ## What you can do Let users upload images and get detailed descriptions, alt text, or extracted information using Gemini's vision capabilities. Let users send both text and images in a conversation, with Gemini responding using context from both. Generate blog posts, product descriptions, social media copy, or marketing content from simple prompts. Let users search by uploading an image and finding similar items or related information. Extract text, tables, and structured data from photos of documents, receipts, or handwritten notes. ## Before you connect **Get your Gemini API key** from Google AI Studio. Never paste your API key directly into chat. Always use the secure connector flow. If you believe your key has been exposed, rotate it immediately from [Google AI Studio](https://aistudio.google.com/app/apikey). The API key is scoped to the task you connect it in. Each task stores its own key. Connecting in one task does not affect others. ## Connect Gemini You can connect from two places. Both open the same popup. **Option 1: From chat** Type a prompt that mentions Gemini, for example `Connect Gemini and add an image upload that generates descriptions and alt text`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Gemini connection prompt in the Rocket chat panel. Gemini connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Gemini** card, then click **Connect**. Connectors panel showing the Gemini card with a Connect button. Connectors panel showing the Gemini card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key** and click **Connect**. Connect Gemini popup with an API key input field. Connect Gemini popup with an API key input field. A green dot appears next to Gemini when the connection is active. **Update or disconnect** Go to [**Connectors > Gemini**](#connect-gemini). Click **Edit** to update the key or **Disconnect** to remove the integration. Gemini card showing Edit and Disconnect buttons. Gemini card showing Edit and Disconnect buttons. Open the task in the Rocket mobile app. Tap the **More** button in the header, then tap **Connectors**. Tap the **Gemini** card and enter your API key. ## Example prompts | Use case | Prompt | | :- | :- | | Image description | `Add an image upload that uses Gemini to generate a detailed description and alt text.` | | Photo search | `Build a visual search where users upload a product photo and Gemini identifies similar items.` | | Document scanner | `Create a receipt scanner that extracts line items, totals, and dates from uploaded photos.` | | Content writer | `Build a blog post generator where users enter a topic and Gemini writes a draft with headings.` | | Image chat | `Add a chat widget where users can attach images and Gemini responds with context from both text and image.` | | Social media generator | `Generate Instagram captions and hashtags from an uploaded product photo using Gemini.` | | Diagram explainer | `Let users upload a diagram or flowchart and Gemini explains each step in plain language.` | | Product catalog | `Auto-generate product descriptions and categories from uploaded product images using Gemini.` | | Handwriting reader | `Build a tool that converts handwritten notes to typed text using Gemini vision.` | | Quiz generator | `Create a quiz from an uploaded textbook page using Gemini to extract key concepts and questions.` | ## Tips * **Best for multimodal tasks.** If your app needs to understand images, screenshots, or documents alongside text, Gemini is the strongest choice among Rocket's AI connectors. * **Image size limits apply.** Images passed inline must be under 20MB per request. For larger files, Rocket uses the Gemini Files API which supports up to 100MB. * **API billing is separate from Rocket.** Google charges based on token usage and input type. Image inputs consume more tokens than text. See [Google AI pricing](https://ai.google.dev/pricing). * **Key is scoped to this task.** Each Rocket task connects to one Gemini API key. # Code sync Source: https://docs.rocket.new/build/connectors/github/code-sync Enable two-way GitHub code sync in Rocket.new for Next.js and TypeScript projects so edits flow between your repo and the AI app builder. For Next.js TypeScript projects, Rocket supports full two-way sync with GitHub. Rocket pushes changes to a `rocket-update` branch and automatically opens a pull request to `main` for each batch of code edits. Pull changes made by teammates or in your local IDE back into Rocket at any time. Code sync requires a paid plan (Pro or above). For all other frameworks, sync is one-way (push only). You need to manually click **Push** when you want to update GitHub. No automatic PR is created. ## How it works | Direction | What happens | Supported projects | | :- | :- | :- | | **Push** (Rocket to GitHub) | Rocket pushes changes to the `rocket-update` branch and automatically opens a pull request to `main` for review. | Next.js TypeScript only | | **Push** (Rocket to GitHub) | Push your code to GitHub manually. No automatic pull request is created. | All other frameworks | | **Pull** (GitHub to Rocket) | Imports the latest state of `main` back into your Rocket project, with conflict resolution if needed. | Next.js TypeScript only | ## Push to GitHub Click the **GitHub** icon in the toolbar. Click **Push** to send your project code to GitHub. Rocket automatically creates a repository for you. For **Next.js TypeScript** projects, Rocket pushes to the `rocket-update` branch and automatically opens a pull request to `main` so your changes can be reviewed. For all other frameworks, the code is pushed but no automatic PR is created. Push again anytime to update with your latest changes. GitHub push dialog showing repository selection and Push button. GitHub push dialog showing repository selection and Push button. ## Pull from GitHub Available for Next.js TypeScript projects only. After your initial push, the GitHub button changes to **Pull from GitHub**. Click the **Pull from GitHub** button in the toolbar. GitHub pull dialog showing Pull from GitHub button. GitHub pull dialog showing Pull from GitHub button. If there are no conflicts, the pull completes immediately and you see a success message with no further steps needed. If changes in GitHub conflict with your Rocket project, Rocket surfaces them so you can choose how to resolve before the pull completes. Rocket showing conflict resolution options during a GitHub pull. Rocket showing conflict resolution options during a GitHub pull. Once the pull is complete, your preview updates automatically and you can keep iterating. For Rocket-generated apps, pulls are from the `main` branch only. For cloned repositories, Rocket pulls from the branch you selected when cloning. Changes on other branches will not be pulled into Rocket. ## When to push vs pull | Scenario | Action | | :- | :- | | You iterated in Rocket and want to back up or share | **Push** to GitHub | | A teammate committed changes in their IDE | **Pull** from GitHub into Rocket | | You edited code locally and want to continue in Rocket | **Pull** from GitHub into Rocket | | You want to trigger a CI/CD pipeline | **Push** to GitHub, then your pipeline runs | ## Disconnect GitHub is connected at the workspace level. Disconnecting removes the GitHub link for your entire Rocket account. Disconnect or switch accounts from workspace Settings. Your task files in Rocket remain intact after disconnecting. To reconnect, go through the same steps and authorize a GitHub account. ## Limitations * **Next.js TypeScript only for pull and auto PR.** Two-way sync and automatic PR creation require a Next.js project using TypeScript. JavaScript-only Next.js projects and all other frameworks support manual push only, with no automatic PR. * **Branch behavior.** For Next.js TypeScript projects, Rocket pulls from `main` and pushes to a `rocket-update` branch, opening a PR to `main` for each batch of changes. For cloned repositories, Rocket pulls from the branch selected at clone time. Other branches are not synced. * **Manual push for other frameworks.** For non-Next.js or JavaScript-only projects, you need to manually click Push when you want to update GitHub. ## One-way sync (other frameworks) For non-Next.js or JavaScript-only projects, GitHub integration is push-only and manual. Push your code to GitHub for backup and collaboration by clicking the **Push** button when you want to update. No automatic pull request is created. Changes made directly in GitHub will not sync back to Rocket. Always make changes in Rocket first, then push. See the full GitHub connector setup guide, including authorization and permissions. ## What's next? Import an existing Next.js TypeScript repo to start building in Rocket. Browse and edit your project files directly in Rocket. Deploy your app to the web after pushing to GitHub. Connect your GitHub account, manage repository settings, and push code. # Connect GitHub to push Rocket.new code to your repository Source: https://docs.rocket.new/build/connectors/github/overview Link GitHub to Rocket.new to push generated code into your repository, keep a full commit history, and collaborate with developers on branches. Connect GitHub and push your task code to a repository with one click. Rocket handles the Git setup automatically, no terminal needed. For **Next.js TypeScript** tasks, Rocket supports full two-way sync: push automatically creates a `rocket-update` branch and opens a pull request to `main`, and pull brings changes from `main` back into your task. For all other frameworks, GitHub integration is one-way and manual. Click **Push** when you want to update GitHub. No automatic pull request is created. ## What you can do Push your Rocket project to GitHub whenever you want a snapshot of your work. Click the GitHub icon in the toolbar and push. Share your codebase with teammates by pushing to a shared GitHub repo. They can review, fork, or clone your code from there. Once your code is on GitHub, connect it to services like GitHub Actions, Vercel, or Netlify for automated builds and deployments. Publish your Rocket projects as public repositories to build a developer portfolio or contribute to open source. ## Connect GitHub GitHub connects via OAuth, so no API key is needed. It is a **workspace-level** connector, so connect it once and it is available across all tasks. You can connect from four places. All do the same thing. **Option 1: When creating a task (Clone from GitHub)** Click the **+** button at the lower left of the input box on the home screen and select **Clone from GitHub**. If you have not connected GitHub yet, Rocket prompts you to authorize at this point. Clone a Next.js TypeScript repo and continue building with AI. **Option 2: From the GitHub button in the toolbar** Click the **GitHub** icon in the top-right of the code view toolbar. A popup opens with a **Connect** button. GitHub connect popup showing a Connect button. GitHub connect popup showing a Connect button. **Option 3: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **GitHub** card, then click **Connect**. Connectors panel showing the GitHub card with a Connect button. Connectors panel showing the GitHub card with a Connect button. **Option 4: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** You are redirected to GitHub's authorization page. Sign in if prompted, review the permissions, and click **Authorize DhiWisePvtLtd**. GitHub OAuth authorization page for rocket.new. GitHub OAuth authorization page for rocket.new. After authorization you are redirected back to Rocket with GitHub connected. Permissions Rocket requests from GitHub: create new repositories on your behalf, read public and private repo names and metadata, and access your GitHub username and email address. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From the GitHub button in the toolbar** Tap the **GitHub** icon in the toolbar. In the popup, tap **Connect** to begin authorization. **Option 2: From the Connectors tab** Tap the **More** button in the header. Tap **Integrations**. Tap the **GitHub** card, then tap **Connect**. **After tapping Connect** Sign in to GitHub if prompted, review the permissions, and tap **Authorize DhiWisePvtLtd**. You are redirected back to Rocket with GitHub connected. Permissions Rocket requests from GitHub: create new repositories on your behalf, read public and private repo names and metadata, and access your GitHub username and email address. ## Push to GitHub Click the **GitHub** icon in the toolbar. Click **Push** to send your task code to GitHub. Rocket automatically creates a repository for you. GitHub push dialog showing repository selection and Push button. GitHub push dialog showing repository selection and Push button. Push again anytime to update the repository with your latest changes. For **Next.js TypeScript** tasks, Rocket pushes to the `rocket-update` branch and automatically opens a pull request to `main` each time. After the initial push, the button changes to **Pull from GitHub** so you can bring in the latest state of `main` from your local IDE or from teammates. For all other frameworks, clicking Push sends your code to GitHub but no automatic pull request is created. Push manually whenever you want to update. ## Tips * **Two-way sync for Next.js TypeScript.** After pushing, Rocket auto-creates a PR to `main` and the button switches to Pull from GitHub so you can import changes back into Rocket. * **One-way sync for other frameworks.** Non-Next.js tasks support manual push only. No automatic PR is created. Always make changes in Rocket first, then click Push when ready. * **Branch behavior.** For Next.js TypeScript, Rocket pushes to `rocket-update` and opens a PR to `main`. Pull always reads from `main`. * **Repository naming.** Rocket automatically creates a repository for your task. Use a clear task name so repos are easy to find. * **Public vs. private.** Public repos are great for portfolios. Private repos are better for client work or proprietary tasks. * **Permissions are scoped.** Rocket only requests access to create repos and read metadata. It does not delete repos or modify existing code on GitHub. ## What's next? Two-way sync for Next.js TypeScript projects. Push changes out and pull external edits back in. Deploy your Rocket app to the web. Works great after pushing code to GitHub. Learn more about browsing and managing your project's source code in Rocket. # Google Workspace Source: https://docs.rocket.new/build/connectors/google Connect Google Workspace to Rocket.new to read Docs, Sheets, and Calendar data as app inputs and write generated results back into your files. Connect Google Workspace via OAuth and describe what you want to build in chat. Rocket reads your Docs, Sheets, and Calendar as source material and can write generated outputs back into your Google tools. ## What you can do Your team writes PRDs in Google Docs. Let Rocket read the spec directly and build what it describes, including data models, user stories, and UI layout notes. Point Rocket at the Google Doc with your hero headline, feature descriptions, and pricing copy. Rocket reads it and replaces every placeholder with your real brand messaging. Rocket reads columns, rows, and data types from your spreadsheets, then generates a working app. Works for product catalogs, pricing matrices, campaign trackers, and team directories. Build booking systems and event pages that pull directly from Google Calendar. No fake data or hardcoded times. Send generated marketing copy to a Google Doc where your team can comment, edit, and approve before anything goes live. Export the full content structure (page name, section, headline, body, CTA) to a spreadsheet. Clients review and leave comments in the tool they already use. ## Before you connect Google Workspace uses OAuth, so no API key is required. It is a **workspace-level** connector, so connect it once and it is available across all tasks. ## Connect Google Workspace You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that references a Google Doc or Sheet, for example `Read my brand messaging doc at [DOCS_URL] and replace all placeholder text`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the authorization flow. Rocket chat panel showing a Connect prompt for Google Workspace. Rocket chat panel showing a Connect prompt for Google Workspace. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Google Workspace** card, then click **Connect**. Connectors panel showing the Google Workspace card with a Connect button. Connectors panel showing the Google Workspace card with a Connect button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** Google's authorization screen opens. Select your account, review the permissions, and click **Allow**. Google OAuth authorization screen asking to allow Rocket access to your Google Workspace. A green dot appears next to Google Workspace when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that references a Google Doc or Sheet. Rocket shows a **Connect** button inline. Tap it to open the authorization flow. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Google Workspace** card, then tap **Connect**. **After tapping Connect** Google's authorization screen opens. Select your account, review the permissions, and tap **Allow**. A green dot appears next to Google Workspace when the connection is active. ## Supported services | Service | Read | Write | Common use cases | | - | - | - | - | | **Google Docs** | Full document text, headings, tables, embedded content | New pages, reports, structured summaries | Build from specs, replace placeholder copy, generate documentation | | **Google Sheets** | Column headers, row data, data types, formulas | Append rows, update cells, create new sheets | Data-driven apps, SEO exports, content structure exports | | **Google Calendar** | Events, availability, time zones, recurring events | Create and update events | Booking systems, scheduling pages, event listings | ## Example prompts Replace `[DOCS_URL]` and `[SHEETS_URL]` with your actual links. ### Read from Google | Use case | Prompt | | :- | :- | | Update hero from brand guidelines | `Update the hero section using my brand guidelines at [DOCS_URL]. Rewrite the headline, subtext, and CTA.` | | Replace all placeholder copy | `Read my brand messaging doc at [DOCS_URL] and replace every placeholder on this site with real copy. Match tone, voice, and terminology from the doc.` | | Update features from product spec | `Update the features section using my product spec at [SHEETS_URL]. Rewrite every feature card and reorganize categories to match the doc.` | | Build feature comparison table | `Read the competitor analysis at [SHEETS_URL] and build a feature comparison table with check marks and descriptions.` | | Update pricing from spreadsheet | `Update the entire pricing section using my pricing matrix at [SHEETS_URL]. Replace all placeholder tiers, prices, and limits and add a billing toggle.` | | Update team section | `Update the team section using roster data from [SHEETS_URL]. Replace placeholder team members with real names, roles, and bios.` | ### Write back to Google | Use case | Prompt | | :- | :- | | Save copy for team review | `Save all copy from this landing page to Google Docs for the marketing team to review and approve.` | | Export SEO metadata | `Extract SEO metadata from this website and save page titles, meta descriptions, and keywords to a Google Sheet.` | | Save content for client | `Export the content structure to Google Sheets with each row showing page, section, headline, body, and CTA for client review.` | | Generate A/B test variants | `Generate headline and CTA variants for A/B testing and save them to a Google Sheet.` | | Create ad copy | `Create short-form ad copy for Google Ads, Meta Ads, and LinkedIn Ads from this landing page and save to Google Docs.` | ## Tips * **Sheets work best with clean data.** Use clear column headers, consistent data types, and avoid merged cells. The cleaner the spreadsheet, the better Rocket maps it. * **Calendar time zones.** Rocket respects your calendar's time zone settings. Double-check these before building scheduling features. * **Write-back is additive.** Rocket creates new documents or appends content. It will not overwrite existing files unless you explicitly ask. * **Large files.** For very large Docs or Sheets, reference specific sections or cell ranges to keep context focused. * **Link directly.** Sharing a direct URL gives Rocket the fastest path to your content. Descriptions like "my pricing spreadsheet" work too, but links are more reliable. ## What's next? Connect your documentation and wikis for knowledge-driven development. Connect issue tracking and project management to your Rocket workflow. Add a database backend with authentication and storage to your app. Browse every available integration. # Google Analytics Source: https://docs.rocket.new/build/connectors/google-analytics Add Google Analytics 4 to your Rocket.new app to track page views, conversion events, traffic sources, and campaign attribution from chat. Describe what you want to measure in chat and Rocket wires up the tracking tags, custom events, and e-commerce data layer automatically. ## What you can do See which pages users visit most, where they come from, and how long they stay. Track key actions like signups, form submissions, and purchases as GA4 conversion events. Send product views, add-to-cart actions, and purchase events to GA4 for revenue reporting. Understand your user demographics, devices, and geographic distribution. Track any interaction as a custom GA4 event with parameters you define. ## Before you connect You need your **Measurement ID** from Google Analytics. It starts with `G-`, for example `G-XXXXXXXXXX`. **Find your Measurement ID** from the Google Analytics help center. Go to **Admin > Data Streams**, click your stream, and copy the **Measurement ID**. Google Analytics is a **task-level** connector. Each Rocket task connects to its own Measurement ID independently. ## Connect Google Analytics You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Google Analytics, for example `Connect Google Analytics and track page views on every route`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup. Rocket chat panel showing a Connect prompt for Google Analytics. Rocket chat panel showing a Connect prompt for Google Analytics. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Google Analytics** card, then click **Connect**. Connectors panel showing the Google Analytics card with a Connect button. Connectors panel showing the Google Analytics card with a Connect button. **After clicking Connect** A popup opens. Enter your **Measurement ID**, then click **Connect**. Connect Google Analytics popup with Measurement ID field. Connect Google Analytics popup with Measurement ID field. A green dot appears next to Google Analytics when the connection is active. **Update or disconnect** Open [**Connectors > Google Analytics**](#connect-google-analytics) and click the card. Click **Edit** to update your Measurement ID or **Disconnect** to remove the integration from this task. Google Analytics card showing Edit and Disconnect buttons. Google Analytics card showing Edit and Disconnect buttons. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Google Analytics. Rocket detects the intent and shows a **Connect** button inline. Tap it to open the credentials screen. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Google Analytics** card, then tap **Connect**. **After tapping Connect** A popup opens. Enter your **Measurement ID**, then tap **Done**. A green dot appears next to Google Analytics when the connection is active. **Update or disconnect** Go back to the **Google Analytics** card in Integrations. Tap **Edit** to update your Measurement ID or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Page views | `Track page views on every route and send them to Google Analytics automatically.` | | Button clicks | `Track clicks on the Sign Up and Contact Sales buttons as GA4 custom events.` | | Form submissions | `Send a conversion event to GA4 when users submit the contact form.` | | E-commerce purchase | `Track completed purchases with order total, product names, and quantities in GA4.` | | Scroll depth | `Track when users scroll past 25%, 50%, 75%, and 100% of the page.` | | Outbound links | `Track clicks on external links as GA4 events with the destination URL.` | | Search tracking | `Send a search event to GA4 when users use the site search bar, including the query.` | | Video engagement | `Track play, pause, and completion events for embedded videos in GA4.` | | UTM attribution | `Parse UTM parameters from the URL and forward them to GA4 as campaign data.` | | User properties | `Set GA4 user properties for plan type and signup date when users log in.` | ## Tips * **Tracking only works on deployed tasks.** Google Analytics does not fire events in the Rocket preview. Deploy your task and test on the live URL. * **GA4 data has a processing delay.** Real-time reports update within seconds, but standard reports may take 24 to 48 hours to fully populate. * **Only GA4 Measurement IDs are supported.** IDs start with `G-`. Universal Analytics (`UA-`) was sunset in 2024 and no longer processes data. * **Ad blockers may prevent tracking.** Some users run browser extensions that block Google Analytics scripts. Keep this in mind when evaluating traffic numbers. * **One Measurement ID per task.** Each Rocket task connects to one Google Analytics property. Use different tasks for different properties. ## What's next? Need deeper event-level analytics? Add Mixpanel for funnel analysis and user segmentation. Track checkout conversion rates and revenue attribution with Stripe and GA4 together. Monetize your traffic with Google AdSense display ads. Deploy your task so Google Analytics can start collecting real data. # HubSpot Source: https://docs.rocket.new/build/connectors/hubspot Connect HubSpot to your Rocket.new app and sync contacts, manage deals, track leads, and automate CRM workflows with a single prompt. Connect HubSpot and describe the CRM flow you want in chat. Rocket generates the complete integration: contact creation, deal pipeline management, email event tracking, and marketing automation triggers, all grounded in your actual HubSpot configuration. ## What you can do Create, read, update, and delete contacts from your app. Sync lead forms directly into your HubSpot CRM. Build pipeline views, move deals between stages, and manage your sales funnel from within your app. Track email opens, clicks, and bounces from your app and surface that data in dashboards or contact timelines. Trigger HubSpot workflows and sequences from user actions in your app, such as form submissions or sign-ups. ## Before you connect You need a **Private App access token** from HubSpot. Private App tokens are scoped to the specific permissions you grant and do not expire unless rotated or revoked. **Create or manage Private Apps in your HubSpot account** **How to create a Private App token:** In HubSpot, go to **Settings → Integrations → Private Apps**. Click **Create a private app**. Give it a name (e.g., "Rocket Integration"). Under **Scopes**, grant the permissions your app needs. Common scopes: | Scope | Purpose | | :- | :- | | `crm.objects.contacts.read` | Read contacts | | `crm.objects.contacts.write` | Create and update contacts | | `crm.objects.deals.read` | Read deals | | `crm.objects.deals.write` | Create and update deals | | `crm.objects.companies.read` | Read companies | Click **Create app** and copy the generated token. Tokens start with `pat-`. Never paste your HubSpot token directly into chat. Always use the secure connection popup. If your token has been exposed, rotate it immediately from **Settings → Private Apps**. ## Connect HubSpot You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions HubSpot - for example, `Connect HubSpot and add a contact form that syncs leads`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. HubSpot connection prompt in the Rocket chat panel. HubSpot connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **HubSpot** card, then click **Connect**. Connectors tab showing the HubSpot card with a Connect button. Connectors tab showing the HubSpot card with a Connect button. **After clicking Connect** A popup opens. Paste your **Private App access token** (starts with `pat-`), then click **Save**. A green dot appears next to HubSpot when the connection is active. HubSpot access token input popup. HubSpot access token input popup. **Update or disconnect** Go to [**Connectors > HubSpot**](#connect-hubspot). Update your token or click **Disconnect** to remove the integration. HubSpot integration showing connected state with a Disconnect button. HubSpot integration showing connected state with a Disconnect button. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions HubSpot. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** Tap the **More** button in the header. Tap **Integrations**. Tap the **HubSpot** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **Private App access token**, then tap **Done**. A green dot appears next to HubSpot when the connection is active. **Update or disconnect** Go to **Integrations > HubSpot**. Update your token or tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Lead capture form | `Add a contact form that creates a new HubSpot contact on submission with name, email, and company fields.` | | Deal pipeline view | `Build a Kanban board showing my HubSpot deals grouped by pipeline stage with drag-to-move functionality.` | | Contact list | `Add a Contacts page that lists all HubSpot contacts with search, filter by lifecycle stage, and a detail view.` | | CRM dashboard | `Create a CRM dashboard showing total contacts, open deals, deals by stage, and recent activity from HubSpot.` | | Signup → CRM sync | `When a user signs up, automatically create a HubSpot contact and set their lifecycle stage to Lead.` | | Deal creation | `Add a Create Deal form that pushes a new deal to HubSpot with name, amount, stage, and associated contact.` | ## Tips * **Grant only the scopes you need.** Overly broad HubSpot Private App tokens are a security risk. Scope tokens to the specific objects your app reads and writes. * **Tokens do not expire automatically.** Rotate your token periodically from **Settings → Private Apps** as a security best practice. * **HubSpot tools are powered by Composio MCP.** Rocket uses Composio under the hood to execute HubSpot API calls. You do not need to configure Composio separately. * **Test with a sandbox.** Use a HubSpot sandbox or developer account during development to avoid polluting production CRM data. * **One token per task.** Each Rocket task connects to a single HubSpot Private App token. Use the same token across tasks if they target the same HubSpot account. ## What's next? Store user sessions and app data alongside your HubSpot CRM data. Send transactional emails to contacts after CRM events like deal closes or form submissions. Capture leads with Typeform and sync them directly to HubSpot contacts. Track funnel conversion alongside CRM data for full-funnel attribution. # Instagram Source: https://docs.rocket.new/build/connectors/instagram Pull Instagram content into your Rocket.new app to display live social feeds, curated media grids, and social proof sections on landing pages. Connect Instagram to Rocket and describe the social feed layout you want in chat. Rocket generates the media grid, profile sections, and auto-refreshing content automatically - no manual API integration needed. Instagram connects via OAuth. You authorize Rocket through Instagram's login flow - no API key needed. Instagram pairs well with Google Analytics (for tracking engagement), Supabase (for caching media data), and Netlify (for fast CDN delivery). ## What you can use it for Show your latest Instagram posts on any page to build trust and credibility with visitors. Display your latest posts in a visual grid with lightbox viewing, captions, and engagement data. Showcase customer photos and community posts by pulling in tagged or hashtagged content. Display curated Instagram content for events, campaigns, or brand partnerships on a full-screen dynamic media wall. ## Quick start Log in to [Instagram](https://instagram.com) with the account you want to connect. A Business or Creator account is recommended for full feature access. Open any Rocket project and type: ```plaintext wrap theme={null} Add an Instagram feed section to my landing page that displays my latest 6 posts in a 3-column grid with captions and like counts. ``` Rocket prompts you to authorize Instagram, then generates the component automatically. ## Detailed setup ### Connect Instagram to Rocket There are two ways to connect Instagram: **Method 1: Use Rocket chat (fastest)** In any project, open the chat panel and describe the social feed you want: * `Display my latest 6 Instagram posts in a 3-column grid on the homepage.` * `Add an Instagram profile card in the sidebar with my bio and follower count.` Rocket prompts you to authorize and then builds the component. **Method 2: From Connectors** In the preview toolbar, click the **`...`** button and select **Connectors**. Click the **Instagram** card. When you connect Instagram from Connectors, Rocket does not automatically add a feed. After authorizing, describe the feed layout you want in chat. Click **Connect**, log in to your Instagram account if prompted, then click **Allow**. A green dot appears next to Instagram when the connection is active. **Disconnect** Click the **Instagram** integration again and click **Disconnect** to remove the connection. There are two ways to connect Instagram: **Method 1: Use Rocket chat (fastest)** In any project, open the chat panel and describe the social feed you want: * `Display my latest 6 Instagram posts in a 3-column grid on the homepage.` * `Add an Instagram profile card in the sidebar with my bio and follower count.` Rocket prompts you to authorize and then builds the component. **Method 2: From project settings** Tap the **More** button in the header, then tap **Integrations**. Tap the **Instagram** card. When you connect Instagram from project settings, Rocket does not automatically add a feed. After authorizing, describe the feed layout you want in chat. Tap **Connect**, log in to Instagram if prompted, then tap **Allow**. A green dot appears next to Instagram when the connection is active. **Disconnect** Go back to the Instagram section in your project settings. Tap **Disconnect** to remove the connection. ## Prompt cookbook | Use case | Prompt | | - | - | | Homepage feed | `Display my latest 6 Instagram posts in a 3-column grid on the homepage.` | | Masonry feed grid | `Display my Instagram posts in a masonry grid layout with lightbox viewing.` | | Social proof section | `Add an Instagram feed section below testimonials on my landing page.` | | Media carousel | `Create a horizontal scrolling carousel of my latest 10 Instagram posts.` | | Profile card | `Add an Instagram profile card in the sidebar showing my avatar, bio, and follower count.` | | Story highlights | `Display my Instagram story highlights as circular thumbnails at the top of my /about page.` | | Media wall | `Build a full-screen auto-scrolling media wall with my latest 20 Instagram posts.` | | Footer widget | `Add a compact Instagram feed widget (4 posts, 2x2 grid) in the site footer.` | | Campaign gallery | `Create a gallery page that shows Instagram posts with the hashtag #MyLaunch.` | | Link in bio page | `Build a link-in-bio page that displays my Instagram avatar, bio, and a list of links.` | ## Tips and limitations * **Business or Creator account recommended.** Some features like hashtag search and insights require a Business or Creator Instagram account connected to a Facebook Page. * **Media types supported.** Rocket can display photos, videos, carousels, and reels from your Instagram feed. * **Rate limits apply.** Instagram's API has rate limits. For high-traffic sites, consider caching media data in Supabase to avoid hitting limits. * **Content refreshes periodically.** Instagram feeds refresh automatically, but there may be a short delay between posting and content appearing in your app. ## What's next? Track how visitors interact with your Instagram feed sections. Cache Instagram media data for faster loading and offline access. Deploy your social-powered pages with fast CDN delivery. Collect leads from visitors who engage with your Instagram content. # Jira Source: https://docs.rocket.new/build/connectors/jira Connect Jira to Rocket and build from your tickets. Rocket reads descriptions, acceptance criteria, sprint data, and epics to generate aligned code. Connect Jira and your tickets become build context. Rocket reads issue descriptions, acceptance criteria, epics, and sprint data directly from your board, then generates code that reflects your actual project requirements. ## What you can do Paste a Jira issue URL into chat. Rocket reads the summary, description, and acceptance criteria, then generates the implementation. Paste a Jira epic URL. Rocket reads all child stories and the epic description, then builds the full scope. Reference your current sprint. Rocket reads active stories and priorities to understand what you are building right now. Paste a bug ticket URL. Rocket reads the steps to reproduce, expected vs actual behavior, and generates a targeted fix. Use feature descriptions, value propositions, and requirements text from tickets directly in your app's UI. Rocket understands Jira workflow states. It generates code that maps to your ticket statuses and transitions. ## Connect Jira Jira uses OAuth 2.0 via Atlassian, so no API key is needed. It is a **workspace-level** connector. Connect it once and it is available across all tasks. The connection flow has two steps: Authorize access to your Atlassian account. Select a **Jira App** (cloud instance) and a **Project** within that app. You can connect from three places. All do the same thing. **Option 1: From chat** Paste a Jira ticket URL or ask Rocket to pull tickets. Rocket detects the intent and shows a **Connect** button inline. Click it to start the authorization flow. Rocket chat panel showing a Connect prompt for Jira. Rocket chat panel showing a Connect prompt for Jira. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Jira** card, then click **Connect**. Connectors panel showing the Jira card with a Connect button. Connectors panel showing the Jira card with a Connect button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** An Atlassian authorization screen opens. Select your Jira cloud instance (App) from the **Use app on** dropdown, review the permissions, and click **Accept**. Atlassian OAuth screen showing Rocket requesting access to your Jira account. After authorizing, select the **Project** you want Rocket to read from. A green dot appears next to Jira when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Paste a Jira ticket URL or ask Rocket to pull issues. Rocket shows a **Connect** button inline. Tap it to start the authorization flow. **Option 2: From the Connectors tab** Tap the **More** button in the header. Tap **Integrations**. Tap the **Jira** card, then tap **Connect**. **After tapping Connect** An Atlassian authorization screen opens. Review the permissions and tap **Accept**. **Select your App and Project** After authorizing, select your Jira cloud instance (App) and the Project you want Rocket to read from. A green dot appears next to Jira when the connection is active. ## Example prompts Replace `[JIRA_URL]` with your actual issue, epic, or board URL. ### Reading from Jira | What you want | Prompt to use | | :- | :- | | Build a feature from a ticket | `Build the feature described in [JIRA_URL]. Read the full requirements, acceptance criteria, and subtasks before generating.` | | Build from an epic | `Read the Jira epic at [JIRA_URL] and build all the screens and features described in its child stories.` | | Fix a bug from a report | `Fix the bug described in [JIRA_URL]. Read the steps to reproduce, expected behavior, and actual behavior and generate a targeted fix.` | | Pull sprint context | `Read my current sprint tickets and build the highest-priority story first.` | | Apply requirement changes | `The requirements changed in [JIRA_URL]. Read the updated description and modify the relevant parts of the app.` | | Display a project board | `Pull my Jira tickets into a dashboard that shows the current sprint board with status columns.` | ## Tips * **Be specific in your tickets.** Rocket builds from what is written. Tickets with detailed descriptions, clear acceptance criteria, and story points produce better output than vague ones. * **Use issue URLs, not ticket keys alone.** Pasting a direct URL gives Rocket unambiguous context. Referring to a ticket by key alone can be ambiguous across projects. * **Scope to a single project.** During connection you select one project. If you need to reference a different project, reconnect from workspace Settings. * **Permissions apply.** Rocket respects Jira's access controls. It can only read issues and data that the connected Atlassian account has permission to access. * **Works with Jira Cloud only.** This connector uses Atlassian's cloud OAuth. Self-hosted Jira Server and Data Center instances are not supported. ## What's next? Already using Linear? Connect it for bi-directional ticket integration. Connect Confluence to pull product specs and documentation as build context. Push your code to a repository and keep version history. Browse every available integration. # Linear Source: https://docs.rocket.new/build/connectors/linear Connect Linear to Rocket and build from your tickets. Rocket reads descriptions, acceptance criteria, and briefs, then writes follow-up tickets back. Point Rocket at a Linear ticket and it builds the feature. No copy-pasting requirements, no manually updating your board. Rocket reads your issue descriptions, acceptance criteria, and project briefs directly from Linear. When the build is done, it writes follow-up tickets and status updates back. ## What you can do Paste a Linear issue URL into chat. Rocket reads the title, description, and acceptance criteria, then generates the implementation. Paste a Linear project URL. Rocket reads all child issues and the project brief, then builds the full scope. Paste a bug ticket URL. Rocket reads the screen name, expected vs actual behavior, and generates a targeted fix. Pull feature descriptions and value propositions from a ticket directly into your app's UI copy. After building, ask Rocket to create QA tickets, edge case tickets, and testing tasks back in Linear. Ask Rocket to move the original ticket to Done and leave an implementation comment when the build finishes. ## Connect Linear Linear uses OAuth, so no API key is needed. It is a **workspace-level** connector, so connect it once and it is available across all tasks. You can connect from three places. All do the same thing. **Option 1: From chat** Paste a ticket URL or ask Rocket to create issues. Rocket detects the intent and shows a **Connect** button inline. Click it to open the authorization flow. Rocket chat panel showing a Connect prompt for Linear. Rocket chat panel showing a Connect prompt for Linear. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Linear** card, then click **Connect**. Connectors panel showing the Linear card with a Connect button. Connectors panel showing the Linear card with a Connect button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** A Linear authorization screen opens. Review the permissions and click **Authorize**. Linear OAuth screen showing Rocket requesting read and write access to your workspace. Linear OAuth screen showing Rocket requesting read and write access to your workspace. A green dot appears next to Linear when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Paste a ticket URL or ask Rocket to create Linear issues. Rocket shows a **Connect** button inline. Tap it to open the authorization flow. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Linear** card, then tap **Connect**. **After tapping Connect** A Linear authorization screen opens. Review the permissions and tap **Authorize**. A green dot appears next to Linear when the connection is active. ## Example prompts Replace `[LINEAR_URL]` with your actual issue or project URL. ### Reading from Linear | What you want | Prompt to use | | :- | :- | | Build a feature from a ticket | `Build the feature described in [LINEAR_URL]. Read the full requirements, edge cases, and acceptance criteria before generating.` | | Build from a full project | `Read the Linear project at [LINEAR_URL] and build the described UI including all screens referenced in the project brief.` | | Fix a bug from a report | `Fix the bug described in [LINEAR_URL]. Read the screen name, expected behavior, and actual behavior and generate a targeted fix.` | | Apply a requirement change | `The requirements changed in [LINEAR_URL]. Read the updated ticket and modify the relevant parts of the app.` | ### Writing back to Linear | What you want | Prompt to use | | :- | :- | | Create QA tickets | `Create a Linear project with QA tickets for the checkout flow I just built. Include test cases based on the implementation.` | | Log client change requests | `Create a Linear project with tickets for each client-requested change, organized by page and priority.` | | Document what was built | `Create a Linear document describing what was built and link it to the original ticket at [LINEAR_URL].` | | Create follow-up tasks | `Create Linear tickets for all the follow-up work from this build: enhancements, edge cases, and testing tasks.` | ## Tips * **Be specific in your tickets.** Rocket builds from what is written. Tickets with detailed descriptions, clear acceptance criteria, and labels produce better output than vague ones. * **Use issue URLs, not project names.** Pasting a direct URL gives Rocket unambiguous context. Referring to a project by name can match the wrong one. * **For large workspaces, scope it down.** Reference a specific project or issue instead of asking Rocket to read the full workspace backlog. * **Write-back creates real tickets.** When Rocket creates or updates Linear issues, they appear in your board immediately. Review them before sharing with your team. * **Permissions apply.** Rocket respects Linear's access controls. It can only read and write what the connected account has permission to access. ## What's next? Connect your docs and wikis so Rocket builds with full product context. Read from Docs, Sheets, and Calendar to build context-rich apps. Push your code to a repository and keep version history. Browse every available integration. # Mailchimp Source: https://docs.rocket.new/build/connectors/mailchimp Connect Mailchimp to Rocket.new to run email marketing campaigns, manage subscriber audiences, and trigger automations from user events in-app. Connect Mailchimp and describe the email flow you want in chat. Rocket generates the complete logic: audience management, campaign creation, automation triggers, and subscriber forms. Mailchimp connects via OAuth - no API keys to manage. You authorize access through Mailchimp's own login flow. Pair with [Supabase](/build/connectors/supabase/overview) for user data and [Stripe](/build/connectors/stripe) for purchase-triggered campaigns. ## What you can do One-time or recurring campaigns to your entire audience or targeted segments. Organize contacts by behavior, tags, or custom fields and send targeted emails. Test different subject lines, content, or send times to optimize email performance. Multi-step email sequences triggered by subscriber actions or time delays. Embedded signup forms that automatically grow your Mailchimp audience. ## Before you connect Make sure you have a [Mailchimp account](https://mailchimp.com) with at least one audience created. Mailchimp connects via OAuth, so no API key is needed. ## Connect Mailchimp You can connect from three places - all redirect to the same Mailchimp authorization page. **Option 1: From chat** Type a prompt that mentions Mailchimp - for example, `Connect Mailchimp and add an email signup form to my landing page`. Rocket detects the intent and shows a **Connect** button inline. Click it to start the authorization flow. Mailchimp connection prompt in the Rocket chat panel. Mailchimp connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Mailchimp** card, then click **Connect**. Connectors panel showing the Mailchimp card with a Connect button. Connectors panel showing the Mailchimp card with a Connect button. **Option 3: From workspace Settings** Connect once at the workspace level and it is available to all your projects. **After clicking Connect** You are redirected to Mailchimp's authorization page. Log in if prompted, review the permissions, and click **Allow** to grant Rocket access to your audiences, campaigns, and templates. Mailchimp OAuth authorization page asking to allow Rocket access. A green dot appears next to Mailchimp when the connection is active. **Disconnect** Mailchimp is connected at the workspace level - disconnecting removes access for all projects. Go to **Settings > Connectors** to disconnect Mailchimp. Tap the **More** button in the header, then tap **Integrations**. Tap the **Mailchimp** card, then tap **Connect**. You are redirected to Mailchimp's authorization page. Log in if prompted, review the permissions, and tap **Allow** to grant Rocket access. A green dot appears next to Mailchimp when the connection is active. **Disconnect** Mailchimp is connected at the workspace level - disconnecting removes access for all projects. Go to **Settings > Connectors** to disconnect Mailchimp. ## Example prompts | Use case | Prompt | | - | - | | Signup form | `Add an email signup form to my footer that adds subscribers to my Mailchimp audience.` | | Welcome campaign | `Send a welcome email through Mailchimp when a new subscriber joins my audience.` | | Drip sequence | `Start a 5-email onboarding drip through Mailchimp when a user signs up, one email every 2 days.` | | Product announcement | `Send a product launch announcement to my entire Mailchimp audience with a CTA button.` | | A/B test | `Create an A/B test in Mailchimp with two subject lines. Send the winner to the full audience.` | | Segment by tag | `Tag Mailchimp subscribers as "premium" when they upgrade, and send premium-only content.` | | Birthday email | `Send a birthday discount email through Mailchimp using the subscriber's birthday field.` | | Win-back campaign | `Send a win-back email to Mailchimp subscribers who have not opened any email in 90 days.` | | Event invite | `Send an event invitation through Mailchimp with RSVP links that update a Supabase table.` | | Subscriber dashboard | `Build an admin dashboard showing total subscribers, open rates, and recent campaign stats from Mailchimp.` | ## Tips * **Mailchimp uses OAuth, not API keys.** You authorize Rocket through Mailchimp's login flow. No keys to copy or rotate. * **Free tier includes 500 contacts and 1,000 sends per month.** Automation and scheduling are not available on the free plan. Upgrade for larger audiences and features like A/B testing. * **Campaign design happens in Mailchimp.** Rocket can trigger sends and manage subscribers, but visual email template editing is best done in Mailchimp's built-in designer. * **Manage audiences in Mailchimp.** You can add subscribers through Rocket, but removing contacts, managing compliance, and editing audience settings must be done in the Mailchimp dashboard. * **One Mailchimp account per project.** Each Rocket project connects to one Mailchimp account. ## What's next? Store user data and sync subscriber information with your database. Trigger email campaigns when users make purchases or subscribe to plans. Add transactional email for password resets and receipts alongside Mailchimp. Track campaign-driven traffic and conversions in your analytics dashboard. # MailerLite Source: https://docs.rocket.new/build/connectors/mailerlite Wire MailerLite into Rocket.new to publish newsletters, add subscriber signup forms, and set up drip email automation for creator audiences. Connect MailerLite and describe the email flow you want in chat. Rocket generates the complete logic: signup forms, subscriber list management, automation triggers, and email sending. MailerLite is ideal for clean, straightforward email marketing without the complexity of enterprise platforms. Pair with [Supabase](/build/connectors/supabase/overview) for user data and [Stripe](/build/connectors/stripe) for payment-triggered emails. ## What you can do Collect subscriber emails through forms and deliver regular newsletters with rich content. Embedded forms, popups, and scroll-triggered captures that grow your email list. Waitlists and early access campaigns with subscriber tagging. Drip campaigns and automation workflows triggered by subscriber actions. Organize subscribers into groups and send targeted emails based on interests or behavior. ## Before you connect You need your **API token** from the MailerLite dashboard. **Create or copy your MailerLite API token** Never paste your MailerLite API token directly into chat. Always use the secure connection popup. If your token has been exposed, revoke it from MailerLite and generate a new one. ## Connect MailerLite You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions MailerLite - for example, `Connect MailerLite and add a newsletter signup form to my landing page`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. MailerLite connection prompt in the Rocket chat panel. MailerLite connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **MailerLite** card, then click **Connect**. Connectors panel showing the MailerLite card with a Connect button. Connectors panel showing the MailerLite card with a Connect button. **After clicking Connect** A popup opens. Paste your **API token**, then click **Save**. A green dot appears next to MailerLite when the connection is active. MailerLite API token input popup. MailerLite API token input popup. **Update or disconnect** Go to [**Connectors > MailerLite**](#connect-mailerlite). Update your token or click **Disconnect** to remove the integration. MailerLite integration showing connected state with a Disconnect button. MailerLite integration showing connected state with a Disconnect button. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions MailerLite. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **MailerLite** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API token**, then tap **Done**. A green dot appears next to MailerLite when the connection is active. **Update or disconnect** Go to **Integrations > MailerLite**. Update your token or tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Newsletter signup | `Add a newsletter signup form to my landing page that stores subscribers in MailerLite.` | | Welcome sequence | `When a new subscriber joins, start a 5-email welcome sequence through MailerLite over 5 days.` | | Blog digest | `Send a weekly email digest through MailerLite with the latest blog posts every Monday morning.` | | Popup form | `Show a signup popup after 30 seconds on the page. Add the email to MailerLite on submit.` | | Waitlist signup | `Add a MailerLite signup form for my product waitlist. Tag subscribers as "waitlist" and show a confirmation.` | | Segmented send | `Let users pick topics during signup and add them to matching MailerLite groups for targeted emails.` | | Re-engagement | `Send a re-engagement email through MailerLite to subscribers who have not opened an email in 90 days.` | | Subscriber count | `Show a live subscriber count on my homepage by pulling the total from MailerLite's API.` | | Unsubscribe page | `Build a custom unsubscribe page that removes the user from the MailerLite list and shows a confirmation.` | | A/B subject line | `Send two versions of the newsletter with different subject lines to a small group, then send the winner to everyone.` | ## Tips * **MailerLite is built for email marketing.** It excels at newsletters, subscriber management, and automation. For transactional emails like password resets, pair it with [Resend](/build/connectors/resend) or [SendGrid](/build/connectors/sendgrid). * **Free tier includes 500 subscribers and 12,000 emails per month.** A solid starting point. Upgrade as your list grows. * **API token permissions matter.** Generate a token with the permissions your app needs. Read-only tokens cannot add subscribers or send emails. * **Manage subscribers in MailerLite.** You can add subscribers through Rocket, but removing subscribers, managing unsubscribes, and editing groups must be done in the MailerLite dashboard. * **One MailerLite account per project.** Each Rocket project connects to one MailerLite API token. ## What's next? Store user data and sync subscriber information with your database. Trigger email sequences when users subscribe to paid plans. Add transactional email alongside MailerLite for password resets and receipts. Track newsletter signup conversions and email-driven traffic. # Mixpanel Source: https://docs.rocket.new/build/connectors/mixpanel Add Mixpanel to your Rocket.new app to track feature adoption, analyze conversion funnels, and segment users by behavior for product analytics. Describe the analytics you want in chat and Rocket generates the complete tracking logic: event calls, funnel visualizations, retention charts, and user segmentation. ## What you can do Measure which features users engage with and how often, so you can prioritize what to build next. Visualize how users move through multi-step flows like signups, onboarding, or checkout. Compare metrics across experiment variants to see which version performs better. Group users by behavior, plan type, or demographics to understand how different audiences use your app. Measure how many users return to your app over time and which actions drive long-term engagement. ## Before you connect You need three values from [Mixpanel Settings](https://mixpanel.com/settings/org): * **Account username:** your Mixpanel service account username * **Account secret:** your Mixpanel service account secret * **Region:** `US` or `EU`, depending on where your Mixpanel project data is hosted **Create a Mixpanel service account** from the Mixpanel documentation. **How to create a service account:** Open [Mixpanel Settings](https://mixpanel.com/settings/org) and go to **Organization Settings > Service Accounts**. Click **Add Service Account** to open the Create Service Account dialog. Enter a **Name**, set **Organization Role** and **Project Role**, and choose the **Projects** this account can access. Leave **Expires** as **Never** unless your organization requires rotation. Click **Create**, then copy the **username** and **secret** immediately. Mixpanel shows the secret only once. Mixpanel Create Service Account dialog with Name, Organization Role, Projects, Project Role, and Expires fields. Mixpanel Create Service Account dialog with Name, Organization Role, Projects, Project Role, and Expires fields. Mixpanel is a **task-level** connector. Each Rocket task connects to its own Mixpanel credentials independently. ## Connect Mixpanel You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Mixpanel, for example `Connect Mixpanel and track when users click the Sign Up button`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup. Rocket chat panel showing a Connect prompt for Mixpanel. Rocket chat panel showing a Connect prompt for Mixpanel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Mixpanel** card, then click **Connect**. Connectors panel showing the Mixpanel card with a Connect button. Connectors panel showing the Mixpanel card with a Connect button. **After clicking Connect** A popup opens. Enter your **Account username**, **Account secret**, and **Region**. Connect Mixpanel popup with Account username, Account secret, and Region fields. Connect Mixpanel popup with Account username, Account secret, and Region fields. Click **Connect**. A green dot appears next to Mixpanel when the connection is active. **Update or disconnect** Open [**Connectors > Mixpanel**](#connect-mixpanel) and click the card. Click **Edit** to update your credentials or **Disconnect** to remove the integration from this task. Mixpanel card showing Edit and Disconnect buttons. Mixpanel card showing Edit and Disconnect buttons. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Mixpanel. Rocket detects the intent and shows a **Connect** button inline. Tap it to open the credentials screen. **Option 2: From the Connectors tab** Tap the **More** button in the header. Tap **Integrations**. Tap the **Mixpanel** card, then tap **Connect**. **After tapping Connect** A popup opens. Enter your **Account username**, **Account secret**, and **Region**, then tap **Done**. A green dot appears next to Mixpanel when the connection is active. **Update or disconnect** Go back to the **Mixpanel** card in Integrations. Tap **Edit** to update credentials or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Button tracking | `Track clicks on the Sign Up and Subscribe buttons and send events to Mixpanel.` | | Page views | `Track page views for every route in my app and send them to Mixpanel with the page name.` | | Signup funnel | `Track a signup funnel: Visit > Click Sign Up > Complete Form > Verify Email. Show drop-off rates.` | | Feature usage | `Track usage of the search, filter, and export features. Show a daily usage chart for the last 30 days.` | | User properties | `Set Mixpanel user properties for plan type, signup date, and company name on login.` | | Retention chart | `Show a weekly retention chart for users who completed onboarding in the last 8 weeks.` | | A/B test | `Track an A/B test on the pricing page. Compare conversion rates for monthly vs. annual pricing.` | | Revenue tracking | `Send a Purchase Completed event to Mixpanel with the order total and product name.` | | Error tracking | `Track JavaScript errors as Mixpanel events with the error message and stack trace.` | | Session duration | `Track session start and end times. Show average session duration per day on a line chart.` | ## Tips * **Data region matters.** Choose `US` or `EU` to match where your Mixpanel project data is hosted. Using the wrong region causes events to fail silently - they appear to send but never appear in your Mixpanel dashboard. * **Events appear with a short delay.** Mixpanel typically processes events within a few seconds, but dashboard aggregations may take a few minutes to update. * **Some analytics features depend on your Mixpanel plan.** Advanced features like signal reports and data pipelines may require a paid plan. * **One Mixpanel account per task.** Each Rocket task connects to one set of Mixpanel credentials. Use different tasks for different Mixpanel accounts. * **Credentials are stored securely.** Rocket encrypts them at rest and never exposes them in client-side code. ## What's next? Link Mixpanel events to authenticated users with Supabase user management. Track payment events and revenue alongside user behavior in Mixpanel. Combine SMS notifications with analytics for a complete user communication picture. Browse every available integration. # Netlify Source: https://docs.rocket.new/build/connectors/netlify Deploy Rocket.new apps to Netlify with one click to get a live URL, automatic HTTPS, preview builds, and global CDN hosting for static sites. Connect Netlify and deploy your web app with one click. Rocket handles the build and deployment automatically, so you go from project to live URL in seconds. Rocket hosts apps on Rocket's Vercel account. If you connect your own Netlify account, Rocket deploys to that account instead of Vercel. You then manage deployment history from the Netlify dashboard. ## What you can do Publish your web app to a public Netlify URL with automatic HTTPS and global CDN. Your app is live in seconds. After making changes in Rocket, deploy again to push the latest version to the same URL instantly. Review past deploys and site settings from your own Netlify account. ## Connect Netlify Netlify connects via OAuth, so no API key is needed. It is a **workspace-level** connector, so connect it once from Settings and it is available across all tasks. Connect once from Settings and it is available across all tasks. Click the **Netlify** card and click **Connect**. A Netlify authorization screen opens. Sign in if prompted, review the permissions, and click **Authorize**. Netlify OAuth authorization screen asking to authorize Rocket to access your Netlify account. Netlify OAuth authorization screen asking to authorize Rocket to access your Netlify account. A green dot appears next to Netlify when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. ## Deploy your task Netlify deployment is triggered from the Rocket UI, not chat prompts. Click the **Launch** button in your task to publish. Click the **Launch** button in the Rocket preview toolbar. Pick the tab that matches your goal: * **Staging.** Deploy to a temporary URL for testing and sharing. See [Publish to staging](/build/launch-web/launch-your-site#publish-to-staging) for the full flow (publish, update, unpublish). * **Production.** Publish the live version of your app to your Netlify account. See [Launch your site](/build/launch-web/launch-your-site) for the full flow. Rocket builds and deploys your app to a live Netlify URL automatically. For a complete overview of the Launch dialog and release management, see [Launch your site](/build/launch-web/launch-your-site). ## Tips * **Web apps only.** Netlify hosts web applications. Mobile apps built in Rocket cannot be deployed to Netlify. * **Connected Netlify replaces Vercel.** Apps launch on Rocket's Vercel account. If you connect your own Netlify account, Rocket deploys to that account instead of Vercel, and you manage deployment history from the Netlify dashboard. * **Build settings are automatic.** Rocket configures the correct build command and publish directory - no manual setup needed. * **HTTPS is included.** All Netlify deployments come with free HTTPS certificates automatically. ## What's next? Publish to a staging URL, then update or unpublish from the Launch dialog. Push your code to GitHub for version control alongside Netlify deployments. Track visitors and page views on your live Netlify site with GA4. Browse every available integration. # Notion Source: https://docs.rocket.new/build/connectors/notion Connect Notion to Rocket and build directly from your pages, databases, and wikis, or write generated content back to your workspace. Connect Notion via OAuth and describe what you want to build in chat. Rocket reads your pages, databases, and wikis as source material and can write generated content back into your workspace. Notion is a **workspace-level** connector. Connect it once from Settings and it is available across all tasks. ## What you can do Link a product requirements document in Rocket. Rocket reads feature lists, user stories, and acceptance criteria, then builds exactly what was specced. A product catalog database becomes a storefront. A contacts database becomes a CRM. A job listings database becomes a careers page. Replace lorem ipsum with real copy pulled from your brand guidelines, product docs, or culture pages in Notion. Turn internal knowledge into functional tools. Onboarding wikis become checklist apps. Support docs become searchable help centers. Use Notion pages as source material for changelogs, roadmaps, about pages, and FAQs. Push generated landing page copy, campaign briefs, project docs, social copy banks, and client handoffs back into your workspace. ## Before you connect Notion uses OAuth, so no API key is required. You authorize Rocket through Notion's login flow and choose which pages and databases to share. Rocket can only read pages you explicitly grant access to during the OAuth flow. It cannot access your entire workspace unless you select all pages. ## Connect Notion You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that references a Notion page or database, for example `Read my PRD at [NOTION_URL] and build the described app`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the authorization flow. Chat showing a Connect button inline after a Notion prompt. Chat showing a Connect button inline after a Notion prompt. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Notion** card, then click **Connect with Notion**. Connectors panel showing the Notion card with a Connect with Notion button. Connectors panel showing the Notion card with a Connect with Notion button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect with Notion** Notion's authorization screen opens. Select the workspace you want to connect, review the permissions, check **I recognize and trust this URL**, and click **Continue**. Notion MCP authorization screen showing workspace selection and permission list. A green dot appears next to Notion when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that references a Notion page or database. Rocket shows a **Connect** button inline. Tap it to open the authorization flow. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Notion** card, then tap **Connect with Notion**. **After tapping Connect with Notion** Notion's authorization screen opens. Select the workspace you want to connect, review the permissions, and tap **Continue**. A green dot appears next to Notion when the connection is active. ## Example prompts Replace `[NOTION_URL]` with the link to your Notion page or database. ### Read from Notion | Use case | Prompt | | :- | :- | | Build from PRD | `Read my PRD at [NOTION_URL] and build the described app with all features, user stories, and data models.` | | Enrich hero section | `Update the hero section using my brand guidelines at [NOTION_URL]. Rewrite the headline, subtext, and CTA to match our actual positioning.` | | Update features from spec | `Update the features section using my product spec at [NOTION_URL]. Rewrite every feature card to reflect what we actually built.` | | Add FAQ from knowledge base | `Replace the FAQ section using questions from [NOTION_URL]. Add pricing, integration, and security FAQ blocks.` | | Add changelog page | `Add a changelog page using my release notes at [NOTION_URL] with real dates and feature descriptions.` | | Add roadmap page | `Add a public roadmap page using my roadmap doc at [NOTION_URL] with features, timelines, and status indicators.` | ### Write back to Notion | Use case | Prompt | | :- | :- | | Save copy for review | `Save all copy from this landing page to Notion at [NOTION_URL] for the marketing team to review.` | | Create campaign brief | `Create a campaign brief in Notion covering objective, target audience, key messages, and CTAs from this page.` | | Create project documentation | `Create project documentation in Notion covering what was built, every page, section, and design decision.` | | Create social copy bank | `Create a social copy bank in Notion with LinkedIn posts, X posts, and captions derived from this page.` | | Create client handoff doc | `Create a client handoff doc in Notion covering what was built, what to update, and next steps.` | ## Tips * **Select only what Rocket needs.** During the OAuth flow, share only the pages and databases relevant to your task. Focused context produces better results. * **Paste Notion URLs directly in chat.** Linking to a specific page or database gives Rocket exact context. Vague references may pull the wrong content. * **Write-back is structured.** Rocket writes back as Notion pages with proper headings, code blocks, and tables - not plain text. * **Database relations are supported.** Rocket understands linked databases and can use related records as context. * **Generated docs are drafts.** Treat content Rocket writes to Notion as starting points. Review and refine before sharing externally. # OpenAI Source: https://docs.rocket.new/build/connectors/openai Connect OpenAI to Rocket and add GPT-powered AI to your app - from chat assistants and content generators to search and summarization. Connect your OpenAI API key and describe the AI feature you need in chat. Rocket handles all the integration code automatically so you can focus on what your features should do. This connector is only available for **Next.js TypeScript** web build tasks. ## What you can do Conversational chatbot that answers questions, provides recommendations, or guides users through workflows. Let users generate blog posts, marketing copy, product descriptions, or social media content from simple prompts. Upload documents or paste text and get concise summaries, key takeaways, or action items automatically. Semantic search that understands user intent instead of just matching keywords. Automate first-line support with a bot that answers FAQs, triages issues, and escalates complex requests. ## Before you connect You need an OpenAI API key. Get your OpenAI API key from the dashboard Never paste your API key directly into chat. Always use the secure connector popup. If your key is exposed, rotate it immediately from the OpenAI dashboard. OpenAI is a **task-level** connector. Each Rocket task connects to its own API key independently. ## Connect OpenAI You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions OpenAI or GPT - for example, `Connect OpenAI and add a GPT-powered chat assistant to my app`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. OpenAI connection prompt in the Rocket chat panel. OpenAI connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **OpenAI** card, then click **Connect**. Connectors panel showing the OpenAI card with a Connect button. Connectors panel showing the OpenAI card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key** and click **Connect**. Connect OpenAI popup with an API key input field. Connect OpenAI popup with an API key input field. A green dot appears next to OpenAI when the connection is active. **Update or disconnect** Go to [**Connectors > OpenAI**](#connect-openai). Click **Edit** to update the key or **Disconnect** to remove the integration. OpenAI card showing Edit and Disconnect buttons. OpenAI card showing Edit and Disconnect buttons. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions OpenAI or GPT. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **OpenAI** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key** and tap **Done**. A green dot appears next to OpenAI when the connection is active. **Update or disconnect** Go back to the **OpenAI** card in Integrations. Tap **Edit** to update the key or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Chatbot | `Add an AI chatbot to my app that answers user questions using OpenAI GPT.` | | Blog writer | `Build a blog post generator where users enter a topic and get a full draft from GPT.` | | Email drafter | `Create an email composer that generates professional emails from bullet points using GPT.` | | Code explainer | `Add a code explainer tool where users paste code and get a plain-English explanation from OpenAI.` | | Content moderator | `Use OpenAI to automatically flag inappropriate user-submitted content before it is published.` | | Quiz generator | `Build a quiz generator that creates multiple-choice questions from any topic using GPT.` | | Language translator | `Add a translation feature that converts user text between languages using OpenAI.` | | Sentiment analyzer | `Analyze customer feedback sentiment using OpenAI and display results in a dashboard.` | | Meeting summarizer | `Summarize meeting notes into key decisions and action items using GPT.` | | Product descriptions | `Generate product descriptions from basic details like name, category, and features using OpenAI.` | ## Tips * **API billing is separate.** OpenAI charges based on token usage. Monitor your spending in the [OpenAI usage dashboard](https://platform.openai.com/usage). * **Rate limits apply.** New accounts have lower rate limits. Check your [rate limit tier](https://platform.openai.com/docs/guides/rate-limits) and request an increase if needed. * **Token costs vary by model.** Longer prompts and responses cost more. Keep system prompts concise and set reasonable max token limits. * **OpenAI vs. Anthropic.** GPT models excel at broad general-purpose tasks, function calling, and vision. Claude is better suited for long-context analysis and tasks requiring careful, detailed reasoning. * **One API key per task.** Each Rocket task connects to one OpenAI API key independently. ## What's next? Add Claude models for long-context analysis and detailed reasoning alongside GPT. Connect Google's Gemini models for multimodal AI features. Add real-time web search and up-to-date answers to your AI features. Store conversation history, user preferences, and AI-generated content. # Connectors overview: link services to your Rocket.new app Source: https://docs.rocket.new/build/connectors/overview Wire 26+ services into your Rocket.new app from a single prompt, spanning payments, databases, AI models, email, analytics, CRM, and hosting. Rocket integrates with 25+ services out of the box. Connect once via API key or OAuth, then tell Rocket what you want to build. It generates the code, UI, and logic automatically. Some connectors only work in **Next.js TypeScript** tasks. Each connector's page notes any task-type requirements at the top. Connectors can be either **task-level** or **workspace-level**: * **Task-level** connectors (e.g. Stripe, AdSense, HubSpot) are connected per task. Each task stores its own credentials independently. * **Workspace-level** connectors (e.g. Supabase, Typeform, GitHub, Google) connect once from workspace Settings and are shared across all tasks in your workspace. ## How it works Open **Connectors** and select the service you want. Paste your API key or authorize via OAuth. Describe what you want to build in chat. Rocket generates the complete feature: UI, backend logic, API calls, and error handling. Your API keys are encrypted at rest and never exposed in your code. To disconnect any integration, open the **`...`** menu in the preview toolbar, select **Connectors**, and click the connector you want to remove. ## How to open In the preview toolbar, click the **`...`** button and select **Connectors** from the dropdown. You can also ask in chat: ```plaintext wrap theme={null} Connect Stripe to my project. ``` ## What should I use? Not sure which integrations you need? Pick what you are building. **Recommended stack:** Supabase + Stripe + Resend + Netlify User auth, subscription billing, transactional email, and one-click deployment. **Recommended stack:** Supabase + Stripe + SendGrid + Google Analytics Product catalog, payments, order confirmation emails, and conversion tracking. **Recommended stack:** OpenAI or Anthropic + Supabase + Stripe Chat and content generation, conversation storage, and usage monetization. **Recommended stack:** Strapi or Directus + Netlify + Google Analytics Headless CMS, fast global deployment, and readership tracking. **Recommended stack:** Calendly + Supabase + Twilio or Resend Scheduling, user accounts, and booking confirmation notifications. **Recommended stack:** Typeform or Tally + Mailchimp or Brevo + Airtable + Google Analytics Lead capture forms, email nurture sequences, lightweight CRM, and funnel analytics. ## Browse by category Click any connector to see the setup guide and example prompts. ### Payments and ads Accept one-time payments, subscriptions, and donations. Test with Stripe's sandbox before going live. Accept payments, manage orders, process refunds, and handle subscriptions. India's leading payment gateway. Monetize your app or website with Google display ads. ### Email and messaging Developer-first email API. Great for transactional emails like receipts, password resets, and notifications. High-volume email delivery for transactional and marketing emails at scale. All-in-one email marketing and transactional email platform (formerly Sendinblue). Email marketing, newsletters, and subscriber automation with a simple interface. Email campaigns, audience management, and marketing automation. Send SMS messages for verifications, alerts, and notifications. Not sure which one to pick? See the comparison table with pricing, strengths, and recommendations. ### AI and machine learning Add GPT-powered chat, content generation, summarization, and text analysis. Use Claude for safe, nuanced AI responses and long-form content generation. Google's multimodal AI for text, chat, and image understanding. AI-powered search with cited, fact-based answers from the web. Which AI model is right for your app? See the comparison with strengths, pricing, and use cases. ### Databases and CMS Instant backend with PostgreSQL database, user authentication, file storage, and edge functions. Spreadsheet-meets-database for managing leads, content, inventory, and internal workflows. Open-source headless CMS with a visual admin panel for content management. Open-source headless CMS that wraps any SQL database with an instant REST and GraphQL API. Use Webflow CMS collections and site content as a live data source for your app. Supabase vs Airtable vs Strapi vs Directus: which one fits your project? ### Analytics and tracking Track page views, user journeys, conversions, and traffic sources with GA4. Event-based analytics for tracking user behavior, feature adoption, and conversion funnels. Google Analytics vs Mixpanel: which one fits your needs? ### Forms and scheduling Conversational forms for lead capture, surveys, quizzes, and feedback collection. Simple, powerful forms with a generous free tier. Great for quick feedback and signups. Scheduling and appointment booking with automatic calendar sync. Typeform vs Tally, Calendly: see the comparison. ### Social and media Display your Instagram feed, recent posts, and social proof directly in your app. ### CRM Sync contacts, manage deal pipelines, track email events, and trigger marketing automation workflows from your app. ### Productivity and collaboration Read from Docs, Sheets, and Calendar to build with real context. Write outputs back. Read pages, databases, and wikis. Write docs, briefs, and copy banks back to Notion. Build directly from tickets and projects. Write follow-up issues back to your board. Build from work items, repos, pipelines, and wiki. Create and update work items back in Azure DevOps. Use team docs, specs, and wikis as context so generated code reflects your organization's actual standards. Google Workspace vs Notion vs Linear: which tools should you connect? ### Development Sync your codebase to GitHub for backups, collaboration, and version control. Deploy your app to the web with one click. No config needed. ## Use any API Do not see your service listed above? Rocket can connect to **any REST API**. Import from Postman, cURL, Postman JSON, or OpenAPI/Swagger specs. Step-by-step guide to connecting external APIs by providing request and response examples. These APIs have been connected by the Rocket community using the API importer: Checkout and payment processing. In-person and online payments. Payment gateway for Africa. Subscriptions and tax management. Sell digital products. European payment processing. Latin American payments. Donations and memberships. Usage-based billing. Crypto market data. CRM, billing, and auth. Transaction data. Run open-source AI models. xAI chat and reasoning. NLP and text generation. Route to hundreds of AI models. Deploy custom AI models. Uncensored AI conversations. Browser-side ML models. Text-to-image generation. AI typography and images. Text-to-vector image generation. Turn websites into LLM-ready data. AI-powered search engine. Google Search results API. Automated messages and workflows. Bots and server integrations. Connect 5,000+ web apps. Open-source workflow automation. Automation and workflows. Business management suite. Design tools integration. Maps and navigation. Video embedding and data. Royalty-free images and videos. GIF search and embedding. Sound effects library. Music data and playback. AI video generation. Programmatic video creation. Auto-generate social media images. Stock and financial market data. Real-time market data. Weather data for any location. Global news aggregation. News from 150K+ sources. NYT article search. Sports data and scores. Pet adoption database. Cocktail recipes database. Database and backend services. E-commerce platform API. Product analytics and A/B testing. Data visualization. Business intelligence. Interactive charts and graphs. Diagrams and flowcharts. Interactive flowcharts. Animation library. Interactive animations. Rich text editor. Generate QR codes. PDF processing. Repository analytics. Code compilation and execution. Email delivery API. Visual backend builder. GPU compute for AI workloads. Decentralized hosting. Micro-backend service. Event management. Event and ticket data. Job listings. US government job listings. Travel reviews and data. Product barcode lookup. Time zones and conversions. Word cloud generation. Health and fitness data. *** ## What's next? See how to combine multiple connectors into a single project workflow. Set up event tracking with Mixpanel, Google Analytics, or Segment. Add form collection and appointment booking to your app. Return to the main Build documentation hub. # Perplexity Source: https://docs.rocket.new/build/connectors/perplexity Integrate Perplexity into Rocket.new to add AI-powered search that returns real-time answers with cited sources for research and Q&A features. Connect your Perplexity API key and describe the search feature you need in chat. Rocket handles all the integration code automatically so you can focus on what your features should do. This connector is only available for **Next.js TypeScript** web build tasks. ## What you can do Let users ask questions and get answers backed by linked sources from across the web. Let users paste a claim and verify it against current web sources. Research competitors, market trends, or industry news with sourced summaries. Aggregate and summarize the latest news on a topic with links to original articles. Answer user questions using both internal data and live web sources, with full citations. ## Before you connect **Get your Perplexity API key** from your Perplexity account. Never paste your API key directly into chat. Always use the secure connector flow. If you believe your key has been exposed, rotate it immediately from your Perplexity account. The API key is scoped to the task you connect it in. Each task stores its own key. Connecting in one task does not affect others. ## Connect Perplexity You can connect from two places. Both open the same popup. **Option 1: From chat** Type a prompt that mentions Perplexity, for example `Connect Perplexity and add a search bar that answers user questions with cited sources`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Perplexity connection prompt in the Rocket chat panel. Perplexity connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Perplexity** card, then click **Connect**. Connectors panel showing the Perplexity card with a Connect button. Connectors panel showing the Perplexity card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key** and click **Connect**. Connect Perplexity popup with an API key input field. Connect Perplexity popup with an API key input field. A green dot appears next to Perplexity when the connection is active. **Update or disconnect** Go to [**Connectors > Perplexity**](#connect-perplexity). Click **Edit** to update the key or **Disconnect** to remove the integration. Perplexity card showing Edit and Disconnect buttons. Perplexity card showing Edit and Disconnect buttons. Open the task in the Rocket mobile app. Tap the **More** button in the header, then tap **Connectors**. Tap the **Perplexity** card and enter your API key. ## Example prompts | Use case | Prompt | | :- | :- | | Search bar | `Add a search bar that uses Perplexity to answer user questions with cited sources.` | | Fact-checker | `Build a fact-checking tool where users paste a claim and get a verified answer with sources.` | | Research assistant | `Create a research panel where users enter a topic and get a summary with linked references.` | | News feed | `Build a news aggregator that shows the latest headlines and summaries on a chosen topic.` | | Competitor tracker | `Add a competitor analysis page where users enter a company name and get recent news and updates.` | | Product comparison | `Create a product comparison tool that researches specs and pricing from across the web.` | | Knowledge Q\&A | `Create a Q&A page where users ask questions and get answers sourced from our docs and the web.` | | Trend monitor | `Build a dashboard that tracks trending topics in a specific industry with source links.` | ## Tips * **Best for factual, search-based tasks.** For creative writing, code generation, or open-ended conversation, use Anthropic or OpenAI instead. * **Citation quality varies by topic.** Perplexity pulls from live web results, so niche or very recent topics may have fewer high-quality sources. * **Rate limits apply.** Monitor usage in your Perplexity dashboard to avoid hitting caps during high traffic. * **API billing is separate from Rocket.** Perplexity charges based on API usage. See their [pricing page](https://docs.perplexity.ai/guides/pricing). * **Key is scoped to this task.** Each Rocket task connects to one Perplexity API key. # Productivity connector comparison: Notion, Linear, Jira Source: https://docs.rocket.new/build/connectors/productivity-guide Compare productivity integrations in Rocket.new: Google Workspace, Notion, Linear, Jira, Azure DevOps, and Confluence for docs, specs, and project management. Rocket supports six productivity integrations. Each covers a different part of your team's workflow. Most teams connect several, but this guide helps you prioritize. ## Quick answer * For specs, wikis, and team knowledge, use **Notion**. * For spreadsheets, docs, and calendars, use **Google Workspace**. * For tickets, projects, and bug reports, use **Linear**. * For Jira tickets, epics, and sprint boards, use **Jira**. * For work items, repos, pipelines, and wiki in one place, use **Azure DevOps**. * For product documentation and knowledge bases, use **Confluence**. All work in both directions: Rocket reads your existing content to build with real context, then writes generated outputs back into your tools. ## Comparison table | Capability | Google Workspace | Notion | Linear | Jira | Azure DevOps | | - | - | - | - | - | - | | **Best for** | Structured data, specs, calendars | Team knowledge, PRDs, content | Issue tracking, sprints, project management | Issue tracking, epics, sprint boards | Work items, repos, pipelines, wiki | | **What Rocket reads** | Docs, Sheets, Calendar events | Pages, databases, wikis, templates | Tickets, projects, acceptance criteria | Issues, epics, acceptance criteria, sprint data | Work items, repos, PRs, pipelines, wiki | | **What Rocket writes back** | Docs (copy, reports), Sheets (data, SEO metadata) | Pages (briefs, docs, copy banks, handoffs) | Issues (follow-ups, QA tickets, client changes) | Read-only (build from tickets) | Work items (create, update, comments) | | **Content types** | Text, tabular data, calendar events | Rich text, databases, relations, embeds | Issues, projects, documents, labels | Issues, epics, sprints, workflows | Work items, repos, pipelines, wiki pages | | **Real-time data** | Yes (Sheets, Calendar) | Yes (databases, pages) | Yes (issues, projects) | Yes (issues, sprints) | Yes (work items, builds, wiki) | | **Write-back creates** | New documents and spreadsheets | New pages with structured content | New issues and project boards | N/A | New and updated work items | | **Connection method** | OAuth | OAuth | OAuth | OAuth (Atlassian) | OAuth | | **Pricing** | Free (personal), paid (Workspace) | Free tier available | Free tier available | Free tier available | Free tier available | ## Choosing by use case ### Specs and PRDs your team already wrote **Connect Notion or Google Docs.** If your PRDs live in Notion, connect Notion. If they live in Google Docs, connect Google Workspace. Either way, Rocket reads the full spec and builds from it directly. ```plaintext wrap theme={null} Read my PRD at [NOTION_URL] and build the described app with all features, user stories, and data models. ``` ### Build from tickets and acceptance criteria **Connect Linear, Jira, or Azure DevOps.** Point Rocket at a ticket or work item and it reads the title, description, and acceptance criteria, then generates the implementation. Your sprint board becomes your build queue. ```plaintext wrap theme={null} Build the feature described in [LINEAR_URL]. Read the full requirements and acceptance criteria before generating. ``` ### Build from epics and sprint context **Connect Jira.** Paste an epic URL and Rocket reads all child stories, or reference your current sprint to build the highest-priority work first. ```plaintext wrap theme={null} Read the Jira epic at [JIRA_URL] and build all the screens and features described in its child stories. ``` ### Work items, repos, pipelines, and wiki together **Connect Azure DevOps.** Use Boards for requirements, Repos and PRs for code context, Pipelines for build status, and Wiki for specs. Then write follow-up work items back. ```plaintext wrap theme={null} Build the feature described in [ADO_URL]. Use linked PRs and wiki specs as context, then create QA work items when done. ``` ### Data in spreadsheets that should drive your app **Connect Google Workspace.** Rocket reads columns, rows, and data types from your Sheets and generates apps that reflect your real data structure. Pricing matrices, product catalogs, team rosters, and campaign trackers all work. ```plaintext wrap theme={null} Read my product catalog at [SHEETS_URL] and build a storefront with search, filters, and a detail view for each product. ``` ### Write documentation after building **Connect Notion.** Notion is the best destination for generated docs: project documentation, campaign briefs, content banks, client handoff docs, sales one-pagers, and competitive positioning docs. ```plaintext wrap theme={null} Create project documentation in Notion covering what was built, every page, section, component, and design decision. ``` ### Follow-up tickets created automatically **Connect Linear or Azure DevOps.** After building, Rocket populates your board with QA tickets, enhancement requests, and client change requests. Each issue gets a description, priority, and acceptance criteria. ```plaintext wrap theme={null} Create Linear tickets for all follow-up work from this build: QA test cases, enhancements, and edge cases to handle. ``` ### Marketing team reviewing generated copy **Connect Notion or Google Workspace.** Push generated copy to a Notion page or Google Doc. Your marketing team reviews and approves in the tool they already use. ```plaintext wrap theme={null} Save all marketing copy from this landing page to Notion for the team to review. Organize it by section. ``` ### Connect everything for a complete loop **Connect all six.** Specs from Notion or Docs inform the build. Jira, Linear, or Azure DevOps work items define the scope. Rocket generates the app. Documentation flows back to Notion, follow-up tickets flow to Linear or Azure DevOps, and data exports flow to Sheets. ```plaintext wrap theme={null} Read the spec at [NOTION_URL], build the feature, then create project documentation in Notion, QA tickets in Linear, and export the content structure to Google Sheets. ``` ## How it works These integrations work in both directions and happen during and after generation, not as a separate export step. | Direction | What happens | Example | | - | - | - | | **Rocket reads** | Your existing content informs the build | Spec in Notion becomes a working app | | **Rocket writes back** | Generated output flows back to your tools | Generated copy pushed to Notion for review | | **Full loop** | Both directions in one workflow | Read ticket from Linear, build feature, create QA tickets back in Linear | ## Browse productivity integrations Read from Docs, Sheets, and Calendar. Write copy and data back. Read pages, databases, and wikis. Write docs, briefs, and copy banks back. Read tickets and projects. Write follow-up issues and updates back. Read issues, epics, and sprint data. Build directly from your board. Read work items, repos, pipelines, and wiki. Create and update work items back. Read product specs and documentation as build context. # Razorpay Source: https://docs.rocket.new/build/connectors/razorpay Connect Razorpay to your Rocket.new app and accept payments, process refunds, manage subscriptions, and handle orders with a single prompt. Connect Razorpay via OAuth and describe the payment flow you want in chat. Rocket generates the complete checkout experience: order creation, payment forms, webhook handlers, and subscription management, all grounded in your real Razorpay configuration. Razorpay is a **workspace-level** connector. Connect it once from Settings and it is available across all tasks. ## What you can do Accept single payments for products, services, or digital goods with a Razorpay-powered checkout page. Monthly or yearly plans with automatic billing, upgrade and downgrade flows, and cancellation handling. Create and track orders programmatically. Pull order history into dashboards and admin panels. Trigger full or partial refunds from your app and sync refund status back to your UI. ## Before you connect Razorpay uses OAuth, so no API key is required. You authorize Rocket through Razorpay's login flow and Rocket gets scoped access to your account. Rocket can only access the Razorpay account you authorize during the OAuth flow. To switch accounts, disconnect and reconnect with the new account. Always test with Razorpay's **Test Mode** before switching to Live Mode. Test card: `4111 1111 1111 1111` with any future expiry and CVV. ## Connect Razorpay You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Razorpay - for example, `Connect Razorpay and add a checkout for ₹499`. Rocket detects the intent and shows a **Connect** button inline. Click it and the authorization flow opens. Razorpay connection prompt in the Rocket chat panel. Razorpay connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Razorpay** card, then click **Connect**. Connectors tab showing the Razorpay card with a Connect button. Connectors tab showing the Razorpay card with a Connect button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** Razorpay's authorization screen opens. Review the permissions Rocket is requesting, check **I've read Terms & Conditions**, then click **Authorize**. A green dot appears next to Razorpay when the connection is active. Razorpay OAuth authorization screen showing the permissions Rocket is requesting. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Razorpay. Rocket detects the intent, shows a **Connect** button, and the authorization flow opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Razorpay** card, then tap **Connect**. **After tapping Connect** Razorpay's authorization screen opens. Review the permissions, check **I've read Terms & Conditions**, then tap **Authorize**. A green dot appears next to Razorpay when the connection is active. **Disconnect** Go to **Integrations > Razorpay**. Tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Simple checkout | `Add a Razorpay checkout for my ₹999 product with a success page.` | | Subscription plans | `Create a pricing page with Free, Pro (₹499/mo), and Enterprise (₹1999/mo) tiers using Razorpay.` | | Order history | `Add an Orders page that shows the user's past Razorpay payments with status and amounts.` | | Refund flow | `Add a Refund button on the order detail page that triggers a full Razorpay refund and updates the order status.` | | Webhook handler | `Set up a Razorpay webhook handler for payment.captured and payment.failed events and update the database accordingly.` | | International checkout | `Add a Razorpay checkout that supports INR and USD with automatic currency detection.` | ## Tips * **Always start in Test Mode.** Use Razorpay's test credentials during development. Switch to Live Mode only when you are ready to accept real payments. Test card: `4111 1111 1111 1111`. * **Webhooks are handled automatically.** Rocket generates the webhook handler code for common events like `payment.captured`, `subscription.charged`, and `refund.processed`. * **Connect Supabase first.** Rocket links Razorpay customers and orders to authenticated Supabase users. Connect Supabase before adding Razorpay for a complete payment flow. * **Refunds and disputes live in Razorpay.** Manage financial reconciliation, settlements, and disputes directly from the Razorpay Dashboard. * **INR is the default currency.** Razorpay supports multi-currency but defaults to INR. Mention your target currency explicitly in your prompt if needed. ## What's next? Connect Supabase for user accounts and order storage to complete the payment flow. Send payment confirmation and receipt emails automatically after Razorpay payments. Need global card payments? Stripe is an alternative for non-India markets. Full recipe: Supabase + payments + email to build a complete SaaS product. # Resend Source: https://docs.rocket.new/build/connectors/resend Send transactional email from your Rocket.new app with Resend, including welcome messages, password resets, and order confirmations from a prompt. Connect Resend and describe the email flow you want in chat. Rocket generates the complete implementation: email templates, send logic, and secure API integration. ## What you can do Personalized welcome emails triggered the moment a user signs up, with onboarding steps and branding. Secure, branded password reset emails instead of the default Supabase template. Receipt emails after a purchase with order details, totals, and receipt number. Collect emails and add subscribers to a mailing list using Resend Audiences. Branded invite emails with a unique signup or join link when adding team members. ## Before you connect You need your **API key** from the Resend Dashboard. **Create or copy your Resend API key** Never paste your Resend API key directly into chat. Always use the secure connection popup. If your key has been exposed, rotate it immediately from the Resend dashboard. Resend works best paired with [Supabase](/build/connectors/supabase/overview) for linking emails to authenticated users. You can also route Supabase Auth emails through Resend's SMTP for full branding control. ## Connect Resend You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions Resend - for example, `Connect Resend and send a welcome email when a user signs up`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Resend connection prompt in the Rocket chat panel. Resend connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Resend** card, then click **Connect**. Connectors panel showing the Resend card with a Connect button. Connectors panel showing the Resend card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key**, then click **Save**. A green dot appears next to Resend when the connection is active. Resend API key input popup. Resend API key input popup. **Update or disconnect** Go to [**Connectors > Resend**](#connect-resend). Update your key or click **Disconnect** to remove the integration. Resend integration showing connected state with a Disconnect button. Resend integration showing connected state with a Disconnect button. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions Resend. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Resend** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key**, then tap **Done**. A green dot appears next to Resend when the connection is active. **Update or disconnect** Go to **Integrations > Resend**. Update your key or tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Welcome email | `Send a welcome email through Resend when a new user signs up with Supabase.` | | Password reset | `Route Supabase password reset emails through Resend with custom branding.` | | Order confirmation | `After a Stripe payment, send a receipt email through Resend with the order total.` | | Newsletter signup | `Add a newsletter form that saves emails to Supabase and adds them to my Resend Audience.` | | Team invite | `Send an invitation email through Resend with a unique join link when I invite a team member.` | | Email verification | `Send a verification email through Resend with a 6-digit code when a user registers.` | | Weekly digest | `Send a weekly digest email every Monday with the user's activity summary from Supabase.` | | Abandoned cart | `If a user adds items to cart but does not check out within 24 hours, send a reminder email through Resend.` | | Feedback request | `Send a feedback request email through Resend 3 days after a user completes onboarding.` | | Custom HTML email | `Create a styled HTML email template in Resend with our logo, brand colors, and a CTA button.` | ## Tips * **Supabase is recommended.** Rocket links Resend emails to Supabase user accounts for the best experience. Most auth email flows (welcome, password reset) work best with Supabase connected. * **SMTP routing for auth emails.** Route Supabase Auth emails through Resend for custom branding. See the [Resend + Supabase SMTP guide](https://resend.com/docs/send-with-supabase-smtp). * **Resend Audiences for marketing.** Resend supports newsletters and marketing emails through Audiences and Broadcasts, with built-in analytics and unsubscribe handling. * **API key security.** Your key is encrypted at rest and never exposed in your project code. Always use the secure integration flow to connect. * **One Resend account per project.** Each Rocket project connects to one Resend API key. Use different projects for different Resend accounts. * **Free plan sender limits.** Free Resend accounts can only send from the default account email. To use a custom domain, upgrade your Resend plan, verify the domain, and update the `from` field in your Supabase Edge Function. Once your domain is verified in Resend, update the `from` field in the Edge Function that handles sending. 1. Go to the [Supabase Dashboard](https://supabase.com/dashboard) and open your project. 2. Click **Edge Functions** in the left sidebar. 3. Open the function that handles email sending (for example, `send-welcome-email`). 4. Click the **Code** tab. 5. Find the `resend.emails.send` call and update the `from` field: ```typescript theme={null} await resend.emails.send({ from: "noreply@yourdomain.com", // your verified domain address to: recipientEmail, subject: "...", html: "...", }); ``` 6. Click **Deploy** (or **Redeploy**) to apply the change. 7. Trigger the function to confirm the email arrives from the new address. Use the **Logs** tab if anything fails. If you route Supabase Auth emails (password reset, magic link) through Resend SMTP, the sender address for those is set separately under **Project Settings → Authentication → SMTP Settings** in the Supabase Dashboard, not in an Edge Function. ## What's next? Send order confirmation and receipt emails after Stripe payments with Resend. Recommended for linking emails to authenticated users and routing auth emails through Resend. An alternative email integration if you prefer SendGrid's platform. Full recipe: Supabase + Stripe + Resend + Netlify to build a complete SaaS product. # SendGrid Source: https://docs.rocket.new/build/connectors/sendgrid Connect SendGrid to your Rocket.new app to deliver transactional email, run bulk marketing campaigns, and manage subscriber lists at scale. Connect SendGrid and describe the email flow you want in chat. Rocket generates the complete sending logic: templates, API calls, event tracking, and delivery management. SendGrid excels at high-volume sending and marketing campaigns. For simpler developer-focused transactional email, [Resend](/build/connectors/resend) may be a lighter option. ## What you can do Password resets, order confirmations, invoices, and account verification emails triggered by user actions. Promotional emails, product announcements, and seasonal campaigns to segmented audiences. Reusable templates with personalized fields like names, order numbers, and custom data. Track open rates, click rates, bounces, and delivery status for every email you send. Collect subscriber emails and send regular newsletters with rich content. ## Before you connect You need your **API key** from the SendGrid Dashboard. **Create or copy your SendGrid API key** Never paste your SendGrid API key directly into chat. Always use the secure connection popup. If your key has been exposed, revoke it from SendGrid Settings and create a new one. SendGrid requires domain authentication or single-sender verification before you can send emails. Complete this in **SendGrid Settings > Sender Authentication** before connecting. ## Connect SendGrid You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions SendGrid - for example, `Connect SendGrid and send an order confirmation email when a user completes checkout`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. SendGrid connection prompt in the Rocket chat panel. SendGrid connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **SendGrid** card, then click **Connect**. Connectors panel showing the SendGrid card with a Connect button. Connectors panel showing the SendGrid card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key**, then click **Save**. A green dot appears next to SendGrid when the connection is active. SendGrid API key input popup. SendGrid API key input popup. **Update or disconnect** Go to [**Connectors > SendGrid**](#connect-sendgrid). Update your key or click **Disconnect** to remove the integration. SendGrid integration showing connected state with a Disconnect button. SendGrid integration showing connected state with a Disconnect button. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions SendGrid. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **SendGrid** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key**, then tap **Done**. A green dot appears next to SendGrid when the connection is active. **Update or disconnect** Go to **Integrations > SendGrid**. Update your key or tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Order confirmation | `Send an order confirmation email through SendGrid when a user completes checkout. Include order total and items.` | | Password reset | `Add a forgot-password flow that sends a reset link via SendGrid with a 15-minute expiration.` | | Welcome email | `Send a welcome email through SendGrid when a new user signs up, with a getting-started guide.` | | Marketing campaign | `Build an admin page where I can compose and send a marketing email to a SendGrid contact list.` | | Weekly digest | `Send a weekly digest email every Monday with the user's activity summary from the past week.` | | Abandoned cart | `Send an abandoned cart reminder email 2 hours after a user leaves items in their cart.` | | Invoice email | `Generate a PDF invoice and email it through SendGrid after each successful Stripe payment.` | | Re-engagement | `Send a re-engagement email to users who have not logged in for 30 days.` | | Event invitation | `Send an event invitation email with RSVP buttons that update the user's response in Supabase.` | | Shipping notification | `Send a shipping notification email with tracking number and estimated delivery date.` | ## Tips * **Verify your sender identity first.** SendGrid requires domain authentication or single-sender verification before you can send emails. Complete this in SendGrid Settings before connecting. * **No permanent free tier.** SendGrid's free plan allows 100 emails per day. Upgrade for higher volume. Check [SendGrid pricing](https://sendgrid.com/en-us/pricing) for current plans. * **Manage contacts in SendGrid.** You can add subscribers through Rocket, but deleting contacts and managing suppression lists must be done in the SendGrid dashboard. * **One SendGrid account per project.** Each Rocket project connects to one SendGrid API key. Use different projects for different SendGrid accounts. ## What's next? Store user data and trigger emails based on database events and user actions. Send payment confirmations and invoice emails after Stripe transactions. Compare with Resend for simpler transactional email needs. Track email campaign performance alongside your website analytics. # Strapi Source: https://docs.rocket.new/build/connectors/strapi Connect Strapi to Rocket and build blogs, documentation sites, and e-commerce catalogs from your headless CMS: no copy-pasting content or API setup. Point Rocket at your Strapi instance and describe the content experience you want in chat. Rocket reads your content types, generates the pages, and wires up the data. ## What you can do Publish articles with images, categories, and author profiles managed in Strapi. Structured docs with sidebar navigation and versioned content from Strapi. Display products with images, descriptions, pricing, and variant options from Strapi. Render pages from Strapi content types with modular blocks like heroes, feature grids, and CTAs. Showcase team members, partners, or directory listings pulled from Strapi. ## Before you connect You need two things: your **Strapi project URL** (e.g. `https://your-project.strapiapp.com`) and an **API token** from your Strapi Admin Panel. **Get your Strapi API token** from the Strapi documentation. Never paste your API token directly into chat. Always use the secure connection popup. If a token is ever exposed, revoke it from the Strapi Admin Panel and create a new one. Strapi is a **task-level** connector. Each Rocket task connects to its own Strapi instance independently. ## Connect Strapi You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Strapi, for example `Connect Strapi and display blog posts from my CMS`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup. Rocket chat panel showing a Connect prompt for Strapi. Rocket chat panel showing a Connect prompt for Strapi. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Strapi** card, then click **Connect**. Connectors panel showing the Strapi card with a Connect button. Connectors panel showing the Strapi card with a Connect button. **After clicking Connect** A popup opens. Enter your **Instance URL** and **API token**, then click **Connect**. Connect Strapi popup with Instance URL and API token fields. Connect Strapi popup with Instance URL and API token fields. A green dot appears next to Strapi when the connection is active. **Update or disconnect** Open [**Connectors > Strapi**](#connect-strapi) and click the card. Click **Edit** to update your credentials or **Disconnect** to remove the integration from this task. Strapi card showing Edit and Disconnect buttons. Strapi card showing Edit and Disconnect buttons. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Strapi. Rocket detects the intent and shows a **Connect** button inline. Tap it to open the credentials screen. **Option 2: From the Connectors tab** Tap the **More** button in the header. Tap **Integrations**. Tap the **Strapi** card, then tap **Connect**. **After tapping Connect** A popup opens. Enter your **Instance URL** and **API token**, then tap **Done**. A green dot appears next to Strapi when the connection is active. **Update or disconnect** Go back to the **Strapi** card in Integrations. Tap **Edit** to update credentials or **Disconnect** to remove it from this task. ## Set up your Strapi instance Skip this section if you already have a running Strapi instance with the MCP plugin installed. The MCP plugin is required for both Strapi Cloud and self-hosted projects. **Option A: Strapi Cloud** Go to [Strapi Cloud](https://cloud.strapi.io) and create an account. Connect your repository from GitHub or GitLab, or pick a default template. Deploy from the cloud dashboard. Continue to [Install the MCP plugin](#install-the-mcp-plugin) below. **Option B: Self-hosted** Create a new Strapi project locally: ```bash wrap theme={null} npx create-strapi@latest ``` Answer the setup questions and wait for installation to complete. Continue to [Install the MCP plugin](#install-the-mcp-plugin) below. ### Install the MCP plugin Inside your Strapi project folder: ```bash wrap theme={null} npm install @sensinum/strapi-plugin-mcp @strapi/admin@latest ``` Update `config/plugins.ts`: ```js wrap theme={null} module.exports = ({ env }) => { const allowedIPs = env('MCP_ALLOWED_IPS'); const ipConfig = !allowedIPs ? '*' : allowedIPs === '*' ? '*' : allowedIPs.split(',').map(ip => ip.trim()); return { mcp: { enabled: true, config: { session: { type: 'memory', max: 20, ttlMs: 600000, updateAgeOnGet: true }, allowedIPs: ipConfig, } } }; }; ``` ```bash wrap theme={null} npm run build && npm run develop ``` Strapi starts at `http://localhost:1337`. For Strapi Cloud, commit and push to trigger deployment. **Create content types and set permissions** Open the **Strapi Admin Panel**. For Strapi Cloud, click the **Visit app** button in your project dashboard to open the admin panel. Go to **Content-Type Builder** and create your content types (e.g., Blog, Product, Page). Add fields and save. Go to **Content Manager** and add sample records. Go to **Settings > Users & Permissions > Roles**. Select the **Public** role and enable `find` and `findOne` for your content types. Save. ## Example prompts | What you want | Prompt to use | | :- | :- | | Blog listing | `Show all articles from my Strapi blog content type with thumbnails and dates.` | | Article detail page | `When a user clicks an article, show the full rich-text body and author bio from Strapi.` | | Documentation site | `Build a docs site with sidebar navigation from my Strapi docs collection.` | | Product catalog | `Create a product grid from Strapi with images, prices, and a detail page for each item.` | | Dynamic page sections | `Render pages from Strapi page-sections with hero, features, and CTA block types.` | | Search | `Add a search bar to my Strapi blog that filters articles by title and content.` | | Category filter | `Add category tabs to my Strapi product listing that filter items by type.` | | Pagination | `Add pagination to my Strapi blog listing, showing 12 posts per page.` | | Image gallery | `Display images from my Strapi media library in a responsive masonry grid.` | ## Tips * **Your API token is stored securely.** Rocket encrypts it at rest and never exposes it in client-side code. * **Strapi must be publicly accessible.** Your instance needs to be reachable from the internet. Local-only instances will not work unless tunnelled. * **One Strapi project per task.** Each Rocket task connects to one set of Strapi credentials. Use different tasks for different Strapi instances. * **Content deletion happens in Strapi.** Rocket can create and update records, but delete content and assets directly from your Strapi admin panel. * **Use the right token type.** Full Access works for development. Use a Read-only token for production apps that only display content. ## What's next? Comparing headless CMS options? See how Directus works with Rocket. Pair Strapi content with Supabase auth and user management. Send notification emails when new content is published from Strapi. Browse every available integration. # Stripe Source: https://docs.rocket.new/build/connectors/stripe Accept payments in your Rocket.new app with Stripe to handle one-time checkout, recurring subscriptions, and donation flows from a single prompt. Connect Stripe and describe the payment flow you want in chat. Rocket generates the complete checkout experience: pricing pages, payment forms, webhook handlers, and subscription management. ## What you can do Monthly or yearly plans with automatic billing, upgrades, downgrades, and cancellation. Sell digital products, courses, templates, or physical goods with a simple checkout flow. One-time or recurring donations with preset or custom amounts. Cart-based checkout with multiple line items, quantities, and a single Stripe payment session. ## Before you connect You need your **Secret key** and **Publishable key** from the Stripe Dashboard. **Open your Stripe API keys in the Stripe Dashboard** | Key type | Prefix | Usage | | :- | :- | :- | | **Publishable key** | `pk_` | Safe to use on the client side | | **Secret key** | `sk_` | Server side only - keep this confidential | Keys come in two modes. Always start with **Test keys** and switch to **Live keys** only when you are ready to accept real payments. Never paste your Stripe keys directly into chat. Always use the secure connection popup. If your Secret key has been exposed, rotate it immediately from the [Stripe Dashboard](https://dashboard.stripe.com/apikeys). Stripe works best paired with [Supabase](/build/connectors/supabase/overview) for user accounts. Rocket links Stripe customers to authenticated Supabase users automatically. ## Connect Stripe You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions Stripe - for example, `Connect Stripe and add a $49 one-time checkout`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Stripe connection prompt in the Rocket chat panel. Stripe connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Stripe** card, then click **Connect**. Connectors tab showing the Stripe card with a Connect button. Connectors tab showing the Stripe card with a Connect button. **After clicking Connect** A popup opens. Paste your **Secret key** and **Publishable key**, then click **Save**. A green dot appears next to Stripe when the connection is active. Stripe API key input popup. Stripe API key input popup. **Update or disconnect** Go to [**Connectors > Stripe**](#connect-stripe). Update your keys or click **Disconnect** to remove the integration. Stripe integration showing connected state with a Disconnect button. Stripe integration showing connected state with a Disconnect button. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions Stripe. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Stripe** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **Secret key** and **Publishable key**, then tap **Done**. A green dot appears next to Stripe when the connection is active. **Update or disconnect** Go to **Integrations > Stripe**. Update your keys or tap **Disconnect** to remove the integration. ## Example prompts | Use case | Prompt | | - | - | | Simple checkout | `Add a Stripe checkout for my $49 product with a success page.` | | Subscription plans | `Create a pricing page with Free, Pro ($19/mo), and Enterprise ($99/mo) tiers using Stripe.` | | Donations | `Add Stripe donation buttons with $5, $10, $25, $50 options and a custom amount field.` | | Free trial | `Add a 14-day free trial to the Pro plan. Charge $19/month after the trial ends.` | | Invoices | `Generate and email a PDF invoice to the customer after each Stripe payment.` | | Coupon codes | `Add a coupon code field to the checkout page that applies a Stripe discount.` | | Refund flow UI | `Add a "View Orders" page with order history and a link to the Stripe customer portal.` | | Usage-based billing | `Track API calls per user and charge $0.01 per call using Stripe metered billing.` | ## Tips * **Always start with Test mode keys.** Switch to Live keys only when you are ready to accept real payments. Test card: `4242 4242 4242 4242`. * **Connect Supabase first.** Rocket links Stripe customers to Supabase user accounts. Connect Supabase before connecting Stripe. * **Webhooks are handled automatically.** Rocket sets up the necessary webhook handlers for events like `checkout.session.completed` and `customer.subscription.updated`. * **Refunds and disputes live in Stripe.** Manage refunds, disputes, and financial reporting directly from the Stripe Dashboard. * **One set of keys per task.** Each Rocket task connects to a single set of Stripe API keys. You can use the same Stripe account across multiple tasks. ## What's next? Stripe requires Supabase for user accounts. Set it up if you have not already. Send order confirmation and receipt emails automatically after Stripe payments. Track checkout conversion rates and revenue with GA4 e-commerce events. Full recipe: Supabase + Stripe + Resend + Netlify to build a complete SaaS product. # Edge functions Source: https://docs.rocket.new/build/connectors/supabase/edge-functions Generate and deploy Supabase Edge Functions from Rocket.new chat to add serverless backend logic, webhooks, and secure API endpoints to your app. Rocket auto-detects when backend logic is needed and generates Supabase Edge Functions for you. This guide covers creating and deploying functions from chat, adding secrets securely, and troubleshooting deployment errors. ## What are Supabase Edge Functions? Edge Functions run on Supabase infrastructure and handle secure backend logic for your app. They are ideal for tasks like sending emails, calling APIs, generating PDFs, or processing data. * Execute on the server, not the user's device. * Can store and use secrets securely. * Can be triggered from your UI or backend processes. Why use Edge Functions with Rocket? Rocket writes the function code, prompts you for secrets, and deploys to Supabase. All from chat. ## Create or detect a function in Rocket Rocket auto-checks if backend logic is needed when you build features. If a function is required and does not exist, Rocket generates it and opens a chat popup. You will see: * The function name and a code preview. * Input fields for any required secrets. * A **Push to Supabase** button to deploy. You can also ask Rocket to create a function manually. For example: ```plaintext wrap theme={null} Create an Edge Function that sends a welcome email with Resend when a user signs up. ``` Rocket will: * Write the function code. * Prompt for the `RESEND_API_KEY`. Popup showing secure input field for Resend API key during function creation. Popup showing secure input field for Resend API key during function creation. * Show a **Push to Supabase** popup so you can deploy the function. Edge Function deployment popup with code preview, secret fields, and deploy button. Edge Function deployment popup with code preview, secret fields, and deploy button. No need to open the Supabase dashboard unless you want to review or manage functions manually. ## View functions and secrets in Supabase To review deployed functions or confirm stored secrets, use the Supabase dashboard. **View deployed functions:** Supabase dashboard showing a list of deployed Edge Functions. Supabase dashboard showing a list of deployed Edge Functions. Supabase dashboard showing Edge Function details and status. Supabase dashboard showing Edge Function details and status. **View stored secrets:** Supabase dashboard displaying secrets linked to Edge Functions. Supabase dashboard displaying secrets linked to Edge Functions. ## Add secrets securely When Rocket asks for secrets: * Paste them into the secure input fields provided. * The secrets are saved in Supabase, not Rocket. * You can update or rotate them later by asking Rocket to redeploy. ## Call your function from the app Once deployed, Rocket can automatically wire your function into your app. You can also ask for specific triggers, such as: * After user actions like signups or button clicks. * From other backend processes. To test first, ask Rocket to add a test button that triggers the function safely during development. ## Example: Send a welcome email **Prompt:** ```plaintext wrap theme={null} Send a welcome email using Resend when a new user signs up. ``` **Rocket will:** * Generate the function. * Request the `RESEND_API_KEY`. * Show a **Push to Supabase** popup. * Connect the function to your signup flow. ## Troubleshooting ### 1. Function not found What you will see: Rocket or your app reports that the function does not exist. To fix this: Rocket shows an error popup with a **Fix it** button. Click it. Rocket will check the issue and either: * Repair the function and show a **Push to Supabase** popup. * Generate a script to deploy if schema changes are needed. If the function exists but does not behave as expected, describe the problem clearly in chat. For example: ```plaintext wrap theme={null} When users sign up, they are not receiving the welcome email. ``` Rocket will inspect, apply changes, and prompt you to redeploy. ### 2. Push to Supabase failed What you will see: An error appears when you click **Push to Supabase**. To fix this: Check the error message shown in the popup. If a **Fix it** button is available, click it. Rocket will: * Fix the function. * Show a new **Push to Supabase** popup so you can retry. Push the updated function or script as prompted. Your Rocket app now runs secure server logic with Supabase Edge Functions, all created and deployed from chat. *** ## What's next? Set up file uploads and media storage with Supabase Storage. See all Supabase features available in Rocket. # Email templates Source: https://docs.rocket.new/build/connectors/supabase/email-templates Customize Supabase auth email templates in Rocket.new to brand signup confirmations, password reset messages, and magic link login emails. Customize the email templates Supabase sends for sign-up confirmation, password reset, and magic links. This guide covers editing subject lines and body content while keeping the required placeholders intact. The built-in Supabase email service is intended for development use only and has rate limits. For production apps, connect a custom SMTP provider. ## Edit email templates in Supabase 1. In your Supabase project, go to **Authentication** in the left sidebar. 2. Under **Configuration**, choose **Emails**. 3. Switch to the **Templates** tab. Supabase Email Templates tab showing configuration options for confirmation and reset emails. Supabase Email Templates tab showing configuration options for confirmation and reset emails. You should now see templates like Confirm Signup, Magic Link, and Reset Password. Click the template you want to customize, such as **Confirm signup**. You can update the following: * **Subject line**: What appears in the user's inbox. * **Email body**: The message content, written in HTML or plain text. Keep placeholders like `{{ .ConfirmationURL }}`. If removed, the email will not work as expected. Click **Save** at the bottom of the editor. Then test your update by triggering that email type in Rocket. For example, sign up to test the confirmation email. The email you receive should reflect your custom content, and all links should work correctly. ## Troubleshooting ### 1. Email still shows old content What you will see: You updated the template, but the email still shows the old message. To fix this: * Make sure you clicked **Save** in Supabase. * Clear your email client's cache (especially in webmail). * Trigger a new signup or password reset. Old links will not refresh. ### 2. Links in the email are broken What you will see: The email arrives, but the link is missing or unclickable. To fix this: * Confirm you kept the placeholder variable like `{{ .ConfirmationURL }}` in the template. * Double-check the **Site URL** in Supabase. It must match your Rocket app's live domain. Your Rocket app now sends custom, branded emails through Supabase that look right and function reliably. # Connect an existing project Source: https://docs.rocket.new/build/connectors/supabase/existing-project Link an existing Supabase project to Rocket.new to reuse the same Postgres database, auth users, and storage buckets across multiple apps. Connect multiple Rocket projects to the same Supabase database or reuse an existing backend you already have. This guide covers when sharing a database makes sense, best practices for shared setups, and how to connect an existing project. ## Why share a Supabase database Sharing a single Supabase project across Rocket apps is useful when you want to: * Power multiple frontends (e.g., customer site and admin panel) with the same data. * Keep authentication, storage, and APIs consistent across builds. * Test new UI designs without duplicating your backend. Already using Supabase? You can bring that database into Rocket and focus entirely on the UI. ## Best practices Rocket connects to your entire Supabase project, but only uses what you tell it to. Clear prompts lead to cleaner builds. * **Start with your schema** In your first prompt, mention the tables and fields you need. **Example:** * Table: **Users** → Fields: *Name, Email, Date joined* * Table: **Orders** → Fields: *Order ID, Status, Amount* * **Describe your setup** If your database is already live, say so. Rocket will not auto-detect the schema unless you explain it. * **List the pages you want** Tell Rocket exactly what you need. **Example:** ```plaintext wrap theme={null} Create a Users page showing Name and Email, and an Orders page showing Status and Amount. ``` * **One project, one purpose** Keep Rocket projects focused. For example: * One for your user-facing app * One for your internal dashboard * **When Rocket generates scripts** Only push the script if you want to update the actual database. * **Push when:** You are adding new fields or tables. * **Do not push when:** Your schema already includes everything you need. * **If multiple apps share the database** Database changes affect every connected Rocket project. If one app adds a field, others can access it, but you will need to update those UIs separately.
**Example scenario:** 1. In App A, you prompt: ```plaintext wrap theme={null} Add a Phone number field to user profiles. ``` 2. Supabase now has a new field: **Phone number**. 3. App B also connects to this database, but does not yet show the field. 4. In App B, prompt Rocket: ```plaintext wrap theme={null} Update Users page to show Phone number. ``` * **Try it in a test project first** Exploring ideas? Connect to a test Supabase project before making changes to production. The more clearly you describe your schema and goals, the better Rocket can build what you need. ## Use an existing Supabase project in Rocket From your Rocket dashboard, create a new task. Start blank or use a template. You are taken to the Rocket workspace for your new task once it is created. 1. When prompted, choose **Supabase** as your database provider. 2. Log in to your Supabase account. 3. Select the project you want to link from the list. You can connect to a Supabase project used by another Rocket app or one created outside Rocket. Rocket confirms your Supabase project is connected. Rocket uses your existing schema, tables, and auth settings. You can now design pages and components without touching the database. Your app shows live data from your Supabase project. ## Troubleshooting ### 1. I do not see my Supabase project in Rocket After signing in to Supabase, the project list is empty. * Make sure you are signed in to the correct Supabase account. ### 2. Changes in one Rocket project affect another Updating the database in one Rocket project instantly affects another. * This is expected behavior when projects share a database. * To isolate changes, connect each Rocket project to a separate Supabase project. Share data, streamline your builds, and redesign faster by connecting Rocket apps to the same Supabase database. # Google sign-in for APK Source: https://docs.rocket.new/build/connectors/supabase/google-sign-in Set up Google sign-in for Android APKs built in Rocket.new by configuring Google Cloud Console credentials and Supabase OAuth redirect URLs. Configure Google Cloud Console and Supabase so Google sign-in works in your Android APK. This guide covers creating OAuth credentials, configuring Supabase, and updating your app configuration. **APK only:** When Google auth is configured through Supabase, Google sign-in will not work in Rocket's preview or in published web apps. It will only work in a downloaded APK installed on a real device or emulator. ## Your SHA-1 Certificate Fingerprint Rocket generates a unique SHA-1 fingerprint for your app. You will need it in **Step 1c** below. **To find it:** In your Rocket project, click **Launch** in the top-right corner. Click the **APK** tab. Your SHA-1 key is shown at the top of the tab. Click the copy icon next to it. Use copy-paste only - do not type this manually. A single wrong character will prevent users from signing in. APK tab in the Rocket Launch popup showing the SHA-1 certificate fingerprint with a copy button. APK tab in the Rocket Launch popup showing the SHA-1 certificate fingerprint with a copy button. ## Step 1 - Google Cloud Console ### 1a. Create or select your project Go to [console.cloud.google.com](https://console.cloud.google.com) and sign in. Click the project selector at the top of the page. Select your existing project, or click **New Project**, give it a name, and click **Create**. ### 1b. Set up the OAuth Consent Screen This is the screen your users see when Google asks for permission to share their account details with your app. In the sidebar, go to **APIs & Services > OAuth consent screen** and click **Get Started**. Fill in **App name** and **User support email**, then click **Next**. Select **External** and click **Next**. Fill in your **Developer contact email** and click **Next**. Click **Create**. Leave the app in **Testing** mode for now. Add your own Google account as a test user so you can sign in during testing. ### 1c. Create the Android OAuth Client ID This credential identifies your app to Google during sign-in. Go to **APIs & Services > Credentials** and click **+ Create Credentials > OAuth client ID**. Set **Application type** to **Android**. Fill in the following: | Field | Value | | - | - | | **Name** | e.g. `MyApp Android` | | **Package name** | Copy the `namespace` value from `android/app/build.gradle.kts` in your project (e.g. `com.example.zebralover`) | | **SHA-1 certificate fingerprint** | Paste the value you copied from Rocket's **Launch** tab (see above) | Click **Create**, then **OK**. ### 1d. Create the Web OAuth Client ID Supabase requires a separate Web Client ID to handle authentication on your behalf. Click **+ Create Credentials > OAuth client ID** again. Set **Application type** to **Web application**. Name it e.g. `MyApp Web (Supabase)`. Under **Authorized redirect URIs**, click **+ Add URI** and enter: ```plaintext wrap theme={null} https://.supabase.co/auth/v1/callback ``` Replace `` including `<` and `>` with your **Project ID**, found in Supabase under **Settings > General**. Click **Create**. A dialog shows your **Client ID** and **Client Secret**. Copy and save both values - you will need them in **Step 2**. Keep your Client Secret private. Never share it publicly or include it in your app's code. ## Step 2 - Configure Supabase ### 2a. Enable Google Sign-In Log in to [supabase.com](https://supabase.com) and open your project. Go to **Authentication > Providers** in the sidebar. Find **Google**, click to expand it, and toggle **Enable sign in with Google** to **ON**. Paste the **Web Client ID** and **Client Secret** you saved in **Step 1d**. Click **Save**. ### 2b. Add the redirect URL In the sidebar, go to **Authentication > URL Configuration**. Under **Redirect URLs**, click **Add URL** and enter: ```plaintext wrap theme={null} com.yourcompany.appname://login-callback ``` Replace `com.yourcompany.appname` with your `namespace` value from `android/app/build.gradle.kts`. Click **Save**. ## Step 3 - Update Your App Configuration In Rocket, open **Code** and find `env.json` in the root folder of your project. Find the `GOOGLE_WEB_CLIENT_ID` field and replace the placeholder with the **Web Client ID** you copied in **Step 1d**. ```json wrap theme={null} { "SUPABASE_URL": "...", "SUPABASE_ANON_KEY": "...", "OPENAI_API_KEY": "...", "GEMINI_API_KEY": "...", "ANTHROPIC_API_KEY": "...", "PERPLEXITY_API_KEY": "...", "GOOGLE_WEB_CLIENT_ID": "your_google_web_client_id" } ``` Paste the Web Client ID exactly as copied from the **Step 1d** dialog. It ends with `.apps.googleusercontent.com`. ## You Are All Set Go back to Rocket, click **Build APK**, and download your APK once the build is complete. Google Cloud Console, Supabase, and your app are configured. Google sign-in will now work in your APK. *** ## What's next? Add more OAuth providers like GitHub, Apple, or Discord. See all Supabase features available in Rocket. # Supabase Source: https://docs.rocket.new/build/connectors/supabase/overview Add Supabase to Rocket.new to scaffold a complete backend with Postgres database, user authentication, file storage, and edge functions from chat. Tell Rocket what your app needs in chat - user accounts, a database, file uploads - and it generates the complete backend implementation. Supabase bundles PostgreSQL, auth, file storage, and edge functions into a single service. It is the foundational backend for most Rocket apps and pairs naturally with Stripe, Resend, and SendGrid. ## What you can build Sign-up, login, password reset, and protected routes. Supports email/password and social providers like Google and GitHub. Store and manage structured data with a PostgreSQL database. Control who can read or edit each row with row-level security policies. Push live changes to your UI instantly when rows are inserted, updated, or deleted in your database. Let users upload images, documents, or other files with secure access controls and organized storage buckets. Build SaaS products where each organization sees only its own data, with invite flows and role management. Run server-side logic like sending emails or calling third-party APIs without exposing secret keys to the client. ## Connect Supabase Supabase connects via OAuth - no API keys needed. Supabase is a **workspace-level** connector. No matter where you connect it (Settings, Connectors tab, or chat), it links to your entire Rocket workspace and is available across all tasks. You can connect from three places - all do the same thing. **Option 1: From workspace Settings** Click your profile in the top-left, then select **Settings**. Profile menu with Settings option highlighted. Profile menu with Settings option highlighted. Open the **Connectors** tab, click the **Supabase** card, and follow the OAuth flow. Workspace Settings showing the Connectors tab with the Supabase card. Workspace Settings showing the Connectors tab with the Supabase card. Connect once from Settings and it is available to all tasks. **Option 2: From the Connectors tab inside a task** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Supabase** card in the Connectors panel. Connectors panel showing the Supabase card. Connectors panel showing the Supabase card. Then click **Connect**. Supabase card with Connect button highlighted. Supabase card with Connect button highlighted. **Option 3: From chat** Type a prompt that mentions auth, database, or file storage. Rocket detects the intent and shows a **Connect** button inline. Rocket chat panel showing a Connect prompt for Supabase. Rocket chat panel showing a Connect prompt for Supabase. **After clicking Connect** A Supabase authorization screen opens. Sign in, review the permissions, and click **Authorize Rocket**. Supabase OAuth authorization screen. Supabase OAuth authorization screen. You will then be asked to select or create an organization and link a project. If you do not have one yet, you will be prompted to create one first. Create Supabase org. Create Supabase org. Click **Create organization**. Rocket redirects you to select it and continue. Choose your organization from the dropdown, then click **Authorize Rocket**. Supabase org selection screen. Supabase org selection screen. Once authorized, you will be prompted to link a project to this task. **Select an existing project** from the dropdown. Select Supabase project. Select Supabase project. Or click **Create new Supabase project**, enter a name, password, and region, then click **Create a new project**. Create Supabase project. Create Supabase project. To switch to a different project later, go to **Connectors** and use the Supabase project dropdown. This removes the linked project from the current task only. Your Supabase account stays connected to the workspace. 1. Click the **`...`** button in the toolbar and select **Connectors**. 2. Click the **Supabase** card. 3. Use the **Demo** dropdown to switch projects, or click **Disconnect** to unlink the current project. Supabase Connectors panel showing the project selector dropdown. Supabase Connectors panel showing the project selector dropdown. You can connect from two places. **Option 1: From Settings** 1. Tap **Settings** in the footer of the homepage. 2. Tap **Integrations**. 3. Enable the toggle next to **Supabase**. Settings icon in footer. Integrations tab. Supabase toggle enabled. **Option 2: From the Connectors tab inside a task** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Supabase** card, then tap **Connect**. Integrations tab via More. Supabase connect card. **After tapping Connect** A Supabase authorization screen opens. Sign in, review the permissions, and tap **Authorize Rocket**. Supabase OAuth screen. You will then be asked to select or create an organization and link a project. If you do not have one yet, you will be prompted to create one first. Create Supabase organization. Tap **Create organization**. Rocket redirects you to select it and continue. Choose your organization from the dropdown, then tap **Authorize Rocket**. Supabase org selection. Once authorized, you will be prompted to link a project to this task. **Select an existing project** from the dropdown. Select Supabase project. Or tap **Create new Supabase project**, enter a name, password, and region, then tap **Create a new project**. Create Supabase project. To switch to a different project later, go to **Integrations** and use the Supabase project dropdown. This removes the linked project from the current task only. Your Supabase account stays connected to the workspace. 1. Tap **More** in the header, then tap **Integrations**. 2. Tap the **Supabase** card. 3. Tap **Disconnect project**. Disconnect project on mobile. Disconnect or switch accounts from workspace Settings. ## Example prompts Once Supabase is connected, paste any of these into chat to get started. | What you want | Prompt to use | | :- | :- | | Email sign-up and login | `Add email/password sign-up and login with a protected dashboard page.` | | Database with a UI | `Create a products table with name, description, price, and image URL. Add a page to list and filter products.` | | File uploads | `Let users upload profile avatars. Store images in Supabase Storage and display them on the profile page.` | | Server-side email on sign-up | `Create a Supabase Edge Function that sends a welcome email when a new user signs up.` | | Per-user data access | `Add row-level security so users can only read and edit their own records in the posts table.` | | Social login | `Add Google and GitHub login options to the sign-up page using Supabase Auth.` | | Live data feed | `Show a live feed of new messages in the chat room using Supabase real-time subscriptions.` | | Branded emails | `Customize the Supabase confirmation email template to match my app's branding.` | | Multi-tenant data | `Scope all database queries to the current user's organization using RLS policies.` | | Password reset | `Add a forgot-password page that sends a reset link via Supabase Auth.` | ## Tips * **One Supabase project per task.** Each Rocket task links to a single Supabase project. Use separate tasks if you need separate databases. * **Use edge functions for server-side logic.** When code should not reach the client - sending emails, calling APIs with secret keys - ask Rocket to create a Supabase Edge Function instead. * **Free tier limits.** Supabase free includes two active projects, 500 MB database storage, and 1 GB file storage. See [Supabase pricing](https://supabase.com/pricing) for current limits. * **Advanced database settings live in Supabase.** Extensions, connection pooling, and RLS policy debugging are managed directly from the [Supabase dashboard](https://supabase.com/dashboard). ## Go deeper Apply Rocket-generated SQL migration scripts to keep your schema in sync. Set up file storage buckets and wire them into your app. Generate and deploy Supabase Edge Functions without leaving Rocket. Add Google, GitHub, and other social login providers. Set the correct redirect URLs so login and password resets work. Step-by-step Google sign-in setup for Android APKs. Reuse an existing Supabase project across multiple Rocket tasks. Customize auth email templates to match your app's branding. ## What's next? Add payments, subscriptions, and checkout to your Supabase-powered app. Send transactional emails - welcome messages, receipts, password resets. Full walkthrough combining Supabase, Stripe, Resend, and Netlify. # Push migration scripts Source: https://docs.rocket.new/build/connectors/supabase/push-migration-scripts Push Rocket.new-generated SQL migration scripts to Supabase to keep your Postgres schema, tables, and row-level security policies in sync. Whenever your app creates or updates tables, Rocket generates a Supabase migration script. This guide covers reviewing and pushing those scripts, avoiding issues from skipped changes, and troubleshooting common errors. Not connected yet? Follow the steps in our Supabase Integration Guide. ## When Rocket generates a script Whenever your app creates or updates tables, Rocket automatically generates a Supabase script. It appears in the chat window with a preview and two options: push or discard. Popup showing a generated Supabase script with options to preview, push, or discard. Popup showing a generated Supabase script with options to preview, push, or discard. Each script popup includes: * A clickable **script name** to preview the schema. * A **Push to Supabase** button to apply the changes. * A **Discard** button to skip the script. Rocket editor showing a migration script with push and discard options. Rocket editor showing a migration script with push and discard options. ### What happens if you skip it If you ignore the popup, the changes will not apply to Supabase. Skipping scripts can break your app. Later scripts may also fail if earlier fields or tables are missing. Rocket does not automatically retry or reapply missed scripts. Push them as they appear to keep your schema in sync. Each script depends on previous changes. Push them in order to avoid conflicts. ## Troubleshooting push errors If a script fails to push, here is how to identify and resolve common issues. ### 1. Supabase project is paused What you will see: "Your Supabase project is currently paused." Error message indicating the connected Supabase project is paused. Error message indicating the connected Supabase project is paused. To fix this: Go to [supabase.com](https://supabase.com) and open the paused project. Click **Restore Project** to reactivate it. Return to Rocket and push the script again. Restore Project button highlighted in the Supabase dashboard. Restore Project button highlighted in the Supabase dashboard. ### 2. Supabase project was deleted or disconnected What you will see: "Your connected Supabase project appears to be deleted." Error message indicating the Supabase project is deleted or disconnected. Error message indicating the Supabase project is deleted or disconnected. To fix this: In Rocket, go to **Connectors → Supabase**. Select a valid project from the dropdown. Click **Save**, then try pushing the script again. Supabase Connectors panel with project dropdown to select a valid project. Supabase Connectors panel with project dropdown to select a valid project. ### 3. Supabase is temporarily down What you will see: "Your Supabase project is temporarily unavailable." Message showing Supabase is temporarily unavailable. Message showing Supabase is temporarily unavailable. Wait a few minutes, then try pushing the script again. ### 4. The script has a schema error What you will see: An error message and a **Fix it** button. Fix it button displayed in the schema error message. Fix it button displayed in the schema error message. Click **Fix it**. Rocket will automatically repair the script and generate a corrected version. Rocket handles most schema issues, including naming conflicts, missing dependencies, and broken triggers. ## Manually running a script If you discarded a script and later want to apply it, you can run it manually in Supabase. If it is still visible, click the script name to preview it, then copy the SQL. Preview popup of a discarded script with copy option. Preview popup of a discarded script with copy option. **OR** In Rocket, open **Code**, then open the `supabase/migrations/` folder. Each script is saved there with a name and timestamp. Copy the SQL from the script you want. Rocket code view showing the Supabase migrations folder. Rocket code view showing the Supabase migrations folder. Paste the SQL into the SQL editor in your Supabase dashboard and click **Run**. Supabase SQL editor showing a pasted migration script ready to run. Supabase SQL editor showing a pasted migration script ready to run. If you change your connected Supabase project, you must run all scripts from the `supabase/migrations/` folder in sequence to match your app's schema. Every Rocket script keeps your app on track. Push as they appear to stay aligned and avoid surprises. *** ## What's next? Add backend logic deployed directly from chat. See all Supabase features available in Rocket. # Redirect URLs Source: https://docs.rocket.new/build/connectors/supabase/redirect-urls Configure Supabase auth redirect URLs for your Rocket.new app so magic links, password resets, and OAuth callbacks return users to the right route. By default, Supabase sends confirmation, password reset, and magic links to `http://localhost:3000`. This guide covers updating the Site URL in Supabase to your live app so those links work correctly for real users. ## Why you need to update redirect URLs By default, Supabase sends all user links (confirmation, reset, and magic) to `http://localhost:3000`. If you publish your Rocket app without changing this, users will be sent to a broken page. Updating this URL ensures users return to your live app after clicking any Supabase link. ## Update the redirect URL in Supabase Log in to [Supabase](https://supabase.com/) and select the project connected to your Rocket app. In the left sidebar, click **Authentication**, then open the **URL Configuration** tab. Supabase authentication settings showing the URL Configuration tab with the Site URL field. Supabase authentication settings showing the URL Configuration tab with the Site URL field. Find the **Site URL** field. Replace `http://localhost:3000` with your app's live URL. Examples: * `https://your-app-name.builtwithrocket.new` * `https://yourdomain.com` Click **Save** at the bottom of the page. Sign up using a test email and open the confirmation link. It should take you to your live Rocket app, not `localhost`. This setting applies to: * Email confirmation links. * Password reset links. * Magic links (if enabled). ## Troubleshooting ### Link still goes to localhost Clicking the link opens `localhost:3000` instead of your live app. * Double-check that the **Site URL** field in Supabase is set to your live URL and begins with `https://`. * Remove any trailing slashes. They can interfere with redirects. ### Link opens the app, but user is not logged in The link loads your app, but the user is not authenticated. * Make sure the redirect URL exactly matches your app's domain, including protocol (`https://`) and no trailing slash. * Confirm your Rocket app is connected to the same Supabase project where the URL is set. Your Supabase links now take users straight into your live Rocket app. # Social login Source: https://docs.rocket.new/build/connectors/supabase/social-auth Enable social login in Supabase for your Rocket.new app to let users sign in with Google, GitHub, Apple, and other OAuth providers securely. Enable social sign-in providers in Supabase and connect them to your Rocket app. This guide uses Google as an example. The process is similar for other providers. Social sign-in only works on your app's live preview or custom domain. It will not work inside Rocket's preview. ## Set up a social provider in Supabase The steps below use Google as an example. The process is similar for other providers. For provider-specific instructions, refer to their documentation. 1. In your Supabase project, go to **Authentication** from the left menu. 2. Click **Sign In / Providers**. 3. Select your provider. In this case, choose **Google**. List of authentication providers inside Supabase settings. List of authentication providers inside Supabase settings. The provider settings panel opens, showing fields for credentials and a callback URL. In your provider's developer console (e.g., Google Cloud Console): * Create a new OAuth 2.0 Client ID and Secret. * Under **Authorized JavaScript origins**, enter your Rocket app's live preview URL or custom domain. Do not use localhost. * Under **Authorized redirect URIs**, paste the **Callback URL** from Supabase. For Google, refer to the [Google OAuth setup guide](https://developers.google.com/identity/protocols/oauth2/web-server#creatingcred). You now have a Client ID and Client Secret from your provider. Back in Supabase, on the selected provider's settings page: 1. Paste the **Client ID** into the first field. 2. Paste the **Client Secret** into the second field. 3. Copy the **Redirect URL** shown in the third field. Make sure this exact URL is also set in your provider's console. Supabase Google provider settings including fields for Client ID, Client Secret, and Redirect URL. Supabase Google provider settings including fields for Client ID, Client Secret, and Redirect URL. Always copy the callback URL directly from Supabase. Each provider requires a unique format, and typos will break the flow. The provider appears as enabled in your Supabase list. 1. Launch your Rocket app to get the live preview URL. 2. Open the live preview or your custom domain (not localhost). 3. Click **Sign in with \[Provider]**. 4. Complete the provider's login flow. You are redirected back to your Rocket app and signed in successfully. ## Troubleshooting ### 1. OAuth error after clicking sign-in Clicking the provider button opens an OAuth error page. * Check that the **Authorized redirect URI** in the provider's console matches the Supabase callback exactly. * Ensure the **Authorized JavaScript origins** includes your Rocket live preview or custom domain. ### 2. Redirected but not logged in After login, you are redirected but remain unauthenticated. * Confirm Rocket is linked to the Supabase project where the provider is enabled. * Test only using your live preview link or custom domain, not localhost. You have successfully added social authentication to your Rocket app using Supabase. # Storage buckets Source: https://docs.rocket.new/build/connectors/supabase/storage-buckets Add Supabase Storage buckets to your Rocket.new app to upload user avatars, documents, and media with access policies configured from chat. Create and manage Supabase Storage buckets directly from Rocket chat. This guide covers creating buckets, uploading and displaying files, controlling access, and troubleshooting common issues.
Storage Buckets
## What are Supabase Buckets? Buckets are part of Supabase Storage. Think of them as folders that hold files like images, documents, videos, and more inside your Supabase project. * Files live at paths inside a named bucket. * Buckets are private by default, but you can make them public. * Rocket does not store your files. It connects your app to your bucket and wires the logic. Why use buckets? They keep files organized, secure, and fast. Hosted by Supabase and seamlessly used by Rocket. ## Create or detect a bucket in Rocket Rocket automatically checks for a Supabase bucket when a feature needs file storage. If it does not exist, Rocket creates it. You can also create and connect Supabase buckets by asking Rocket in chat. Describe what you need. **Example:** ```plaintext wrap theme={null} Create a public Supabase bucket called user-uploads for profile images under 10 MB. ``` Rocket will: * Create the bucket in your connected Supabase project. * Set the privacy level and access rules. * Configure file type restrictions (e.g. only images or documents). * Apply file size limits if specified. * Set up upload logic and permissions. * Connect the bucket to your app's backend. You do not need to open the Supabase dashboard unless you want to rename or manage buckets manually. ## Use buckets in your app Once connected, you can: * Let users upload files such as images, documents, or media. * Display uploaded content directly in your UI. * Control access based on your app's needs. Need another bucket later? Tell Rocket in chat what you need it for. It will create and connect it. ## Access control and best practices * **By default**, Rocket sets privacy and manages signed URLs. * **Want it public or private?** Say so in your prompt. * **Name wisely:** Use lowercase, hyphenated names like `reports-2025` to avoid typos or errors. If you do not specify, Rocket chooses the privacy setting based on the bucket's use. This keeps sensitive files private and public assets accessible. ## Troubleshooting ### Files do not appear in the UI What you will see: The upload completes, but the file does not show up in the app. To fix this: In chat, ask Rocket: ```plaintext wrap theme={null} Show uploaded images from user-uploads in the profile screen. ``` If Rocket shows a script or function popup, click **Push to Supabase** to apply the changes. Your Rocket app now uses Supabase Storage with organized and secure file handling set up in minutes. *** ## What's next? Add backend logic deployed directly from chat. See all Supabase features available in Rocket. # Tally Source: https://docs.rocket.new/build/connectors/tally Embed Tally forms into your Rocket.new app for unlimited free signup forms, customer feedback surveys, and lead capture flows built from chat. Describe the form you need in chat and Rocket generates the embed code, webhook listeners, and response storage automatically. Tally is free with unlimited forms and responses. ## What you can do Simple contact form with name, email, and message fields, routed to your inbox or stored in a database. Collect user feedback, feature requests, or satisfaction ratings with a quick inline form. Pre-launch waitlist that collects emails and optionally tracks referral sources. Event registrations, course enrollments, or membership applications with multi-field forms. ## Before you connect You need a Tally API key. **Get your Tally API key** from the Tally developer documentation. Go to **Settings > API Keys**, click **Create API Key**, add a name, and confirm. Copy the key to use during setup. Tally is a **task-level** connector. Each Rocket task connects to its own API key independently. ## Connect Tally You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Tally, for example `Connect Tally and embed a contact form on my landing page`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup. Rocket chat panel showing a Connect prompt for Tally. Rocket chat panel showing a Connect prompt for Tally. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Tally** card, then click **Connect**. Connectors panel showing the Tally card with a Connect button. Connectors panel showing the Tally card with a Connect button. **After clicking Connect** A popup opens. Paste your **API key** and click **Connect**. Connect Tally popup with an API key input field. Connect Tally popup with an API key input field. A green dot appears next to Tally when the connection is active. **Update or disconnect** Open [**Connectors > Tally**](#connect-tally) and click the card. Click **Edit** to update the key or **Disconnect** to remove it from this task. Tally card showing Edit and Disconnect buttons. Tally card showing Edit and Disconnect buttons. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Tally. Rocket detects the intent and shows a **Connect** button inline. Tap it to open the credentials screen. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Tally** card, then tap **Connect**. **After tapping Connect** A popup opens. Paste your **API key** and tap **Done**. A green dot appears next to Tally when the connection is active. **Update or disconnect** Go back to the **Tally** card in Integrations. Tap **Edit** to update the key or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Contact form | `Embed a Tally contact form on my /contact page with name, email, and message fields.` | | Feedback widget | `Add an in-app Tally feedback form that asks for a rating and comment.` | | Waitlist | `Create a pre-launch waitlist page with a Tally form that collects email addresses.` | | Registration | `Build a Tally event registration form with name, email, and ticket type.` | | Newsletter signup | `Add a Tally email signup form in the footer of every page.` | | Bug report | `Create a Tally bug report form with title, description, steps to reproduce, and screenshot upload.` | | Job application | `Embed a Tally job application form with name, email, resume upload, and cover letter.` | | Poll | `Add a quick Tally poll to the homepage asking users which feature they want next.` | | RSVP | `Build a Tally RSVP form for my event with name, email, and plus-one count.` | | Beta access | `Create a Tally form for beta access requests with email, use case, and company name.` | ## Tips * **Unlimited forms and responses on the free plan.** Tally's free tier is ideal for side projects and MVPs. * **Responses live in Tally.** Submissions are stored in your Tally dashboard. Use webhooks to sync data to Supabase or another database. * **Embedding options.** Rocket can embed Tally as an inline form, popup, or full-page experience. Describe the style you want in chat. * **File uploads supported.** Tally forms can accept file uploads. Uploaded files are stored in Tally's infrastructure. * **One API key per task.** Each Rocket task connects to one Tally API key independently. ## What's next? A conversational form builder with branching logic and advanced design options. Store Tally form submissions in a database for querying and display in your app. Send confirmation emails automatically when someone submits a Tally form. Track form views and submission rates with GA4 events. # Twilio Source: https://docs.rocket.new/build/connectors/twilio Send SMS from your Rocket.new app with Twilio to deliver phone verification codes, order alerts, appointment reminders, and outbound notifications. Describe the SMS flow you want in chat and Rocket generates the complete logic - message templates, sending API calls, phone number formatting, and delivery tracking. ## What you can do One-time codes for account verification, email confirmation, or identity checks. An extra layer of security with SMS-based verification during login. SMS notifications when order status changes, from confirmation to delivery. Automated SMS reminders before scheduled appointments, meetings, or events. Time-sensitive alerts for system events, threshold warnings, or custom triggers. ## Before you connect You need three values from the [Twilio Console](https://console.twilio.com/): * **Account SID** - found on the Twilio Console dashboard * **Auth Token** - found on the Twilio Console dashboard * **From Phone Number** - your Twilio number in E.164 format, e.g. `+15551234567` **How to find your Auth Token and Account SID** - Twilio Help Center Never paste your Account SID or Auth Token directly into chat. Always use the secure connection popup. Twilio is a **task-level** connector. Each Rocket task connects to its own Twilio credentials independently. ## Connect Twilio You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions SMS - for example, `Connect Twilio and send an SMS verification code when a user signs up`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens. Twilio connection prompt in the Rocket chat panel. Twilio connection prompt in the Rocket chat panel. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Twilio** card, then click **Connect**. Connectors panel showing the Twilio card with a Connect button. Connectors panel showing the Twilio card with a Connect button. **After clicking Connect** A popup opens. Enter your **Account SID**, **Auth Token**, and **From Phone Number**, then click **Connect**. Connect Twilio popup with Account SID, Auth Token, and From phone number fields. Connect Twilio popup with Account SID, Auth Token, and From phone number fields. A green dot appears next to Twilio when the connection is active. **Update or disconnect** Go to [**Connectors > Twilio**](#connect-twilio). Click **Edit** to update your credentials or **Disconnect** to remove the integration. Twilio card showing Edit and Disconnect buttons. Twilio card showing Edit and Disconnect buttons. You can connect from two places - both open the same popup. **Option 1: From chat** Type a prompt that mentions SMS. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Twilio** card, then tap **Connect**. **After tapping Connect** A popup opens. Enter your **Account SID**, **Auth Token**, and **From Phone Number**, then tap **Done**. A green dot appears next to Twilio when the connection is active. **Update or disconnect** Go back to the **Twilio** card in Integrations. Tap **Edit** to update credentials or **Disconnect** to remove it from this task. ## Example prompts | What you want | Prompt to use | | :- | :- | | Verification code | `Send a 6-digit SMS verification code through Twilio when a user signs up. Expire it after 10 minutes.` | | Two-factor auth | `Add SMS-based two-factor auth to my login flow. Send a code via Twilio after password entry.` | | Order confirmation | `Send an SMS through Twilio when a user completes checkout with their order number and total.` | | Shipping update | `Send an SMS through Twilio when an order ships with the tracking number and carrier link.` | | Appointment reminder | `Send an SMS reminder 24 hours before a scheduled appointment with date, time, and reschedule link.` | | Password reset | `Send an SMS with a one-time code for password reset. Expire the code after 5 minutes.` | | Low balance alert | `Send an SMS alert when a user's account balance drops below $5. Include a link to add funds.` | | Welcome message | `Send a welcome SMS through Twilio when a new user creates an account.` | | Flash sale alert | `Send an SMS to opted-in users announcing a 24-hour flash sale.` | ## Tips * **Pair with Supabase.** Rocket stores verification codes and user phone numbers in Supabase. Connect Supabase before Twilio for the best results. * **Trial accounts have restrictions.** On a Twilio trial account, you can only send SMS to verified numbers. Upgrade before going live. * **Phone numbers must be in E.164 format.** Always include the country code, e.g. `+15551234567`. * **SMS costs vary by country.** Twilio charges per message based on destination. Check [Twilio's pricing page](https://www.twilio.com/en-us/sms/pricing/us) for current rates. * **One Twilio account per task.** Each Rocket task connects to one set of Twilio credentials. Use different tasks for different Twilio accounts. ## What's next? Store phone numbers and verification codes. Recommended for most Twilio SMS flows. Send SMS order confirmations and payment alerts after Stripe transactions. Combine SMS notifications with email for multi-channel communication. Browse every available integration. # Typeform Source: https://docs.rocket.new/build/connectors/typeform Embed Typeform into your Rocket.new app to add conversational lead capture forms, customer feedback surveys, and interactive quizzes with logic. Describe the form you need in chat and Rocket generates the embed, response handling, and conditional logic automatically. Typeform's free plan allows only **10 responses per month**. This limit applies across all your embedded forms. Upgrade to a paid Typeform plan for unlimited responses. ## What you can do Collect names, emails, and qualifying info from potential customers with a conversational flow that feels personal. Gather product feedback, satisfaction scores, or market research data with branching logic and progress bars. Build personality quizzes, knowledge tests, or product recommendation engines with scored outcomes. Collect detailed applications for jobs, programs, or memberships with file uploads and conditional fields. Add in-app feedback widgets that let users report bugs, request features, or rate their experience. ## Connect Typeform Typeform connects via OAuth, so no API key is needed. Typeform is a **workspace-level** connector. No matter where you connect it (Settings, Connectors tab, or chat), it links to your entire Rocket workspace and is available across all tasks. You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Typeform, for example `Connect Typeform and embed a lead capture form on my landing page`. Rocket detects the intent and shows a **Connect** button inline. Click it and the OAuth flow opens. Rocket chat panel showing a Connect prompt for Typeform. Rocket chat panel showing a Connect prompt for Typeform. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Typeform** card, then click **Connect with Typeform**. Connectors panel showing the Typeform card with a Connect with Typeform button. Connectors panel showing the Typeform card with a Connect with Typeform button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **After clicking Connect** A Typeform authorization screen opens in your browser. Log in and grant Rocket access to your forms. A green dot appears next to Typeform when the connection is active. **Disconnect** Disconnect or switch accounts from workspace Settings. You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Typeform. Rocket detects the intent and shows a **Connect** button inline. Tap it and the OAuth flow opens. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Typeform** card, then tap **Connect with Typeform**. **Option 3: From workspace Settings** Open your workspace, go to **Settings**, and tap **Connectors**. Tap the **Typeform** card and tap **Connect with Typeform**. **After tapping Connect** A Typeform authorization screen opens. Log in and grant Rocket access to your forms. A green dot appears next to Typeform when the connection is active. **Disconnect** Go back to the **Typeform** card in Integrations. Tap **Disconnect** to remove the integration. ## Example prompts | What you want | Prompt to use | | :- | :- | | Lead capture | `Embed a Typeform on my landing page that collects name, email, and company.` | | NPS survey | `Add a Net Promoter Score survey after checkout using Typeform.` | | Product quiz | `Create a Typeform quiz that recommends a product based on the user's answers.` | | Contact form | `Add a Typeform contact form to my /contact page with name, email, and message fields.` | | Waitlist signup | `Embed a Typeform waitlist form that collects email and notifies me via Resend.` | | Event registration | `Build a Typeform event registration form with name, email, ticket type, and dietary preferences.` | | Bug report | `Add a floating feedback button that opens a Typeform for bug reports.` | | Job application | `Create a Typeform job application with resume upload, cover letter, and portfolio link.` | | Exit survey | `Show a Typeform exit survey when users cancel their subscription.` | ## Tips * **Responses live in Typeform.** Submissions are stored in your Typeform dashboard. Use webhooks to sync responses to Supabase or another database. * **Embedding options.** Rocket can embed Typeform as a full page, popup, slider, or inline widget. Describe the style you want in chat. * **Free plan limits.** Typeform's free tier allows 10 responses per month total across all forms. See the warning above for details. * **Branching logic stays in Typeform.** Set up conditional logic and branching inside the Typeform editor, then embed the finished form in Rocket. * **One Typeform account per workspace.** All tasks share the same connected account. ## What's next? A free alternative form builder with unlimited responses on the free tier. Store Typeform submissions in a database for querying and display in your app. Send confirmation emails automatically when someone submits a Typeform. Track form views, starts, and completions with GA4 events. # Webflow Source: https://docs.rocket.new/build/connectors/webflow Connect Webflow to your Rocket.new app and pull CMS collections, sync content, and build programmatic publishing workflows with a single prompt. Connect Webflow via OAuth and describe what you want to build in chat. Rocket reads your CMS collections, pages, and site structure as live context, bridging your visual design and your app's data layer seamlessly. Webflow is a **workspace-level** connector. Connect it once from Settings and it is available across all tasks. ## What you can do A blog collection becomes a blog page. A product catalog becomes a storefront. A team roster becomes a people directory. Push new CMS items and content updates programmatically. Automate publishing workflows without touching the Webflow editor. Read your Webflow site's pages, assets, and components to generate code that matches what already exists visually. Keep your Next.js app in sync with Webflow CMS in real time. No manual exports or copy-paste. ## Before you connect Webflow uses OAuth, so no API key is required. The connection flow has two steps: check the redirect URL and authorize Rocket access to your Webflow account, then select the specific sites or workspaces to grant access to. Rocket can only access the Webflow site you select during the connection flow. To switch sites, disconnect and reconnect with the new site selected. ## Connect Webflow You can connect from three places. All do the same thing. **Option 1: From chat** Type a prompt that mentions Webflow - for example, `Connect my Webflow site and list the Blog CMS collection`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the authorization flow. Chat showing a Connect button inline after a Webflow prompt. Chat showing a Connect button inline after a Webflow prompt. **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Toolbar dropdown with Connectors option highlighted. Toolbar dropdown with Connectors option highlighted. Click the **Webflow** card, then click **Connect with Webflow**. Connectors panel showing the Webflow card with a Connect with Webflow button. Connectors panel showing the Webflow card with a Connect with Webflow button. **Option 3: From workspace Settings** Connect once from Settings and it is available across all tasks. **Step 1: Authorize Rocket** Webflow MCP's authorization screen opens. Review what Rocket is requesting access to, check **I recognize and trust this URL**, then click **Continue**. Webflow MCP screen showing Rocket is requesting access with a Continue button. **Step 2: Select sites to authorize** On the next screen, select the Webflow sites or workspaces you want Rocket to access, then click **Authorize App**. Webflow MCP Bridge App screen showing site and workspace selection. A green dot appears next to Webflow when the connection is active. **Disconnect** Disconnect or switch sites from workspace Settings. You can connect from two places. Both do the same thing. **Option 1: From chat** Type a prompt that mentions Webflow. Rocket shows a **Connect** button inline. Tap it to open the authorization flow. **Option 2: From the Connectors tab** 1. Tap the **More** button in the header. 2. Tap **Integrations**. 3. Tap the **Webflow** card, then tap **Connect with Webflow**. **Step 1: Authorize Rocket** Webflow MCP's authorization screen opens. Review the permissions, check **I recognize and trust this URL**, then tap **Continue**. **Step 2: Select sites to authorize** Select the Webflow sites or workspaces you want Rocket to access, then tap **Authorize App**. A green dot appears next to Webflow when the connection is active. ## Example prompts | Use case | Prompt | | :- | :- | | Blog from CMS | `Pull the Blog CMS collection from my Webflow site and build a blog page with listing and detail views.` | | Product catalog | `Use the Products CMS collection from Webflow and build a product grid with filtering and a product detail page.` | | Team page | `Fetch the Team Members collection from Webflow and render a responsive team directory with photos and bios.` | | Publish CMS item | `Add a form that creates a new CMS item in the Webflow Blog collection and publishes it immediately.` | | Sync collections | `List all CMS collections from my Webflow site and show me the fields available in each one.` | | Content dashboard | `Build an admin dashboard that lets me view, create, and update CMS items across all my Webflow collections.` | ## Tips * **Select the right site during setup.** If your Webflow workspace has multiple sites, make sure you pick the one that contains the collections you want to use. * **To switch sites, reconnect.** You can only connect one Webflow site at a time per workspace. Disconnect and reconnect to switch to a different site. * **Webflow tools are powered by MCP.** Rocket connects to Webflow via a live MCP integration. It reads your real site structure and CMS data at generation time, not static exports. * **Publishing requires the right Webflow plan.** Webflow's CMS API publishing capabilities depend on your Webflow subscription. Make sure your plan supports CMS API access. * **Pair with Supabase for user-specific data.** Webflow CMS is great for editorial content. Use Supabase alongside it for user accounts, preferences, and transactional data. ## What's next? Add user auth and a database alongside your Webflow CMS content. Need a headless CMS you fully control? Strapi is a self-hosted alternative. Use Airtable as a lightweight CMS alongside or instead of Webflow collections. Deploy your Webflow-powered Next.js app to Netlify with one click. # Redesign Source: https://docs.rocket.new/build/create/commands/redesign Paste any website URL, choose a redesign command in Rocket.new Build, and rebuild the page with a fresh layout, theme, or updated content. Paste a URL, pick a redesign command, and describe your direction. Rocket analyzes the page and rebuilds it with a new look, improved conversion, or brand-matched design. Redesign commands are available when starting a new Build task from the homepage, not inside an existing project. ## How to get started Visit **[rocket.new](https://rocket.new)** and sign in. On the homepage, click **Build** to start a new Build task. Rocket homepage with Build option selected to start a new Build task. Rocket homepage with Build option selected to start a new Build task. Type `/` in the chat input. The command menu opens. Browse by category or start typing to filter, then select a redesign command. Slash command menu open on the Rocket homepage showing redesign command categories. Slash command menu open on the Rocket homepage showing redesign command categories. After selecting a command, paste the URL of the site you want to redesign into the input. Add a short description of what you want: visual style, tone, what to keep, what to change. Use the prompts below as a starting point. Chat input with a redesign command selected and a URL pasted in, ready to send. Chat input with a redesign command selected and a URL pasted in, ready to send. Choose your redesign command from the list, confirm your prompt, and click the send button or press Enter. Rocket analyzes the page and starts rebuilding it. Redesign command selected in the command menu, ready to apply to the pasted URL. Redesign command selected in the command menu, ready to apply to the pasted URL. ## Visual refresh Use these commands when you want a fresh look: modern styling, a complete overhaul, or a mobile-first layout. Redesign a website with a modern look while keeping all existing content intact. **Best for:** Sites that look dated but have good content and structure. **Try this prompt:** ```plaintext wrap theme={null} /Reimagine Website Design https://example.com - Clean, modern look. Generous whitespace, refined color palette, updated typography. Keep all existing content and structure. ``` Complete overhaul with a new design, new copy, and a fresh feel from top to bottom. **Best for:** Sites that need both a visual refresh and stronger messaging. **Try this prompt:** ```plaintext wrap theme={null} /Full Website Makeover https://example.com - Bold sans-serif typography, dark theme. Rewrite the hero and CTA copy to be more direct and conversion-focused. ``` Redesign a website with mobile as the primary experience: single-column layouts, large tap targets, thumb-friendly navigation, and graceful desktop scaling. **Best for:** Sites with high mobile traffic but a desktop-first layout. **Try this prompt:** ```plaintext wrap theme={null} /Mobile-First Redesign https://example.com - Single-column layout, large tap targets, sticky CTA at the bottom, simplified navigation. Scale gracefully to desktop. ``` ## Insight-driven redesign Use these commands when you have data (heatmaps, analytics, or conversion metrics) and want to redesign based on what is underperforming. Redesign a page layout based on heatmap data: reposition CTAs to high-attention zones, remove ignored sections, and fix drop-off areas. **Best for:** Teams with Hotjar, Clarity, or similar heatmap data who want to act on it. **Try this prompt:** ```plaintext wrap theme={null} /Redesign from Heatmap https://example.com - Primary CTA should move above the fold to the top-right attention zone. The hero section gets the most attention so make it stronger. Pricing table is the main conversion goal, make it the focal point. ``` Rebuild a page that solves clarity, CTA visibility, social proof placement, and objection flow. **Best for:** Landing pages or pricing pages with low conversion rates. **Try this prompt:** ```plaintext wrap theme={null} /Fix Conversion Issues https://example.com - CTA needs to be more prominent above the fold. Add social proof near the signup button. Simplify the pricing comparison and reduce friction in the form. ``` Rebuild a page that corrects visual hierarchy problems: make overlooked CTAs, headings, or key sections impossible to miss. **Best for:** Pages where users are not seeing or acting on the most important elements. **Try this prompt:** ```plaintext wrap theme={null} /Fix Visual Hierarchy https://example.com - The main heading should be the most prominent element. CTA needs to stand out clearly against the background. Secondary content should visually recede. Use size, color, and spacing to guide the eye top to bottom. ``` ## Brand & consistency Use these commands when you want to match a specific design language, whether your own brand system or a reference site's aesthetic. Generate a new page that visually matches the design system of a reference URL: colors, typography, spacing, and component style. **Best for:** Building new pages that need to match an existing brand or design system. **Try this prompt:** ```plaintext wrap theme={null} /Generate Brand-Matched Page https://example.com - Generate a new pricing page that matches this site's design system exactly. Same color palette, typography scale, card styles, and spacing rhythm. ``` Redesign a website to match a competitor's design style: same content, new visual language inspired by the reference site. **Best for:** Teams who want to adopt a competitor's visual direction while keeping their own content and messaging. **Try this prompt:** ```plaintext wrap theme={null} /Redesign Like Competitor https://example.com - Match the visual style of stripe.com. Dark background, clean grid, subtle gradients, precise typography. Keep all existing content and messaging. ``` ## Writing better prompts Vague prompts produce generic results. Be specific about what you want: | Instead of | Try | | :- | :- | | "Make it look modern" | "Dark background, clean sans-serif, gradient accents, ample whitespace" | | "Make it professional" | "Corporate style, navy/white palette, structured grid, subtle shadows" | | "Make it minimal" | "White background, single accent color, generous margins, no decorative elements" | Naming specific design references gives Rocket a concrete target: * "Inspired by Stripe: clean gradients, floating UI, polished tech aesthetic" * "Similar to Notion: warm, friendly, rounded corners, soft colors" * "Like Linear's dark theme: stark black, sharp typography, neon accents" Being explicit about what stays and what changes prevents Rocket from altering things you want left alone: ```plaintext wrap theme={null} KEEP: All pricing tier names, features, and prices. The annual/monthly toggle. The FAQ section. CHANGE: Replace blue with a dark theme (#0F172A background, #38BDF8 accent). Card layout instead of table. Make the recommended plan visually prominent. ``` Exact values produce exact results. Include hex codes, font names, and spacing values when you know them: `#1E293B background`, `Inter for body text`, `Cal Sans for headings`, `80px section padding`, `48px heading size`. ## What's next? Refine your redesigned page using natural language prompts. Click any element to adjust text, colors, spacing, or images directly. Make sure your rebuilt site ranks well after the redesign. Publish your redesigned page and connect a custom domain. # From an attachment Source: https://docs.rocket.new/build/create/from-an-attachment Upload PDFs, spreadsheets, CSVs, or screenshots and let Rocket.new turn your real content into a working app with structured data and UI. **Give Rocket something to work with.** Have a screenshot of an app you like? A product catalog in a spreadsheet? A blog post in Markdown? Upload it and Rocket analyzes the content, then generates an app that uses it. Pair it with a description for even better results. ## Supported attachments | Image type | How Rocket uses it | Best for | | :- | :- | :- | | **UI screenshots** | Analyzes layout, colors, and component patterns | Building something that looks like an app you saw | | **Design references** | Matches the visual style and design language | Building from Dribbble, Behance, or Pinterest inspiration | | **Mockups** | Follows the full visual design closely | Turning static designs into working code | **Supported formats:** `.png`, `.jpg`, `.jpeg` | File type | How Rocket uses it | Best for | | :- | :- | :- | | **PDF** | Extracts text, tables, and structure | Building from briefs, specs, or reports | | **Excel / CSV** | Reads rows, columns, and data relationships | Building data-driven pages, dashboards, or product listings | | **Markdown** | Parses headings, lists, and content blocks | Building content pages, blogs, or documentation sites | **Supported file types:** `.pdf`, `.xlsx`, `.csv`, `.md` **Max file size:** 5 MB per attachment. You can attach up to 5 files at a time. ## What you can build Screenshot an app and tell Rocket to build something similar with your own content and branding. **Try this prompt:** ```plaintext wrap theme={null} Build an app like this screenshot but for a pet care business. Keep the layout and navigation style but use my brand colors (teal and white). ``` Found a design you love? Upload it and Rocket analyzes the UI and builds a matching app. **Try this prompt:** ```plaintext wrap theme={null} Build a landing page that matches this design style. Use the same card layout, gradient backgrounds, and typography hierarchy. ``` Upload a static mockup and Rocket generates a fully functional app that matches the design. **Try this prompt:** ```plaintext wrap theme={null} Build this dashboard design as a working web app. Make the charts interactive, the sidebar navigation functional, and add a date range filter. ``` Upload a product catalog, pricing list, or dataset and Rocket builds pages from the real data. **Try this prompt:** ```plaintext wrap theme={null} Build a product listing page using the data in this spreadsheet. Show each product with its name, price, and description in a card grid. ``` Upload a brief, spec, or report and Rocket extracts the content to build from. **Try this prompt:** ```plaintext wrap theme={null} Build a landing page for this product using the content from this PDF. Pull the headline, features, and pricing from the document. ``` Upload a blog post, documentation page, or content outline and Rocket turns it into a styled page. **Try this prompt:** ```plaintext wrap theme={null} Turn this Markdown file into a blog post page with a header image, reading time estimate, and author byline. ``` ## Detailed walkthrough ### Before you begin **You will need:** * A [rocket.new](https://rocket.new) account, signed in. * An image (`.png`, `.jpg`, `.jpeg`) or file (`.pdf`, `.xlsx`, `.csv`, `.md`) under 5 MB. Visit **[rocket.new](https://rocket.new)** and sign in. Rocket homepage with the input field and attachment button. Rocket homepage with the input field and attachment button. Click the **+** button at the lower left of the input box and select **Add files & photos**. You can also drag and drop or paste an image directly into the chat. The + button and Add files and photos option in the Rocket input box. The + button and Add files and photos option in the Rocket input box. Describe what you want built alongside the attachment: * *"Build an app that looks like this screenshot"* * *"Create a product page using the data in this spreadsheet"* * *"Turn this Markdown file into a blog post with a clean layout"* * *"Use this PDF to build a landing page with the product features"* Press Enter. Rocket analyzes the attachment and builds from your file and prompt. If your prompt is specific enough, it starts immediately. If it is too vague, prompt intelligence asks a short set of questions first, then starts. How Rocket decides when to ask questions and what to do with your answers. ### Before you begin **You will need:** * The Rocket app (iPhone or iPad) installed and signed in. * An image (`.png`, `.jpg`, `.jpeg`) or file (`.pdf`, `.xlsx`, `.csv`, `.md`) under 5 MB. Tap the **** icon at the bottom of the chat field. Choose **Take Photo**, **Choose from Library**, or **Browse** to upload an image or file. Mobile attach button near the chat field for uploading an attachment from camera, photo library, or file browser. Describe what you want built alongside the attachment: * *"Build an app that looks like this screenshot"* * *"Create a product page using the data in this spreadsheet"* * *"Turn this Markdown file into a blog post with a clean layout"* * *"Use this PDF to build a landing page with the product features"* Tap **Send**. Rocket analyzes the attachment and builds from your file and prompt. If your prompt is specific enough, it starts immediately. If it is too vague, prompt intelligence asks a short set of questions first, then starts. How Rocket decides when to ask questions and what to do with your answers. ## Prompt cookbook Pair these prompts with your uploaded attachment: | Goal | Prompt | | :- | :- | | Exact recreation | `Build an app that looks exactly like this image. Match the layout, colors, and components.` | | Style match, new content | `Use this design style but build a CRM dashboard for tracking sales leads and deals.` | | Mockup to app | `Turn this mockup into a fully functional web app with working navigation and interactive elements.` | | Data-driven page | `Build a product listing page from this spreadsheet with name, price, and description for each item.` | | Content page | `Turn this Markdown file into a styled blog post with a header, reading time, and share buttons.` | | PDF to landing page | `Build a landing page using the features and pricing from this PDF document.` | | Different branding | `Use this design layout but replace all content and branding for my company called "Flowboard."` | | Multiple screens | `This image shows 3 screens of my app. Build all of them with navigation between each screen.` | ## Tips for better results * **Clear images produce better results.** High-contrast screenshots and crisp mockups outperform blurry or low-resolution images. * **Add context in your prompt.** The attachment shows Rocket *what* to work with. Your prompt tells it *what to build* and *who it is for*. * **Real content beats placeholders.** Upload your actual spreadsheet, document, or screenshot instead of describing the data in text. * **Crop out noise from images.** Remove browser chrome, desktop wallpaper, or unrelated UI elements before uploading. ## What's next? Refine your app using natural language. Change colors, add features, fix bugs. Click any element to change text, colors, layout, and spacing directly. Add payments, databases, AI, email, and more with a single prompt. Publish to the web with one click and connect a custom domain. # From an idea Source: https://docs.rocket.new/build/create/from-an-idea Describe an app in plain language and Rocket.new generates the UI, routes, and logic - ideal for turning a rough concept into a working prototype. ## What you can build Subscription-based apps with dashboards, user accounts, and billing. Product catalogs, shopping carts, and checkout flows. Chat interfaces, content generators, and smart search tools. Data dashboards, admin panels, and CRM systems. Marketing sites, portfolios, blogs, and landing pages. Native mobile apps for iOS and Android with Flutter. ## How it works When you submit a prompt, Rocket scores it for clarity before starting work. * **Clear prompt.** Rocket starts building immediately. * **Vague prompt.** Rocket asks a short set of targeted questions first, then starts once it has enough to go on. The framework is assigned automatically based on your platform. You cannot change the framework after the task is created. ### Default frameworks | Platform | Framework | | :- | :- | | Web | Next.js | | Mobile | Flutter | ## Detailed walkthrough ### Before you begin **You will need:** * A [rocket.new](https://rocket.new) account, signed in. Visit **[rocket.new](https://rocket.new)** and sign in. On the homepage, click **Build** to start a new Build task. Rocket homepage with Build option selected to start a new Build task. Rocket homepage with Build option selected to start a new Build task. After clicking **Build**, Rocket shows category tabs below the input: **Landing page**, **Dashboard**, **Website**, **SaaS**, **Mobile App**, and **E-commerce**. Click a tab to see example prompts, then click one to auto-fill it into the input. Or type your own idea directly. Build category tabs with example prompt suggestions. A suggestion is highlighted and auto-fills into the input. Build category tabs with example prompt suggestions. A suggestion is highlighted and auto-fills into the input. Once your prompt is in the input field, click the **send** button or press Enter. Prompt filled in the input box with the send button highlighted. Prompt filled in the input box with the send button highlighted. If your prompt is specific enough, Rocket skips this step and starts building right away. If it is too vague, prompt intelligence asks a short set of targeted questions about platform, audience, and must-have features. Answer them and Rocket starts immediately. How Rocket decides when to ask questions and what to do with your answers. Rocket starts building immediately and shows progress in the chat. You will see each screen being generated with its status as it completes. If generation fails, click **Retry**. If it keeps failing, simplify your prompt and start a new build. ### Before you begin **You will need:** * The Rocket app (iPhone or iPad) installed and signed in. Open the **Rocket** app on your iPhone or iPad and make sure you are signed in. Mobile app home screen with the idea input field ready to receive a prompt. Type your idea in the chat field. Include the purpose, platform, and key features. Example: *A recipe app for home cooks. Browse by cuisine, save favorites, and follow step-by-step cooking mode. Mobile app for iOS and Android.* Mobile chat field where you enter your app idea for Rocket to build from. If your prompt is specific enough, Rocket skips this step and starts building right away. If it is too vague, prompt intelligence asks a short set of targeted questions about platform, audience, and must-have features. Answer them and Rocket starts immediately. How Rocket decides when to ask questions and what to do with your answers. Rocket starts building immediately and shows inline progress in the chat. You will see it working through each file in real time, generating components, merging code, and writing logic. Inline build progress in the mobile app showing current file and action. If generation fails, tap **Retry**. If it keeps failing, simplify your prompt and start a new build. ## Prompt cookbook Copy and paste these prompts to get started fast: | What you are building | Prompt | | :- | :- | | Personal portfolio | `Build a portfolio site with a hero section, project gallery with filters, an about page, and a contact form.` | | Habit tracker | `Create a habit tracker web app where users add daily habits, check them off, and see a weekly streak calendar.` | | Restaurant ordering | `Build a restaurant menu web app with categories, item details, a cart, and a checkout flow with delivery address input.` | | Social feed | `Create a social media feed web app with posts, likes, comments, user profiles, and a follow system.` | | Booking system | `Build a salon booking web app with service selection, time slot picker, confirmation page, and booking history.` | | Quiz app | `Create a trivia quiz mobile app with multiple categories, timed questions, a score tracker, and a leaderboard.` | | Blog platform | `Build a blog web app with an article editor, categories, tags, featured images, and a reading list.` | | CRM dashboard | `Create a CRM web app with a contact list, deal pipeline, activity log, and email integration.` | ## Tips for better results * **Specify the platform.** Say "web app" or "mobile app" so Rocket does not need to ask. * **Mention the purpose.** "Build a booking system for a hair salon" gives Rocket more context than "build a booking app." * **Include key features.** List the 3-5 most important features upfront. Rocket can add more later. * **State your preferences.** If you want dark mode, specific colors, or a particular layout style, say so in your first message. * **Start lean, then iterate.** Describe a focused core and add features through chat after the initial build. This produces cleaner results than asking for everything at once. ## What's next? Refine your app using natural language. Change colors, add features, and fix bugs through conversation. Click any element to change text, colors, layout, and spacing directly. Add payments, databases, AI, email, and more with a single prompt. Publish to the web with one click and connect a custom domain. # From GitHub Source: https://docs.rocket.new/build/create/from-github Connect a Next.js TypeScript repository from GitHub and keep iterating with Rocket.new AI - chat edits sync back to your existing codebase. Bring your existing code into Rocket. Clone a Next.js TypeScript repository from GitHub and pick up where you left off. Rocket imports your task files, installs dependencies, and sets up a live preview so you can start iterating with AI immediately. This is available for **Next.js + TypeScript tasks only**. ## Prerequisites Before importing, make sure you have: * A [Rocket](https://rocket.new) account * A GitHub account with access to the repository you want to import * A **Next.js project using TypeScript** (other frameworks and JavaScript-only projects are not supported) If you have not connected GitHub to Rocket yet, you will be prompted to authorize during the import flow. See [GitHub connector](/build/connectors/github/overview) for details on permissions and setup. ## Import a repository Visit [rocket.new](https://rocket.new), sign in, and click the **Build** tab below the input. Click the **+** button at the lower left of the input box and select **Clone from GitHub**. Rocket homepage with the + menu open, highlighting the Clone from GitHub option. Rocket homepage with the + menu open, highlighting the Clone from GitHub option. If you have not connected GitHub yet, Rocket will prompt you to authorize. Follow the connector setup guide for details. A dialog opens listing your GitHub repositories. Select the Next.js TypeScript task you want to import and click **Submit**. GitHub repository selection dialog with a dropdown to pick a repository and branch. GitHub repository selection dialog with a dropdown to pick a repository and branch. Rocket validates the repository, clones it, installs dependencies, and generates a live preview. This may take a moment depending on task size. Once the preview is ready, use the chat to iterate on your imported task just like any other Build task. ## What gets imported | Imported | Not imported | | :- | :- | | All task files and folders | GitHub Issues and Pull Requests | | `package.json` dependencies | CI/CD workflow files (GitHub Actions) | | Environment variable keys and values | Git history (only the latest state is imported) | | Task structure and routing | Branch-specific content (only the default branch) | Environment variable values from your `.env` file are imported automatically. Review them under [Environment variables](/build/editor/env-variables) after importing. ## After importing Once your task is in Rocket, you get full two-way sync with GitHub: * **Rocket to GitHub:** Rocket pushes changes to the `rocket-update` branch and automatically opens a pull request to `main` for each batch of code edits (manual changes, visual edits, and AI-generated). * **GitHub to Rocket:** Pull in the latest state of `main` made in your local IDE or by teammates without leaving Rocket. Learn how two-way GitHub sync works for Next.js TypeScript projects. ## Disconnect from GitHub GitHub is connected at the workspace level. Disconnecting removes the GitHub link for your entire Rocket account. Disconnect or switch accounts from workspace Settings. Your task files in Rocket remain intact after disconnecting. To reconnect, go through the same steps and authorize a GitHub account. ## When to use this vs other starting methods | Starting method | Best for | | :- | :- | | **From GitHub** | You already have a Next.js TypeScript codebase and want to enhance it with AI | | [From an idea](/build/create/from-an-idea) | Starting fresh with a plain-language description | | [Redesign](/build/create/commands/redesign) | Rebuilding or redesigning an existing website | | [From a template](/build/create/using-templates) | Launching quickly from a pre-built starting point | ## What's next? Push and pull changes between Rocket and GitHub. Review and manage your environment variables after importing from GitHub. Iterate on your imported project using natural language. Browse and edit your project files directly. # Share with Remix Source: https://docs.rocket.new/build/create/share-with-remix Send a remix link so anyone can clone your Rocket.new Build task into their own workspace and customize the full app on their account. **Turn any Build task into a shareable starter.** Generate a remix link for a Build task and share it with anyone. Recipients get an instant clone of your entire app, including screens, code, and integrations. They can customize the clone with their own credentials. Remix is available for Build tasks only. Creating a remix link requires a paid plan (Pro or above). Anyone with the link can clone the Build task for free. ## Use cases Build an app for a client and share the remix link. They clone the Build task, add their own API keys, and own their copy. Create reusable starter Build tasks for common app types and share them with your team or community. Share working demos of your apps. Viewers can clone and explore the full codebase. Build example apps for courses or tutorials. Students clone the Build task and follow along with their own copy. ## What is included in a remix | Included | Not included | | :- | :- | | All screens and pages | Environment variables and API keys | | Complete codebase | Deployment settings | | Integration configuration (which services are connected) | Domain configuration | | UI components and styling | | | Navigation and routing | | API keys and integration credentials stored in environment variables are automatically stripped from remix links. Recipients must add their own credentials after cloning. **Hardcoded secrets are not stripped.** If you have pasted API keys, tokens, or passwords directly into your code rather than storing them in environment variables, Rocket cannot detect or remove them. Always use environment variables for secrets. ## Detailed walkthrough ### Before you begin **You will need:** * A [rocket.new](https://rocket.new) account, signed in. * A Build task you want to share. ### Creating a remix link Open the Build task you want to share. Click the **Remix** icon in the top toolbar. A popup appears explaining that Rocket will create a copy of your task that anyone can use and build on. Click **Remix** to generate the link. Rocket task editor with the Remix task popup open, showing the Remix button. Rocket task editor with the Remix task popup open, showing the Remix button. Rocket generates a unique shareable URL. Click **Copy link** and share it with anyone. Remix task popup showing the generated remix URL with a Copy link button. Remix task popup showing the generated remix URL with a Copy link button. Anyone with the link can clone your Build task to their Rocket account, even if they are on a free plan. ### Using a remix link Click the remix link shared with you. You will see a preview page with the task title, description, view count, and a live preview of the app. Remix link preview page showing the task title, description, view count, Remix in Rocket button, and a live preview of the app on the right. Click **Remix in Rocket** to clone the entire Build task to your account. **Success check:** You will be redirected to your new Build task with a confirmation message. After cloning, add any required API keys or credentials for integrations used in the app (Supabase, Stripe, OpenAI, etc.). Environment variables and integration keys are automatically removed from remix links for security. You must provide your own. **Mobile app limitation:** Remix links are not available on the mobile app. Use the web browser to create and use remix links. ## What's next? Customize the cloned Build task using natural language. Add your own API keys to activate the integrations. Browse Rocket's built-in template library for more starting points. Publish the app to the web once you have made it yours. # Start from a template Source: https://docs.rocket.new/build/create/using-templates Start from a Rocket.new template, customize it through chat, and ship a working app - browsing and remixing templates consumes zero credits. Pick a template. Customize it with chat. Ship a production-ready app without spending a single credit. **Zero credits consumed.** You only spend credits when you start customizing through chat. The template itself is free. ## When to use a template | Scenario | Best starting method | | :- | :- | | You can describe exactly what you want | [From an idea](/build/create/from-an-idea) | | You want a working app now and will customize later | **Templates** (you are here) | | You have a screenshot, PDF, spreadsheet, or other file | [From an attachment](/build/create/from-an-attachment) | Templates work best when your project fits a common pattern like SaaS, landing pages, dashboards, or e-commerce, and you want to iterate on something real rather than describe it from scratch. ## How to use a template **You will need:** A [rocket.new](https://rocket.new) account, signed in. You can reach templates three ways: * **Browse-first:** Open **Templates** in the sidebar and pick from the full library * **Prompt-first:** Describe what you are building and Rocket suggests the closest match * **Inline on the homepage:** Click the **Build** tab and scroll down to **Relevant templates** ### Explore templates manually Hover over the left edge of the screen. The sidebar slides open. Click **Templates**. Sidebar open with Templates option highlighted. Sidebar open with Templates option highlighted. Templates are grouped by category: **Technology**, **Professional Services**, **Health & Medical**, **Blog & Editorial**, **Retail & E-Commerce**, **Food & Beverage**, and more. Search at the top or click a category to browse. See the [template library](/learn/templates/overview) for every category. Template library showing a grid of categories. Template library showing a grid of categories. Hover over a card to reveal the link icon and preview it live in the browser before committing. Individual template cards inside a category with a live preview link icon. Individual template cards inside a category with a live preview link icon. Click a template card to open the preview modal. Hit **View in full screen** to interact with it, then click **Use this template** when ready. Template preview modal with Use this template button. Template preview modal with Use this template button. **Done.** You land in chat with your template loaded and ready to customize. ### Get template suggestions while prompting Describe what you want to build. If your prompt matches a known pattern, Rocket suggests a template before it starts generating. Click **Use Template** to start from it, or **Continue without a template** to build from scratch. Template suggestion modal showing a Spotify Clone card with Use Template and Continue without a template buttons. Template suggestion modal showing a Spotify Clone card with Use Template and Continue without a template buttons. Zero credits. Templates are the fastest path to a production-ready app. **You will need:** The Rocket app (iPhone or iPad) installed and signed in. Two ways to reach templates: * **Browse-first:** Scroll to **Templates** on the home screen and pick from the library * **Prompt-first:** Describe what you are building and Rocket suggests the closest match ### Explore templates manually Scroll down on the home screen past **My Projects** to find the **Templates** section. Tap **View all** for the full library, or search at the top. Mobile home screen showing templates section after scrolling down. Tap any template to see details, included pages, and layout screenshots. Mobile template detail view showing screenshots and included pages. Tap **Use this template**. Rocket opens chat with the template loaded and ready to customize. **Done.** You are in chat, ready to iterate. ### Get template suggestions while chatting Describe what you want to build. If your prompt matches a known pattern, Rocket surfaces a template card right in the conversation. Preview it and use it the same way as when browsing. Zero credits. Templates are the fastest path to a production-ready app. ## How to customize a template Your template is a full Rocket project. Iterate on it the same way you would any app: **Try this prompt:** ```plaintext wrap theme={null} Update the color scheme to use #1E40AF as the primary color and #F8FAFC as the background. Change the logo text to "Flowboard" and update all placeholder content with my brand copy. ``` **Try this prompt:** ```plaintext wrap theme={null} Add a pricing page with three tiers: Free, Pro ($19/month), and Enterprise (contact us). Include a feature comparison table and a FAQ section below. ``` **Try this prompt:** ```plaintext wrap theme={null} Connect Stripe for payments and Supabase for user accounts. Add a login/signup flow and protect the dashboard page behind authentication. ``` See [Connectors](/build/connectors/overview) for the full list of supported services. **Try this prompt:** ```plaintext wrap theme={null} Change the navigation from a top bar to a collapsible sidebar. Move the user profile menu to the bottom of the sidebar. ``` ## What's next? Change the layout, colors, content, and features by describing what you want. Wire up payments, databases, AI, email, and analytics in one prompt. Click any element to tweak it directly, including text, colors, spacing, and layout. Ship your customized template to the web with one click. # Advisor Agent Source: https://docs.rocket.new/build/editor/advisor-agent Rocket's built-in senior architect that diagnoses root causes, resolves error loops, and makes architectural decisions so the coding agent never gets stuck. Every AI coding agent has a failure mode. It tries to fix a bug, fails, tries again, and starts recycling the same approaches. It gets stuck and it doesn't know it. The Advisor Agent is a senior architect sub-agent built into Rocket's code generation pipeline. It runs on the most capable model available (Claude Opus), operates in read-only mode, and is invoked specifically in the moments where the coding agent's reasoning is not enough. ## What the Advisor does The Advisor never writes a line of code. It returns structured analysis: root causes, a recommendation, numbered implementation steps, and a trade-off table. Then the coding agent executes. When the coding agent has failed to fix a bug after 2+ attempts, it escalates. The Advisor identifies the root cause rather than the symptom the coding agent was already chasing. When multiple valid approaches exist with real trade-offs, the Advisor reads the project structure, weighs the options, and recommends the one that fits your codebase. Before sweeping changes, the Advisor maps what breaks. It identifies what needs to change, in what order, and what the risks are. Before finalizing complex generated code, the Advisor checks it for correctness, edge cases, and failure modes. ## How it helps you No more watching an agent loop on the same broken fix three times while your progress bar resets. When something is genuinely hard, the Advisor gets pulled in before the loop forms. You see a result, not repeated attempts. Architectural choices compound. A wrong call on how to structure auth, handle database seeding, or wire an integration creates technical debt that shows up weeks later. The Advisor treats these decisions with the weight they deserve, reading your actual codebase rather than applying a generic template. ## How it helps the coding agent An agent that has tried the wrong approach twice and tries it a third time is not just wasting time. It is potentially making the codebase harder to fix. The Advisor stops that pattern. The coding agent is optimized for action: writing code, running tools, generating files. The Advisor is optimized for analysis: reading, inferring, comparing. Keeping these concerns separated produces better outcomes than asking a single agent to do both under time pressure. Running Claude Opus on every token of a coding session is expensive. Running it on the specific moments where architectural reasoning determines whether the session succeeds is how you get the intelligence without the cost. The Advisor never advises from memory or pattern matching. Every recommendation cites specific file paths, field names, and constraint names. The coding agent does not get generic advice. It gets a roadmap. ## Real example: Supabase auth fix A user asked to make their app fully dynamic with Supabase auth. The coding agent created demo accounts by writing directly to `auth.users` and `auth.identities` via SQL migrations. Login returned "Invalid login credentials". The agent tried two fixes. Both failed. On the third attempt, the Advisor was invoked. It read both migration files in full and identified four root causes: The `auth.identities.id` field must be a new UUID, not the user's UUID. The `provider_id` for the email provider must be the user's UUID, not their email address. Both migrations got both fields backwards. GoTrue v2.116.0 restructured the identities table in late 2023. The `ON CONFLICT` clause targeted `(provider, provider_id)` but PostgreSQL's constraint matching is column order sensitive. The actual constraint is `(provider_id, provider)`. The conflict clause silently failed to match. Both migrations wrapped everything in `EXCEPTION WHEN OTHERS THEN RAISE NOTICE`. Every SQL error was swallowed silently and reported as a successful "skip". The entire SQL approach was fragile. Supabase updates GoTrue independently. The correct approach is `supabase.auth.admin.createUser()` which routes through GoTrue's own logic and is always schema correct regardless of version. The coding agent followed the steps. Login worked. Not another attempt at the same fix, but a fundamentally different diagnosis. ## What's next? Build and iterate on your app through natural language chat. Learn about agent inactivity and how to resume. Get the most out of Rocket with effective prompting patterns. Fix common build errors and unexpected behavior. # Agent sleeping Source: https://docs.rocket.new/build/editor/agent-sleeping Resume paused sessions by waking the Rocket.new agent - learn why the agent sleeps after inactivity and how to continue your build instantly. The Rocket agent automatically sleeps after around **10–15 minutes of inactivity** in a task. When this happens, a message appears in the chat and task features pause until you resume. No data is lost. ## What pauses during sleep When the agent is sleeping, you will see this message in the chat: > **The agent is sleeping due to inactivity** Agent sleeping message in Rocket chat Agent sleeping message in Rocket chat The following are paused while the agent sleeps: * Chat input * Code generation and editing * Visual design editing * Live preview * Launching your app * GitHub push and pull * Background processing ## Wake up the agent Click **Wake Up Agent** in the chat. The agent resumes immediately and all Build features become available again: chat, code generation, live preview, and any other active functionality. Waking the agent does not affect your task history, files, or outputs. Everything is preserved exactly as it was. ## Why this happens The agent sleeps automatically to conserve server resources. This typically happens when you step away for 10–15 minutes during a Build session. Your task, messages, and generated content are all intact when you return. Sleep only affects the active session, not your saved work. ## What's next? Fix common build errors and unexpected behavior. Answers to common questions about building with Rocket. # APIs Source: https://docs.rocket.new/build/editor/apis Import endpoints from Postman collections, cURL commands, or Swagger specs into Rocket.new and bind responses to UI components automatically. Import API definitions from Postman, cURL, Swagger, or OpenAPI specs. Rocket generates all the connection code, error handling, and data mapping. You pick the endpoint and the UI element. API imports are only available on the web browser. They are not supported in the Rocket mobile app. ## What you can connect Stripe, PayPal, or any payment API with checkout flows, subscriptions, and invoicing. Supabase, Firebase, your own REST API, or any backend that exposes endpoints. Weather APIs, maps, social media, shipping, SMS, email, and any service with a REST API. Internal microservices, staging environments, or any custom backend you have built. ## Before you start You need one of the following: * A Postman API key and workspace * A working cURL command * A Postman collection export file (`postman.json`) * A Swagger or OpenAPI spec (JSON or YAML) You also need any environment variables your API definitions reference, such as `base_url` or `accessToken`. Learn how to manage secret keys as environment variables. ## Open the APIs panel Click the **`...`** button in the preview toolbar and select **APIs**. Toolbar dropdown with APIs option highlighted. Toolbar dropdown with APIs option highlighted. ## Import APIs In the APIs panel, open the **Select an API** dropdown and click **Add APIs** to open the import dialog. Pick one of four import methods. Use this when your APIs already live in a Postman workspace. **Get your Postman API key:** Visit Postman's documentation to learn how to generate your API key. 1. Click your avatar in the Postman header, then click **Settings**. 2. Go to **API keys** and click **Generate API Key**. 3. Enter a name and copy the key. Your Postman API key provides access to any Postman data you have permissions for. Keep it private and rotate it if you believe it has been exposed. **Import into Rocket:** 1. In **Add APIs**, select the **Postman** tab. 2. Paste your **Postman Key**. 3. Select the **workspace**. 4. Click **Submit**, then select the collections or folders you want to add. 5. Click **Add APIs**. Postman import tab showing key input and workspace selection. Postman import tab showing key input and workspace selection. Use this when you have a working request you can paste. 1. In **Add APIs**, select the **cURL** tab. 2. Paste the full cURL command. 3. Click **Add API**. cURL import tab with command input field. cURL import tab with command input field. Make sure the cURL includes the correct URL, headers, and auth format. If it uses environment variables, map them to your project's variable format after import. Use this when you have a Postman export file. 1. In **Add APIs**, select **Upload JSON**. 2. Drag and drop or upload your `postman.json`. 3. Click **Submit**. Upload JSON tab with file upload area. Upload JSON tab with file upload area. Use this when your backend provides an OpenAPI spec. 1. In **Add APIs**, select **Swagger**. 2. Drag and drop or upload your Swagger JSON or YAML file. 3. Click **Submit**. Swagger import tab with file upload area. Swagger import tab with file upload area. If your spec defines multiple servers, confirm the base URL matches your environment. ## Integrate an API into a UI element This connects an endpoint to a screen element so Rocket generates code tied to a real component. ### Select a route and API In the APIs panel, choose the **route** (the screen or page path, for example `/dashboard` or `/settings`) where the API should run, and select the API from the **Select an API** dropdown. Then click **Integrate API**. Route selection and API dropdown with Integrate API button. Route selection and API dropdown with Integrate API button. ### Click a UI element After clicking **Integrate API**, element selection activates. A tag bar appears at the top of the preview showing the available elements. Click the UI element where you want to attach the API. Element tag bar showing div and span options for API attachment. Element tag bar showing div and span options for API attachment. Full screen view of element selection with API dropdown and preview visible. Full screen view of element selection with API dropdown and preview visible. Attach to a stable container element that is always present on the screen. Avoid conditional elements that may not exist on initial render. ### Configure the trigger After selecting the element, the **When to call this API?** dialog opens. Fill in: * **When should this API run** (the trigger, e.g. "On page load", "On click of Submit button") * **Pre API call Instructions** (validation, auth checks, token refresh) * **Post API call Instructions** (store response, handle errors, navigate on failure) When to call this API dialog with trigger, pre-call, and post-call instruction fields. When to call this API dialog with trigger, pre-call, and post-call instruction fields. Click **Submit** and Rocket generates the integration code. **Pre-call tips:** * Validate required variables exist (base URLs, IDs, query params) * Check auth state (token exists, not expired) * Refresh token here if possible **Post-call tips:** * Store response data into a named state variable your UI can bind to * Cache successful responses to improve performance * Handle error states with clear user feedback * Navigate when needed (e.g. redirect to login on 401) Clear pre and post-call instructions help Rocket generate robust error handling code. ## Edit an API response To update a mock or expected response for an API, open the **Add/Edit API Response** dialog for that endpoint and paste the updated JSON, then click **Update**. Add/Edit API Response dialog showing JSON response content. Add/Edit API Response dialog showing JSON response content. ## Troubleshooting Import did not complete, or you imported into a different project. Reopen **Add APIs** and verify your source: check that your Postman API key is valid, that your Postman workspace contains collections, and that you are importing into the correct project. The imported definition includes placeholders. Map them to known state variables or environment variables. Set any placeholder like `accessToken` to reference your stored token value and confirm the request uses the correct auth scheme (e.g. `Authorization: Bearer `). Response data is likely not stored to the variable your UI is bound to. Update the Post API call instructions to store the response, then bind your UI list or widget to that variable. Token is missing, expired, or not attached correctly. Fix in Pre API call instructions and ensure auth header formatting is correct (e.g. `Bearer `). ## What's next? Build and iterate on your app through natural conversation. Add scripts, embeds, and UI components from external sources. Some services have dedicated integrations that are simpler than raw API imports. Browse and edit your project's source files directly. # Chat with Rocket Source: https://docs.rocket.new/build/editor/chat 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. Rocket chat interface showing a message thread with live app preview. **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](/getting-started/credits). For faster, targeted edits on the web, use [slash and @ commands](/build/editor/commands) directly from the chat input. ## Attachments Attach a file to give Rocket a visual reference or content to work with. 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. Chat input with the + button attachment picker open showing Add files & photos option. Choose a file from your device. Supported file types: images (`.png`, `.jpg`, `.jpeg`, `.ico`), PDFs, Excel (`.xlsx`), CSVs, and Markdown (`.md`). You can attach up to **5 files per message**. Each file must be under **5 MB**. 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. 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 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" 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 The web browser provides the full experience: * [Slash and @ commands](/build/editor/commands) for targeted edits * [Visual edit mode](/build/editor/visual-edit) for direct manipulation * [Image generation](/build/editor/image-generation) for AI-generated images and SVGs * [Preview](/build/editor/preview) for testing on different screen sizes * [Version history](/build/editor/versions) with code diff, rollback, plus labels and per-version launch (web apps only) * [Code tab](/build/editor/code) for browsing and editing files directly * Smart suggestions for next steps * Full project settings and integrations access 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. Commands, visual edit, and advanced project settings are only available in the web browser. ## Tips 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" | Break complex requests into individual messages. Rocket is more accurate when the scope is focused. 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" [Slash and @ commands](/build/editor/commands) are faster and use fewer credits than describing everything from scratch. Screenshots and mockups help Rocket match exactly what you have in mind, especially for layout and design changes. ## What's next? Use slash and @ commands for precise, targeted edits. Click any element to change it directly without writing a prompt. Create AI-generated images and SVGs placed directly in your app. Test your app on different screen sizes before deploying. Compare, roll back, label, and launch specific versions. Browse and edit your project files directly in the code view. Store API keys and secrets your app needs at runtime. Import and attach APIs to your UI elements. # View and edit code Source: https://docs.rocket.new/build/editor/code Open the file tree in the Rocket.new Build editor to inspect project source, tweak components, and make direct code edits alongside AI changes. Code view lets you browse your project's source files, make direct edits, view live build logs, and download or push your code. All without leaving the Rocket editor. ## When to use code view | Use code view when | Use chat instead when | | :- | :- | | You need to edit a specific line of code | You want to add new features or pages | | Managing API keys and environment variables | You want to change design or layout | | Debugging with build logs | You need broad changes across many files | | Reviewing what Rocket generated | You are not sure what to change | ## How to open Click the **` Code`** button in the top toolbar - the same bar as **Preview** and **Full screen**. This switches the main panel to code view. Rocket code editor with file explorer and output panel visible. Rocket code editor with file explorer and output panel visible. ### Browse your files The **Explorer** panel on the left shows your full project file tree. Click any file to open it in the editor. * Use the **Search files...** bar at the top of the Explorer to find files by name - results filter as you type * Collapse the Explorer using the **collapse icon** in the top-right corner of the panel File tree expanded in Rocket code view. File tree expanded in Rocket code view. ### Edit and save a file Click a file to open it in the editor. Make your changes, then use the **save bar** at the bottom: * Click **Save** to apply changes * Click **Discard** to undo them Rocket editor with unsaved changes and save/discard options. Rocket editor with unsaved changes and save/discard options. Editing configuration files like `tailwind.config.js` or `package.json` can affect how your app compiles or behaves. If something breaks after a config edit, you can [roll back to a previous version](/build/editor/versions). ### Environment variables Your environment files store sensitive values like API keys: * **Web apps** use `.env` * **Mobile apps** use `env.json` You can edit these files directly in code view. For a full guide on adding and managing variables: Manage environment variables ### Build logs The **Logs** panel at the bottom of the screen shows live output as you edit and save. It has a collapse arrow on the right to hide it when you need more editor space. Logs update automatically - no commands needed. Use the logs to: * Monitor builds in real time * Catch and diagnose errors * Confirm that a save was applied successfully Live log output in Rocket showing build events and errors. Live log output in Rocket showing build events and errors. ### Toolbar actions The top-right of the code view toolbar has quick actions: * **Refresh** - Reload the editor and file tree * **Download** - Export your app as a `.zip` file to open locally (paid plan required) * **GitHub** - Push your project to a GitHub repository Set up GitHub and learn about two-way code sync ### Download your code Export your entire project as a `.zip` archive so you can open it in your own IDE, run it locally, run tests, or hand it off to another developer. Rocket code editor showing download button in toolbar. Rocket code editor showing download button in toolbar. Downloading source code requires a **paid plan (Pro or above)** and is only available on the web browser. Mobile app users can browse files and push to GitHub, but code download is not supported. Open your task in the Build editor and click the **` Code`** button in the top toolbar (the same bar as **Preview** and **Full screen**). The main panel switches to code view. Rocket code editor with file explorer and output panel visible. Rocket code editor with file explorer and output panel visible. Click the **Download** icon in the top-right of the code view toolbar. Rocket packages your full project - source files, configuration, and environment variable templates - into a single `.zip` archive. If you are on the Free plan, the button prompts you to upgrade. See [Pricing](/getting-started/pricing) for plan details. A short progress indicator shows the export status. For large projects this can take up to a minute. Once complete, the `.zip` file is saved to your browser's default download folder. Locate the downloaded `.zip` file and extract it to a folder on your computer: * **macOS**: Double-click the `.zip` file in Finder, or run `unzip project-name.zip` in Terminal * **Windows**: Right-click the `.zip` and choose **Extract All**, or run `Expand-Archive project-name.zip` in PowerShell The extracted folder contains your full project structure. Open the extracted folder in your IDE or terminal and install dependencies. ```bash theme={null} npm install npm run dev ``` The app starts on `http://localhost:3000`. See the [Next.js getting started guide](https://nextjs.org/docs/getting-started) for more. ```bash theme={null} flutter pub get flutter run ``` Choose a connected device or emulator when prompted. See the [Flutter install guide](https://docs.flutter.dev/get-started/install) for setup help. Rocket exports an environment template (`.env` for web apps, `env.json` for mobile apps) with placeholder values. Fill in your own API keys and secrets before running the app locally. View and manage environment variables **What to do after downloading:** * **Run locally** for testing, automated tests, or custom build steps * **Push to a new GitHub repository** to version-control your code and trigger CI/CD pipelines. Use [GitHub integration](/build/connectors/github/overview) for ongoing two-way sync (Next.js TypeScript), or clone the extracted repo and push manually * **Continue iterating in Rocket** - anytime you change the app in Rocket, click **Download** again to export the latest version Downloaded `.zip` archives reflect the project state at the moment of export. They do **not** auto-sync with later changes made in Rocket. To keep a repository up to date automatically, use [GitHub integration](/build/connectors/github/overview) instead of manual downloads. The mobile app supports browsing files and GitHub integration. Editing files, managing environment variables, viewing build logs, and downloading code are only available on the web browser. Rocket code editor on mobile. ### Browse your files Tap the **current file name** at the top of the screen to open the file picker. Browse all folders and files in your project and tap any file to switch to it. Browsing files in Rocket code view on mobile. ### Refresh Tap the **Refresh** button in the top-right corner to reload the editor and file tree. Toolbar showing refresh and GitHub icons. ### Push to GitHub Tap the **GitHub** button in the top-right toolbar to push your project to a GitHub repository. After the initial push, use **Update** to push new changes. ## What's next? Use chat to make broader changes across your project. Store API keys and secrets your app needs at runtime. Bring in external scripts, embeds, and components. Import and integrate API endpoints into your app. # Use commands Source: https://docs.rocket.new/build/editor/commands Use slash and @ commands in the Rocket.new Build editor to target files, pin context, and trigger precise edits without long chat prompts. Commands give you precise control over edits without writing long prompts. Type `/` to run screen-aware shortcuts on whatever page is open, or type `@` to lock edits to a specific file, folder, or task. Both run from the chat input and are only available in the web browser editor. Commands use fewer [credits](/getting-started/credits) than open-ended prompts. Quoting exact text or naming the area you want to change avoids follow-up messages. ## How commands work | | `/` commands | `@` commands | | :- | :- | :- | | What they do | Screen-aware shortcuts that update the page you have open | Scope edits to a specific file, folder, or task | | How to trigger | Type `/` in chat and browse or filter the popup menu | Type `@` in chat and pick a target from the picker | | Targeting | Automatically targets the current open screen | Locks scope to your selected file, folder, or task | | Best for | Layout fixes, content changes, theme updates, integrations | Precise edits to known files, isolated component changes | After a command runs, you see a short summary and a preview link to review the changes. ## `/` commands Slash commands automatically target whatever page or screen you have open. You do not need to specify a file. Navigate to the page or screen you want to change. `/` commands automatically target whatever is currently open. A popup menu appears with all available commands. Browse the list or start typing to filter. Slash command menu open in Rocket chat showing available commands. Slash command menu open in Rocket chat showing available commands. Pick a command from the menu, then write your instruction in natural language. Reference sections, elements, or quote exact text for the most accurate result. Slash command result shown in chat after applying a command. Slash command result shown in chat after applying a command. ### Phrasing patterns These patterns work well with most `/` commands. **Replace something:** * `/Update Content change "Old text" to "New text" in [section name]` **Insert something new:** * `/Add Element add [element description] to [area]` **Fix a specific issue:** * `/Fix Layout Issues in [area or breakpoint]` **Examples:** * `/Update Content change "Get started" to "Launch now" in hero section` * `/Remove Element testimonial card three in reviews section` * `/Generate Image replace team photo in About section with a modern workspace photo` * `/Fix Layout Issues in pricing grid` ### Available `/` commands Browse the full command catalog below. Commands are organized by platform (Web or Mobile) and category. **Purpose:** Replace the app logo across all pages. **Usage:** Attach the logo file first, then run the `/Update App Logo` command. **Examples:** * `/Update App Logo` * `/Update App Logo use the logo from the attached file` Transparent PNGs work well for logos. **Purpose:** Change the app name in titles, UI, and metadata. **Examples:** * `/Update App Name Nova Suite` * `/Update App Name Atlas` For custom text blocks that still show the old name, use `/Update Content`. **Purpose:** Apply a new color scheme across your entire web app. **Examples:** * `/Change App Theme switch to a light theme with navy primary and soft gray background` * `/Change App Theme primary color #4F46E5 and accent #F97316` If colors look off after a big change, follow up with `/Fix Theme Switching`. **Purpose:** Add coordinated light and dark theme options to your app. **Examples:** * `/Add Light/Dark Theme` * `/Add Light/Dark Theme with higher contrast dark mode for text and buttons` Use `/Fix Theme Switching` if toggling between modes does not update all areas. **Purpose:** Create custom AI-generated SVG illustrations, hero visuals, section graphics, icons, and diagrams tailored to your app. SVGs are vector-based, so they scale to any size without losing quality. **Examples:** * `/Generate SVG Illustration replace the hero image with a custom drawing of a rocket launching from servers` * `/Generate SVG Illustration add a process flow illustration showing fresh farms to cleaning to factory processing` * `/Generate SVG Illustration create an animated notification bell icon with a gentle swing animation, duotone style, for the subscribe section` Describe the style (isometric, geometric, line art, gradient), intended placement (hero, section, icon), and colors for best results. **Purpose:** Replace text, placeholders, or branding in the current page. **Examples:** * `/Update Content change "Get started" to "Launch now" in hero section` * `/Update Content change hero title to "Welcome to Rocket" in hero section` * `/Update Content change all CTA (Call To Action) buttons to "Buy Now" in pricing section` * `/Update Content change pricing tier names to Starter, Growth, Scale in pricing section` **Purpose:** Replace an existing UI element with a different element type on the current page. **Examples:** * `/Change Element change hero image to video in hero section` * `/Change Element change secondary button to a text link in footer` **Purpose:** Insert a new UI element into the current page. **Examples:** * `/Add Element add testimonial card under "What our customers say" in reviews section` * `/Add Element add sticky CTA button in header that links to pricing section` **Purpose:** Delete UI elements or sections with automatic layout reflow. **Examples:** * `/Remove Element hero section` * `/Remove Element footer` * `/Remove Element announcement bar` * `/Remove Element image row under "Features"` **Purpose:** Delete an entire screen from your app, including its route and navigation references. **Examples:** * `/Remove Screen delete the About page` * `/Remove Screen remove onboarding screen` **Purpose:** Restructure the layout of the current page to a different design pattern. **Examples:** * `/Restructure Screen Layout change pricing section to a three column grid` * `/Restructure Screen Layout turn hero into split layout with text on left and image on right` **Purpose:** Automatically fix spacing, alignment, positioning, and responsiveness issues on the current page. **Examples:** * `/Fix Layout Issues` * `/Fix Layout Issues for mobile breakpoints` * `/Fix Layout Issues in pricing grid` * `/Fix Layout Issues for tablet and mobile breakpoints` **Purpose:** Resolve navigation and routing problems in your web app. **Examples:** * `/Fix Navigation Issues in header navigation` * `/Fix Navigation Issues in sidebar menu for dashboard routes` * `/Fix Navigation Issues for broken links in the footer` **Purpose:** Fix problems when switching between light and dark mode. **Examples:** * `/Fix Theme Switching for navbar and footer` * `/Fix Theme Switching on dashboard pages where text stays dark on dark background` **Purpose:** Automatically fetch active errors from the running preview, filter by React hydration mismatch patterns, and apply targeted fixes to each affected file. **Examples:** * `/Fix Hydration Errors` * `/Fix Hydration Errors in the dashboard layout` * `/Fix Hydration Errors related to date formatting` Make sure the preview is running so Rocket can read the active error log. Works with Next.js, Remix, and any SSR React setup. **Purpose:** Break large files into smaller modules and clean up structure for specified files. **Examples:** * `/Organize Code in src/components/dashboard.tsx` * `/Organize Code for auth related files in src/auth` **Purpose:** Add smooth animations between pages across your web app. **Examples:** * `/Add Page Transitions slide in from right for all marketing pages` * `/Add Page Transitions fade between dashboard and settings pages` **Purpose:** Create an AI generated image and place it by naming the destination. **Examples:** * `/Generate Image add hero banner with soft gradient sky to hero section` * `/Generate Image replace product visual in hero section with a sleek abstract render` * `/Generate Image replace image in pricing card A with a minimal 3D icon` * `/Generate Image replace team photo in About with an abstract 3D shape (include alt: "Our team values")` Use one clear visual idea per command. Include alt text where it improves accessibility. **Purpose:** Get AI recommendations for what to build next based on your current app. **Examples:** * `/Suggest What to Build Next based on current dashboard and auth flows` * `/Suggest What to Build Next to improve onboarding and first session experience` **Purpose:** Migrate old AI integrations to a new secure server-side architecture. **Examples:** * `/Migrate AI Integration` * `/Migrate AI Integration update all client-side AI calls to use server-side handlers` **Purpose:** Enable phone number login with OTP verification using Supabase Authentication. **Examples:** * `/Add Phone Authentication add phone OTP login to the signup screen` * `/Add Phone Authentication enable phone number sign in alongside email login` **Purpose:** Add a complete authentication system with login, signup, profile, and password reset screens. **Examples:** * `/Add Supabase Authentication set up login, signup, and forgot password` * `/Add Supabase Authentication add auth screens to this app` Make sure your Supabase project is already connected in Rocket before running this command. **Purpose:** Add social sign in options using OAuth providers. **Examples:** * `/Add Social Authentication with Google and GitHub` * `/Add Social Authentication add Google sign in button to login page` **Purpose:** Automatically diagnose and fix common Supabase authentication problems. **Examples:** * `/Fix Supabase Authentication Issues` * `/Fix Supabase Authentication Issues for users who can sign up but cannot log in` **Purpose:** Set up one time checkout payments with Stripe. **Examples:** * `/Add Stripe Payments create checkout for Pro subscription on pricing page` * `/Add Stripe Payments add one time purchase flow for order page` **Purpose:** Send automated email messages to users using Resend. Set up notifications for account updates, order confirmations, newsletters, or custom alerts. **Examples:** * `/Add Email Alerts send welcome email when user logs in to the system` * `/Add Email Alerts send order confirmation emails after successful checkout` **Purpose:** Send automated WhatsApp messages to users using Twilio. Great for order updates, appointment reminders, and customer notifications. **Examples:** * `/Add WhatsApp Messages notify users to update product offers` * `/Add WhatsApp Messages send appointment reminders from bookings page` **Purpose:** Send automated text messages (SMS) to users' phones using Twilio. Perfect for verification codes, order updates, and time-sensitive alerts. **Examples:** * `/Add Text Messages (SMS) send order confirmation after checkout` * `/Add Text Messages (SMS) send OTP codes on signup` **Purpose:** Add an AI powered chat assistant to your web app. You can specify any LLM (Gemini, Anthropic, OpenAI, or others). **Examples:** * `/Add AI Chatbot add support assistant widget on Help page using Anthropic` * `/Add AI Chatbot add in app assistant on dashboard` **Purpose:** Configure Google Analytics for page tracking, event tracking, and user properties. **Examples:** * `/Setup Google Analytics use measurement ID G-XXXXXXX` * `/Setup Google Analytics track page views and signup button clicks on marketing pages` **Purpose:** Place Google Adsense ad units throughout your web app. **Examples:** * `/Setup Adsense add banner ad in blog sidebar` * `/Setup Adsense add responsive ad unit at the end of article pages` **Purpose:** Track events, screen views, user identity, and funnels with Mixpanel. **Examples:** * `/Add Analytics Tracking identify users on login and track page views and button clicks` * `/Add Analytics Tracking track checkout funnel from cart to confirmation` **Purpose:** Save form submissions or user records directly to Airtable. **Examples:** * `/Add User Data to Airtable save contact form submissions to my base in the Leads table` * `/Add User Data to Airtable save new signups to Airtable Members table` **Purpose:** Read design or technical review comments from a Google Doc and apply them to the code. **Examples:** * `/Apply Review Feedback apply the design and tech review comments from this document [paste URL]` **Purpose:** Turn structured content from a Notion page, Google Doc, or Google Sheet into fully generated app screens. **Examples:** * `/Generate Screens from Content generate app screens from the FAQ entries and copy in this page [paste URL]` **Purpose:** Read rules from a document and convert them into tested, executable application logic. **Examples:** * `/Enforce Business Rules convert the pricing and commission rules in this document into executable logic [paste URL]` **Purpose:** Re-read an updated spec and apply the changes to the relevant parts of the app. **Examples:** * `/Sync Requirement Changes re-read this page and apply any requirement changes to the codebase [paste URL]` **Purpose:** Read a list of user stories and generate corresponding feature code for each. **Examples:** * `/Implement User Stories implement the stories listed in this document [paste URL]` **Purpose:** Read a PRD or feature spec from Notion, Google Docs, or Linear and generate the full feature with screens and logic. **Examples:** * `/Build Feature from Spec build the feature described in this page [paste URL]` **Purpose:** Fetch a Linear ticket and generate code scoped strictly to the ticket requirements. **Examples:** * `/Implement Ticket implement the requirements in ticket ENG-123` * `/Implement Ticket [paste ticket URL or ID]` **Purpose:** Connect screens to a Strapi or Directus CMS collection with list, detail, and search views. **Examples:** * `/Add CMS Content show a paginated blog list and detail page from my articles collection` * `/Add CMS Content connect the products screen to my Strapi products collection` **Purpose:** Drive app content, feature flags, or settings from an external store like Airtable, Strapi, or Directus. **Examples:** * `/Add Dynamic Config load feature flags and copy from a remote table at app startup` * `/Add Dynamic Config drive homepage banner content from an Airtable base` **Purpose:** Subscribe users to a mailing list on registration or opt-in using Mailchimp, Brevo, or Mailerlite. **Examples:** * `/Add Email Sign-up add an opt-in checkbox on registration and subscribe users to my audience` * `/Add Email Sign-up add newsletter sign up form in footer` **Purpose:** Generate OTP or magic link verification email flow using Brevo or Sendgrid. **Examples:** * `/Add Email Verification send a 6-digit OTP on signup` * `/Add Email Verification use a magic link to verify email` **Purpose:** Set up instant emails like welcome messages, OTP codes, alerts, and order confirmations using Brevo or Sendgrid. **Examples:** * `/Add Transactional Email Notifications welcome email on signup, OTP verification, order confirmation` * `/Add Transactional Email Notifications password reset email` **Purpose:** Set up marketing emails like newsletters, campaigns, and user engagement emails using Brevo, Mailchimp, or Mailerlite. **Examples:** * `/Add Marketing Email Notifications newsletter campaign and promotional email` * `/Add Marketing Email Notifications product update emails to active users` **Purpose:** Embed a Calendly booking widget or let users schedule meetings in app. **Examples:** * `/Add Booking & Scheduling embed my booking page inline on the contact page pre-filled with the user's email` * `/Add Booking & Scheduling add meeting scheduler to the onboarding flow` **Purpose:** Embed or trigger a Tally or Typeform form to collect user data. **Examples:** * `/Add Form Collection embed my contact form on the homepage as a popup` * `/Add Form Collection add feedback form after purchase confirmation` **Purpose:** Add right to left layout support for languages like Arabic and Hebrew. **Examples:** * `/Add RTL Support apply RTL layout for all marketing pages` * `/Add RTL Support enable RTL for dashboard while keeping admin language in English` **Purpose:** Prepare your app for multiple languages and translation. **Examples:** * `/Add Multiple Languages add English, Spanish, and French` * `/Add Multiple Languages set up structure for future translations without changing layout` **Purpose:** Analyze codebase and generate SEO report. **Examples:** * `/Generate SEO Report` * `/Generate SEO Report for marketing pages` **Purpose:** Implement SEO improvements across the current codebase. **Examples:** * `/Improve SEO` * `/Improve SEO for landing page` **Purpose:** Implement GEO (Generative Engine Optimization) and AEO (Answer Engine Optimization) in the current codebase. **Examples:** * `/Improve GEO And AEO` * `/Improve GEO And AEO for blog and docs` **Purpose:** Analyze codebase and generate GEO report. **Examples:** * `/Generate GEO And AEO Report` * `/Generate GEO And AEO Report for content pages` **Purpose:** Audit codebase for WCAG 2.1 AA compliance and generate accessibility report. **Examples:** * `/Generate Accessibility Report` * `/Generate Accessibility Report for dashboard` **Purpose:** Implement WCAG 2.1 AA accessibility fixes in the current codebase. **Examples:** * `/Improve Accessibility Audit` * `/Improve Accessibility Audit for forms and navigation` **Purpose:** Implement privacy compliance infrastructure in the current codebase. **Examples:** * `/Implement Privacy Compliance` * `/Implement Privacy Compliance for user data and cookies` **Purpose:** Analyze codebase and generate a privacy compliance report. **Examples:** * `/Generate Privacy Report` * `/Generate Privacy Report for data handling` **Purpose:** Replace the app logo across all mobile screens. **Usage:** Attach the logo file first, then run the `/Update App Logo` command. **Examples:** * `/Update App Logo` * `/Update App Logo use the logo from the attached file` **Purpose:** Change the app name in titles, UI, and package metadata. **Examples:** * `/Update App Name Nova Suite` * `/Update App Name Atlas` **Purpose:** Apply a new color scheme across your mobile app. **Examples:** * `/Change App Theme switch to a dark theme with teal accents` * `/Change App Theme primary color #0F766E and accent #F97316` **Purpose:** Add light and dark theme options throughout your mobile app. **Examples:** * `/Add Light/Dark Theme` * `/Add Light/Dark Theme with high contrast dark mode for text and icons` **Purpose:** Replace text, placeholders, or branding in the current mobile screen. **Examples:** * `/Update Content change "Continue" to "Next" on onboarding screen` * `/Update Content change CTA button text to "Start free trial" on home screen` * `/Update Content change plan names to Starter, Growth, Scale on pricing screen` **Purpose:** Replace an existing UI element with a different element type in the current screen. **Examples:** * `/Change Element change text field to dropdown in filters section on home screen` * `/Change Element change icon button to text button in header` **Purpose:** Insert a new UI element into the current mobile screen. **Examples:** * `/Add Element add floating action button on chat screen` * `/Add Element add banner card above list on home screen` **Purpose:** Delete UI elements or sections with automatic layout reflow. **Examples:** * `/Remove Element hero section on onboarding screen` * `/Remove Element image carousel under "Featured" on home screen` **Purpose:** Delete an entire screen from your mobile app, including its route and navigation references. **Examples:** * `/Remove Screen delete the Settings page` * `/Remove Screen remove profile screen` **Purpose:** Restructure the layout of the current screen to a different pattern. **Examples:** * `/Restructure Screen Layout change settings screen to grouped list layout` * `/Restructure Screen Layout arrange product cards in two column grid` **Purpose:** Automatically fix spacing, alignment, and layout issues in the current screen. **Examples:** * `/Fix Layout Issues on onboarding screen` * `/Fix Layout Issues in bottom navigation bar` * `/Fix Layout Issues for small devices` **Purpose:** Resolve navigation and routing problems in your mobile app. **Examples:** * `/Fix Navigation Issues in bottom tab bar` * `/Fix Navigation Issues between profile and settings screens` **Purpose:** Resolve overflow and scrolling problems such as content being cut off or double scroll. **Examples:** * `/Fix Overflow and Scrolling Issue on transactions list screen` * `/Fix Overflow and Scrolling Issue for small height devices` **Purpose:** Fix issues when switching between light and dark mode on mobile. **Examples:** * `/Fix Theme Switching on settings screen` * `/Fix Theme Switching for status bar and navigation bar colors` **Purpose:** Improve touch targets and mobile interaction patterns on the current screen. **Examples:** * `/Fix Touch Interactions on product cards in home screen` * `/Fix Touch Interactions for primary CTA button in checkout` **Purpose:** Split large mobile files into smaller modules and tidy structure. **Examples:** * `/Organize Code in lib/screens/home.dart` * `/Organize Code for shared widgets in lib/components` **Purpose:** Add animations and visual effects to UI elements in the current mobile screen. **Examples:** * `/Add Animations & Effects add bounce effect on add to cart button when tapped` * `/Add Animations & Effects add shimmer loading state for list items` **Purpose:** Add smooth transitions between mobile screens across your app. **Examples:** * `/Add Screen Transitions push from right when opening details screen` * `/Add Screen Transitions fade between login and home screens` **Purpose:** Create an AI generated image and place it in a named area of the current screen. **Examples:** * `/Generate Image replace illustration on onboarding screen with a friendly welcome graphic` * `/Generate Image add product preview image to top of details screen` **Purpose:** Get AI suggestions for the next features or screens to add to your app. **Examples:** * `/Suggest What to Build Next for this ecommerce app based on home and cart screens` * `/Suggest What to Build Next to improve retention after onboarding` **Purpose:** Migrate old AI integrations to a new secure server-side architecture. **Examples:** * `/Migrate AI Integration` * `/Migrate AI Integration update all client-side AI calls to use server-side handlers` **Purpose:** Enable phone number login with OTP verification using Supabase Authentication. **Examples:** * `/Add Phone Authentication add phone OTP login to the signup screen` * `/Add Phone Authentication enable phone number sign in alongside email login` **Purpose:** Add a complete Supabase powered auth flow to your mobile app. **Examples:** * `/Add Supabase Authentication create login, signup, and forgot password screens` * `/Add Supabase Authentication add auth screens and wire them to existing home screen` **Purpose:** Add social sign in options like Google or Apple to your auth flow. **Examples:** * `/Add Social Authentication with Google and Apple` * `/Add Social Authentication add Google sign in button to login screen` **Purpose:** Diagnose and fix common Supabase auth issues in your mobile app. **Examples:** * `/Fix Supabase Authentication Issues` * `/Fix Supabase Authentication Issues where users stay logged out after signup` **Purpose:** Set up Stripe powered one time checkout flows in your mobile app. **Examples:** * `/Add Stripe Payments create checkout for Pro subscription on pricing screen` * `/Add Stripe Payments add one time purchase flow on order screen` **Purpose:** Send automated email messages triggered by your mobile app flows. **Examples:** * `/Add Email Alerts send welcome email when user logs in` * `/Add Email Alerts send order confirmation emails after checkout` **Purpose:** Send automated WhatsApp messages using Twilio triggered by in app events. **Examples:** * `/Add WhatsApp Messages send order status updates after purchase` * `/Add WhatsApp Messages send appointment reminders from bookings screen` **Purpose:** Send automated SMS messages for verification codes and time sensitive alerts. **Examples:** * `/Add Text Messages (SMS) send OTP codes on signup` * `/Add Text Messages (SMS) send order confirmation after checkout` **Purpose:** Add an AI powered chat assistant to your mobile app. You can specify any LLM (Gemini, Anthropic, OpenAI, or others). **Examples:** * `/Add AI Chatbot add support assistant on Help screen using Anthropic` * `/Add AI Chatbot add in app assistant on home screen` **Purpose:** Add right to left layout support for mobile screens. **Examples:** * `/Add RTL Support apply RTL layout for all main screens` * `/Add RTL Support enable RTL when app language is Arabic or Hebrew` **Purpose:** Prepare your mobile app for multiple languages and translations. **Examples:** * `/Add Multiple Languages add English, Spanish, and French` * `/Add Multiple Languages set up language switching in settings screen` ## `@` commands Use `@` commands to scope edits to a specific file, folder, or task. This is useful when you know exactly which part of the codebase you want to change. Start your message with `@`, or insert it anywhere in your sentence. The picker opens in chat with **Files & Folders** and **Tasks** options. @ command picker open in Rocket chat showing Files & Folders and Tasks options. @ command picker open in Rocket chat showing Files & Folders and Tasks options. Choose **Files & Folders** to scope edits to a file or folder, or choose **Tasks** to bring in context from a previous task. Your selection appears in the chat input. Continue typing. The scope is locked to your selection, so Rocket only modifies the targeted file or folder. Selecting **Tasks** from the `@` picker links a previous task and brings its context into the current conversation. See [cross-task context](/getting-started/task/task-context) for details on how this works. ### Example patterns **Restructure content:** `@pages/faq.jsx Reorder questions so payments and refunds appear first. Keep answers unchanged.` **Improve guidance:** `@pages/onboarding.jsx Rewrite tips to be friendlier and shorter. Keep the same steps.` **Replace visuals:** `@assets/screenshots Replace getting-started.png with the latest capture. Update the caption to match.` **Clarify microcopy:** `@components/empty-state Rewrite the message to set expectations and add a single call to action.` **Localize a section:** `@pages/about.jsx Translate the team bio section to Spanish. Keep names and roles in English.` ## Guidelines ### Referencing elements * Use clear terms like "hero section", "footer", "primary CTA button", or "pricing image row" * Quote exact text for copy changes: `"Get started"` to `"Launch now"` * For `@` commands, use exact paths: `@pages/home.tsx`, `@components/card`, or `@docs/faq.md` ### Workflow tips * Make content changes first. If reflow causes issues, run `/Fix Layout Issues` * State locations for clarity: "in hero", "in pricing", "navigation bar" * Keep instructions specific. Small, focused edits work best ### Troubleshooting **Nothing changed:** * Confirm you are on the correct screen * For text changes: quote the exact phrase you want changed * For image changes: name the area precisely **Mobile layout issues:** * Try `/Fix Layout Issues for mobile breakpoints` * If problems persist, run `/Fix Layout Issues for tablet and mobile breakpoints` **Cannot find the right file (`@` commands):** * Start typing the exact file name in the picker. Include the folder path if you know it. **Edit feels too broad (`@` commands):** * Split the request into smaller `@` command messages, each scoped to a single file or folder ## What's next? Use chat alongside commands for full control over your Build project. Click any element to change it directly without writing a prompt. Browse and edit your project source files directly. Compare, roll back, and launch specific versions of your app. # Custom code Source: https://docs.rocket.new/build/editor/custom-code Add custom scripts, third-party embeds, analytics snippets, or bespoke components to your Rocket.new app by pasting code straight into chat. If it runs in a browser, Rocket can add it to your task. Paste a snippet directly into chat or describe what you want. Rocket figures out where it goes and integrates it into the right file. The examples below are a starting point. Any standard HTML, CSS, JavaScript, or iframe embed works. ## How it works You have two options: paste code you already have, or describe what you want. **Paste a snippet:** Copy any embed code, script tag, or component from anywhere and paste it into chat with a short instruction. ```plaintext wrap theme={null} Add this to the bottom of every page: ``` **Describe what you want:** If you do not have code yet, just describe the outcome. Rocket writes or fetches the integration for you. ```plaintext wrap theme={null} Add a Calendly booking widget to my contact page. ``` ```plaintext wrap theme={null} Add an interactive 3D product model to my hero section using Three.js. ``` ## UI components and libraries Bring in any component library, design system, or individual UI snippet. **Copy-paste components (e.g. [21st.dev](https://21st.dev), shadcn/ui, Flowbite):** ```plaintext wrap theme={null} Add this animated card component from 21st.dev to my features section:
...
``` ```plaintext wrap theme={null} Install shadcn/ui and use the Combobox component on my search page. ``` **Carousels, sliders, and interactive widgets:** ```plaintext wrap theme={null} Add a testimonial slider using Swiper.js to my homepage. Auto-scroll every 4 seconds. ``` ```plaintext wrap theme={null} Add a lightbox gallery using GLightbox to the portfolio page. ``` **Custom widgets and overlays:** ```plaintext wrap theme={null} Add a floating feedback button in the bottom-right corner. It should open a modal with a text input and a submit button. ``` ```plaintext wrap theme={null} Add a sticky announcement banner at the top of every page with a dismiss button. Save the dismissed state in localStorage. ``` ```plaintext wrap theme={null} Add a "Back to top" button that appears after the user scrolls down 400px. ``` ## 3D and immersive content Rocket can add 3D models, scenes, and interactive experiences to any page. **Model viewers:** ```plaintext wrap theme={null} Add a 3D product viewer to my homepage using . Use this .glb file URL: https://... ``` ```plaintext wrap theme={null} Embed this Sketchfab 3D model on my product page:
``` **Three.js and WebGL scenes:** ```plaintext wrap theme={null} Add an animated Three.js particle background to my hero section. Dark theme, subtle movement. ``` ```plaintext wrap theme={null} Add a rotating 3D logo to the about page using Three.js. ``` **Spline:** ```plaintext wrap theme={null} Embed this Spline scene as a full-width background on my landing page: ``` ## Embeds Paste an embed code from any tool and tell Rocket where to place it. **Forms and surveys:** ```plaintext wrap theme={null} Add this Typeform embed to my contact page:
``` ```plaintext wrap theme={null} Embed my Tally form as a popup triggered when someone clicks "Request a demo". ``` **Scheduling:** ```plaintext wrap theme={null} Add this Calendly inline widget to my services page:
``` **Video:** ```plaintext wrap theme={null} Embed this Loom video in the onboarding section:
``` ```plaintext wrap theme={null} Add a YouTube video to the hero. Autoplay muted, no controls, looped. ``` **Maps:** ```plaintext wrap theme={null} Embed a Google Maps iframe on the contact page showing our office location. ``` ```plaintext wrap theme={null} Add a Mapbox interactive map to the locations page. ``` **Social and community:** ```plaintext wrap theme={null} Embed my latest tweets on the homepage sidebar using the Twitter timeline widget. ``` ```plaintext wrap theme={null} Add a Discord invite widget to my community page. ``` ## Scripts and tracking Paste a script tag into chat and Rocket places it in the correct location automatically. **Analytics:** ```plaintext wrap theme={null} Add Google Analytics 4 to every page: ``` ```plaintext wrap theme={null} Add Mixpanel and track a page view event on every route change. ``` **Tag managers:** ```plaintext wrap theme={null} Add Google Tag Manager to the head of every page. Here is the snippet: ``` **Pixels and retargeting:** ```plaintext wrap theme={null} Add the Meta Pixel and fire a PageView on every page load: ``` ```plaintext wrap theme={null} Add the LinkedIn Insight Tag to all pages. ``` **Session recording:** ```plaintext wrap theme={null} Add Hotjar to my site. Only load it on public pages, not inside the dashboard. ``` **Live chat and support:** ```plaintext wrap theme={null} Add this Intercom widget. Only show it when a user is logged in. ``` ```plaintext wrap theme={null} Add the Crisp chat widget to every page. Set the widget color to #FF5C00. ``` ## Styles, fonts, and animations **Custom CSS:** ```plaintext wrap theme={null} Add this CSS override to change the heading font across the whole site: h1, h2, h3 { font-family: 'Cabinet Grotesk', sans-serif; } ``` ```plaintext wrap theme={null} Add a custom scrollbar style that matches my dark theme. ``` **Fonts:** ```plaintext wrap theme={null} Add this Google Fonts import and apply Outfit as the default body font: ``` ```plaintext wrap theme={null} Add a self-hosted variable font from my /fonts folder and apply it to headings. ``` **Icon libraries:** ```plaintext wrap theme={null} Add Font Awesome and use the rocket icon in the navbar. ``` **Animation:** ```plaintext wrap theme={null} Add GSAP and use it to fade in the hero section on page load with a slight upward movement. ``` ```plaintext wrap theme={null} Add Lottie and play this animation JSON when the page loads: https://... ``` ## Targeting specific pages Not everything should load everywhere. Tell Rocket exactly where to apply the code to keep your site fast. ```plaintext wrap theme={null} Add this conversion pixel only to my thank-you page, not the rest of the site. ``` ```plaintext wrap theme={null} Load this charting library only on the dashboard. ``` ```plaintext wrap theme={null} Add this exit-intent popup script to landing pages only. ``` ## Where code gets placed Rocket determines the right location based on what the code does. You can always specify a different location. | Location | When it is used | Examples | | :- | :- | :- | | **``** | Code that must load before the page renders | Font imports, meta tags, tracking pixels | | **``** | Visible components and embeds | Form widgets, 3D viewers, UI components | | **Before ``** | Code that should load after content | Analytics scripts, chat widgets | | **Inline** | Code scoped to a specific element or section | Custom styles on a button, event listeners on a form | ## What is not supported The following require dedicated backend setup and cannot be added through custom code: * Webhook endpoints * Server-side environment variables accessed outside of Rocket's environment system * Custom server-side API routes For backend functionality, see the [APIs and databases](/build/editor/apis) page. ## What's next? Some tools have dedicated integrations that are simpler than pasting raw code. Import and integrate API endpoints directly into your app. Scripts you add may be subject to cookie consent rules. Publish your site with all custom code included. # Environment variables Source: https://docs.rocket.new/build/editor/env-variables Store API keys, tokens, and secrets in Rocket.new environment variables so credentials stay out of your source code and version history. Environment variables let you store API keys, database URLs, and other secrets without hardcoding them in your app. Rocket keeps separate values for staging (while you build) and production (when you launch). The Environment settings panel is only available for **web** build tasks, which use a `.env` file. For mobile tasks, variables are stored in `env.json` - update them directly in that file or inside the connector's value field. ## Open Environment settings Click your **task name** in the top-left corner of the editor, then click **Settings**. Task name menu open with Settings highlighted. Task name menu open with Settings highlighted. In the Settings sidebar under **Task**, click **Environment**. The panel opens showing your existing variables across **Staging** and **Production** tabs. Settings modal with Environment selected, showing Staging and Production tabs with variable rows. Settings modal with Environment selected, showing Staging and Production tabs with variable rows. ## Staging and Production The Environment panel has two tabs: * **Staging** - values used while you are building and testing inside Rocket. * **Production** - values used when your app is live and publicly launched. Make sure both tabs are filled in so your app behaves correctly in each environment. If you set a value directly in your code or in a connector's value field instead of using this panel, Rocket treats it as a staging value by default. ## Add a variable New environment variables are added through your **`.env` file in code**, not through the Settings UI. Click **Code** in the editor toolbar to open the file explorer. Use placeholder values (like `your-key-here`) in code files. Set your real secrets only in the Environment panel. Never commit actual keys to a repository. Open `.env` at the root of your project and add your variable: ```plaintext wrap theme={null} OPENAI_API_KEY=your-key-here NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co ``` Save the file. The variable is now available to your app and will appear in the Environment panel under the relevant tab. For **mobile tasks**, variables are stored in `env.json` instead. Open it in the Code tab and add your key-value pairs there directly. ## Edit an existing variable To update the value of an existing variable, open the Environment panel (Settings > Environment) and click the **edit icon** on the right side of any variable row. Make your change and save. Changes take effect on the next build or generation in that environment. ## Use variables in your app Reference variables in server-side code using standard patterns: ```plaintext wrap theme={null} process.env.OPENAI_API_KEY process.env.NEXT_PUBLIC_SUPABASE_URL ``` You can also ask Rocket to wire them up directly in chat: ```plaintext wrap theme={null} Use the OPENAI_API_KEY environment variable to set up the AI chat feature. ``` ## Common variables Variables prefixed with `NEXT_PUBLIC_` are exposed to the browser (client side). All others stay server-side only. **Never put secrets in `NEXT_PUBLIC_` variables.** ### Client-side variables (safe to expose) These variables are designed to be public and are safe to prefix with `NEXT_PUBLIC_`: | Variable | Service | Why it's safe | | :- | :- | :- | | `NEXT_PUBLIC_SUPABASE_URL` | Supabase | Public project URL; security relies on row-level policies | | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Supabase | Anonymous key with limited permissions; security relies on row-level policies | | `NEXT_PUBLIC_GA_MEASUREMENT_ID` | Google Analytics | Measurement ID is meant to be public | | `NEXT_PUBLIC_ADSENSE_ID` | Google AdSense | Publisher ID is meant to be public | ### Server-side variables (keep secret) These variables contain sensitive credentials and should **never** have the `NEXT_PUBLIC_` prefix: | Variable | Service | Why it's secret | | :- | :- | :- | | `STRIPE_SECRET_KEY` | Stripe | Can charge cards and access all account data | | `OPENAI_API_KEY` | OpenAI | Can make API calls and incur charges | | `GEMINI_API_KEY` | Google Gemini | Can make API calls and incur charges | | `ANTHROPIC_API_KEY` | Anthropic | Can make API calls and incur charges | | `RESEND_API_KEY` | Resend | Can send emails on your behalf | ## What's next? Import and integrate API endpoints that use your environment variables. Connect services like Supabase, Stripe, and OpenAI with dedicated integrations. Inject scripts and styles that reference your environment configuration. Ask Rocket to use your variables when building features. # Generate images and SVGs Source: https://docs.rocket.new/build/editor/image-generation Generate AI images and vector SVGs directly in your Rocket.new app. Part of the only vibe solutioning platform with research, building, and intelligence. Image and SVG generation are only available on the **web browser**. They are not supported in the Rocket mobile app. Generate visuals directly in chat without leaving the editor. Type a command, describe what you want, and Rocket generates and places it in your app. ## Image generation vs SVG generation Two commands, two different use cases. | | `/Generate Image` | `/Generate SVG Illustration` | | :- | :- | :- | | **Output** | Raster image (PNG/JPEG) | Vector graphic (SVG) | | **Best for** | Hero images, product shots, lifestyle photos, backgrounds | Icons, diagrams, illustrations, logos, animated elements | | **Scales without losing quality** | No | Yes | | **Supports animation** | No | Yes (CSS animations) | | **Editable as code** | No | Yes | Use `/Generate Image` for photographic, painterly, or rendered visuals. Use `/Generate SVG Illustration` for anything that needs to scale, animate, or be adjusted in code. ## How to use Both commands run from the chat panel inside the Build editor. Navigate to the page or screen where you want the visual placed. Both commands are screen-aware and target what is currently open in your preview. Type `/Generate Image` or `/Generate SVG Illustration` followed by a description of the visual and where to place it. ```plaintext wrap theme={null} /Generate Image replace hero banner with a soft gradient sky with floating abstract shapes ``` ```plaintext wrap theme={null} /Generate SVG Illustration add a process flow diagram showing user signup to dashboard in the onboarding section ``` Rocket generates the visual and places it in the specified location. If the result is not quite right, send a follow-up message to adjust it. You do not need to re-run the slash command; plain chat messages work for refinements. ```plaintext wrap theme={null} Make the colors warmer and increase the contrast on the main subject. ``` ```plaintext wrap theme={null} Simplify the illustration. Remove the background and make it line art only. ``` ## Generate Image Use this for photographic and rendered visuals: hero banners, product mockups, backgrounds, feature card images, lifestyle shots, and abstract art. **Hero and banner images:** ```plaintext wrap theme={null} /Generate Image replace the hero banner with a cinematic wide shot of a mountain trail at golden hour, photorealistic ``` ```plaintext wrap theme={null} /Generate Image replace hero background with a dark abstract gradient with glowing particle shapes ``` **Product and feature visuals:** ```plaintext wrap theme={null} /Generate Image add a minimal 3D render of a floating smartphone to the product section, white background, soft shadow ``` ```plaintext wrap theme={null} /Generate Image replace the feature card image for "fast delivery" with a sleek isometric package icon, flat style ``` **Team and lifestyle:** ```plaintext wrap theme={null} /Generate Image replace the team photo with a warm, candid photo of people collaborating at a wooden desk ``` **Backgrounds and textures:** ```plaintext wrap theme={null} /Generate Image add a subtle grain texture background to the testimonials section, muted sage green ``` ```plaintext wrap theme={null} /Generate Image replace the pricing section background with a dark mesh gradient, deep blue and purple tones ``` One clear visual idea per command works best. Combining multiple unrelated ideas in a single prompt often produces mixed results. ## Generate SVG Illustration Use this for scalable graphics: icons, spot illustrations, diagrams, empty states, mascots, animated elements, and decorative shapes. SVG output is clean code you can edit directly. **Icons:** ```plaintext wrap theme={null} /Generate SVG Illustration create a minimal line art icon set for the three feature cards: speed, security, and reliability ``` ```plaintext wrap theme={null} /Generate SVG Illustration add an animated notification bell icon with a gentle swing to the subscribe button ``` **Spot illustrations:** ```plaintext wrap theme={null} /Generate SVG Illustration add a friendly isometric illustration of a rocket launching from a laptop for the hero section ``` ```plaintext wrap theme={null} /Generate SVG Illustration replace the empty state on the dashboard with a line art illustration of a person planting a flag ``` **Diagrams and flows:** ```plaintext wrap theme={null} /Generate SVG Illustration add a step-by-step diagram showing how the product works: signup, connect, launch. Place it in the how-it-works section ``` ```plaintext wrap theme={null} /Generate SVG Illustration create an architecture diagram showing frontend, API, and database layers for the technical docs page ``` **Decorative and background shapes:** ```plaintext wrap theme={null} /Generate SVG Illustration add an abstract blob shape behind the hero headline, brand color, low opacity ``` ```plaintext wrap theme={null} /Generate SVG Illustration add a subtle wave divider between the hero and features section ``` **Animated SVGs:** ```plaintext wrap theme={null} /Generate SVG Illustration create an animated loading spinner that matches my brand colors ``` ```plaintext wrap theme={null} /Generate SVG Illustration add a looping draw-on animation to the checkmark icon on the success screen ``` ## Writing better prompts Clear prompts produce better results. Include these three things in every prompt: **For images: subject, style, and placement:** | Element | Example | | :- | :- | | Subject | "modern home office with natural light and a coffee cup" | | Style | "photorealistic", "soft gradient", "minimal 3D render", "cinematic", "abstract" | | Placement | "replace hero image", "add to pricing card", "replace the team photo in the About section" | **For SVGs: style, content, and placement:** | Element | Example | | :- | :- | | Style | "isometric", "line art", "geometric", "duotone", "flat", "outlined" | | Content | "rocket launching from a server rack", "user flow from login to dashboard", "three-step onboarding diagram" | | Placement | "replace hero graphic", "add to features section", "icon for the subscribe button" | **Be specific about color and tone:** ```plaintext wrap theme={null} /Generate Image add a hero background, dark navy with soft aurora-like gradients in teal and violet, no text, abstract ``` ```plaintext wrap theme={null} /Generate SVG Illustration create a geometric icon for "analytics" in my brand colors (#6C63FF and white), line art style ``` **Describe what to keep and what to change when iterating:** ```plaintext wrap theme={null} Keep the overall composition but change the color palette to warmer tones: amber and cream instead of blue. ``` ```plaintext wrap theme={null} Keep the icon style but make the stroke thinner and remove the fill. ``` ## What's next? Click any image to swap, resize, or reposition it in the preview. Manage your app's logo and shared visual assets in one place. See the full list of slash commands available in the Build editor. Use chat to make broader design changes across your app. # Preview your app Source: https://docs.rocket.new/build/editor/preview Test your Rocket.new app live as you build with responsive previews, screen navigation, and screenshot capture - no deploying needed. **See your app running live as you build.** The preview is a browser built into the Rocket editor. Every change you make updates the preview in real time. The preview is separate from your live URL. Use **Launch** in the toolbar to publish your app publicly. ## What you can do in preview | Action | How | | :- | :- | | Navigate to any screen | Use the URL bar in the preview toolbar to go to any route in your app | | Test responsive layouts | Switch between desktop, tablet, and mobile views | | Click through user flows | Navigate your app like a real user to verify routing and interactions | | Capture screenshots | Take a screenshot and drag it straight into chat | | Make visual edits | Click any element to open Visual Edit and change it directly | | Launch your app | Click **Launch** in the top right of the preview toolbar to publish | ## Preview toolbar The toolbar runs across the top of the preview panel and gives you quick access to all preview controls. | Button | What it does | | :- | :- | | **Preview** | Opens or focuses the preview panel | | **Full screen** | Expands the preview and hides the chat panel | | **`...`** | Additional options | | URL bar | Shows the current route. Type any path to navigate directly | | Refresh | Reloads the preview to show your latest changes | | **Edit** | Opens the Edit dropdown for Visual edits and Theme | | Camera | Capture a screenshot of the current view | | Device/responsive | Switch screen sizes and device models | | **Launch** | Publish your app to a live URL | ## Using the preview Rocket preview panel showing live web app interface. Rocket preview panel showing live web app interface. ### Navigate to a screen Use the **URL bar** in the preview toolbar to go to any route in your app. Type the path directly (for example `/dashboard` or `/settings`) and press Enter. You can also use the **Currently viewing** dropdown to switch between screens. The **Refresh** icon sits in the same control strip as the URL bar. Click it if your latest changes are not showing. Screen selection dropdown inside the preview panel. Screen selection dropdown inside the preview panel. ### Full screen Click **Full screen** in the toolbar to expand the preview and hide the chat panel. Use this when you want a larger view or need more room to test interactions. Click **Full screen** again to return to the editor. Fullscreen mode of Rocket web preview. Fullscreen mode of Rocket web preview. ### Test responsive layouts and device models Click the **Device** icon in the toolbar to test how your app looks on different screen sizes. Available views: * Desktop * Laptop * Tablet * Mobile Device type dropdown showing responsive view options. Device type dropdown showing responsive view options. Available device models: * Samsung Galaxy S23 * iPhone SE * iPhone 14 Pro * iPhone 16 Pro * iPhone 16 Pro Max * iPhone 17 Pro Device model dropdown showing different phone options. Device model dropdown showing different phone options. ### Edit visually Click the **Edit** button in the toolbar and select **Visual edits** to enter visual edit mode. Click any element to change its text, style, spacing, or image directly in the preview. Learn more about visual edit and what you can change. ### Capture screenshots Take a screenshot of the current preview and use it in chat to show Rocket exactly what to change. 1. Click the **Camera** icon in the toolbar. 2. Choose your capture mode: * **Full screen** - captures the entire preview area * **Selected area** - click and drag to capture a specific region 3. Drag and drop the screenshot into the chat input. Camera dropdown showing Full Screen and Selected Area capture options. Camera dropdown showing Full Screen and Selected Area capture options. The Rocket mobile app supports screen navigation, refresh, and responsive views. Full screen, visual edit, and screenshot capture are only available on the web browser. Rocket preview panel on the mobile app. ### Navigate to a screen Use the **Currently viewing** dropdown to switch between screens in your app. The **Refresh** icon sits in the same control strip as the URL bar. Tap it if your latest changes are not showing. Screen selection dropdown on the mobile app. ### Test responsive layouts and device models Tap the **Device** icon to switch between screen sizes and device models. **Web app views:** Desktop, Laptop, Tablet, Mobile **Mobile device models:** Samsung Galaxy S23, iPhone SE, iPhone 14 Pro, iPhone 16 Pro, iPhone 16 Pro Max, iPhone 17 Pro ## What's next? Click any element in the preview to change its text, style, or spacing. Update your app's fonts, colors, logo, and images from one place. Compare, roll back, and launch specific versions of your app. Publish your app to a live URL and share it with the world. # Theme Source: https://docs.rocket.new/build/editor/theme Update fonts, colors, logos, and imagery site-wide from the Rocket.new theme panel to keep branding consistent across every screen. The Theme panel is where you control your site's visual identity. Update fonts, colors, logo, and images from one place - every change applies site-wide when you save. Theme is only available for **Website** and **Landing page** build types, on the **web browser**. It is not available for other build types or in the Rocket mobile app. Theme changes apply site-wide but do not overwrite element-level changes you have made with Visual edit. Both co-exist: Visual edits take precedence on the individual elements you changed, while Theme governs everything else. ## How to open Theme In the preview toolbar, click **Edit**. Select **Theme** from the dropdown. Edit button clicked in the preview toolbar showing a dropdown with Visual edits and Theme options. The Theme panel opens over the preview. Make changes across any section, then click **Save changes** at the bottom to apply everything at once. ## Fonts Each typeface role in your site - primary, secondary, and any others - has its own dropdown. Theme panel with the Fonts section highlighted, showing typeface role dropdowns with font options. **To change a font:** Open the dropdown for the role you want to update. Pick a font from the list (Inter, Geist, DM Sans, Plus Jakarta Sans, Manrope, Space Grotesk, Poppins, Montserrat, Roboto, Outfit, and more). Click **Save changes**. Font changes are not applied to the preview until you save. ## Colors The Colors section shows your palette as a row of swatches. Theme panel with the Colors section highlighted, showing a row of color swatches for the site's palette. **To edit a color:** Click the swatches row or the arrow to open the color editor. Find the role you want to change - Background, Foreground, Primary, Secondary, Accent, Muted, Card, Border, Input, Focus Ring, and others are all listed individually. Click the role and set it to any color. Click **Save changes**. Color changes update every page and component that uses those roles. ## Logo The Logo section has upload slots for your site's brand marks. Theme panel with the Logo section highlighted, showing logo upload slots. | Slot | What it is | | :- | :- | | **Favicon** | The small icon shown in browser tabs and bookmarks | | **App logo** | Your primary logo, used in the navbar and other brand placements | **To upload:** Click the slot you want to fill. Select a file from your device. Click **Save changes**. Transparent PNGs work best for logos. For the favicon, use a square image - ICO and PNG formats are both supported. ## Images The Images section shows every image in your site, organized by page. Theme panel with the Images section highlighted, showing image thumbnails organized by page and a Shared Assets group. * **Page groups** - images listed under a page name only appear on that page * **Shared Assets** - images used across multiple pages; replacing one here updates it everywhere Click any thumbnail to replace it with a new file. ## What's next? Click any element to change its text, style, or spacing directly in the preview. Use slash commands like /Change App Theme and /Update App Logo for AI-driven brand changes. Describe broader design changes in chat and Rocket applies them across your site. Browse and edit your task source files directly. # Versions Source: https://docs.rocket.new/build/editor/versions Every Rocket.new build saves a version - compare diffs, label milestones, roll back changes, and redeploy any previous version from chat. Every time Rocket responds to a Build message, it saves the result as a new version. You get a complete history of your project that you can compare, roll back, label, and deploy - all from the chat panel. ## How versions work At the bottom of each Rocket message in chat you will see a **Files** row showing the version number and which files changed. Below it are action buttons. | Button | What it does | | :- | :- | | **Code diff** | Shows what changed between this version and the previous one | | **Rollback** | Reverts your project to this version | | **Create label** | Adds a name to this version so you can find it easily (web apps only) | | **Launch** | Deploys this specific version to staging or production (web apps only) | ## Code diff Code diff opens a side-by-side view of every file that changed in this version. Added lines are highlighted in green, removed lines in red. Code diff panel showing green and red highlighted lines across two changed files. Code diff panel showing green and red highlighted lines across two changed files. Use code diff to: * Review exactly what Rocket changed before moving on * Understand the impact of a specific edit * Debug unexpected behavior after a build ## Rollback Rollback reverts your entire project to the selected version instantly. Rolling back discards every version after the one you select. The discarded code, labels, and checkpoints leave no reference in chat. This cannot be undone. Locate the version you want to return to in the chat. Click **Rollback**. Click **Rollback now** to confirm. Rollback confirmation dialog warning that changes cannot be recovered. Rollback confirmation dialog warning that changes cannot be recovered. ## Create label Labels let you name and bookmark a specific version for easy reference later. Create label is only available for **web** apps. It is not available for mobile apps. A label is tied to its version. If you roll back past that version, the label is removed with the code. Chat will no longer show that codebase, label, or checkpoint. This cannot be undone. Locate the version in the chat. Click **Create label**. Type a name and press Enter. Create label input field open below the version action buttons. Create label input field open below the version action buttons. Good times to create a label: * Before a risky change you might want to undo * When a version is ready for review ("Client review v1") * At a significant milestone ("MVP", "Beta launch") ## Launch a version You can deploy any version directly - it does not have to be the most recent one. Launching a particular version is only available for **web** apps. It is not available for mobile apps. Locate the version in the chat. Click **Launch**. Select **Staging** or **Production**. Version card with Launch button highlighted. Version card with Launch button highlighted. | Target | What it is | | :- | :- | | **Staging** | A private preview environment for testing, not visible to end users | | **Production** | Your live app, visible to everyone with the URL | Launching a version does not affect your working state in the editor. Your project continues from wherever you are - only the deployed environment changes. For a full breakdown of how staging and production work together, see [Launch your site](/build/launch-web/launch-your-site). ## What's next? Test your app on different screen sizes before launching. Understand staging and production, and manage your releases. Browse and edit your project source files directly. Keep building - every message creates a new version automatically. # Task visibility Source: https://docs.rocket.new/build/editor/visibility Toggle Rocket.new Build tasks between public and private to control who can view your app, see work-in-progress builds, or open the task link. Every **Build** task has its own visibility setting. You choose who can view each Build task: just you and people with access, or anyone with the link. Visibility is set on each Build task, independently of the project. It does not apply to Solve or Intelligence tasks. ## Visibility levels | Level | Who can see it | Best for | | :- | :- | :- | | **Public** | Anyone with the link | Showcasing work, sharing examples, community contributions | | **Private** | You and people with access | Personal work, sensitive data, draft explorations | Public Build tasks display a "Built with Rocket" badge (also called the Rocket watermark). Anyone with the link can view the output. Anonymous viewers stay view-only. The task owner and people with edit access can chat and iterate. Private Build tasks are hidden from people who do not have access, even if they have the URL. Setting a Build task to Private requires a paid plan (Pro or above). Free plan Build tasks are always Public. ## Set task visibility You can set visibility when creating a Build task, or change it at any time from inside the task. Before submitting a new Build task from **Home**, click the **lock icon** next to the send button to choose **Public** or **Private**. Home screen input with the visibility dropdown open, showing Public and Private options with descriptions. Home screen input with the visibility dropdown open, showing Public and Private options with descriptions. Open the Build task, then click the **task name** at the top-left to open the dropdown. Task view with the task name in the top-left. Task view with the task name in the top-left. Select **Settings** from the dropdown. Task name dropdown open with Settings highlighted. Task name dropdown open with Settings highlighted. In the **Overview** panel, open the **Task Visibility** dropdown and choose **Public** or **Private**. The change takes effect immediately. Task Settings Overview panel with the Task Visibility dropdown open, showing Public and Private options. Task Settings Overview panel with the Task Visibility dropdown open, showing Public and Private options. ## How visibility affects sharing **Public Build tasks:** Copy the task URL and share it with anyone. Recipients can view the task output without logging in. **Private Build tasks:** Private tasks are hidden from people who do not have access. If you later change a private task to public, the full task history becomes visible immediately. Changing visibility from Private to Public exposes the entire task history, including all messages and outputs. Review your task content before making it visible. ## Frequently asked questions Yes. See the steps in the **From inside the task** tab above. No. Public/Private visibility is a Build-only setting. For Solve report outputs, use [report share links](/solve/results/share-and-export). No. Visibility controls who can see the task, not what Rocket can do with it. Rocket has full access to the task's files, context, and connected services regardless of visibility. Existing public links stop working immediately. Anyone who previously opened the public URL will see an error page. If you switch back to public, the same link becomes active again. No. Each Build task has its own visibility setting. You can have a mix of public and private Build tasks within a single [project](/getting-started/project/overview). ## What's next? Rename, star, move, or delete a task. Let others clone a Build task into their own workspace. # Visual edit Source: https://docs.rocket.new/build/editor/visual-edit Click any element in the Rocket.new preview to update text, tweak spacing, swap images, or adjust styling directly - no manual code required. Visual edit is accessed via the **web browser**, but you can use it to edit both web app and mobile app build tasks. Visual edit lets you click directly on any element in your preview and change it on the spot. No prompts, no guessing selectors. Select something, adjust it, and save. ## When to use visual edit | Use visual edit when | Use chat instead when | | :- | :- | | You can see and click the element | You need changes across multiple pages | | Quick text, style, or spacing tweaks | Complex layout restructuring or new sections | | You want immediate visual feedback | You are adding new features or logic | ## How to use In the preview toolbar, click **Edit**. A dropdown appears with two options: **Visual edits** and **Theme**. Edit button clicked in the preview toolbar showing a dropdown with Visual edits and Theme options. Edit button clicked in the preview toolbar showing a dropdown with Visual edits and Theme options. Click **Visual edits**. The preview becomes interactive and elements highlight as you hover over them. Click any element to select it. A floating toolbar appears with editing controls and an **Ask me...** field for quick AI-assisted changes. Visual edit mode active in Rocket with a selected element and the editing toolbar showing Ask me field and controls. Use the toolbar controls to adjust style, spacing, text, or images. You can also type a change in the **Ask me...** field and Rocket applies it to just that element. Click **Save changes** to write all pending changes to code. You can edit multiple elements before saving and they all apply at once. ## Editing tools ### Edit style Adjust colors, fonts, weight, and alignment directly in the toolbar. Click the element you want to style. Use the font size, weight, color, or alignment controls in the toolbar. Changes apply immediately in the preview. Click **Save changes**. Visual edit toolbar showing font size set to 20, Normal weight, color picker, text edit, spacing, italic, underline, align, go to code, and delete controls on a selected paragraph. ### Edit spacing Adjust margin and padding values on any element. Click the element you want to adjust. Click the spacing icon in the toolbar. Enter values for each side of the margin and padding. Click **Save changes**. Spacing panel expanded showing individual margin and padding numeric inputs for a selected element. ### Edit image Replace or update an image without touching code. Click an image element to select it. Click the image icon in the toolbar. Choose how to update it: * **Import** a URL from the web * **Upload** a file from your device (PNG, JPG up to 1MB) * **Auto** to regenerate the image with AI * **Instruction** to describe what you want Click **Update**. Update image panel showing Import URL, Upload file, Auto AI regenerate, and Instruction options for a selected image element. ### Delete an element Remove an element from the page. Click the element you want to remove. Click the **Delete element** icon at the end of the toolbar. Click **Save changes**. Visual edit toolbar with the delete element icon highlighted showing a Delete element tooltip. ### Go to code Jump directly to the element's source code for changes beyond what the toolbar offers. Click the element whose code you want to view. Click the **``** icon in the toolbar. The code view opens with the element highlighted. Visual edit toolbar with the Go to code icon highlighted showing a Go to code tooltip on a selected heading element. ### Ask for a quick change Every selected element has an **Ask me...** field at the top of the toolbar. Type a change in plain language and Rocket applies it to just that element. **Examples:** * `Make this button orange with white text and rounded corners` * `Set this heading to bold, center aligned, 32px` * `Add 24px padding and a subtle box shadow to this card` * `Change the background to a gradient from blue to purple` ## Toolbar reference | Tool | What it does | | :- | :- | | Ask me... | Apply a plain-language change to the selected element | | Font size | Set the size numerically | | Font weight | Toggle Bold, Semibold, Normal, etc. | | Color | Change the text or fill color | | T | Edit the text content inline | | Spacing | Adjust margin and padding | | I / U | Italic and underline | | Align | Change text or element alignment | | Image | Replace or regenerate an image | | `` | Jump to the element's source code | | Delete | Remove the element from the page | | **Save changes** | Write all pending changes to code | ## What's next? Update your site's fonts, colors, logo, and images from one place. Use slash and @ commands for precise, targeted edits. Use chat for bigger changes, new sections, or logic updates. Browse and edit your task source files directly. # Download and install APK Source: https://docs.rocket.new/build/launch-mobile/android-apk Generate and download a signed Android APK from your Rocket.new Flutter project, then sideload and test on any device running Android 8.0 or later. Rocket builds your mobile app into an APK you can install on any Android device. Use this to get a full native testing experience before you [publish to Google Play](/build/launch-mobile/google-play). You need an Android device running version 8.0 or higher. Downloading an APK requires a paid plan (Pro or above). Not ready to build a native package? [Share your app as a web preview](/build/launch-mobile/share-as-web-preview) for instant testing in any browser without a build step. ## Build and download From your task, click the **Launch** button in the top-right corner. A popup appears with the **Rocket hosted** tab selected by default. Launch popup open showing Rocket hosted tab selected by default. Launch popup open showing Rocket hosted tab selected by default. Click the **APK** tab, then click **Build** to start generating your APK. APK tab selected in the Launch popup showing the Build button. APK tab selected in the Launch popup showing the Build button. A progress bar shows the build status. If it takes more than a minute, Rocket emails you a download link when it is ready. APK tab showing Building APK progress bar at 95%. APK tab showing Building APK progress bar at 95%. When the build finishes, click **Download** to save the `.apk` file to your computer. Click **Build new APK** to rebuild with your latest changes. APK tab showing Download and Build new APK buttons after a successful build. APK tab showing Download and Build new APK buttons after a successful build. From your project screen, tap **More** in the header bar. More button in header bar on mobile. Tap **Launch on Android phone** from the menu. Dropdown menu showing Launch on Android phone option highlighted on mobile. Tap **Build APK** to start the build. Launch on Android phone modal showing Build APK button on mobile. A progress indicator shows the build status. If it takes more than a minute, Rocket emails you a download link when it is ready. Progress indicator during Android app build showing Building status on mobile. When the build finishes, tap **Download** to save the `.apk` file to your device. Tap **Build new APK** to rebuild with your latest changes. If a build fails, fix any code errors in your editor, make sure you have a stable internet connection, and click **Rebuild**. Common causes are dependency mismatches, invalid configurations, or unsupported packages. If it fails three times in a row, contact [support@rocket.new](mailto:support@rocket.new). ## Install on your Android device If you downloaded it from a browser, check the **Downloads** folder. If you downloaded it on your computer, transfer it to your device via USB or cloud storage. Open your device's **Files** or **Downloads** app and tap the APK file. A system prompt appears asking if you want to install the app. System prompt triggered after tapping the APK file to start installation. If this is your first time installing an APK from this source, Android will block the install and show a warning. 1. Tap **Settings** in the popup. 2. Toggle on **Allow from this source**. 3. Tap the back arrow to return to the install screen. Android settings screen showing Allow from this source toggle enabled. You only need to do this once per app you use to open the APK (such as Chrome or Gmail). Tap **Install** and wait a few seconds. Once done, tap **Open** to launch it or find it in your app drawer. After installing, consider turning off **Allow from this source** to protect your device. Go to **Settings > Apps > Special app access > Install unknown apps**, select the app you used, then disable the permission. ## What's next? Submit your tested app to the Google Play Store for public distribution. Decide between web links, APK builds, and app store submissions. # Apple App Store Source: https://docs.rocket.new/build/launch-mobile/apple-store Package your Rocket.new Flutter project for iOS and submit the build to the Apple App Store for TestFlight review or public distribution. Rocket generates production-ready Flutter code that you can publish directly to the Apple App Store. This guide covers every step from registering in App Store Connect to submitting your build for review. **Before you start:** * An [Apple Developer account](https://developer.apple.com/programs/enroll/) (\$99/year) * A Mac with Xcode installed * Store listing assets: app name, description, icon, screenshots, and a privacy policy URL Publishing to the App Store requires Xcode on a Mac. This process is not available in the Rocket mobile app. If you want to share your app without the store, [launch it as a web preview](/build/launch-mobile/share-as-web-preview) or [download an APK](/build/launch-mobile/android-apk) for Android testing. ## Steps In the Build editor, open the **Code** tab and click **Download** in the toolbar to export your project as a `.zip` file (paid plan required). Extract it on your Mac. This is the Flutter project you will open in Xcode. Download your project source code Join the Apple Developer Program and register your app in App Store Connect using your bundle ID. Register on App Store Connect (Flutter docs) Before exporting your `.ipa`, confirm your build and signing settings are correct. Review Xcode project settings (Flutter docs) Archive your app and follow Apple's process for uploading it to App Store Connect and submitting it for review. Distribute your app through Xcode (Apple docs) To release a new version or make changes after launch, use App Store Connect to submit updates. Update your app in App Store Connect (Apple docs) ## What's next? Reach Android users by submitting your app to the Google Play Store. Compare distribution options to decide where else to publish. # Google Play Store Source: https://docs.rocket.new/build/launch-mobile/google-play Prepare your Rocket.new Flutter build for Android and submit the app bundle to Google Play for internal testing tracks or a public release. Rocket generates production-ready Flutter code that you can publish directly to the Google Play Store. This guide covers every step from creating a developer account to submitting your first release. **Before you start:** * A [Google Play Developer account](https://play.google.com/console/signup) (\$25 one-time fee) * A Mac or PC with [Flutter installed](https://docs.flutter.dev/get-started/install) * Store listing assets: app name, description, icon, and screenshots Publishing to Google Play Store requires building your app with Flutter command-line tools on a computer. This process is not available in the Rocket mobile app. If you want to share your app without the store, [launch it as a web preview](/build/launch-mobile/share-as-web-preview) or [download an APK](/build/launch-mobile/android-apk) for direct testing. ## Steps In the Build editor, open the **Code** tab and click **Download** in the toolbar to export your project as a `.zip` file (paid plan required). Extract it on your computer. This is the Flutter project you will build from. Download your project source code Go to the [Google Play Console](https://play.google.com/console/signup), accept the terms, and pay the one-time registration fee. Set up your Developer Account (Google's official guide) Create a new app and fill in the basics: app name and default language, app category (game or app), release type and intended users, and store listing information (description, screenshots, icon). Set up a new app in Play Console (Google's official guide) Use Flutter's official instructions to generate a release-ready `.aab` from the code Rocket generated. Build and release an Android app (Flutter docs) Upload your `.aab` to the Play Console, write release notes, and submit through the **Production** track. Prepare and roll out a release (Google's official guide) After launch, push updates or change your app's visibility at any time from the Play Console. Manage app updates and visibility (Google's official guide) ## What's next? Reach iOS users by submitting your app to the Apple App Store. Compare distribution options to decide where else to publish. # Share as web preview Source: https://docs.rocket.new/build/launch-mobile/share-as-web-preview Publish your Rocket.new mobile app as a shareable web preview so testers can open the build in a browser without installing an APK or IPA. Rocket deploys your mobile app as a browser-accessible web preview that anyone can open without installing anything. This is useful for sharing with testers, stakeholders, or clients without waiting for [App Store](/build/launch-mobile/apple-store) or [Google Play](/build/launch-mobile/google-play) review. You can push updates to the same URL at any time. Mobile apps are always hosted on Rocket's Netlify account. You cannot connect your own Netlify account or a custom domain for mobile app web previews. ## Steps Click the **Launch** button in the top-right corner of your task. A popup appears with the **Rocket hosted** tab already selected. Launch popup showing the Rocket hosted tab selected with a Launch button. Launch popup showing the Rocket hosted tab selected with a Launch button. Click **Launch**. Rocket deploys your app and shows a loading spinner while it is running. When deployment finishes, your public URL appears with a **Copy** button. Share this link with anyone. No app install is needed to open it. Deployed app URL shown with a Copy button after launch completes. Deployed app URL shown with a Copy button after launch completes. Mobile apps are always hosted on Rocket's Netlify account. See the note at the top of this page for details. Click **Launch** again at any time to return to the popup. * Click **Update** to push your latest changes to the same URL. * Click **Unpublish** to remove the app and disable the public link (paid plan required). Open your project in the Rocket mobile app and tap **More** at the bottom of the screen. More tab highlighted in the navigation bar at the bottom of the screen. In the settings modal, tap **Launch on Netlify**. Project settings modal showing Launch on Netlify option highlighted. Tap **Launch** to start deployment. The button changes to **Launching** while Rocket deploys your app. Launch on Netlify modal showing Netlify logo and Launch button. When deployment finishes, you see a confirmation screen with your public link. Tap **Copy and share link** to share it. Use **Update** to push new changes or **Unpublish** (paid plan required) to take it offline. Published app confirmation showing live link and controls to update or unpublish. Mobile apps are always hosted on Rocket's Netlify account. See the note at the top of this page for details. ## What's next? Build a native Android package for device testing or direct distribution. Decide between web links, APK builds, and app store submissions. # Sharing vs. app stores Source: https://docs.rocket.new/build/launch-mobile/sharing-vs-stores Compare web preview links, APK downloads, and app store submissions to pick the right way to distribute your Rocket.new mobile app to users. Rocket gives you three ways to distribute your mobile app: web links, downloadable APK builds, and app store submissions. Each option fits a different stage of your project, from early prototyping to public launch. Use the comparison below to decide which method matches your needs. ## Compare your options
| | **Web link** | **Download build** | **App stores** | | :- | :- | :- | :- | | **Best for** | Quick sharing, demos, stakeholder reviews | Testing on real devices, beta distribution | Public release, monetization, discoverability | | **Speed** | Instant | Minutes (build time) | Days to weeks (review process) | | **Audience** | Anyone with the link | Testers with devices | Public | | **Requirements** | None | Android device or emulator | Developer account + store approval | | **Cost** | Free | Free | [USD 25 one-time on Google Play Store](https://play.google.com/console/signup) or
[USD 99/year on Apple App Store](https://developer.apple.com/programs/enroll/) | | **Updates** | Automatic on relaunch | Rebuild and reinstall | Submit new version for review |
## Choose your distribution method **Sharing a prototype or demo?** [Launch a web preview](/build/launch-mobile/share-as-web-preview). It works on any device with a browser and requires no installs. You can also [launch your web app](/build/launch-web/launch-your-site) with a public URL. **Testing before release?** [Download an APK](/build/launch-mobile/android-apk) (paid plan required) and install it on Android devices to test the full native experience. **Ready for public release?** Submit to [Google Play](/build/launch-mobile/google-play) or the [Apple App Store](/build/launch-mobile/apple-store) to reach users worldwide. ## What's next? Share your mobile app as a browser link with no installs required. Build and sideload your app onto an Android device. Use your own domain for a branded web preview URL. # Buy a domain Source: https://docs.rocket.new/build/launch-web/buy-domain Search, purchase, and connect a new domain to your Rocket.new app directly from the editor - registration, DNS, and HTTPS are handled for you. Purchase a domain directly through Rocket and connect it to your app without visiting a separate registrar. Rocket uses IONOS to handle the purchase. You are redirected to IONOS to complete payment, and DNS is configured automatically when done. Buying a domain through Rocket requires a paid plan (Pro or above). ## Steps Click the **Launch** button in the top-right corner of your task. Rocket editor with the Launch button highlighted in the top-right navbar. Rocket editor with the Launch button highlighted in the top-right navbar. You can reach the domain purchase from two places in the launch dialog: In the **Staging** tab, select **Purchase a new domain** and click **Next**. Launch dialog on the Staging tab with the Purchase a new domain radio button selected. Launch dialog on the Staging tab with the Purchase a new domain radio button selected. Launch dialog on the Staging tab with the Next button highlighted. Launch dialog on the Staging tab with the Next button highlighted. Switch to the **Production** tab. It shows a **Custom domain** input field with a **Purchase a new domain** link. Click it. Production tab showing the Custom domain input field with the Purchase a new domain button highlighted. Production tab showing the Custom domain input field with the Purchase a new domain button highlighted. The IONOS domain search opens inside Rocket. Type the name you want and click **Search**. IONOS Find your new domain modal with a search input and Search button. IONOS Find your new domain modal with a search input and Search button. Browse available domains and their pricing. Click the **→** button next to the domain you want. Domain search results listing available domains with first-year pricing and a select arrow button. Domain search results listing available domains with first-year pricing and a select arrow button. Rocket redirects you to IONOS to complete payment. Keep this screen open. Rocket connects your domain automatically once the purchase is confirmed. Rocket screen showing the IONOS logo and the message: You'll complete your domain purchase on IONOS. Don't close this screen. Rocket screen showing the IONOS logo and the message: You'll complete your domain purchase on IONOS. Don't close this screen. Do not close the Rocket tab while the IONOS payment is in progress. Rocket needs this screen open to detect the completed purchase and configure your DNS automatically. ## What's next? Already own a domain? Connect it to your Rocket app instead. Test in staging, publish to production, and roll back if needed. Optimize your site so search engines find it at your new domain. Full guide to deploying your web app. # Custom domain Source: https://docs.rocket.new/build/launch-web/custom-domain Point an existing domain at your Rocket.new app with automatic HTTPS - let Rocket configure DNS for supported registrars or add records manually. Connect any domain you own to your Rocket app so it is reachable at your custom address with automatic HTTPS. Custom domains are connected on Rocket's Vercel account. If you do not own a domain yet, you can [buy one directly through Rocket](/build/launch-web/buy-domain) (paid plan required). Connecting a custom domain requires a paid plan (Pro or above). You also need a Rocket task that has been [deployed to the web](/build/launch-web/launch-your-site) and access to your domain provider account. Rocket tries to configure DNS automatically by default. For supported providers, it logs into your domain account with one-time permission and updates the records for you. If automatic setup is not available for your provider or fails, you can fall back to the manual method where Rocket gives you the exact records to add yourself. ## Automatic setup (default) Rocket uses an automated flow to log in to your domain provider and configure DNS automatically with your permission. This works for supported providers. Click the **Launch** button in the top-right corner of your project, then click the **Production** tab. Launch panel with the Production tab selected. Launch panel with the Production tab selected. Choose which version of your app to publish from the version dropdown. Once you select a version, type your domain in the **Custom domain** field (for example, `example.com`) and click **Next**. Version dropdown open in the Launch panel showing available versions. Version dropdown open in the Launch panel showing available versions. Once you publish on a version, you can only move forward to newer versions. To go back to an earlier version, you need to unpublish and publish again from that version. Launch panel with a version selected and a domain name entered, ready to click Next. Launch panel with a version selected and a domain name entered, ready to click Next. Rocket prompts you to configure your Production Environment. Click **Setup now** to add any required environment variables. If you have no environment variables to add, click **Skip & continue**. Rocket prompt to set up the Production Environment with Setup now and Skip & continue buttons. Rocket prompt to set up the Production Environment with Setup now and Skip & continue buttons. Add your required environment variables in the Production environment settings, then click **Done** to continue. Production environment settings with variables added and the Done button highlighted. Production environment settings with variables added and the Done button highlighted. Rocket opens a popup explaining that it will configure your domain automatically. Click **Continue**. Automatic domain configuration popup with Continue button highlighted. Rocket shows a login screen for your domain provider. Enter your credentials and click **Continue** to grant one-time permission to configure DNS. Provider login screen asking for credentials to grant one-time DNS configuration permission. Your provider shows the existing DNS records and the new ones Rocket wants to add. Review them and click **Okay, continue** to approve the change. Provider confirmation screen showing existing and new DNS records with Okay, continue button. Your domain is confirmed as configured. Click **Done**. DNS propagation can take up to 48 hours, after which your app is live at your custom domain. Success screen showing your domain is now configured with Done button. Once live, the Launch panel shows your domain URL. You can click it to open your app. Launch panel showing the custom domain is live and the URL is active. Launch panel showing the custom domain is live and the URL is active. ## Manual setup (fallback) Use this method if automatic setup is not available for your provider or did not complete successfully. Rocket shows you the exact DNS records and you add them directly in your domain provider's dashboard. Click the **Launch** button, select the **Production** tab, choose your version, enter your domain, and click **Next**. Complete the [Production Environment step](#set-up-the-production-environment) as described above. If automatic setup did not work or your provider is not supported, click **Go to our manual setup** on the automatic setup screen. Rocket shows you the exact DNS records to add. Rocket manual DNS configuration screen showing record type, host name, and required values to copy. Remove any existing A and AAAA records for your domain before adding the new ones. Conflicting records will prevent your domain from connecting. Copy each record (Type, Host Name, Required Value). In a new browser tab, open your domain provider's DNS settings and add them exactly as shown. Once you have added all records in your provider's dashboard, click **I have added all records above to my domain's provider** in Rocket. Rocket starts monitoring for the DNS changes. You're all set screen after confirming DNS records have been added. DNS propagation can take up to 48 hours. Once Rocket detects the records, your domain goes live automatically. Open your app in the Rocket mobile app and tap the **More** tab at the bottom of the screen. More tab highlighted in the navigation bar at the bottom of the screen. In the settings modal, tap **Launch on custom domain**. Project settings modal showing Launch on custom domain option highlighted. Tap **+ Add domain**, type the domain you own (for example, `example.com`), and tap **Add Domain**. Rocket adds the domain to your project and shows the DNS records you need. Text input for adding your domain to Rocket on mobile. Copy the DNS records that Rocket shows you. DNS records provided by Rocket for domain verification on mobile. Open your domain provider's dashboard (you may need a web browser for this step) and add the records exactly as shown. **What to add:** * **Root domains** (e.g., `example.com`): Add two A records, one with host `@` (root) and one with host `www`, both pointing to the IP address provided by Rocket. * **Subdomains** (e.g., `app.example.com`): Add one A record with the subdomain as the host (e.g., `app`), pointing to the IP address provided by Rocket. Return to the Rocket mobile app and tap **Refresh** next to your domain. The status shows **Verification in process** at first. When Rocket detects the correct DNS records, the status changes to **Live**. Your app is now accessible at your custom domain. Rocket showing your domain verification status on mobile. DNS changes can take up to 48 hours to propagate. Your domain may not work immediately after setup. ## Fix conflicting DNS records If your domain is not connecting after 48 hours, you likely have conflicting DNS records. Go to [dnschecker.org](https://dnschecker.org/), enter your domain, and select **A** as the record type. If you see multiple different IP addresses, log in to your domain provider's dashboard and remove any A records that do not point to the IP address Rocket provided. Wait up to 24 hours for the changes to propagate, then check the domain status in Rocket again. Multiple A records with different IP addresses cause your domain to intermittently point to the wrong server. Keep only the Rocket IP address configured. ## What's next? Optimize meta tags and sitemaps so search engines find your site. Track visits, pageviews, and traffic sources from your dashboard. Set up cookie consent, GDPR banners, and a privacy policy page. # Launch your site Source: https://docs.rocket.new/build/launch-web/launch-your-site Publish your Rocket.new app to a staging URL to preview the live build, share it with reviewers, and validate everything before going public. Rocket deploys your app to a staging URL where you can test and share it before going live. When you're ready to publish to a real domain, connect a custom domain from the **Production** tab. ## Publish to staging Open your task in Rocket and click the **Launch** button in the top-right corner. Rocket editor with the Launch button highlighted in the top-right. Rocket editor with the Launch button highlighted in the top-right. The launch dialog opens with **Staging** and **Production** tabs. Stay on **Staging** and click **Publish**. You can also connect or purchase a custom domain directly from the Staging tab. See [Custom domain](/build/launch-web/custom-domain) and [Buy a domain](/build/launch-web/buy-domain) for details. Launch dialog with Staging tab selected. Launch dialog with Staging tab selected. Rocket hosts apps on Rocket's Vercel account. If you [connect your own Netlify account](/build/connectors/netlify), Rocket deploys to that account instead of Vercel. When deployment finishes, you see your staging URL. Share it with teammates to collect feedback, or open it yourself to test. Confirmation screen showing the staging URL and options to update or unpublish. Confirmation screen showing the staging URL and options to update or unpublish. Click **Update** any time to push your latest changes to the same URL. Staging has no version dropdown. It publishes the current build. Click **Unpublish** to take the staging URL offline. Unpublishing requires a paid plan (Pro or above). Unpublish confirmation dialog. Unpublish confirmation dialog. After unpublishing, the link stops working immediately. You can republish at any time. ## Update a deployment Staging and Production keep separate environment variables. Before you update either one, open **Settings**, click **Environment**, and set values on the tab that matches the site you are updating. * **Staging.** Click **Update** on the Staging tab. There is no version number on this tab. Set values on the **Staging** tab in Environment settings first. * **Production.** The version dropdown is only on the Production tab. Select the version number you want live, then update. Set values on the **Production** tab in Environment settings first. See [Environment variables](/build/editor/env-variables). ## Ready to go live? When testing is done, switch to the **Production** tab in the Launch dialog to connect a custom domain and publish your live app. The version dropdown on this tab is how you choose which version goes live. Connect your own domain and publish to production. ## What's next? Optimize meta tags and sitemaps so search engines find your site. Track how users interact with your live app. # Analytics Source: https://docs.rocket.new/build/measure/analytics Track visits, bounce rate, referrers, and marketing campaigns inside Rocket.new with built-in analytics - no third-party script or setup required.
Analytics dashboard overview
Every deployed Rocket project includes a built-in analytics dashboard. No setup required. It starts collecting data as soon as your site is live. ## How to open analytics Go to [rocket.new](https://rocket.new) and open the task you want to monitor. Make sure it has been launched, as analytics only tracks live traffic and the dashboard will be empty until your site is deployed. Click **...** in the top navigation bar of your task, then select **Analytics** from the menu. The dashboard populates automatically as your site receives traffic. Analytics tab selected showing Visits, Unique Visitors, Pageviews, Visit Duration, Bounce Rate metrics and a visit timeline chart. Analytics tab selected showing Visits, Unique Visitors, Pageviews, Visit Duration, Bounce Rate metrics and a visit timeline chart. Preview mode and localhost visits are not tracked. Only traffic to your deployed site is counted. ## What the dashboard tracks ### Top-level metrics Five metrics appear across the top of the dashboard: | Metric | What it measures | | - | - | | **Visits** | Total number of sessions | | **Unique Visitors** | Distinct users who visited your site | | **Pageviews** | Total pages viewed across all sessions | | **Visit Duration** | Average time visitors spend on your site | | **Bounce Rate** | Percentage of visitors who leave after viewing a single page | ### Visits over time A timeline chart plots visits over your selected date range. Hover over any point to see the exact count for that time slot. Use the date filter to switch between **Today**, **7 days**, **30 days**, or a custom range. Use the **Compare** dropdown to compare traffic against another date. ### Traffic breakdowns Five sections below the chart break down where your traffic is coming from and who is visiting: | Section | What it shows | | - | - | | **Source** | Where visitors come from: direct, Google, social media, or referral links | | **Page** | Which pages get the most visits | | **Device** | Desktop, mobile, or tablet split | | **Country** | Geographic distribution of visitors | | **UTM Campaign** | Traffic attributed to specific campaigns using UTM parameters. Append `?utm_campaign=name` to your shared URLs to start tracking. | Full analytics dashboard showing Source, Page, Device, Country, and UTM Campaign breakdown tables. Full analytics dashboard showing Source, Page, Device, Country, and UTM Campaign breakdown tables. ## What's next? Drive more organic traffic with better SEO settings. Cookie consent settings affect what analytics can track. See how your site scores on Core Web Vitals and fix speed issues. Add third-party tracking scripts like Facebook Pixel or Hotjar. # Performance Source: https://docs.rocket.new/build/measure/performance Score your Rocket.new site against Core Web Vitals and fix LCP, CLS, and JavaScript issues with one-click actions from the performance dashboard. Your site's speed affects who finds it, who stays, and who converts. Rocket measures your site on the same metrics Google uses, grades it from A to F, and shows you exactly what to fix.
How to use the Rocket performance dashboard to check Core Web Vitals
Performance is only available for landing page and website projects. Google uses Core Web Vitals (LCP, INP, CLS) as a ranking signal. Sites that score poorly on these metrics risk lower placement in search results. ## Steps Click **...** in the top navigation bar of your task, then select **Performance** from the menu. Use the **Staging / Production** toggle to choose which environment to check. Then switch between **Desktop** and **Mobile** to see scores for each. Desktop and mobile scores are measured separately because page loading differs by device. Mobile connections are slower, screens are smaller, and browsers handle resources differently. A page that scores well on desktop can still perform poorly on mobile. Check both. Performance tab showing Grade A, five metric cards (LCP, INP, CLS, FCP, TTFB) all rated Great, with Desktop and Mobile tabs and Staging/Production toggle. Performance tab showing Grade A, five metric cards (LCP, INP, CLS, FCP, TTFB) all rated Great, with Desktop and Mobile tabs and Staging/Production toggle. Click **Refresh** to fetch the latest scores. In **Issues**, click **Try to fix** on items you want Rocket to resolve automatically. **Try to fix** uses credits. Each fix is an AI-powered code change applied to your project. Click **Refresh** again. Aim for consistent "Great" on LCP, INP, and CLS. ## What the dashboard measures The Performance tab grades your site from **A to F** based on five metrics: * **Three Core Web Vitals:** The metrics Google uses for search ranking. * **Two diagnostics:** Supplementary metrics that help identify the root cause of slower scores. Each metric shows a score, a progress bar, and a rating: Great, Needs Improvement, or Poor. Performance dashboard showing five metric cards (LCP, INP, CLS, FCP, TTFB) all rated Great, followed by the Identified issues list with Try to fix and Ignore buttons. Performance dashboard showing five metric cards (LCP, INP, CLS, FCP, TTFB) all rated Great, followed by the Identified issues list with Try to fix and Ignore buttons. ### Page load speed (LCP) **Largest Contentful Paint** measures how long it takes for the main content of your page to become visible. This is usually the hero image, headline, or largest text block. Visitors decide whether a page feels fast or slow based on this moment. Faster LCP means more people stay. | Rating | Threshold | | - | - | | Great | Under 2.5 seconds | | Needs Improvement | 2.5 to 4 seconds | | Poor | Over 4 seconds | ### Click response (INP) **Interaction to Next Paint** measures how quickly the page reacts when someone clicks, taps, or types. A slow INP makes the site feel unresponsive or broken even after it has fully loaded. | Rating | Threshold | | - | - | | Great | Under 200ms | | Needs Improvement | 200ms to 500ms | | Poor | Over 500ms | ### Page stability (CLS) **Cumulative Layout Shift** measures how much the page layout moves while it is loading. A score of 0 means nothing shifts. Higher scores mean elements are jumping around, which causes misclicks and a frustrating experience. | Rating | Threshold | | - | - | | Great | Under 0.1 | | Needs Improvement | 0.1 to 0.25 | | Poor | Over 0.25 | ### First impression (FCP) **First Contentful Paint** measures how quickly the first piece of content appears on screen, whether text, an image, or a background. Unlike LCP, which tracks the main content, FCP captures the first sign of life. A fast FCP tells the visitor the page is working. A slow one looks like a blank screen. | Rating | Threshold | | - | - | | Great | Under 1.8 seconds | | Needs Improvement | 1.8 to 3 seconds | | Poor | Over 3 seconds | ### Server speed (TTFB) **Time to First Byte** measures how quickly the server starts sending a response to the browser. Everything else depends on this. If the server is slow, no amount of front-end optimization will make up for it. | Rating | Threshold | | - | - | | Great | Under 800ms | | Needs Improvement | 800ms to 1800ms | | Poor | Over 1800ms | Thresholds are defined by [Google's Web Vitals standards](https://web.dev/articles/defining-core-web-vitals-thresholds) and measured at the 75th percentile of page views. This means if 75% of your visitors see a "Great" score, your site passes. Staging scores reflect your current work in progress. Production scores reflect what real users experience on your live site. Check both before publishing to catch issues before they go live. ## Identified issues Below the metric cards, Rocket lists specific issues detected on your site. Each issue includes the affected metric, the current value, and an estimated savings breakdown so you can see exactly where time or bytes are being lost. Caused by unused JavaScript, render-blocking CSS, or unoptimized images. Estimated waste in KiB shown for both mobile and desktop. On generated images, affecting both LCP and FCP savings. ### Fixing or ignoring issues Every issue has two actions: * **Try to fix.** Rocket applies an automatic fix (compress images, remove unused code, add lazy loading, set cache headers). Each fix targets the exact metric that flagged the issue. This uses credits. * **Ignore.** Dismisses the issue if it is not relevant or if you plan to address it manually. ## Improving your scores You can also describe the issue to Rocket in chat and it will apply the fix for you. ```plaintext wrap Page speed theme={null} Improve my site's page load speed. Optimize images, lazy load below-the-fold content, and reduce unused JavaScript. ``` ```plaintext wrap Layout shifts theme={null} Fix layout shift issues on my landing page. Make sure images and fonts have explicit dimensions so nothing jumps around while loading. ``` ```plaintext wrap Server speed theme={null} Improve server response time by adding caching headers and optimizing the critical rendering path. ``` ## Frequently asked questions Google uses Core Web Vitals as a ranking signal. Sites that fail the thresholds risk being pushed down in search results. Beyond SEO, speed directly affects revenue: a [Deloitte study](https://www.deloitte.com/ie/en/services/consulting/research/milliseconds-make-millions.html) found that a 0.1-second speed improvement increased travel site conversions by 10.1%. If you build sites for clients, a Grade A performance report is concrete proof of quality before they even review the design. After every major change: adding images, new sections, third-party scripts, or fonts. Always before deploying to production. Rocket makes this a one-click task with the **Refresh** button. Staging measures your work in progress inside Rocket. Production measures what real visitors experience on your [deployed site](/build/launch-web/launch-your-site). Scores can differ if your production environment has additional third-party scripts, different assets, or different server configurations. Rocket analyzes the specific issue and applies targeted fixes: compressing oversized images, removing unused JavaScript, adding lazy loading to off-screen images, or setting proper cache headers. Each fix targets the exact metric that flagged the issue. No. The **Try to fix** button handles everything automatically. You can also describe the issue in plain language in Rocket's chat and it will apply the changes. LCP, INP, and CLS are the three Core Web Vitals that affect search ranking. FCP and TTFB are supplementary diagnostics. Rocket tracks all five because fixing TTFB or FCP often improves the core three as well. ## What's next? Performance scores directly affect your Google search rankings. Optimize your site for search engines. Track how performance improvements affect your traffic, bounce rate, and engagement over time. Accessible sites tend to perform better due to cleaner HTML structure. Improve both at once. Deploy to production so performance can be measured against real traffic. # Overview Source: https://docs.rocket.new/build/overview Build production-ready web apps, mobile apps, and landing pages with Rocket.new Build - the AI app builder with research, building, and intelligence. Build is Rocket's AI app builder. Describe what you want, and Rocket generates a fully functional app complete with UI, navigation, logic, and production-ready code. ## What you can build SaaS products, dashboards, internal tools, e-commerce stores, AI-powered apps, and anything that runs in a browser. iOS and Android apps from a single codebase, ready for the App Store and Google Play. Marketing sites, portfolios, blogs, and conversion-focused pages with built-in SEO and fast load times. Online stores with product catalogs, checkout flows, and payment integrations. ## How it works Tell Rocket what you want in plain language. Include the app type, key screens, features, and any design preferences. The more specific you are, the closer the first result will be to what you have in mind. Rocket plans the architecture, writes production-ready code, and shows a live preview the moment generation finishes. Iterate through chat, Visual edit, or Code until the app is exactly right. Click **Launch** when ready. Go from idea to live app in 10 minutes. ## How to start a build Pick the starting point that matches where you are. Describe what you want in plain language and Rocket builds it. Provide a URL and transform an existing website into a new design. Upload a screenshot, wireframe, or design mockup. Start from a pre-built template and customize from there. Import an existing repository and continue building. ## Frequently asked questions Yes. You have several options: * Open [Code](/build/editor/code) to browse and edit source files directly. * Use [Visual edit](/build/editor/visual-edit) to click and change elements on the canvas. * Inject [custom code](/build/editor/custom-code) for scripts and snippets. * Download the full project as a `.zip` file and continue in your own editor (paid plan required). Redesign transforms an existing website. Provide a URL and describe the changes you want (a new visual style, updated layout, or improved conversion flow) and Rocket generates a redesigned version. See [Redesign](/build/create/commands/redesign) for details. Build tasks consume credits based on your app's complexity and the number of screens generated. Your credit allocation depends on your subscription plan. See [Pricing](/getting-started/pricing) and [Credits](/getting-started/credits) for details. Yes. After launching, connect a custom domain through the **Launch** menu (paid plan required). Rocket handles SSL certificates and DNS configuration automatically. See [Custom domains](/build/launch-web/custom-domain) for the step-by-step guide. ## What's next? Chat, Visual edit, Code, preview, and everything in between. Prompt patterns, iteration strategies, and tips for complex apps. Add payments, databases, AI models, email, and more. Research a market or validate an idea before you start building. # Accessibility Source: https://docs.rocket.new/build/polish/accessibility Improve WCAG 2.1 AA compliance across your Rocket.new site with automated fixes for alt text, ARIA labels, contrast ratios, and keyboard nav.
Accessibility
About 95% of websites fail basic accessibility checks ([WebAIM Million report, 2025](https://webaim.org/projects/million/)). Accessible sites also rank better in search engines because they use semantic HTML that crawlers understand, which directly supports your [SEO efforts](/build/polish/seo). Rocket generates reasonable code by default, but you can ask it to go further with ARIA labels, alt text, keyboard navigation, and contrast fixes. ## What Rocket includes by default Every Rocket site starts with a reasonable baseline: * Semantic HTML elements (`nav`, `main`, `section`, `article`) * Basic heading hierarchy * Standard form labels * Responsive layouts ## What you can ask Rocket to improve Tell Rocket in chat what to improve. Below are the most common requests. ### Alt text for images Descriptive alt text lets screen reader users understand images. Ask Rocket to add it across your site. ```plaintext wrap theme={null} Add descriptive alt text to all images on my site. Make them meaningful for screen reader users. ``` ### ARIA labels and roles ARIA attributes tell assistive technology what interactive elements do. Ask Rocket to label buttons, links, form fields, and navigation. ```plaintext wrap theme={null} Add ARIA labels to all interactive elements. Make sure buttons, links, and form fields are properly labeled for screen readers. ``` ### Keyboard navigation Some visitors navigate with a keyboard instead of a mouse. Ask Rocket to make every interactive element reachable with Tab and add visible focus indicators. ```plaintext wrap theme={null} Improve keyboard navigation on my site. Add visible focus indicators and make sure all interactive elements are reachable with Tab. ``` ### Color contrast Low contrast makes text hard to read for people with low vision. Ask Rocket to check and fix contrast issues against WCAG AA thresholds. ```plaintext wrap theme={null} Check my site for color contrast issues and fix any text that does not meet WCAG AA contrast ratios. ``` ### Skip navigation links A skip-to-content link lets keyboard users jump past repeated navigation to the main content. ```plaintext wrap theme={null} Add a skip-to-main-content link at the top of every page for keyboard navigation. ``` ### Accessibility statement An accessibility statement documents your compliance efforts. Some organizations require it for procurement and legal reviews. You may also want to pair this with a [privacy policy](/build/polish/compliance) to cover both legal areas. ```plaintext wrap theme={null} Generate an accessibility statement page for my site documenting our WCAG 2.1 AA compliance efforts. ``` ## Commands Use these slash commands from chat to audit and improve accessibility. You can find the full list of available commands in the [commands reference](/build/editor/commands). ### /Generate Accessibility Report Generate a WCAG 2.1 AA compliance report documenting your site's current accessibility status. Useful for enterprise procurement, ADA audits, and internal compliance reviews. **Examples:** * `/Generate Accessibility Report` * `/Generate Accessibility Report for dashboard` ### /Improve Accessibility Audit Run a full WCAG 2.1 AA audit and auto-fix issues across your codebase. Rocket fixes missing alt text, contrast problems, heading hierarchy, and ARIA attributes. **Examples:** * `/Improve Accessibility Audit` * `/Improve Accessibility Audit for forms and navigation` In the US alone, over 5,000 digital accessibility lawsuits were filed in 2025 ([UsableNet year-end report](https://blog.usablenet.com/ada-web-lawsuit-trends-2026)). Proactive auditing reduces legal risk. ## What's next? Semantic, accessible HTML also improves your search rankings. Pair accessibility with GDPR and CCPA compliance for full legal coverage. Publish your accessible site to a live URL. # Compliance & privacy Source: https://docs.rocket.new/build/polish/compliance Add GDPR, CCPA, and cookie consent flows to your Rocket.new site with generated banners, privacy policies, and data handling controls in place.
Compliance & privacy
Privacy regulations carry real financial risk. GDPR fines can reach 20 million euros or 4% of annual global turnover, whichever is higher ([GDPR Article 83](https://gdpr-info.eu/art-83-gdpr/)). Rocket does not add compliance features automatically, so you need to ask it to implement cookie consent banners, policy pages, and geo-based consent flows before you launch. ## What you can ask Rocket to implement Tell Rocket in chat what to add. Below are the most common requests. ### Cookie consent banners A consent banner lets visitors choose which cookies your site can set. Ask Rocket to add one that matches your site's design. ```plaintext wrap theme={null} Add a cookie consent banner to my site. It should match the design and let visitors choose which cookies to accept. ``` ### GDPR compliance GDPR requires granular consent categories so EU visitors control what data you collect: * **Necessary**: always active (site functionality) * **Analytics**: traffic tracking and [performance measurement](/build/measure/performance) * **Marketing**: advertising and retargeting * **Preferences**: language, theme, and personalization ```plaintext wrap theme={null} Implement GDPR-compliant cookie consent with granular categories. Visitors should be able to choose exactly what they consent to. ``` ### CCPA compliance CCPA requires a visible opt-out for California visitors. CCPA penalties reach up to \$7,988 per intentional violation as of 2025 ([California Privacy Protection Agency](https://cppa.ca.gov/regulations/cpi_adjustment.html)). ```plaintext wrap theme={null} Add CCPA compliance with a "Do Not Sell My Personal Information" link in the footer. ``` ### Privacy and cookie policy pages Policy pages explain what data you collect and how you use it. Ask Rocket to generate them based on your site's actual data practices. ```plaintext wrap theme={null} Generate a privacy policy page and a cookie policy page for my site. Tailor them to the services and data I collect. ``` ### Geo-based consent Different regions have different rules. Ask Rocket to show the right consent flow based on where the visitor is located. ```plaintext wrap theme={null} Show the full GDPR consent banner to EU visitors, CCPA options to California visitors, and a simplified notice for everyone else. ``` Once your consent settings are in place, they affect what your [analytics](/build/measure/analytics) can track. Set up consent first, then configure analytics. ## Commands Use these slash commands from chat to implement and audit privacy compliance. You can find the full list of available commands in the [commands reference](/build/editor/commands). ### /Implement Privacy Compliance Add consent banners, cookie categorization, and policy pages to your codebase. **Examples:** * `/Implement Privacy Compliance` * `/Implement Privacy Compliance for user data and cookies` ### /Generate Privacy Report Analyze your codebase and generate a privacy compliance report covering cookie usage, consent flows, and data handling practices. **Examples:** * `/Generate Privacy Report` * `/Generate Privacy Report for data handling` ## What's next? Pair compliance with accessibility for complete legal and usability coverage. Add third-party scripts that respect your consent settings. Publish your site once compliance is in place. # SEO & discoverability Source: https://docs.rocket.new/build/polish/seo Optimize metadata, sitemaps, social previews, and AI citation signals in Rocket.new to improve rankings on Google and visibility in AI search.
SEO & discoverability
Organic search drives roughly 53% of all website traffic ([BrightEdge research](https://www.brightedge.com/resources/research-reports/channel_share)). Rocket gives your site a basic SEO foundation out of the box, but you need to ask it to add optimized meta tags, structured data, and sitemaps to compete for rankings. Once your site is [launched](/build/launch-web/launch-your-site), search engines can start crawling it. ## What Rocket includes by default Every Rocket site starts with these SEO basics: * Clean, semantic HTML structure * Page titles based on your content * Basic meta descriptions * Mobile-responsive layouts, which Google uses as a [ranking factor](https://developers.google.com/search/docs/appearance/mobile) These defaults give you a head start, but targeted optimization through meta tags and structured data is what moves rankings. ## What you can ask Rocket to add Tell Rocket in chat what to add. Below are the most common requests. ### Optimized meta tags Ask Rocket to generate keyword-aware meta tags for your pages: * **Title tags** that target your primary keyword * **Meta descriptions** that summarize each page for search results * **Open Graph tags** for rich previews on Facebook and LinkedIn * **Twitter cards** for previews on X (Twitter) ```plaintext wrap theme={null} Add optimized meta tags to all pages. Include Open Graph tags and Twitter cards for social sharing. ``` ### Structured data (JSON-LD) Structured data helps search engines understand your content beyond the visible text. Ask Rocket to add schemas like: * **Organization** for your business name, logo, and contact info * **Product** for pricing, availability, and reviews * **Article** for author, publish date, and headline * **FAQ** for question-and-answer pairs surfaced directly in search results * **Breadcrumb** for navigation paths in search result display ```plaintext wrap theme={null} Add JSON-LD structured data to my site. Include Organization schema on the homepage and Product schema on product pages. ``` ### Sitemap and robots.txt A sitemap tells search engines which pages to crawl. A robots.txt file controls which pages to exclude. ```plaintext wrap theme={null} Generate an XML sitemap and robots.txt file for my site. Allow search engines to crawl all public pages. ``` ### Internal linking Links between your pages help search engines discover content and help visitors find related information. [Accessible markup](/build/polish/accessibility) (semantic headings, ARIA labels) also improves how well search engines parse your content. ```plaintext wrap theme={null} Add internal links between related pages on my site. Link the blog posts to relevant product pages. ``` ## SEO slash commands Use these slash commands from chat to audit and improve your SEO. You can find the full list of available commands in the [commands reference](/build/editor/commands). ### /Generate SEO Report Analyze your codebase and generate a detailed SEO audit covering meta tags, schema validation, sitemap status, and page structure. **Examples:** * `/Generate SEO Report` * `/Generate SEO Report for marketing pages` ### /Improve SEO Auto-implement SEO improvements across your codebase. Rocket adds missing meta tags, structured data, and optimizes page structure. **Examples:** * `/Improve SEO` * `/Improve SEO for landing page` ## AI search optimization (GEO - Generative Engine Optimization) People increasingly find information through AI search engines like Perplexity, ChatGPT, and Claude. GEO helps your content appear as a cited source in AI-generated answers. Ask Rocket to: * **Structure content** with clear, quotable statements that AI engines can extract and cite * **Clarify entities** so AI understands what your business does and who it serves * **Format FAQs** using JSON-LD schemas for higher AI citation rates * **Strengthen source signals** that AI engines use to decide whether to cite your site ```plaintext wrap theme={null} Optimize my site for AI search. Structure the content with clear, quotable statements and add FAQ schemas to improve citation rates in AI-generated answers. ``` ### /Generate GEO And AEO Report Analyze your codebase and generate a report on AI search readiness. **Examples:** * `/Generate GEO And AEO Report` * `/Generate GEO And AEO Report for content pages` ### /Improve GEO And AEO Implement GEO and AEO in your codebase. Rocket restructures content for better AI search visibility. **Examples:** * `/Improve GEO And AEO` * `/Improve GEO And AEO for blog and docs` ## What's next? Track how your SEO improvements affect traffic and engagement. Page speed is a Google ranking factor. Check your Core Web Vitals. Add cookie consent and privacy policies before your site goes live. # Quick start Source: https://docs.rocket.new/build/quick-start A ten-minute walkthrough that takes you from a first prompt to a deployed Rocket.new app - covering create, edit, preview, and launch steps. This walkthrough takes you from a blank canvas to a live app. You will create a Build task, describe what you want, watch Rocket generate it, preview the result, make changes, and launch. You need a Rocket account to follow along. If you have not signed up yet, [create an account](/getting-started/create-an-account) first. ## Build and launch your first app Go to **[rocket.new](https://rocket.new)** and sign in. From the home screen or any project, click **New task** and select **Build**. You can also type your idea directly into the chat field on the home screen and Rocket will create a Build task for you automatically. Type what you want to build in plain language. Be specific about the app type, key features, and any design preferences. Here is an example prompt to try: ```plaintext wrap theme={null} Build a task management web app with a dashboard showing tasks in a kanban board. Include columns for To Do, In Progress, and Done. Users can create tasks with a title, description, and priority level. Add a sidebar with project navigation and a dark mode toggle. ``` Press **Enter** or click **Send** to submit. If your prompt is clear and detailed, Rocket skips this step and begins building immediately. If anything is ambiguous, prompt intelligence asks a short set of follow-up questions first. Answer them and generation starts right away. Rocket builds your app in real time. You will see inline progress as each file is created and finalized. Most apps generate in one to three minutes depending on complexity. Once generation completes, your app appears in the live preview panel. Interact with it just like a real user - click buttons, navigate between pages, fill out forms, and test the full experience. For mobile apps, the preview renders inside a device simulator so you can see how it looks on a phone screen. Use any of these methods to iterate: * **Chat** - Type natural language instructions like "Change the header background to dark blue" or "Add a settings page with profile editing." * **Visual edit** - Click **Edit** in the preview toolbar, then click any element to change its text, style, spacing, or image directly. See [Visual edit](/build/editor/visual-edit). * **Code** - Open the code editor to modify source files directly. See [Code](/build/editor/code). Rocket tasks have no change limit. Keep iterating until you are happy with the result. When your app is ready, click **Launch** in the top-right corner. Your app goes live instantly with a shareable URL. You can also: * [Connect a custom domain](/build/launch-web/custom-domain) (paid plan required) * [Download the source code](/build/editor/code) (paid plan required) * [Submit to app stores](/build/launch-mobile/google-play) (for mobile apps) ## Tips for a great first prompt Start with what you are building: "Build a web app for..." or "Create a mobile app that..." This helps Rocket select the right patterns immediately. Pick the most important features and list them clearly. You can always add more through chat after the initial build. **Good:** "Include user authentication, a dashboard with charts, and a settings page." **Too vague:** "Make it full-featured with everything a user would need." If you have a visual direction in mind, say so. "Modern and minimal with a dark theme" or "Colorful and playful, inspired by Notion" gives Rocket much better starting context than leaving design open-ended. "A CRM for freelance photographers" produces a more tailored result than "a CRM app." Context about who will use the app shapes feature decisions, copy, and design. Begin with fewer screens and core features. Generate the foundation, then add complexity through chat. Asking for 20 screens in your first prompt often produces messier output than building 5 screens and expanding from there. ## Example prompts to try | What you are building | Prompt | | :- | :- | | SaaS dashboard | `Build a project management web app with team workspaces, a kanban board, and user roles. Include a Pro plan upgrade page.` | | Mobile fitness app | `Create a workout tracker mobile app with exercise logging, progress charts, and a calendar view. Support both iOS and Android.` | | Landing page | `Build a landing page for an AI writing tool with a hero section, feature highlights, pricing table, testimonials, and a signup form.` | | E-commerce store | `Create an online store for handmade jewelry with product pages, category filters, a shopping cart, and checkout flow.` | | Portfolio site | `Build a portfolio website for a UX designer with a project gallery, about page, resume section, and contact form. Minimal and modern.` | ## What's next? Click any element to change it directly - text, colors, layout, spacing. Add payments, databases, AI models, email, and more. Prompt patterns, iteration strategies, and tips for complex apps. Publish your app with one click and connect a custom domain. # Week 4 Source: https://docs.rocket.new/changelog/2025/april/week-4 Rocket.new April week 4 release notes: platform launch with natural language editing, Figma-to-code conversion, and end-to-end development workflow. Improved * **Figma preview context**: Preview now reflects the correct context based on frame ID, section, or all screens. * **Code editor improvements**: Cmd/Ctrl+S saves all modified files, with source map uploads and version tracking. Fixed * **Tailwind HTML deployment fix**: Resolved an issue preventing Tailwind-based HTML projects from deploying to Netlify. New * **Flutter state management**: Choose between Bloc, GetX, and Stateless when generating a Flutter project. Improved * **Screen names in preview**: Each screen is labeled in the preview for easier identification. * **HTML preview navigation**: Open previews in a new tab without leaving the preview panel. Fixed * **Screen generation prevention**: Existing screens are no longer recreated during edits. Editing one screen no longer regenerates others. New * **Full development workflow**: Generation, preview, rollback, bug fixing, GitHub sync, Netlify deployment, and code editing in one place. * **Payment systems**: Subscription and token billing built in from day one. [View pricing](/getting-started/pricing) New * **Visual editing**: Click any element to modify it directly. Works across React, Flutter, and Next.js. [Learn more](/build/editor/visual-edit) * **Live preview**: Multi-tab support with real-time updates as you make changes. [Learn more](/build/editor/preview) Rocket is here. New * **Natural language editing**: Describe changes in plain English across React, HTML, and Flutter. [Learn more](/build/editor/chat) * **Figma to code**: Convert Figma designs into working apps for React, HTML, Flutter, and Next.js. # Week 1 Source: https://docs.rocket.new/changelog/2025/august/week-1 Rocket.new August week 1 product update covering custom domain support, APK downloads, faster Figma-to-Flutter conversion, and Supabase Storage. New * **Custom domains.** Link your own domain to your published app with zero external setup. Learn more about [connecting a custom domain](/launch/connect-custom-domain). * **APK downloads.** Download a ready-to-install Android APK in one click from the [downloads page](/launch/download-app). Improved * **Figma to Flutter 35-40% faster.** Over 50 new components, improved detection, and consistent color handling make Figma-to-Flutter conversion significantly quicker. New * **Supabase Storage.** Upload, retrieve, and manage files with zero setup through [Supabase Storage buckets](/build/connectors/supabase/storage-buckets). # Week 2 Source: https://docs.rocket.new/changelog/2025/august/week-2 Rocket.new August week 2 release notes focused on Build workflow polish, targeted bug fixes, and platform stability across web and mobile projects. Improved * **Workflow polish and system stability**: Polished workflows, fixed bugs, and strengthened system reliability. No new features were introduced, just a more dependable experience across builds and projects. # Week 3 Source: https://docs.rocket.new/changelog/2025/august/week-3 Rocket.new August week 3 product update with clearer error visibility, friendlier project setup flows, and improved context handling in long chat threads. Improved * **LLM error banners.** A UI banner now appears when Rocket encounters an LLM error, so you know exactly what happened. * **Smarter success messages.** Rocket now shows clear confirmation when no code changes are needed instead of leaving you wondering. Improved * **Console errors in UI.** Application errors now surface directly in the editor, so you can troubleshoot without opening a separate console. * **Friendlier integration setup.** Integration flows now suggest next steps instead of immediately asking for an API key. Improved * **Better context in long threads.** Rocket now maintains more accurate context in threads with over 2000 messages. Fixed * **Package manager fix.** Resolved issues where follow-up requests introduced extra strings or removed needed packages. # Week 4 Source: https://docs.rocket.new/changelog/2025/august/week-4 Rocket.new August week 4 release notes: Twilio SMS integration, a smarter AI agent, Google Maps support for Flutter, and important build fixes. New * **Twilio SMS integration.** Your apps can now send text messages through [Twilio](/build/connectors/twilio), enabling notifications, reminders, and verification codes. Improved * **Smarter AI agent.** The agent now understands your request before acting, recommends relevant integrations, and stays aware of your current app state. New * **Google Maps for Flutter.** Embed interactive Google Maps directly in your Flutter apps for location-based features. Fixed * **Flutter package manager fix.** Resolved incorrect indentation, missing dependencies, and wrong package versions in follow-up requests. Fixed * **Supabase + Google Auth fix.** Fixed the infinite loader that appeared when signing in through Netlify URLs. * **APK build failures fix.** Resolved build failures caused by outdated or incompatible Flutter packages. # Week 1 Source: https://docs.rocket.new/changelog/2025/december/week-1 Rocket.new December week 1 release notes covering platform stability, backend reliability improvements, and infrastructure hardening across Build. Improved * **Platform stability**: A round of stability work covering edge case fixes, UI consistency, and reliability improvements across the platform. # Week 2 Source: https://docs.rocket.new/changelog/2025/december/week-2 Rocket.new December week 2 product update announcing the Rocket mobile app launch on iOS so you can vibe code and manage projects from iPhone. New * **Rocket mobile app**: Build and iterate from your phone. The full Rocket experience is now available on iOS, so ideas do not have to wait until you are back at a desk. [Download from the App Store](https://apps.apple.com/us/app/rocket-pocket-app-studio/id6752393417) # Smart suggestions and smarter generation: December 2025 Source: https://docs.rocket.new/changelog/2025/december/week-3 Rocket.new December week 3 release notes with smarter AI generation, contextual smart suggestions, and cleaner semantic HTML structure in output. New * **Smart suggestions**: Context-aware build ideas based on your current project. Click one to turn it into a prompt. [Learn more](/build/editor/chat) Improved * **Smarter generation**: Complex tasks used to start, get partway through, and stop. Rocket now plans before it builds, runs the output, and fixes errors before surfacing results. * **HTML pages directory**: Generated HTML screens now go into a dedicated folder instead of the root. # Week 4 Source: https://docs.rocket.new/changelog/2025/december/week-4 Rocket.new December week 4 update: Visual Edit for Flutter, API imports, screenshot capture, custom code injection, and language defaults. New * **Visual Edit for Flutter**: Click any element in the mobile preview to modify it. No more describing every change in chat. [Learn more](/build/editor/visual-edit) * **API integrations**: Import from Postman, cURL, or Swagger and Rocket wires the endpoints into your UI automatically. [Learn more](/build/editor/apis) New * **Screenshot capture**: Grab the preview and drag it into chat. Show Rocket what you want to change instead of describing it. [Learn more](/build/editor/preview#capture-screenshots) * **Inject custom code**: Add tracking scripts, widgets, fonts, or embeds through chat without touching the codebase. [Learn more](/build/editor/custom-code) Improved * **React and Next.js language defaults**: React now uses JavaScript, Next.js now uses TypeScript. Existing projects in the non-default language continue to work. # Week 5 Source: https://docs.rocket.new/changelog/2025/december/week-5 Rocket.new December week 5 release notes: error-free first generation, image handling improvements, and streamlined Supabase setup for Flutter apps. Improved * **Error-free first generation**: Rocket detects and resolves errors during generation before showing you the output. The generate, hit error, fix, regenerate loop is gone. * **Image generation improvements**: Token handling is optimized and logos generate more consistently. Improved * **update-app-name command**: Now works on both mobile and web tasks. [See all commands](/build/editor/commands) Fixed * **Supabase Flutter setup**: Required package dependencies are added automatically during project creation. Eliminates a common source of build errors. # Week 1 Source: https://docs.rocket.new/changelog/2025/july/week-1 Rocket.new July week 1 product update with responsive Figma-to-code conversion, higher output accuracy, and smarter UI component detection. Improved * **Responsive Figma-to-code output.** Generated code now automatically adapts to Mobile, Tablet, Laptop, and Desktop views. * **13% accuracy boost.** Generated UI now matches your original Figma design more closely, reducing manual tweaking after import. Improved * **Smarter component detection.** Rocket identifies components in your Figma files more intelligently, producing cleaner and more maintainable code. * **Chart and map support.** Charts and maps are now recognized during Figma-to-code conversion, so data-rich designs translate into working components. * **Smarter UI prompt handling.** Styling and layout generation from prompts is more accurate. # Week 2 Source: https://docs.rocket.new/changelog/2025/july/week-2 Rocket.new July week 2 release notes: reusable components, backend stability upgrades, Flutter mobile fixes, and support for foldable phone layouts. New * **Reusable Select and Checkbox components.** Pre-built Select and Checkbox components are now available for React projects, saving you from recreating common form elements. Improved * **Editor responsiveness improvements.** The editor now responds more quickly to interactions across larger projects. Improved * **Backend stability under load.** Backend services now handle high traffic more reliably, reducing timeouts and failed requests. * **Mobile layout and interaction handling.** Mobile layouts render more accurately and touch interactions are handled more consistently. New * **Foldable phone screen type support.** Foldable phone screen sizes are now recognized, so your previews reflect real-world device dimensions. Fixed * **Template pagination bug.** Scrolling through templates no longer skips or duplicates entries. * **Three.js rendering.** Three.js scenes now render correctly in the preview panel. * **Mobile task search.** Searching for tasks on mobile devices now returns results as expected. # Week 3 Source: https://docs.rocket.new/changelog/2025/july/week-3 Rocket.new July week 3 product update covering safer publishing to Netlify, better prompt instruction parsing, and proactive AI error handling. Improved * **Publish button disabled during preview.** The publish button is now disabled while a preview is generating, preventing accidental deploys. * **Better thread parsing.** Tool usage and results stay connected to the correct messages in long threads. Improved * **Enhanced instruction understanding.** Rocket interprets your requests more accurately, reducing the need to repeat yourself. * **Improved image context linking.** Image references in messages now link to the correct context more reliably. Improved * **Faster screen list display.** The screen list now loads independently of theme loading for quicker navigation. * **Proactive error handling.** Rocket now guides you through recovery steps after repeated failures instead of leaving you stuck. * **More reliable visual editing.** Visual editing for web apps is now more consistent and dependable. Learn more about [visual edit](/build/editor/visual-edit). # Week 4 Source: https://docs.rocket.new/changelog/2025/july/week-4 Rocket.new July week 4 release notes: connect existing Supabase projects, persistent image memory, and smarter conversation context handling. New * **Connect existing Supabase projects.** You can now link Rocket to Supabase projects that already have data and tables in place, so you do not have to start from scratch. Learn more about [connecting existing projects](/build/connectors/supabase/existing-project) and [pushing migration scripts](/build/connectors/supabase/push-migration-scripts). Improved * **Better multi-message understanding.** Rocket follows the thread of your conversation more naturally across multiple messages. * **Image memory across messages.** Uploaded images are remembered if you reference them later, so you do not need to re-upload. * **"This screen" recognition.** Rocket now reliably understands references to "this screen" or "current screen" during edits. * **Faster screen list loading.** The screen list now loads independently of theme loading, keeping navigation fast. * **No repeated provider prompts.** Skipped provider prompts will not appear again. Improved * **Better file change detection.** Rocket more accurately identifies which files changed during commits and avoids generating unnecessary screens. Fixed * **Extra screens during edits fix.** Screen generation no longer adds unintended screens when editing existing ones. * **Preview tab data loss fix.** Switching between preview tabs no longer causes data to disappear. Fixed * **Sidebar collapse layout fix.** Collapsing the sidebar no longer causes layout issues in the editor. * **React header layout fix.** React app headers now render with a cleaner layout. # Week 5 Source: https://docs.rocket.new/changelog/2025/july/week-5 Rocket.new July week 5 product update introducing backup LLM providers, faster code generation, and free Fix It runs for paid subscribers. New * **Backup LLM provider support.** Rocket now automatically switches to a backup provider if the primary one goes down, keeping your workflow uninterrupted. Improved * **38% faster generation.** React and Flutter code generation is now 38% faster across the board. Improved * **Fix It button free for paid users.** The Fix It button no longer costs tokens for errors that Rocket itself detected. Fixed * **HTML follow-up instructions fix.** Edits to HTML projects now land correctly when given as follow-up instructions. # Week 1 Source: https://docs.rocket.new/changelog/2025/june/week-1 Rocket.new June week 1 release notes with multi-error auto-fixing, improved preview navigation, and smoother mobile editing on the Build canvas. Improved * **Multi-error fixing**: Fix multiple errors at once across all frameworks, with a count of resolved issues displayed. * **Preview navigation labels**: The "Currently Viewing" indicator updates as you navigate, and Esc exits fullscreen. Improved * **Mobile preview editing**: Faster screen selection and smoother editing on mobile devices. * **File upload validation**: Clearer, more specific error messages for failed uploads. Improved * **Persistent Flutter messages**: Important messages now appear in default threads so critical information is not lost. # Week 2 Source: https://docs.rocket.new/changelog/2025/june/week-2 Rocket.new June week 2 product update: shareable Flutter preview links, starter templates, faster follow-up prompts, and Supabase workflow improvements. New * **Flutter preview links**: Share your Flutter app via URL with no install required. [Learn more](/build/editor/preview) * **Templates**: Start from pre-built projects with smart suggestions tailored to your prompt. [Explore templates](/build/create/using-templates) * **Sound notifications**: Audio alerts play when code generation completes so you can multitask freely. Improved * **30% faster follow-ups and bug fixes**: Shorter wait times between iterations across all frameworks. * **Enhanced Supabase integration**: Smarter database, auth, and realtime setup with clearer configuration guidance. * **Public and private app visibility**: Control who can view your project during development. [Learn more](/build/editor/visibility) Improved * **Popup handling guidance**: When a browser blocks a tab, Rocket now shows clear instructions on how to proceed. * **Template browsing before login**: Explore all available templates before creating an account. # Week 3 Source: https://docs.rocket.new/changelog/2025/june/week-3 Rocket.new June week 3 release notes with fewer generation errors, targeted mobile fixes, and clearer feedback when publishing sites to Netlify. Improved * **Reduced generation errors**: Error detection and prevention improved across all frameworks for more reliable builds. Fixed * **Mobile experience fixes**: Resolved header dropdown bugs, smoother iPhone scrolling, and more helpful placeholders. * **Netlify publishing feedback**: Deployment errors now surface clearly instead of failing silently. # Week 4 Source: https://docs.rocket.new/changelog/2025/june/week-4 Rocket.new June week 4 product update covering image uploads in prompts, batch Figma-to-code conversion, and multi-element editing on the canvas. Improved * **Image uploads**: Upload custom logos, screenshots, and mockups as design references for more accurate generation. [Learn more](/build/create/from-an-attachment) * **Figma to code**: Import up to 40 screens at once with improved layout accuracy. New * **Multi-element visual editing**: Select and modify multiple elements at once for faster layout and styling changes. * **"Built with Rocket" badge removed**: Paid plans no longer display third-party branding on deployed apps. # Week 1 Source: https://docs.rocket.new/changelog/2025/may/week-1 Rocket.new May week 1 release notes: subscription cancellation fix, new cookie consent banner, and refreshed Netlify branding on publish flows. Fixed * **Subscription cancellation fix**: End-of-cycle cancellation now processes correctly so you retain access until your billing period ends. [Learn more](/getting-started/workspace/subscription) New * **Cookie consent banner**: A standard consent prompt now appears for visitors on deployed apps, keeping you compliant with privacy regulations. Improved * **Netlify branding update**: Updated to reflect current partnerships and integrations within Rocket. # Week 2 Source: https://docs.rocket.new/changelog/2025/may/week-2 Rocket.new May week 2 product update with image uploads in prompts, natural language element editing, and smarter AI code generation on Build. New * **Image uploads**: Use screenshots, logos, and mockups as design references for more accurate results. [Learn more](/build/create/from-an-attachment) * **Natural language editing**: Describe changes in plain English and Rocket implements them automatically. [Learn more](/build/editor/chat) Improved * **Code generation retry logic**: Adaptive error handling retries failed builds with a smarter approach. * **Chat interface improvements**: Added timestamps, scroll button, token display, adjustable width, and fullscreen toggle. [Learn more](/build/editor/chat) Improved * **Integration categories**: Services are now grouped by type for easier discovery. [Browse integrations](/build/connectors/overview) # Week 3 Source: https://docs.rocket.new/changelog/2025/may/week-3 Rocket.new May week 3 release notes introducing a cross-platform design system for web and mobile plus redesigned sign-in and sign-up auth modals. New * **Cross-platform design system**: A unified visual language now spans React, Flutter, and HTML for consistent styling across frameworks. Improved * **Streamlined navigation**: Faster, more intuitive movement through the interface. * **Redesigned login and signup modals**: Clearer calls to action and a more polished layout for auth screens. # Week 4 Source: https://docs.rocket.new/changelog/2025/may/week-4 Rocket.new May week 4 product update with Figma screen import tracking, browser tab notifications for generations, and key stability bug fixes. Improved * **Figma screen status**: Screen details now show conversion progress for React, Next.js, HTML, and Flutter. * **Inactive tab build notifications**: Build completion alerts now fire even when you have switched to another tab. Improved * **Centered preview loader**: Loading indicator is now visually centered during preview rendering. * **Mobile preview improvements**: Smoother dropdowns and more reliable visual editing on mobile devices. Fixed * **Supabase credentials**: Resolved an issue preventing database connections from completing. * **React imports**: Corrected code block ordering so import statements render in the right sequence. * **Preview badges**: Fixed a rendering issue that caused badges to disappear from the preview. # Week 1 Source: https://docs.rocket.new/changelog/2025/november/week-1 Rocket.new November week 1 release: Next.js and React TypeScript support with full integrations, alongside Flutter and Supabase improvements. New * **Next.js JS/TS support** provides full Auth, Database, Storage, and Analytics integration for Next.js projects. * **React TypeScript support** adds the same end-to-end integration support available in React JavaScript projects. Improved * **Flutter dropdown compatibility** adjusts package versions for fewer dependency conflicts and more reliable builds. * **Supabase migration context** uses richer project information to produce more accurate migration scripts. [Learn more](/build/connectors/supabase/push-migration-scripts) # Week 2 Source: https://docs.rocket.new/changelog/2025/november/week-2 Rocket.new November week 2 product update adding more built-in slash commands and automatic Flutter SDK dependency validation before builds run. New * **More built-in commands** let you run common actions with short triggers instead of writing full prompts. [See all commands](/build/editor/commands) Improved * **Flutter SDK package validation** catches invalid or mismatched dependencies before they cause build failures. # Week 1 Source: https://docs.rocket.new/changelog/2025/october/week-1 Rocket.new October week 1 release notes covering backend performance tuning, reliability work, and infrastructure improvements powering AI generations. Improved * **Backend performance and reliability**: Two weeks of behind-the-scenes work. Core request handling is faster, frequently used database queries have been rewritten for speed, and error recovery is more graceful so fewer raw failures reach the surface. # Week 2 Source: https://docs.rocket.new/changelog/2025/october/week-2 Rocket.new October week 2 product update: Google Auth for Flutter apps, new slash and @ commands in prompts, and the introduction of the APK Agent. New * **Google Authentication for Flutter**: Add sign-in with Google to your Flutter apps in one step, giving users a familiar login flow. * **/ and @ Commands**: Use slash and at commands to make precise, scoped changes without going back and forth. [Learn more](/build/editor/commands). New * **APK Agent**: A build-time helper that auto-detects and resolves common Android build errors so your APK ships without manual fixes. Improved * **Flutter package version accuracy**: Package identification now maps dependencies to correct versions more reliably, reducing version conflicts. # Week 3 Source: https://docs.rocket.new/changelog/2025/october/week-3 Rocket.new October week 3 release notes with code quality upgrades, better AI error handling, and cleaner generated output across web and Flutter projects. Improved * **Error handling and code quality**: Error handling now surfaces clear messages for edge cases that previously failed silently. Generation logic produces more consistent first-pass output, and inputs are validated earlier to catch problems before they cascade. # Week 4 Source: https://docs.rocket.new/changelog/2025/october/week-4 Rocket.new October week 4 product update introducing token rollover across billing cycles, faster response streaming, and auto-run for safe agent actions. New * **Token rollover**: Unused tokens carry over to the next month instead of expiring. Yearly plans roll over within the 12-month term and reset at renewal. [Learn more](/getting-started/pricing). Improved * **Faster streaming replies**: AI responses arrive noticeably faster, making the chat feel more responsive. * **Clearer APK download status**: A queue message appears while your APK is being prepared, followed by a summary when it is ready. [Learn more](/launch/download-app). Improved * **Stable Flutter packages by default**: Package version selection now avoids unstable pre-release versions automatically, keeping builds predictable. * **Auto-run safe actions**: Routine, low-risk actions now run automatically, saving clicks on repetitive tasks while you stay in control. # Week 1 Source: https://docs.rocket.new/changelog/2025/september/week-1 Rocket.new September week 1 release notes adding honest failure status reporting and surfacing Supabase integration errors directly in the Build UI. Improved * **Honest failure status**: When generation produces an empty result, Rocket now shows "failed" instead of "completed" so you can retry immediately. * **Supabase errors in the UI**: Runtime errors from Supabase now appear directly in the interface, removing the need to dig through logs. # Week 2 Source: https://docs.rocket.new/changelog/2025/september/week-2 Rocket.new September week 2 product update: generation time drops to 3 minutes, new Amazon Bedrock LLM support, and simpler integration setup flows. Improved * **Generation in 3 minutes**: Rocket now delivers code in 3 minutes instead of 10. Less waiting, more iterating. New * **Amazon Bedrock**: A new backup provider with automatic failover, keeping builds moving even when an upstream service has issues. Improved * **Simpler integration setup**: Connecting [Claude](/build/connectors/anthropic), [OpenAI](/build/connectors/openai), [Google Analytics](/build/connectors/google-analytics), [Perplexity](/build/connectors/perplexity), [Gemini](/build/connectors/gemini), and [AdSense](/build/connectors/adsense) is now faster with fewer steps. Improved * **Automatic provider switching**: If one AI provider is unavailable, Rocket switches to a backup automatically so builds never stall on a third-party outage. * **More accurate Flutter packages**: Version suggestions are more precise, and template packages stay safe during updates. * **Clearer Supabase output**: Schema and migration scripts show clearer messages, and the generated `AuthContext.jsx` is easier to read. # Week 3 Source: https://docs.rocket.new/changelog/2025/september/week-3 Rocket.new September week 3 release notes featuring a redesigned Mission Control dashboard with space-black panels and refreshed navigation layout. Improved * **Mission Control redesign**: The entire interface has been redesigned. Space-black panels provide a more focused visual foundation, dynamic animated trails reflect the product personality, and updated top-level navigation adds Templates, Pricing, Careers, and Resources so you can find what you need without leaving your workflow. # Week 1 Source: https://docs.rocket.new/changelog/2026/april/week-1 Rocket.new weekly release notes for April week 1. This was a quiet week of internal platform updates and background improvements ahead of upcoming features. Improved * Working on updates - more coming next week. # Week 2 Source: https://docs.rocket.new/changelog/2026/april/week-2 Rocket.new 1.0 release notes: full redesign, new projects system, Solve and Intelligence launches, GitHub Clone, agent sleep, and cross-task context. New * **Rocket 1.0 redesign**: New sidebar navigation, updated editor, and a unified home page bringing Solve, Build, and Intelligence together. * **Projects**: Group related tasks, share context across them, and keep work organized by product or team. [Learn more](/getting-started/project/overview) * **Solve**: Turn a business question into a structured research report with citations, exportable as PDF, HTML, or PowerPoint. [Learn more](/solve/overview) * **Intelligence**: Continuous competitor monitoring with daily, weekly, or monthly briefs and per-competitor profiles. [Learn more](/intelligence/overview) * **GitHub Clone**: Clone any public Next.js with TypeScript GitHub repository directly into Rocket and keep building. [Learn more](/build/create/from-github) * **Staging and production environments**: Staging updates as you work; production only changes when you publish. Roll back any version with one click. [Learn more](/build/launch-web/launch-your-site) * **Buy a domain in-app**: Search, purchase, and connect a domain without leaving Rocket. DNS configures automatically. [Learn more](/build/launch-web/buy-domain) * **Agent sleep**: Long-running Build tasks can pause mid-generation and resume automatically instead of timing out. * **Cross-task context**: Files, connector data, and prior decisions carry forward into subsequent tasks in the same project. * **Workspace connectors**: OAuth connectors (Notion, Google Workspace, GitHub, Linear, Figma, Netlify, Supabase, Airtable) are now managed at the workspace level and shared across all projects. [Learn more](/getting-started/workspace/connectors) * **Tokens to credits**: Tokens renamed to credits. 1 million tokens = 20 credits. Your balance and subscription are unchanged. [Learn more](/help/tokens-to-credits) * **New plans**: Capability-based plans - Build, Solve + Build, Build + Intelligence, and Solve + Build + Intelligence. [See pricing](/getting-started/pricing) Improved * **Build experience**: Redesigned editor with a unified preview panel, faster generation, and a cleaner chat interface. * **Project context**: Notion pages, Google Docs, uploaded files, and prior task outputs are now all available simultaneously as context. [Learn more](/getting-started/project/context/overview) # Week 3 Source: https://docs.rocket.new/changelog/2026/april/week-3 Rocket.new weekly update for April week 3: connector reliability fixes, clearer error messaging in Build, and agent-aware UI controls for smoother runs. Improved * **Next.js route update logic**: Enhanced initial route update logic to check for a `page.tsx` file. * **Media deduplication**: Improved media deduplication handling based on usage. * **Filename extraction from image URLs**: More accurate file identification across all image processing scenarios. New * **Project-level collaboration**: Added collaboration at the project level. [Learn more](/getting-started/collaboration/project) Improved * **Connector disconnect warning**: A dynamic warning message now appears when disconnecting any connector. * **Connector controls during agent activity**: The connector connect flow is disabled while the agent is in sleep mode or code generation mode. * **Project selection during agent activity**: Project selection is disabled while the agent is in sleep mode or code generation mode. Fixed * **Connector edge cases**: Resolved edge case issues with connectors. * **Error messages in connectors**: Proper error messages now display in the Notion and Google connectors within projects. # Week 4 Source: https://docs.rocket.new/changelog/2026/april/week-4 Razorpay, HubSpot, Confluence, and Webflow connectors. MCP Gateway improvements, access controls, multi-file task attachments, and invite link copy. Improved * **MCP Gateway**: Refactored and optimized metrics handling for maintainability, performance, and monitoring readiness. * **Connectors**: Replaced the inline “integration not selected” state with a reusable **IntegrationNotSelectedCard** so the empty state looks and behaves the same everywhere. * **Disconnecting a connector**: Warnings now reflect the specific integration you’re removing, not a generic message. * **Connecting a connector**: The provider name appears dynamically in the flow so you always know which account you’re wiring up. * **While a connection is in progress**: Status messaging updates in real time so you can see what’s happening at each step. * **Multi-step connectors**: The dynamic flow supports several steps in one place, with accordion-style nested dropdowns when a connector needs them. * **When the agent is sleeping or code is generating**: You can’t start a connector connection or switch projects, so you don’t change context or begin a hookup while Rocket is in a restricted state. New * **Razorpay connector**: Connect Razorpay via OAuth and generate checkout flows, subscription billing, order management, and refund handling for Next.js apps. See [Razorpay](/build/connectors/razorpay). * **HubSpot connector**: Connect HubSpot using a Private App access token and build CRM features: contact management, deal pipelines, email event tracking, and marketing automation triggers. See [HubSpot](/build/connectors/hubspot). * **Confluence connector**: Connect Confluence via Atlassian OAuth and use your team's wiki pages, specs, and architecture docs as generation context so every output aligns with your real standards. See [Confluence](/build/connectors/confluence). * **Webflow connector**: Connect Webflow via OAuth and use CMS collections, pages, and site structure as a live data source in your Next.js app. See [Webflow](/build/connectors/webflow). Improved * **Multi-file task attachments**: You can now attach up to **5 files per message** at the task level, up from 1. The 5 MB per-file limit remains unchanged. See [Task Attachments](/getting-started/task/attachments). Improved * **Invite link copy for collaboration**: The invite link for all collaboration types can now be copied directly from the icon next to the collaborator's name. # Week 5 Source: https://docs.rocket.new/changelog/2026/april/week-5 Follow Rocket’s reasoning step by step, see subscription changes before they hit your bill, and a steadier experience while code is generating. New * **Watch Rocket Work**: You can open a chat and see how Rocket worked through your request; reasoning stays visible in the thread as the conversation grows. Improved * **While code is generating**: The abort control turns off once generation starts, so you’re less likely to stop a run by mistake. Improved * **If you cancel at period end**: You’ll see that your plan is scheduled to end after the current billing cycle, with the date your cancellation takes effect. * **If you downgrade**: Before the change kicks in, you’ll see what your renewal will cost and when the new price takes effect, so there are no surprises on your next bill. # Week 1 Source: https://docs.rocket.new/changelog/2026/august/week-1 Enterprise workspaces can manage organizations and launch on custom domains, with clearer live-version status and more reliable device selection when publishing. Improved * **Live version when publishing**: The publishing flow now shows whether the version you are looking at is the one currently live. [Learn more](/build/launch-web/launch-your-site) # Week 2 Source: https://docs.rocket.new/changelog/2026/august/week-2 Former subscribers can download invoices and receipts, credit-limit errors show what a request costs, and cancellation no longer starts a new billing cycle. Improved * **Invoices after a paid plan ends**: If you previously had a paid subscription, Manage Subscription now lets you download historical invoices and receipts. [Learn more](/getting-started/workspace/subscription) Improved * **Workspace name on plan changes**: Purchase, upgrade, downgrade, and cancellation now name the workspace the change applies to. * **When access ends**: Cancellation copy now states when access stops and when remaining credits expire. # Week 3 Source: https://docs.rocket.new/changelog/2026/august/week-3 Billing details appear on Manage Subscription and Checkout, upgrades keep remaining credits, and Editor credit limits now go up to 10,000. Improved * **Billing details on file**: Account name and billing address now show on Manage Subscription, Checkout, and invoices. [Learn more](/getting-started/workspace/subscription) Fixed * **Credits on upgrade**: Eligible credits that are still unused stay on the workspace when you upgrade, instead of being dropped. Improved * **Renewal price at checkout**: The price your plan renews at is shown under "Total due today." Improved * **Plan changes during a grace period**: If a payment is overdue, trying to change plans shows a warning instead of continuing as if the invoice were paid. Fixed * **Pay Now on overdue invoices**: The Pay Now button stays available when an invoice is overdue. Improved * **Higher Editor credit limits**: Workspace owners can now set Editor credit limits from **0 to 10,000** in **Settings → Members**. [Learn more](/getting-started/collaboration/workspace#steps) # Week 4 Source: https://docs.rocket.new/changelog/2026/august/week-4 You can clone GitHub repositories from your organizations, and connector reconnects work again in Remix apps. New * **GitHub organization repos**: You can clone repositories that belong to your GitHub organizations, not only personal repos. [Learn more](/build/create/from-github) Fixed * **Connectors in Remix apps**: Disconnecting a connector in Settings and reconnecting it now works again in [Remix](/build/create/share-with-remix) apps. # Week 5 Source: https://docs.rocket.new/changelog/2026/august/week-5 Published apps now deploy on Vercel instead of Netlify, with background launches and per-app DNS records. Improved * **Hosting moved from Netlify to Vercel**: Published apps now go live on Vercel. Launches run in the background so you can keep working, and each app gets its own DNS records so connecting a custom domain is simpler. [Learn more](/help/migrate-hosting) # Week 1 Source: https://docs.rocket.new/changelog/2026/february/week-1 Rocket.new February week 1 release notes: new remove screens command, default screen selection, and bug fixes for Supabase, Stripe, and Netlify. New * **Remove screens**: Works with a single command across all tech stacks. Previously required different steps per framework. Improved * **Default screens**: All screens are selected and enabled by default when starting a new project. Fixed * **Supabase JWT fix**: Resolved invalid token errors when calling edge functions. * **Stripe context fix**: Updated integration context for React and Next.js. Payment flows complete reliably across both frameworks. Fixed * **Next.js Netlify cookie fix**: Fixed a cookie handling issue that prevented Next.js apps from deploying on Netlify. # Week 2 Source: https://docs.rocket.new/changelog/2026/february/week-2 Rocket.new weekly product update: new e-commerce project type, Next.js as the default stack, deprecated HTML projects, and interactive preview links. New * **E-commerce**: Now a first-class project type. Select it when starting a project and Rocket picks the best stack automatically, defaulting to Next.js with TypeScript. Improved * **Next.js default for landing pages**: Landing pages and websites now default to Next.js. The framework selection step is removed. * **Image processing**: Uploads are more reliable with clearer error feedback. * **Preview links**: Web templates and remix links show interactive previews instead of static images. Discontinued * **HTML for landing pages and websites**: New landing pages and websites are now built with Next.js. HTML remains available for legacy Figma to Code projects. Existing HTML projects continue to work and can still be edited. # Week 3 Source: https://docs.rocket.new/changelog/2026/february/week-3 Rocket.new February week 3 changelog: build from a URL, refreshed website redesign, new workspaces for team projects, and live web search in the agent. New * **Build from a URL**: Give Rocket a website URL and it reads the design system, then generates a matching site. [Learn more](/build/create/commands/redesign) * **Redesign existing websites**: Point Rocket at a live site and it redesigns it while preserving the content you want to keep. [Learn more](/build/create/commands/redesign) New * **Live web search during generation**: Landing pages and websites pull current information at build time instead of using placeholder content. New * **Workspaces**: Team collaboration with role-based access (Editor, Viewer), email or link invites, per-member token allocation, and workspace-level integrations. [Learn more](/getting-started/workspace/overview) New * **Logo generation**: Landing pages get an auto-generated logo that matches the site style and color palette. # Week 4 Source: https://docs.rocket.new/changelog/2026/february/week-4 Rocket.new release notes: Claude Sonnet 4.6 support, accessibility audits, performance optimizations, new SEO/GEO/Privacy commands, and content preserve. New * **Simpler project creation**: Rocket reads your use case and selects the right framework automatically. * **Claude Sonnet 4.6 for initial generation**: Every generation now runs on Anthropic's latest model. Better code quality from the first build. Improved * **Progress messages**: Build progress shows the file name being worked on instead of a generic loading state. Improved * **Content preserve redesign quality**: Redesigning a site while keeping its content used to produce lower quality layouts than starting fresh. That gap is closed. New * **Accessibility audits**: Powered by axe-core, every page is checked for WCAG 2.1 AA compliance. Issues are surfaced and corrected directly in chat. [Learn more](/build/polish/accessibility) * **Automatic performance optimizations**: Image compression, code splitting, and lazy loading applied on every build automatically. [Learn more](/build/measure/performance) New * **SEO commands**: Analyze pages and apply meta tags, Open Graph, JSON-LD, sitemaps, and robots.txt to your site code. [Learn more](/build/polish/seo) * **GEO and AEO commands**: Structure content for AI search engines. Adds FAQ sections, entity formatting, and source authority signals. [Learn more](/build/polish/seo) * **Privacy compliance**: Add a cookie consent banner, privacy policy, and cookie policy to sites built on Rocket. Geo-adapted for visitor location with GDPR and CCPA support. [Learn more](/build/polish/compliance) New * **Linear and Notion integrations**: Connect projects with your existing project management and productivity tools. * **Claude Sonnet 4.6 for followups**: Followup edits and redesigns now use Claude Sonnet 4.6 for faster, more accurate responses. # Week 1 Source: https://docs.rocket.new/changelog/2026/january/week-1 Rocket.new January week 1 release notes: Share with Remix, fallback LLM routing, browser notifications, Next.js 15 support, and landing page improvements. New * **Share with Remix**: Generate a shareable link that lets anyone clone your project with their own credentials. Environment variables are stripped automatically. Available to paid users. [Learn more](/build/create/share-with-remix) New * **Fallback LLM support**: If the primary model is unavailable, Rocket switches to a backup automatically. No downtime, no error screens. * **Browser notifications**: Push alerts and audio notifications when builds complete or errors need attention. [Learn more](/getting-started/account/profile-settings) * **Next.js 15 support**: Generated projects now target Next.js 15. Improved * **Better landing page designs**: Improved layout variety and design quality for generated landing pages. * **Flutter bottom navigation**: Clearer generation rules, more consistent layouts across screens. * **Landing page HTML flow**: Landing pages render more reliably from the first prompt. Fixed * **React and Supabase authentication**: Resolved an issue preventing login flows from completing in React projects using Supabase. # APK auto bug fix and image attachments: January 2026 Source: https://docs.rocket.new/changelog/2026/january/week-2 Rocket.new weekly update: automatic APK bug fixes for Flutter builds, image attachments in prompts, smarter component detection, and Postman variables. New * **Landing page image attachments**: Attach reference images when generating a landing page. Rocket uses them as design guidance. [Learn more](/build/create/from-an-attachment#supported-attachments) Improved * **APK auto bug fix**: Android builds detect and resolve common errors automatically before the APK is delivered. [Learn more](/launch/download-app) Improved * **React component detection**: Rocket recognizes more export patterns, giving it a more complete understanding of your project structure. * **Postman environment variables**: Dev, staging, and production variables are now read correctly when importing Postman collections. [Learn more](/build/editor/apis) # Week 3 Source: https://docs.rocket.new/changelog/2026/january/week-3 Rocket.new January week 3 changelog: built-in site analytics for shipped apps, Flutter web compatibility checks, and the new Supabase V2 integration. New * **Built-in site analytics**: Every deployed project gets an analytics dashboard with visits, pageviews, bounce rate, duration, and breakdowns by source, device, country, and UTM. No setup required. [Learn more](/build/measure/analytics) Improved * **Flutter web compatibility checks**: Rocket verifies that packages support the web platform before including them. Build-time incompatibility errors are caught at selection time instead. * **Supabase V2 for all frameworks**: Improved context handling, token management, and dynamic tool selection across React, Next.js, and Flutter. # Week 4 Source: https://docs.rocket.new/changelog/2026/january/week-4 Rocket.new weekly release notes: multi-page website generation from a single prompt, plus platform reliability improvements across Build and the agent. New * **Multi-page website generation**: Rocket can now generate full websites with multiple pages, not just single landing pages. Describe the site you need and get a complete multi-page project back. Improved * **Platform speed and reliability**: Under-the-hood improvements to build performance, stability, and response times. Everything you build runs on a stronger foundation. # Week 1 Source: https://docs.rocket.new/changelog/2026/july/week-1 Intelligence data is clearer across company, people, hiring, news, and website views, with Company Intel on the dashboard and progress while data is gathering. Improved * **Clearer Intelligence data**: Company, people, hiring, news, and website views now surface cleaner, more consistent records, so the same company reads the same way across [Intelligence](/intelligence/overview). * **Company Intel from the dashboard**: Open a company's Intelligence profile directly from the dashboard instead of searching for it again. Improved * **[People and hiring Intelligence](/intelligence/pillars/people-hiring)**: Profiles now include stability scores, open-role counts, recent departures, hiring charts, and the key moves at a company. * **[Website Intelligence](/intelligence/pillars/website)**: Company details are more accurate, pricing-change history is easier to scan, and Legal and Compliance statuses are labeled more clearly. Improved * **Adding a company**: The company-add flow validates domains more carefully, so you are less likely to track the wrong site. * **Data-gathering progress**: Intelligence now shows progress while it collects company data, instead of leaving you on a blank view. # Week 2 Source: https://docs.rocket.new/changelog/2026/july/week-2 Light Solve is available on Free and Pro, Solve reports use category templates with clickable sources, and watchlists suggest companies based on purpose. New * **[Light Solve on Free and Pro](/solve/light-solve)**: Rocket Solve is available to Free and Pro plan users through Light Solve. You can ask business questions in plain language and get fast, structured answers with visual outputs and supporting data. Pro does not include Full Solve. * **Mode-based Solve depth**: Solve supports two modes - Light Solve for quick, conversational research and Full Solve for deeper research. On Rocket and Booster, queries are auto-routed to Light Solve or Full Solve based on the prompt. There is no manual mode selector on Free, Pro, Rocket, or Booster. * **Export options**: PDF, PPT, HTML, and PRD are supported in Light Solve on all plans. Specify a format in your initial prompt to generate the report accordingly. Full Solve supports the same formats for deeper research outputs. Improved * **[Solve docs refresh](/solve/overview)**: Updated Solve docs, FAQs, pricing language, and troubleshooting guidance to explain Light Solve on Free and Pro, report formats on all plans, credits usage, and when Rocket or Booster unlock Full Solve via automatic routing. Improved * **[Watchlist suggestions](/intelligence/feeds/watchlist)**: Creating a watchlist now suggests companies that fit the purpose you described, instead of starting from a blank list. New * **Report templates by category**: Generated reports use a template matched to the job: Market Research, Business Strategy, Content/GTM, Product Validation, or SaaS/Platform. [Learn more](/solve/results/reports) Improved * **Clickable sources in reports**: Source links in generated reports open from both the HTML report and the downloaded PDF. [Learn more](/solve/results/share-and-export) # Week 3 Source: https://docs.rocket.new/changelog/2026/july/week-3 Talk to an Expert is available when you want help building a project, with clearer blocked-request guidance and tighter Solve follow-up questions. Improved * **Blocked-request messages**: When a request cannot run, the message explains what to change and keeps the conversation in place so you do not lose the thread. * **Solve planning and clarification**: Complex Solve requests can be refined through a short set of follow-up questions before research starts. [Learn more](/solve/results/refine) # Week 4 Source: https://docs.rocket.new/changelog/2026/july/week-4 Fixes for abandoned Solve threads, duplicate Solve runs, and chat scrolling, plus more reliable Visual Edit, screenshot capture, and Next.js recovery. Fixed * **Abandoned threads on the Free plan**: Starting another task while one was already running no longer leaves an empty thread behind. * **Solve concurrency**: A second Solve thread is no longer created while another Solve task is still running. * **Chat scrolling**: Chat now stays anchored to the latest messages instead of jumping or sticking mid-thread. Improved * **[Visual Edit on Next.js previews](/build/editor/visual-edit)**: Selecting and editing elements in a Next.js preview is more reliable. * **Code-generation recovery**: If a generation is interrupted, reconnecting continues in the same progress view instead of starting over. Improved * **GitHub restarts for Next.js**: Restarting a Next.js project pulled from GitHub now comes back up more consistently. # Week 5 Source: https://docs.rocket.new/changelog/2026/july/week-5 Azure DevOps is available as a connector, connected services are reused, and Notion URL checks plus Figma-to-code fallback are more reliable. New * **[Azure DevOps connector](/build/connectors/azure-devops)**: Connect Azure DevOps and use work items, repos, and project context in Rocket. Improved * **Connected services**: Rocket no longer asks you to connect a service that is already connected. * **Product answers in chat**: Answers about settings, errors, credentials, and how the platform behaves are more specific. * **Integrations in the same turn**: After you confirm a connection, Rocket can start using it in that same turn instead of waiting for a follow-up. Fixed * **[Notion document URLs](/build/connectors/notion)**: Invalid Notion links are caught before Rocket tries to read the page. Improved * **Figma-to-code fallback**: When a Figma import cannot be converted directly, Rocket falls back more cleanly instead of stopping on a partial result. # Week 1 Source: https://docs.rocket.new/changelog/2026/june/week-1 Rocket.new June week 1 update: agent web search now runs during the initial build flow, so Rocket can research live sources while building v1. New * **[Redesigned Intelligence](/intelligence/overview)**: The Intelligence module has been completely redesigned with a new layout, streamlined navigation, and improved signal discovery to help you monitor competitors and market shifts more effectively. * **[Watchlist in Intelligence](/intelligence/feeds/watchlist)**: Describe what you want to keep an eye on, like "competitors I'm losing deals to," and Rocket starts monitoring it for you across nine signal categories (website, social, hiring, pricing, news, GTM, product, people, and finance). No manual tracking across tabs, spreadsheets, and Slack threads. * **[Intel cards in Intelligence](/intelligence/intel-cards)**: Each piece of intel arrives as a structured card rather than a raw feed of links, with a clear title, what it means, why it matters, and a magnitude indicator, so you get interpreted, role-aware insight at a glance. New * **Agent web search support for the initial flow**: Rocket can now search the web during the initial generation flow, pulling in up-to-date information while building your first version instead of relying solely on existing knowledge. # Week 2 Source: https://docs.rocket.new/changelog/2026/june/week-2 Advisor Agent in Build. Rocket's senior architect sub-agent that resolves error loops and makes architectural decisions automatically. New * **[Workspace invite toggle](/getting-started/workspace/manage#edit-workspace-settings)**: The "Allow workspace editors to invite members" setting controls workspace Editor invites, and whether project and task owners can invite anyone or only existing workspace members. New * **[Advisor Agent in Build](/build/editor/advisor-agent)**: Rocket now includes a senior architect sub-agent that activates automatically when the coding agent gets stuck. Instead of looping on the same broken fix, the system escalates to the Advisor which reads your actual codebase, identifies root causes, and returns a structured plan the coding agent executes. It handles error loop resolution, architectural decisions, large scale refactoring plans, and code review. # Week 3 Source: https://docs.rocket.new/changelog/2026/june/week-3 Rocket.new weekly changelog: Launchpad now supports @ mentions so you can reference connectors like Supabase, Stripe, and GitHub from your prompt. New * **[Mixpanel](/build/connectors/mixpanel) and [Directus](/build/connectors/directus) connectors for [Launchpad](/getting-started/task/launchpad)**: Both are now available as sources in your first message. Reference a Mixpanel project to ground builds and research in event data, funnels, and retention metrics, or a Directus instance to build from existing collections, content models, and relational data. New * **[Launchpad @ mention support](/getting-started/task/launchpad)**: You can now type `@` at the start of your prompt, select **Connectors**, and pick a source directly without needing to paste a URL. All five connectors (Notion, Google, Linear, Airtable, Supabase) are available in your first message. Notion, Google, and Linear are available in follow-up messages. # Week 4 Source: https://docs.rocket.new/changelog/2026/june/week-4 Improved reliability for code generation sessions. Stuck progress indicators are now automatically resolved when a session ends unexpectedly. Improved * **Reliable code generation progress**: If a session ends unexpectedly during code generation, progress indicators now resolve automatically instead of spinning indefinitely. Completed steps are preserved so you can see exactly where things left off, and the system keeps containers alive during active generation to prevent premature interruptions. New * **Free workspace member limit**: Free workspaces now support up to 100 invited members. Fixed * **APK build reliability**: Resolved an issue where APK builds could fail due to redundant file watchers running simultaneously. Builds now complete consistently without interference. New * **Unfollow feedback prompt**: When you unfollow a task, a quick popup now asks why. Your answer helps us improve the follow experience. * **Download artifacts in Solve**: Markdown (`.md`) and HTML artifacts generated in Solve can now be downloaded directly. Improved * **Cleaner signal summaries**: Signal summaries no longer include raw data, making them easier to read and act on. # Week 1 Source: https://docs.rocket.new/changelog/2026/march/week-1 Rocket.new March week 1 release notes: 11 new integrations added to the connector library and a new Performance tab for monitoring app speed and metrics. Eleven integrations are now live, along with a new Performance tab: New * **[Calendly](/build/connectors/calendly)**: Visitor meeting booking directly from your site. * **[Mailerlite](/build/connectors/mailerlite)**: Email campaigns and subscriber list management. * **[Sendgrid](/build/connectors/sendgrid)**: Reliable transactional emails at scale. * **Performance tab**: Core Web Vitals and loading metrics inside the editor, available for landing page and website projects. See the impact of the automatic optimizations from February. [Learn more](/build/measure/performance) New * **[Strapi](/build/connectors/strapi)**: Open-source headless CMS for content management. * **[Directus](/build/connectors/directus)**: Self-hosted or cloud CMS with flexible content modeling. * **[Tally](/build/connectors/tally)**: Simple, no-code form responses. * **[Brevo](/build/connectors/brevo)**: Transactional and marketing emails from your app. New * **[Airtable](/build/connectors/airtable)**: Pull data from spreadsheet-style databases into your app. * **[Mailchimp](/build/connectors/mailchimp)**: Email marketing and newsletter signups. * **[Mixpanel](/build/connectors/mixpanel)**: Event analytics for tracking user interactions. * **[Typeform](/build/connectors/typeform)**: Interactive forms and surveys embedded in your pages. # Week 2 Source: https://docs.rocket.new/changelog/2026/march/week-2 Mobile creation flow, SVG generation, image generation improvements, React deprecated, GitHub Sync, 25K templates, and multi-format file uploads. Improved * **Mobile app creation flow**: Mobile apps now follow the same guided flow as web, with screen selection and structured descriptions for a more complete first generation. * **SVG generation reliability**: Fixed parsing issues caused by CSS special characters in generated SVGs. Fixed * **Authentication redirect**: Resolved a cookie blocking issue in the iframe during authentication redirection. New * **SVG generation**: Generate SVG images through follow-up prompts and the [`/Generate SVG Illustration`](/build/editor/commands#available--commands) command. Useful for icons, illustrations, and graphics that scale without quality loss. Improved * **Web app creation flow**: Web apps now follow the same guided flow as websites and landing pages, with screen selection and structured descriptions for a more complete first generation. * **SEO audits with production URLs**: SEO commands now accept published URLs alongside preview URLs. Audit results reflect what search engines actually see on your live site. * **Image generation**: No longer limited to command-based triggers. Describe an image in any project and Rocket generates it inline, regardless of framework. Discontinued * **React**: All new web app use cases are now built with Next.js. React remains available for legacy Figma to Code projects. Existing React projects continue to work and can still be edited. New * **25,000+ landing page templates**: 42 industry categories. Pick a template and start customizing instead of starting from blank. [Browse templates](https://www.rocket.new/templates) * **GitHub Sync for Next.js projects**: Projects built in Rocket can now sync with GitHub. Push your code to a repo and pull changes made outside Rocket back in. New * **Multi-format file uploads**: Upload PDFs, Excel spreadsheets, Markdown files, and CSVs alongside images. Rocket builds from your real content instead of placeholders. [Learn more](/build/create/from-an-attachment) # Week 3 Source: https://docs.rocket.new/changelog/2026/march/week-3 Performance issue detection, live Android notifications, viewer clone restriction, secrets exposure checks, two-way Git Sync, and more. Fixed * **GitHub Pull button state**: The Pull button now correctly switches back to a Connect state when GitHub is disconnected from global integration settings. New * **Performance issue detection and resolution**: The Performance tab now lists issues identified by the performance API with options to fix or ignore each one. Performance issues are also tracked as part of generation requests. [Learn more](/build/measure/performance) * **Live notifications for Android**: Android app users now receive real-time push notifications. Improved * **Performance tab design**: Visual refinements to the Performance tab for a cleaner layout and better readability. * **Viewer role clone restriction**: Users with the Viewer role can no longer clone apps, enforced with backend validation. Improved * **Unsupported integration handling**: Rocket now detects unsupported integrations and suggests the closest available alternative. * **Server-side secrets exposure checks**: Added warnings when integration configurations could expose server-side secrets to the client. New * **Two-way Git Sync for Next.js**: Next.js projects created from Figma or a prompt now support two-way Git Sync. Push your code to GitHub and pull external changes back into Rocket. * **Published URL in accessibility audits**: Accessibility audit reports now accept published URLs, so you can evaluate your live site directly. * **Disconnect GitHub account**: A new toggle in workspace settings lets you disconnect your linked GitHub account. Improved * **Document context in app generation**: Integrated document context into the generation pipeline to improve accuracy when creating mobile and web applications. # Week 4 Source: https://docs.rocket.new/changelog/2026/march/week-4 Rocket.new weekly product update: ICO favicon upload support, fixed image generation in visual edits, and improved reliability for SEO audits in Build. Fixed * **Image generation in visual edits**: Resolved an issue where image generation failed during visual edits because the image description was empty. New * **ICO image upload support**: ICO files are now recognized during upload detection and validation. Fixed * **SEO audit reliability**: Improved the SEO audit tool to gracefully handle missing or null API response fields, preventing processing errors. # Week 1 Source: https://docs.rocket.new/changelog/2026/may/week-1 Rocket.new May week 1 changelog: new Workspaces Listing view, Supabase refresh token fix, hydration error detection, and Intelligence credit updates. New * **Hydration error detection**: Added a hydration error detector to the Next.js linting pipeline to catch and resolve SSR/client render mismatches in generated code. New * **View all workspaces menu**: A new Workspaces Listing view shows every workspace you own in one place, with visibility into members, their roles, tasks, projects, and messages for easier collaboration and management. [Learn more](/getting-started/workspace/overview#view-all-workspaces) Fixed * **Supabase refresh token**: Resolved a refresh token issue that was causing intermittent session drops in Supabase-connected projects. # Week 2 Source: https://docs.rocket.new/changelog/2026/may/week-2 Launchpad source context, /fix-hydration-errors command, Flutter connectors for Notion/Linear/Google, dynamic deliverable format, and simplified pricing. Fix * **Visual Edit APK sync**: Fixed an issue where changes made through Visual Edit were not being reflected in the APK build. * **Subscription invoices**: Resolved the issue with displaying older invoices on the Manage Subscription page. Also added a dedicated Invoices page where users can view all their invoices. New * **Intelligence redesign**: Redesigned Intelligence feature with new UI and better intel gathering. [Explore Intelligence](/intelligence/overview) New * **Launchpad**: Your existing work is now the foundation Rocket launches from. Point Rocket at a Notion page, Linear issue, Supabase project, Google Doc, Google Sheet, or Airtable base and it reads the content as source context. For Build tasks, Rocket extracts features, workflows, and data models to generate a more accurate app. For Solve tasks, Rocket grounds research in your real data, cites exact records, and produces deliverables anchored in your material. [Learn more](/getting-started/task/launchpad) * **`/Fix Hydration Errors` command**: A new slash command that automatically fetches active errors from your running preview, filters them by React hydration mismatch patterns, and applies targeted fixes to each affected file. Works with Next.js, Remix, and any SSR React project. [Learn more](/build/editor/commands) * **Notion, Linear, and Google connectors now support Flutter**: The Notion, Linear, and Google Workspace connectors are no longer limited to Next.js TypeScript projects. You can now use them in Flutter build tasks to read from and write back to your connected services during mobile app development. New * **Simplified pricing plans**: Rocket now has four straightforward plans: Free (USD 0, 20 credits), Pro (USD 25/mo, 100 credits), Rocket (USD 50/mo, 250 credits), and Booster (USD 250/mo, 1,500 credits). All paid plans include unlimited team members. Competitive intelligence and consultant-grade solutions are included in Rocket and Booster. Existing subscribers keep their current plan and pricing unless they choose to upgrade manually. [See pricing](/getting-started/pricing) New * **Dynamic deliverable format**: Research jobs previously always produced a PDF as the first deliverable. The system now identifies the most appropriate output format (PDF, PPT, or PRD) based on the user's query and routes accordingly. When no specific format is implied, it defaults to PDF. # Week 3 Source: https://docs.rocket.new/changelog/2026/may/week-3 Rocket.new weekly release notes: enhanced Mobile Preview navigation with live route updates and cleaner URL handling when switching tabs in Build. New * **[Jira connector](/build/connectors/jira)**: Connect Jira to Rocket and build directly from your tickets. Rocket reads issue descriptions, acceptance criteria, sprint data, and epics, then generates code aligned with your planned work. * **[ElevenLabs connector](/build/connectors/elevenlabs)**: Connect ElevenLabs to add AI-powered voice generation, text-to-speech, and voice cloning to your app with a single prompt. New * **Mobile Preview navigation**: Enhanced navigation with route updates, URL handling for tab changes, and improved logging to track tab switches from the frontend dropdown. # Week 4 Source: https://docs.rocket.new/changelog/2026/may/week-4 Rocket.new May week 4 update: User-in-the-Loop lets the code generation agent ask clarifying questions mid-run without restarting or losing context. New * **User-in-the-Loop for code generation**: Rocket can now pause mid-generation to ask you a clarifying question when your request is ambiguous. For example, if you ask to "build me a dashboard," Rocket will ask whether you mean an analytics dashboard or an admin panel instead of guessing. Once you respond, generation picks up exactly where it left off without restarting or losing context. Fix * **Rocket badge on public apps**: Updated rocket-web scripts to fix the issue of the rocket-badge not displaying on public apps. # Week 2 Source: https://docs.rocket.new/changelog/2026/september/week-2 You can approve or reject temporary support access to modify a project, and revoke that access later from project settings. New * **Support access consent**: Before support can change your project, you approve or reject temporary access to modify it. * **Revoke support access**: Access you already granted can be revoked from project settings. Fixed * **SSL on publish**: Publishing a project no longer fails on the SSL errors that blocked some launches. # Week 4 Source: https://docs.rocket.new/changelog/2026/september/week-4 More connectors now work in Flutter mobile apps. Figma to code is discontinued as of September 29, 2026. Build and Solve also accept more document types. New * **More connectors now support Flutter**: These connectors work in Flutter mobile build tasks as well as Next.js TypeScript web build tasks: [Google Workspace](/build/connectors/google) ([Google Docs](/build/connectors/google), [Google Sheets](/build/connectors/google), and [Google Calendar](/build/connectors/google)), [Notion](/build/connectors/notion), [Airtable](/build/connectors/airtable), [Linear](/build/connectors/linear), [Mailchimp](/build/connectors/mailchimp), [Mixpanel](/build/connectors/mixpanel), [Typeform](/build/connectors/typeform), [Strapi](/build/connectors/strapi), [Directus](/build/connectors/directus), [Tally](/build/connectors/tally), [Brevo](/build/connectors/brevo), [Calendly](/build/connectors/calendly), [MailerLite](/build/connectors/mailerlite), [SendGrid](/build/connectors/sendgrid), [Webflow](/build/connectors/webflow), [Razorpay](/build/connectors/razorpay), [Confluence](/build/connectors/confluence), [HubSpot](/build/connectors/hubspot), [Jira](/build/connectors/jira), and [ElevenLabs](/build/connectors/elevenlabs). Discontinued * **Figma to code has been discontinued**: As of today, the Figma import feature is no longer available on Rocket.new. You can no longer create projects by importing Figma files or frames. If you previously used Figma to code, you can still build apps on Rocket.new by starting [from an idea](/build/create/from-an-idea), [from an attachment](/build/create/from-an-attachment), or [from a GitHub repository](/build/create/from-github). We appreciate everyone who used and gave feedback on this feature. New * **More document uploads**: Build and Solve flows that accept files now also take `.doc`, `.docx`, `.ppt`, `.pptx`, `.html`, `.htm`, and `.xls`. [Learn more](/build/create/from-an-attachment) # Appearance Source: https://docs.rocket.new/getting-started/account/appearance Change the Rocket.new interface theme between light mode, dark mode, or your operating system default from account appearance settings. Rocket lets you choose between light mode, dark mode, or a system-synced theme. The system option automatically mirrors your operating system's current appearance setting whenever it changes. ## Steps Click your **avatar** in the bottom-left corner of the screen. Rocket home screen with the avatar highlighted in the bottom-left corner. Rocket home screen with the avatar highlighted in the bottom-left corner. In the account menu, find the **Appearance** row. Click one of the three icons to apply your preferred theme: | Icon | Option | What it does | | :- | :- | :- | | | **System** | Follows your operating system's light or dark setting and updates automatically when it changes | | | **Dark** | Applies a dark color scheme regardless of your system setting | | | **Light** | Applies a light color scheme regardless of your system setting | The change applies immediately. Rocket saves your choice across sessions so you only set it once. Account menu open with Appearance row and theme toggle icons highlighted. Account menu open with Appearance row and theme toggle icons highlighted. The System option is the default. If your operating system switches between light and dark based on time of day, Rocket reflects that change automatically. ## What's next? Update your name, profile picture, and other personal details. Configure push and audio alerts for build and task updates. # Notification settings Source: https://docs.rocket.new/getting-started/account/notification-settings Turn on browser push notifications and audio alerts in Rocket.new to track build progress, task completion, and project milestones. Notification settings control when and how Rocket alerts you to build completions, errors, and project milestones. Configure these alongside [appearance](/getting-started/account/appearance) from the same account menu. You can also view incoming alerts in the [notification panel](/getting-started/account/notifications), which organizes them by Requests, Updates, and Notifications. ## Steps Your browser must have notification permissions enabled for Rocket to send push notifications. Click your **avatar** in the bottom-left corner of the screen. Rocket home screen with the avatar highlighted in the bottom-left corner. Rocket home screen with the avatar highlighted in the bottom-left corner. In the account menu, click **Settings**. Account menu open with Settings highlighted. Account menu open with Settings highlighted. In the Settings panel, click **Notifications** under the Account section. Settings panel with Notifications tab highlighted in the sidebar. Settings panel with Notifications tab highlighted in the sidebar. Two toggles are available: * **Push notifications**: Receive browser alerts even when Rocket is in the background. Covers build status updates, important process events, and project generation milestones. * **Play audio notification**: Hear a sound alert for build completion, errors, and tasks that need attention. Useful when working in other tabs or applications. Enable either or both based on your preference. If the browser prompts for notification permissions, click **Allow**. Notifications settings panel showing Push notification and Play audio notification toggles. Notifications settings panel showing Push notification and Play audio notification toggles. On the home screen, tap the **Settings** icon in the footer bar at the bottom. Settings icon in the footer navigation bar In the settings sheet that slides up, toggle the **Notifications** switch to ON (green). Mobile settings sheet with Notifications toggle. When you toggle notifications on for the first time, iOS may prompt you to allow notifications. Tap **Allow** to grant permission. If you previously denied notification permissions, go to device **Settings > Rocket > Notifications** to enable them, then return to the Rocket app. Once enabled, Rocket sends mobile push notifications even when the app is in the background or closed. Notifications cover build status updates, important process events, and project generation milestones. ## Troubleshooting 1. Check that the push notifications toggle is enabled in Rocket settings. 2. Verify browser notification permissions are granted for Rocket. 3. Check your browser notification settings and confirm Rocket appears in the allowed sites list. 4. Try disabling and re-enabling the toggle in Rocket. 1. Check that the audio notifications toggle is enabled in Rocket settings. 2. Verify your browser allows audio playback for Rocket. 3. Check that your system volume is not muted. 4. Try playing audio in another tab to confirm browser audio works. 1. Check that the Notifications toggle is enabled in Rocket settings. 2. Go to device **Settings > Rocket > Notifications** and confirm they are allowed. 3. Check that Do Not Disturb is not active on your device. 4. Restart the Rocket app. Disable audio notifications if you only want visual alerts. Disable push notifications if you only want audio cues. Disable both when working on long-running projects and check back manually. ## What's next? Review incoming alerts organized by Requests, Updates, and Notifications. Update your avatar, first name, last name, and location. # Notifications Source: https://docs.rocket.new/getting-started/account/notifications Use the Rocket.new notification panel to review collaboration requests, product updates, and alerts from running Solve and Build tasks. The notification panel keeps you informed about activity across your workspaces, projects, and tasks. It organizes activity into three tabs: **Requests**, **Updates**, and **Notifications**. Rocket home screen with the Notifications button highlighted in the bottom-left bar. Rocket home screen with the Notifications button highlighted in the bottom-left bar. ## Steps In the bottom-left corner of the screen, click the **Notifications** button. A panel opens over the current view. At the top of the panel, click the tab for the activity you want to review: Notification panel showing Requests, Updates, and Notifications tabs. Notification panel showing Requests, Updates, and Notifications tabs. * **Requests** for invitations and collaboration events on Solve and Build tasks * **Updates** for new features and platform announcements * **Notifications** for task completions and prompt results A red dot on the **Notifications** button or on a tab label means there are unread items in that tab. ## What each tab shows | Tab | What it covers | | :- | :- | | **Requests** | Collaboration activity: invitations accepted, join requests received or approved for Solve and Build tasks | | **Updates** | Platform announcements: new features and improvements introduced to Rocket | | **Notifications** | Task completion events: finished Solve reports, completed Build changes, and prompt execution results | **Requests** shows when someone accepts your invitation to a [Solve or Build task](/getting-started/collaboration/task), and when others request to join tasks you own. Every collaboration action that needs your attention appears here. **Updates** keeps you informed about new capabilities added to the platform. Check this tab to learn about features before you need them. **Notifications** confirms that Rocket has finished work on your behalf. You see an entry when a Solve report is ready, when a Build task completes, or when Rocket finishes applying the changes or prompt you submitted. To control which events trigger alerts and whether they play a sound, see [notification settings](/getting-started/account/notification-settings). ## What's next? Turn push and audio alerts on or off for builds, errors, and task milestones. Share individual tasks and manage access requests that appear in the Requests tab. # Profile settings Source: https://docs.rocket.new/getting-started/account/profile-settings Edit your Rocket.new profile by updating your avatar, display name, and location so teammates recognize you across workspaces and projects. Your profile is your identity across Rocket. Your avatar, first name, last name, and location appear on every [task](/getting-started/task/overview) you create, in collaboration invitations, and in emails sent to you. The same account menu also gives access to [notification settings](/getting-started/account/notification-settings) and appearance options. ## Steps Click your **avatar** in the bottom-left corner of the screen. Rocket home screen with the avatar highlighted in the bottom-left corner. Rocket home screen with the avatar highlighted in the bottom-left corner. In the account menu, click **Settings**. The Profile tab opens by default. Account menu open with Settings highlighted. Account menu open with Settings highlighted. Update any of the following fields **(1)**: * **Avatar**: Click the image area and upload a photo or picture file. * **First name**: Enter your first name as it appears across Rocket. * **Last name**: Enter your last name. * **Location**: Add your city or time zone. Then click **Save changes** **(2)** at the bottom of the form. Profile settings panel with fields and Save changes button highlighted. Profile settings panel with fields and Save changes button highlighted. Email address changes are handled by the support team. Contact [support@rocket.new](mailto:support@rocket.new) if you need to change your login address. Tap the profile icon in the bottom navigation bar of the home screen. Rocket home screen showing profile icon in bottom navigation bar. The Profile modal shows your current picture, name, email, and location. Profile modal showing user details with Close and Done buttons. Tap the pencil icon next to any field to edit it: * **Avatar**: Tap the profile image area, then tap **Edit** to upload a new photo or picture. * **First name**: Tap the pencil icon next to your first name. * **Last name**: Tap the pencil icon next to your last name. * **Location**: Tap the pencil icon next to your location. Email address changes are handled by the support team. Contact [support@rocket.new](mailto:support@rocket.new) if you need to change your login address. Tap **Done** in the top-right corner of the Profile modal. Rocket saves your updates and closes the modal. Profile modal with Done button highlighted in top right corner. ## What's next? Open the notification panel to review collaboration requests, product updates, and task completion alerts. Switch between light mode, dark mode, or system-synced theme. # Overview Source: https://docs.rocket.new/getting-started/collaboration/overview Understand the three sharing layers in Rocket.new and how workspace membership, project access, and task sharing control who sees your work. Rocket uses a three-level sharing model to control who can access your work. Each level sits inside the one above it, so you can grant broad access to your core team and narrow access to external reviewers without changing your project structure. Organization-level container. Billing, connectors, and team management. Initiative-level space. Tasks, files, services, and members. A single unit of work. Solve or Build with its own chat and outputs. Inviting someone at any level adds them to the workspace. Project and task invitees become workspace members and can create new threads and other work according to their role permissions. Visibility of existing work does not cascade automatically. * A workspace member gets access to existing projects and tasks **only if** the **Grant access** checkbox is ticked when you invite them. New projects and tasks need a separate invitation. * A project collaborator gets access to existing tasks in that project only if the **Grant access** checkbox is ticked when you invite them. New tasks are not shared automatically. * Task level sharing grants access to the shared task and adds the person to the workspace. It does **not** automatically grant access to other projects or tasks in that workspace. ## When to use which level | Level | Best for | Example | | :- | :- | :- | | **Workspace** | Core team members who need organization-level access: billing, connectors, and shared projects | Co-founders, full-time team members, department leads | | **Project** | Collaborators working on a specific initiative | A freelancer helping with a product launch, a cross-functional squad | | **Task** | External reviewers or stakeholders who only need to see one output | Sharing a Solve report with a client, sending a Build preview for feedback | Start narrow and expand as needed. Share a task first. If the person needs more context, invite them to the project. If they need visibility across existing projects, invite them at the workspace level with the grant access option. Even a task or project invite adds the person to the workspace, so they can create new work according to their role. Reserve workspace level invitations with grant access for people who need broad visibility of existing projects. ## Roles Rocket uses two roles: **Editor** and **Viewer**. These roles apply across all levels. Roles set at a higher level cascade down but can be made more restrictive at lower levels. | Role | Can do | | :- | :- | | **Editor** | Day to day work: create tasks, edit, upload files, and connect services. Invite at the workspace level when the invite toggle is enabled. At the project or task level, only the owner can invite. | | **Viewer** | Read-only: see outputs, but cannot create or edit | See [workspace roles and permissions](/getting-started/collaboration/workspace#roles-and-permissions) for the full permissions breakdown. ## Credit limits Every member you add, whether at the workspace, project, or task level, is a member of the workspace that contains that work. Credit limits apply only to **Editors**. After an Editor accepts the invitation, they are assigned a default of **100 credits** for all time. Until they accept, the credit limit shows as **0**. You can change this at any time from **Settings → Members** using the **Credit limit** dropdown on the member's row. Owners and Viewers are not assigned a credit limit. Workspace members list showing a pending Editor with a credit limit dropdown. Workspace members list showing a pending Editor with a credit limit dropdown. The credit limit controls how many credits that Editor can consume across all their activity in the workspace. It is a one-time allotment, not a monthly reset. Setting a limit to **0** prevents them from generating any output. You can update or remove the limit at any time. All collaboration invitations are delivered via email. You can track join events, incoming share requests, and responses from the **Requests** tab in the [notification panel](/getting-started/account/notifications). ## What's next? Invite members and manage roles at the organization level. Collaborate on tasks, files, and services within a project. Share individual Solve or Build tasks by email. # Project Source: https://docs.rocket.new/getting-started/collaboration/project Invite teammates to a Rocket.new project. Assign editor or viewer roles, and remove access when collaborators no longer need the project. Project level collaboration lets you invite teammates directly into a project. Collaborators are added to the workspace so they can create new threads and other work according to their role, and they can access shared context and connected services within that project. Access to existing tasks depends on the **Grant access** checkbox when you invite them. Use this for day to day teamwork on a specific initiative: a product launch, a research sprint, or a website redesign. Inviting a collaborator adds them to the workspace. They get access to all existing tasks in the project **only if** the **Grant access** checkbox is ticked. If it is unticked, they join the project without seeing existing tasks unless you share those tasks individually. Tasks created after the invitation are never shared automatically. Share them at the [task level](/getting-started/collaboration/task) if needed. ## Steps In the sidebar, click **Projects**. Sidebar with Projects highlighted. Sidebar with Projects highlighted. Click the project you want to share. Projects list with a project card highlighted. Projects list with a project card highlighted. In the right panel, click the **Collaborators** tab. Project page with the Collaborators tab highlighted. Project page with the Collaborators tab highlighted. Type the collaborator's email address and select a role (**Editor** or **Viewer**) from the dropdown. Only the project owner can invite collaborators. Editors who do not own the project can never invite anyone to it. Invite collaborators panel with email field and role dropdown. Invite collaborators panel with email field and role dropdown. Role dropdown showing Viewer and Editor options. Role dropdown showing Viewer and Editor options. Before clicking **Invite**, use the **Grant access** checkbox to decide whether to share existing tasks: * **Ticked:** the collaborator gets access to all tasks that already exist in this project. * **Unticked:** the collaborator joins the project but starts with an empty view. You can share tasks with them individually at the [task level](/getting-started/collaboration/task). Either way, tasks created after the invitation are not shared automatically. Those always need to be shared separately. Click **Invite** when ready. The collaborator appears in the list with a **Pending** badge until they accept. They will receive an email with a link to join. You can also copy the invite link directly using the copy icon next to their name. Invitation requests can also be accepted or rejected through [notifications](/getting-started/account/notifications), in addition to email and the invitation link. Collaborators list showing an invited member with a Pending badge. Collaborators list showing an invited member with a Pending badge. ## Revoke a pending invitation If you need to cancel a project invitation before the recipient accepts it, open the **Collaborators** tab and find the collaborator with the **Pending** badge. In the project, click the **Collaborators** tab in the right panel. Click the role dropdown (showing **Editor** or **Viewer**) on the pending collaborator's row. This reveals additional actions for that invitation. Collaborators list showing an invited member with a Pending badge. Collaborators list showing an invited member with a Pending badge. Select **Revoke invite** from the dropdown. The pending row is removed immediately and the invitation link in the recipient's email becomes invalid. The recipient can no longer accept the invitation through email, the copied invite link, or [notifications](/getting-started/account/notifications). ## Remove a collaborator To remove an accepted collaborator's access to the project, open the **Collaborators** tab, find the collaborator's row, and click their role dropdown. In the project, click the **Collaborators** tab in the right panel. Click the role dropdown (showing **Editor** or **Viewer**) next to the collaborator you want to remove. Select **Remove** from the dropdown. The collaborator loses access to the project immediately. Their access to any tasks in that project is also removed, including individual tasks and tasks that are part of the project. Revoking or removing someone's access to a project does **not** remove them from the workspace. They remain a workspace member and keep access to any other projects or tasks they were invited to. However, revoking or removing access at the [workspace level](/getting-started/collaboration/workspace) also removes their access from all projects and tasks in the workspace. If you remove an **Editor** who created tasks in this project, the workspace owner automatically becomes the owner of those tasks. ## Roles and permissions Rocket uses two roles at the project level. | Permission | **Editor** | **Viewer** | | :- | :- | :- | | **View tasks and outputs** | Yes | Yes | | **Create new tasks** | Yes | No | | **Edit tasks (chat, iterate)** | Yes | No | | **Upload and manage files** | Yes | No | | **Connect and disconnect services** | Yes | No | | **Invite collaborators** | Yes, if you own the project | No | Day to day collaborator. Editors can create tasks, iterate on existing work, upload files, and connect services. Editors who do not own the project can never invite anyone to it. Only the project owner can invite collaborators. When the [invite toggle](/getting-started/workspace/manage#edit-workspace-settings) is enabled, the owner can invite anyone. When it is disabled, the owner can invite only existing workspace members. Read-only access. Viewers can see tasks and outputs they have been granted access to, but cannot create or edit anything. Ideal for stakeholders who need visibility without editing access. Roles apply at each level independently. A workspace Editor can be given Viewer access only on a specific project. ## What's next? Share individual Solve or Build tasks by email. Manage workspace level roles and permissions. How tasks share context within a project. Create and manage your projects. # Task Source: https://docs.rocket.new/getting-started/collaboration/task Share a single Rocket.new task by email. Invitees join the workspace and can create work by role, while only seeing the specific task you shared. Task level sharing is the most granular level of collaboration in Rocket. It lets you give someone access to a single Solve or Build task without exposing the rest of the project. The invitee is still added to the workspace and can create new threads and other work according to their role. Use this for external reviewers, clients, or stakeholders who only need to see one specific output. ## Steps In the left sidebar, click **Tasks** to open your tasks list. Rocket sidebar with Tasks highlighted. Rocket sidebar with Tasks highlighted. Click the task card you want to share. Tasks list with a task card highlighted. Tasks list with a task card highlighted. In the task toolbar at the top-right, click the **Members** icon to open the sharing panel. Task view with the Members icon highlighted in the toolbar. Task view with the Members icon highlighted in the toolbar. In the **Share your task** panel, type the recipient's email address **(1)** and select a role **(2)**: **Editor** or **Viewer**. Only the task owner can invite collaborators. Editors who do not own the task can never invite anyone to it. See [Roles and permissions](#roles-and-permissions) for what each role can do. Share your task panel with email input and role dropdown. Share your task panel with email input and role dropdown. Select the role from the dropdown and click **Invite**. The recipient receives an email with a link to access the task. You can also copy the invite link directly using the copy icon next to their name in the sharing panel. You can track acceptance in the **Requests** tab of the [notification panel](/getting-started/account/notifications). Share your task panel with role dropdown open and Invite button highlighted. Share your task panel with role dropdown open and Invite button highlighted. Task level sharing adds the recipient to the workspace. They can create new threads and other work according to their role permissions, but they only see the specific task you shared. They do not see the rest of the project or other workspace content unless you invite them separately. ## Revoke a pending invitation If you need to cancel a task invitation before the recipient accepts it, open the **Share your task** panel and find the collaborator with the **Pending** badge. In the task toolbar at the top right, click the **Members** icon to open the **Share your task** panel. Click the role dropdown (showing **Editor** or **Viewer**) on the pending collaborator's row. This reveals additional actions for that invitation. Select **Revoke invite** from the dropdown. The pending row is removed immediately and the invitation link in the recipient's email becomes invalid. The recipient can no longer accept the invitation through email, the copied invite link, or the **Requests** tab in the [notification panel](/getting-started/account/notifications). ## Remove a collaborator You can remove an accepted collaborator's access to a task at any time. Open the **Share your task** panel, find the collaborator's row, and use their role dropdown to remove them. In the **Share your task** panel, click the role dropdown (showing **Editor** or **Viewer**) next to the collaborator you want to remove. Share your task panel with the role dropdown highlighted on a collaborator row. Share your task panel with the role dropdown highlighted on a collaborator row. Select **Remove** from the dropdown. The collaborator loses access to this task immediately. They can no longer view the task or its outputs, and any invite link for that person no longer grants access to this task. Role dropdown open showing Viewer, Editor, and Remove options with Remove highlighted. Role dropdown open showing Viewer, Editor, and Remove options with Remove highlighted. Revoking or removing someone's access to a task does **not** remove them from the workspace. They remain a workspace member and keep access to any other projects or tasks they were invited to. However, revoking or removing access at the [workspace level](/getting-started/collaboration/workspace) also removes their access from all projects and tasks in the workspace. ## Roles and permissions | Permission | **Editor** | **Viewer** | | :- | :- | :- | | **View task and outputs** | Yes | Yes | | **Chat and iterate on the task** | Yes | No | | **Upload files** | Yes | No | | **Invite collaborators** | Yes, if you own the task | No | Day to day collaborator. Editors can chat, iterate, and upload files on the task. Editors who do not own the task can never invite anyone to it. Only the task owner can invite collaborators. When the [invite toggle](/getting-started/workspace/manage#edit-workspace-settings) is enabled, the owner can invite anyone. When it is disabled, the owner can invite only existing workspace members. Read-only access. Viewers can see the task and its outputs, but cannot chat, iterate, or upload files. ## What's next? Invite members and collaborate at the project level. Manage workspace level roles and team access. Learn how Solve, Build, and Intelligence tasks work. # Workspace Source: https://docs.rocket.new/getting-started/collaboration/workspace Add members to a Rocket.new workspace, assign editor or viewer roles, and manage access for everyone working across all projects inside. The workspace is the top level of Rocket's [three-level sharing model](/getting-started/collaboration/overview). Use this level for core team members who need broad access across your organization. Workspace access is not dynamic. When you invite someone, they get access to existing projects and tasks **only if** the **Grant access** checkbox is ticked. Any project or task created after the invitation is not automatically shared and requires a separate invitation at the [project](/getting-started/collaboration/project) or [task](/getting-started/collaboration/task) level. ## Steps Click your workspace name in the top-left of the sidebar. Rocket sidebar with the workspace name button highlighted. Rocket sidebar with the workspace name button highlighted. In the dropdown, click **Invite members**. You can also reach this screen via **Settings → Members**. Workspace dropdown menu with Invite members highlighted. Workspace dropdown menu with Invite members highlighted. Type one or more email addresses and choose a role for the invitee: **Editor** or **Viewer**. See [Roles and permissions](#roles-and-permissions) for details. Members settings panel with email input and role dropdown. Members settings panel with email input and role dropdown. Before sending, decide how much of the workspace to share. The **Grant access to all projects and tasks** checkbox is available for both **Editor** and **Viewer** invites: * **Checkbox ticked:** the invitee gets access to all projects and tasks that currently exist in the workspace. Projects or tasks created after the invitation are not included and must be shared separately. * **Checkbox unticked:** the invitee joins the workspace with an empty view. They can create new projects and tasks but cannot see any existing ones. Existing and future projects must be shared with them at the [project](/getting-started/collaboration/project) or [task](/getting-started/collaboration/task) level. Members panel with role set to Editor or Viewer, showing the Grant access to all projects and tasks checkbox and the Invite button. Members panel with role set to Editor or Viewer, showing the Grant access to all projects and tasks checkbox and the Invite button. Click **Invite** when ready. After sending the invitation, the invitee appears in the members list with a **Pending** badge. Credit limits apply only to **Editors**. Until the invitation is accepted, the credit limit shows as **0**. After the Editor accepts, they are assigned a default of **100 credits** for all time. Use the **Credit limit** dropdown on their row if you want to change this value. Owners and Viewers are not assigned a credit limit. Members list showing the pending Editor invitee with the credit limit dropdown highlighted. Members list showing the pending Editor invitee with the credit limit dropdown highlighted. Credit limits apply only to Editors, at all collaboration levels: workspace, project, and task. The allotment is for all time (not monthly). You can set or update the limit at any time from **Settings → Members**. If the default of 100 credits does not fit your needs, open the **Credit limit** dropdown on the Editor's row and choose a different value. Available options range from 0 to 10,000. Setting the limit to **0** prevents the Editor from generating any output. Credit limit dropdown open showing options from 0 to 10,000. Credit limit dropdown open showing options from 0 to 10,000. The member appears in the list as **Pending** until they accept. Once accepted, their status updates and they can access the workspace according to the role and scope you configured. Members list with an Editor member in Pending state and credit limit set. Members list with an Editor member in Pending state and credit limit set. The invitee receives an email with a link to join. You can also copy the invite link directly using the copy icon next to their name in the members list. Invitation requests can also be accepted or rejected through [notifications](/getting-started/account/notifications), in addition to email and the invitation link. When they accept or reject, you will see a confirmation in the **Requests** tab of the notification panel. Notification panel Requests tab showing a workspace invitation response. Notification panel Requests tab showing a workspace invitation response. ## Roles and permissions Rocket uses two roles across all levels. The table below shows what each role can do at the workspace level. | Permission | **Editor** | **Viewer** | | :- | :- | :- | | **View tasks and outputs** | Yes | Yes | | **Create new tasks** | Yes | No | | **Edit tasks (chat, iterate)** | Yes | No | | **Upload and manage files** | Yes | No | | **Connect and disconnect services** | Yes | No | | **Invite members** | Yes, at the workspace level only when the [invite toggle](/getting-started/workspace/manage#edit-workspace-settings) is enabled. At the project or task level, only the owner can invite. Editors who do not own the work can never invite. | No | | **Change member roles** | No | No | | **Delete projects** | Yes | No | | **Manage billing** | No | No | Day to day collaborator. Editors can create tasks, iterate on existing work, upload files, and connect services. When the [invite toggle](/getting-started/workspace/manage#edit-workspace-settings) is enabled, they can invite new members at the workspace level. Editors who do not own a project or task can never invite anyone to it. Only the project or task owner can invite collaborators. When the toggle is on, the owner can invite anyone. When the toggle is off, the owner can invite only existing workspace members. Read-only access. Viewers can see tasks and outputs they have been granted access to, but cannot create or edit anything. Ideal for stakeholders who need visibility without editing access. Roles apply at each level independently. A workspace Editor can be given Viewer access only on a specific project. ## Revoke a pending invitation If you need to cancel an invitation before the recipient accepts it, go to **Settings → Members** and find the member with the **Pending** badge. Click the role dropdown (showing **Editor** or **Viewer**) on the pending member's row. This reveals additional actions for that invitation. Members panel with the role dropdown highlighted on a pending member row. Members panel with the role dropdown highlighted on a pending member row. Select **Revoke invite** from the dropdown. The pending row is removed immediately and the invitation link in the recipient's email becomes invalid. Members panel showing the Revoke invite option highlighted in the role dropdown. Members panel showing the Revoke invite option highlighted in the role dropdown. ## Manage workspace members Go to **Settings → Members** to change a member's role, update an Editor's credit limit, or remove them from the workspace. The members panel also shows credit usage for Editors, so you can see how many credits each Editor has consumed against their limit. After an Editor accepts the invitation, they receive a default of **100 credits** for all time, which you can adjust at any time from this panel. Until they accept, the credit limit shows as **0**. Owners and Viewers are not assigned a credit limit. ## Remove a member To remove someone's access to the workspace, go to **Settings → Members**, find the member's row, and click their role dropdown. Click your workspace name in the top left, select **Settings**, then open the **Members** tab. Click the role dropdown (showing **Editor** or **Viewer**) next to the member you want to remove. Select **Remove** from the dropdown. The member loses access to the workspace immediately. Their access to any projects or tasks is also removed, including individual tasks and tasks that are part of any project. If you remove an **Editor** who created projects or tasks, the workspace owner automatically becomes the owner of those projects and tasks. ## Best practices Invite core team members to the workspace with grant access when they need broad visibility of existing projects. Add collaborators to specific projects, and share individual tasks with external reviewers. Project and task invitees still join the workspace and can create new work according to their role; they just do not automatically see other existing projects or tasks. ## What's next? Invite members to specific projects and collaborate on tasks. Share individual Solve or Build tasks by email. Manage your workspace settings, billing, and connectors. Connect external services at the workspace level. # Create an account Source: https://docs.rocket.new/getting-started/create-an-account Create your free Rocket.new account in 30 seconds with Google, SSO, or email. Start researching, building, and tracking competitors immediately. Open **[rocket.new](https://rocket.new)** and click **Sign in** in the top-right corner, or click **Start free** on the homepage. Rocket homepage with the Sign in button highlighted in the top-right corner. A popup opens with three options. Pick the one that works best for you. Sign in popup showing Continue with Google, Continue with SSO, and email field. Click **Continue with Google**. Sign in popup with the Continue with Google button highlighted. If you have one Google account, you are signed in immediately. If you have multiple accounts, choose the one you want to use. Review the permission request and click **Continue**. If you are redirected back to the sign-up page, enable third-party cookies or try an incognito window. Click **Continue with SSO**. Sign in popup with the Continue with SSO button highlighted. Enter your work email address and click **Continue with SSO**. You will be redirected to your organization's identity provider to complete authentication. SSO screen with an email input field and Continue with SSO button. SSO is available on plans that include it. Contact your workspace admin if you are unsure whether your organization has SSO enabled. Enter your email address and click **Continue**. Sign in popup with the email input field highlighted. Check your inbox for an email from Rocket with a 6-digit OTP. Paste it into the field and click **Continue**. OTP verification screen with the Enter OTP field highlighted and a Resend timer. Did not receive the email? Check your spam or promotions folder, or click **Resend**. Rocket redirects you to the home screen. Your account is active and ready to use. Rocket home screen after sign-in showing the task input and Solve, Build, and Intelligence cards. Rocket home screen after sign-in showing the task input and Solve, Build, and Intelligence cards. On your iPhone or iPad, open the **App Store**, search for **Rocket**, and install the app. The mobile app is currently available on iOS only. Open the app and pick one of the available options. Mobile sign-up screen showing Google, Apple, and email sign-up options. Tap **Continue with Google**, then select your Google account. Google option selection for mobile sign-up. Review the permission request and tap **Continue**. If sign-in fails, check your internet connection and make sure you are signed into Google on your device. Tap **Continue with Apple**, then authenticate with Face ID, Touch ID, or your passcode. Apple option selection for mobile sign-up on iOS. Review the permission request and tap **Continue**. If sign-in fails, make sure you are signed into iCloud and that Face ID or Touch ID is enabled on your device. Enter your email address and tap **Continue**. Mobile email sign-up screen with input field and Continue button. Check your inbox for a 6-digit OTP from Rocket. Paste it into the field and tap **Continue**. Mobile OTP verification screen with input field and Continue button. Did not receive the email? Check your spam or promotions folder, or tap **Resend**. Rocket takes you to the home screen. Your account is active and ready to use. Rocket mobile app home screen after sign-up. ## What's next? Get your first result in under five minutes with a guided walkthrough. Start from a production-ready template instead of a blank canvas. # Understanding Credits Source: https://docs.rocket.new/getting-started/credits Learn how Rocket.new credits work as a single balance shared across Solve research, Build app generation, and Intelligence monitoring tasks. Credits are the usage currency in Rocket. One balance covers everything you do in Rocket: Solve research, Build generation, and Intelligence monitoring. There is no separate billing for compute, storage, or hosting. ## Credit types Rocket has two types of credits: ### Subscription credits * Included in your monthly plan * Roll over month-to-month while your plan is active * Available on all paid plans ### Credit add-ons * One-time packs you purchase separately * Do not expire while your subscription is active * Useful for high-load months or unexpected scope increases * Available to paid users only. Buy from **Settings > Subscription** at any time ## What consumes credits? Credits are consumed any time Rocket does work on your behalf. This includes: * **Chatting inside a task:** Every message you send in a Build or Solve task, from a basic follow-up question to generating a full screen. * **Building:** Creating a new app and iterating on it through chat, whether from a prompt, a Figma design, a GitHub repo, or a template. * **Solve research:** Strategic research tasks, PRDs, market analysis, and competitive reports. * **Competitive intelligence:** Competitor monitoring setup, signal tracking, and brief generation. | Action | Credit usage | | :- | :- | | Chat message with a small tweak | Low | | Create a landing page | Low | | Build a mobile app with features and testimonials | Moderate | | Design a CRM dashboard with filters, analytics, and roles | High | | Run a competitive analysis via Solve | High | Competitive intelligence is available on Rocket and Booster plans at no additional credit cost. Using **Fix it** for Rocket-detected errors in chat is free for paid users and does not consume credits. ## Rollover policy * **Monthly plans:** Unused credits roll over to the next month as long as your plan remains active. * **Yearly plans:** Unused credits roll over month-to-month within your 12-month term as long as your plan remains active. At renewal, remaining credits expire and a fresh balance starts. Credits expire if you cancel your plan. ## When to add credits vs. upgrade | Scenario | Best option | | :- | :- | | Short-term usage spike | Add credits | | Hitting your limit every month | Upgrade | | Better cost per credit | Upgrade | | Midway through a big project | Add credits | | Adding credits 2+ times monthly | Upgrade | If you find yourself adding credits regularly, upgrading to the next plan offers better value. ## Upgrading mid-cycle When you upgrade, Rocket prorates the charge and adjusts your credit balance instantly. **Example:** Upgrading from a base plan to a higher tier on day 15 of a 30-day cycle: | | Amount | | :- | :- | | Credit for unused base plan days | USD 12.50 | | New plan charge for remaining days | USD 25.00 | | **You pay** | **USD 12.50** | Your credits also adjust immediately. If you had used 30 of your base credits, you receive the full new plan allowance minus what you already used. Ready to upgrade? **Upgrade your plan from the subscription modal.** ## Downgrading Downgrades take effect at your next billing cycle. You keep your current plan and credit balance until then. ## What happens when you run out? If your credit balance hits zero, Rocket pauses generation. Wait for your next billing cycle or add credits to continue. Your work remains safe. You keep access to all projects and assets. ## Cancellation If you cancel your plan, all unused subscription and purchased credits expire at the end of the current billing cycle. Use them before cancellation takes effect. You still have access to your projects and can generate outputs until your credits run out. Need to cancel? **Learn how to cancel your subscription.** ## Frequently asked questions Credit add-ons do not expire while your subscription is active. If you cancel your plan, all unused credits including add-ons expire at the end of your current billing cycle. Subscription credits are included in your monthly plan and roll over automatically. Credit add-ons are one-time packs you purchase separately. Both draw from the same balance and are consumed in the same way. Unused subscription credits roll over and do not reset. Your balance accumulates until you use them. On yearly plans, credits roll over month-to-month within the year, then reset at renewal. ## What's next? Compare plans and find the right fit for your usage. Buy a plan, add credits, or update payment methods. Migrating from the old token system? See what changed and how your balance was converted. # Introduction Source: https://docs.rocket.new/getting-started/introduction Introduction to Rocket.new, the vibe solutioning platform that combines Solve research, Build for web and mobile apps, and Intelligence monitoring. Rocket.new is a vibe solutioning platform that combines strategic research, AI app building, and competitive intelligence into a single product. Validate your idea, build the product, and track your competitors without switching tools.
Solve, Build, and Intelligence. Rocket.new overview.
## Three pillars, one platform Validate ideas, run market research, create PRDs, and get structured reports with data, insights, and recommendations. Build production-ready web apps, mobile apps, SaaS products, e-commerce stores, and landing pages from natural language. Monitor competitors continuously. Get automated daily briefs, pricing change alerts, and trend signals. | Pillar | What it produces | | :- | :- | | **Solve** | Structured reports with data, insights, and actionable recommendations | | **Build** | Production-ready Next.js web apps and Flutter mobile apps | | **Intelligence** | Continuous signals delivered to a live dashboard in your sidebar | Each pillar works independently. Use one, two, or all three depending on what you need. ## What you can build SaaS dashboards, internal tools, marketplaces, AI-powered tools, customer portals. iOS and Android apps built with Flutter, ready for App Store and Google Play submission. Marketing sites, portfolio pages, and product launch pages with custom domains. Full online stores with product listings, cart, checkout, and payment integrations. ## How capabilities connect The three pillars share context and feed into each other. Run a Solve task to validate your idea and understand the market. Use those insights to scope your Build task with full context already in place. Intelligence surfaces a competitor change: a pricing shift, a new feature, a hiring spike. Use that signal to start a Solve analysis or update your product in Build. While building, you realize you need data on user preferences or market sizing. Create a Solve task, get structured findings, and apply them directly. ## How Rocket is organized A task is a single unit of work: one Solve report, one Build session, or one Intelligence setup. Tasks can live inside a project or stand alone. A project groups related Solve and Build tasks together with shared context, uploaded files, and connected services. A workspace-level dashboard in your sidebar where all competitor monitoring signals live. Set up once, runs automatically. ## Available on web and mobile Full-featured at rocket.new. Includes visual editing, code view, all connectors, and one-click deployment. iOS and Android. Manage tasks, review Solve reports, and make quick edits from anywhere. ## Frequently asked questions No. Describe what you want in plain language and Rocket generates production-ready Next.js web apps or Flutter mobile apps. You do not need to write code or use a terminal. Most AI app builders focus on code generation alone. Rocket adds strategic research (Solve) that validates your idea before you build, and competitive intelligence (Intelligence) that monitors your market after you launch. All three pillars share context in one platform. Yes. Solve, Build, and Intelligence each work independently. Run market research without building anything, build an app without prior research, or track competitors on their own. The pillars connect when you want them to, not by default. Solve produces structured reports you can export as PDF, HTML, or PowerPoint. Build produces deployable web and mobile apps with real code you can download or connect to GitHub. Intelligence produces a live dashboard with daily briefs and signals. ## Get started Sign up in about 30 seconds with Google, Apple, or email. No credit card required. Get your first result in under five minutes with a guided walkthrough. # Pricing Source: https://docs.rocket.new/getting-started/pricing Rocket.new pricing plans, from free to full-stack AI with research and competitive intelligence. One credit balance covers everything. Rocket.new runs on a credit-based system. Paid plans include a monthly credit allocation that powers Build, Solve, and Intelligence. The Free plan includes a one-time credit grant to get started. [Learn how credits work](/getting-started/credits). Save with annual billing. Choose yearly on the pricing page for **20% off**. ## Compare plans | Plan | Price | Credits | What's included | | :- | :- | :- | :- | | **Free** | USD 0 | 20 (one-time) | Build production-ready apps + Light Solve (fast conversational Solve) | | **Pro** | USD 25/mo | 100/month | Build production-ready websites, landing pages, web apps, mobile apps + Light Solve | | **Rocket** | USD 50/mo | 250/month | Build + Consultant-grade solutions on demand (Light Solve or Full Solve, auto-routed) + Competitive intelligence | | **Booster** | USD 250/mo | 1,500/month | Build + Consultant-grade solutions on demand (Light Solve or Full Solve, auto-routed) + Competitive intelligence | All paid plans include unlimited team members. Add credits on top of your subscription as needed. ## Which plan is right for you? If you subscribed before the current plans launched, your existing plan (Build, Solve + Build, Solve + Build + Intelligence, Intelligence, or Build + Intelligence) stays the same and nothing changes unless you choose to upgrade manually. Your credits, billing cycle, and features continue as normal. | Your situation | Recommended plan | | :- | :- | | Just testing Rocket | **Free** | | Building personal projects or side projects | **Pro** (USD 25/mo) | | Frequent use by individuals and teams who need research and competitive intelligence | **Rocket** (USD 50/mo) | | Power users and fast-moving teams with high-volume usage who need premium support | **Booster** (USD 250/mo) | | Adding credits frequently | Upgrade to the next tier | ## Plan details ### Free **What you get:** * 20 free credits (one-time) * Build production-ready websites, landing pages, web apps, mobile apps * Light Solve for fast, conversational research ### Pro (USD 25/month) Build production-ready websites, landing pages, web apps, mobile apps, plus Light Solve research. **What you get:** * 100 free credits/month * Build production-ready websites, landing pages, web apps, mobile apps * Light Solve for fast, conversational research (Full Solve is not included) * Add credits on top of your subscription ### Rocket (USD 50/month) Total Rocket suite for frequent use by individuals and teams. **What you get:** * 250 free credits/month * Build production-ready websites, landing pages, web apps, mobile apps * Consultant-grade solutions on demand (queries auto-routed to Light Solve or Full Solve) * Competitive intelligence * Add credits on top of your subscription ### Booster (USD 250/month) Total Rocket suite for power users and fast-moving teams. **What you get:** * 1,500 free credits/month * Build production-ready websites, landing pages, web apps, mobile apps * Consultant-grade solutions on demand (queries auto-routed to Light Solve or Full Solve) * Competitive intelligence * Add credits on top of your subscription Need SSO, data localization, premium support, or onboarding assistance? Contact Sales. ## Frequently asked questions Yes. The Free plan gives you 20 credits with no time limit. You can use those credits for Build and Light Solve. Pro also includes Light Solve. Full Solve is available on Rocket and Booster via automatic routing. No credit card is required to start on Free. Yes, anytime from **Settings > Subscription**. Upgrades take effect immediately with prorated billing. Downgrades take effect at your next billing cycle. No. All plans have a flat monthly platform fee with unlimited team members. Your projects remain accessible. You can generate outputs until your credits run out. All unused credits expire at the end of the billing cycle when you cancel. Annual billing is available for all paid plans and gives you 20% off. You pay upfront for 12 months at the discounted rate. Credits are still allocated monthly on the same schedule. ## Need more credits? **Add Credits** Add extra credits on top of your active subscription **Upgrade** Get more credits Not sure which option to choose? See the [add credits vs. upgrade guide](/getting-started/credits#when-to-add-credits-vs-upgrade). Ready to get started? **See how to buy your plan.** Coming from the old token system? **See how your balance was converted.** # Connected services Source: https://docs.rocket.new/getting-started/project/context/connected-services Connect Notion pages and Google Drive files to a Rocket.new project so tasks pull the latest documents and context automatically. Connected services bring live external content into your project. Link Notion pages or Google Drive files and Rocket can read their content to inform every Solve and Build task without you copying, pasting, or re-uploading anything. Connected services are different from [Build connectors](/build/connectors/overview). Build connectors add functionality to your apps (payments, databases, email). Connected services provide **context**: they give Rocket access to external documents and data to inform your work. ## Supported services Google Docs and Google Sheets. Notion pages (`.md`) including product specs, meeting notes, and wikis. ## Connect a service Click **Projects** in the sidebar, then click your project. Sidebar with Projects highlighted and a project card visible. Sidebar with Projects highlighted and a project card visible. Click the **Context** tab on the right panel. You'll see connectors for My Device, Google Drive, and Notion. Project page showing the Context tab with My Device, Google Drive, and Notion connectors. Project page showing the Context tab with My Device, Google Drive, and Notion connectors. Click the service you want to connect. A modal appears. Paste the URL of the file or page, then click **Submit**. Context panel with Google Drive highlighted. Context panel with Google Drive highlighted. Import from Google Drive modal with a URL input field. Import from Google Drive modal with a URL input field. Context panel with Notion highlighted. Context panel with Notion highlighted. Import from Notion modal with a URL input field. Import from Notion modal with a URL input field. The connected item appears in the **Files** section of the Context tab and is immediately available to all tasks in the project. Connected services provide read-only access. Rocket reads your content but never writes back to or modifies your external documents. ## How connected context helps Once connected, Rocket uses that content automatically when it's relevant. * A Notion product spec means your Build task produces an app that matches the brief from the first generation. * A Notion brand doc means Solve and Build tasks reflect your actual positioning without you re-describing it. * A Google Drive file with pricing data means a Solve task can analyze real numbers rather than placeholders. ## Manage connections To remove a connected source, open the **Context** tab in your project. * **Remove:** hover over the item in the Files section and click the **X** button that appears. * **Add more:** click the service connector again and paste a new URL. Removing a connected source removes its content from the project context. Existing task outputs are not affected, but future tasks won't have access to that content. ## What's next? Upload files directly to your project for additional context. See how connected services fit into the broader context flow. Add functional integrations like Stripe, Supabase, and analytics to Build tasks. # File uploads Source: https://docs.rocket.new/getting-started/project/context/file-uploads Upload PDFs, images, and documents to a Rocket.new project once, then reference the shared files from any Solve or Build task inside it. Upload your reference files to a project once and they become persistent context for every task inside it. Company overview, financial model, brand guidelines, research data. Whatever your work depends on, it is available from the first message in every task. **Project files vs task files:** Files uploaded directly inside a task are scoped to that conversation only. Files uploaded at the project level are persistent and available to every task in the project automatically, without being re-uploaded or re-explained. ## What to upload Upload anything that provides lasting context for your work on this initiative. The best project files are things you'd otherwise paste or re-explain in every task. | File type | Examples | | :- | :- | | Company context | Company deck, one-pager, mission/strategy doc | | Financial data | P\&L, financial model, cap table (`.xlsx`, `.csv`) | | Research | Market reports, competitor teardowns, user interviews (`.pdf`) | | Brand assets | Brand guidelines, logo usage, design system | | Product specs | PRD, feature specs, user stories (`.pdf`, `.md`) | | Reference data | Pricing data, industry benchmarks, customer data exports | You don't need to upload everything upfront. Start with the files you'd reach for most often, and add more as the project evolves. ## Upload files to a project Click **Projects** in the sidebar, then click your project. Sidebar with Projects highlighted and a project card visible. Sidebar with Projects highlighted and a project card visible. Inside your project, click the **Context** tab on the right panel. You'll see connectors for My Device, Google Drive, and Notion. Project page showing the Context tab with My Device, Google Drive, and Notion options. Project page showing the Context tab with My Device, Google Drive, and Notion options. Click **My Device** to open a file picker. Select the files you want to upload. You can select multiple at once. Context panel with My Device highlighted. Context panel with My Device highlighted. Uploaded files appear in the **Files** section of the Context tab. They are immediately available to every task in the project. Context panel showing an uploaded PDF in the Files section. Context panel showing an uploaded PDF in the Files section. **Success check:** Uploaded files appear in the Files section of the Context tab and can be referenced from any task in the project. ## Supported file types Rocket natively understands five file formats. Each format is parsed for its structure, relationships, and meaning, not treated as a plain text dump. | File type | What Rocket understands | | :- | :- | | **Markdown** (`.md`) | Headings, sections, code blocks, tables, and links | | **PDF** (`.pdf`) | Full text extraction, document structure, headings, tables, images, and page layout | | **Excel** (`.xlsx`) | Multi-sheet workbooks, formulas, cross-sheet dependencies, charts, merged cells, and comments | | **CSV** (`.csv`) | Column structure, data types, and row relationships | | **Images** (`.jpg`, `.jpeg`, `.png`) | Visual content, embedded text, diagrams, and UI layouts | Google Drive files (Google Docs, Google Sheets) and Notion pages can be connected as live sources via [connected services](/getting-started/project/context/connected-services). ## File limits Projects support up to **5 context sources** at a time. This limit counts across all source types: uploaded files, Google Drive links, and Notion pages combined. If you need to add a new source, remove an existing one first. ## How tasks use shared files Every task in the project can draw on the shared files automatically. You do not need to re-upload or re-reference them. For the most precise results, mention the file by name in your prompt: "Using the brand guidelines PDF, build a landing page that matches our visual identity." ## Organize files As your project grows, keeping files organized helps both you and Rocket find what's needed. Name files clearly: `brand-guidelines-v2.pdf` is better than `document.pdf`. Descriptive names help Rocket match files to task context and make it easier for collaborators to find what they need. If a file has been superseded, remove the old version to avoid confusion. Rocket may reference outdated files if they're still present in the project. Add foundational files such as brand guides, product specs, and research data when you first create the project. This ensures every task from the start has access to the right context. Upload files that are relevant to the project's scope. A project about "Q3 Product Launch" only needs the product brief and brand assets, not the full employee handbook. ## Delete shared files To remove a file from a project: Open the **Context** tab in the project's right panel. Hover over the file you want to remove. Click the **X** button that appears on the file. Deleting a shared file removes it from the project permanently. Tasks that previously referenced the file won't lose their existing outputs, but future tasks won't have access to that file's content. ## What's next? Link Notion and Google Drive for live external context. See how files and task outputs create shared context across your project. Start a new project and upload your first files. Use uploaded files as a starting point for a Build task. # Overview Source: https://docs.rocket.new/getting-started/project/context/overview Understand how project context in Rocket.new shares files, connected services, and prior findings between Solve research and Build tasks. Context is the information Rocket has access to when working on a task. Inside a project, that context is shared. Every task can draw on the same files, connected documents, and outputs from earlier tasks without re-uploading or re-explaining anything. The more relevant work you do inside a project, the richer the shared foundation becomes. Context is scoped to a project. Tasks in different projects do not share context with each other. ## What counts as context | Context type | What it includes | | :- | :- | | **My Device** | `.md`, `.pdf`, `.xlsx`, `.csv`, `.jpg`, `.jpeg`, `.png` | | **Google Drive** | Google Docs, Google Sheets | | **Notion** | Notion pages (`.md`) | | **Task outputs** | Findings, decisions, and outputs from earlier Solve and Build tasks | | **Chat history** | Clarifications and refinements from any task's conversation | ## How context flows between tasks Once you have multiple tasks in a project, their outputs become context for each other. A few common patterns: | | What happens | | :- | :- | | **Solve then Build** | Research findings shape what gets built, including features, positioning, and design | | **Build then Solve** | Development reveals new questions that trigger deeper research | | **Solve then Solve** | Later research builds on earlier findings without duplicating work | | **Build then Build** | Branding and technical decisions carry forward into new tasks | You run a Solve task to analyze competitors in your space. The report identifies the three features users expect most. You then create a Build task in the same project. Rocket references the competitive findings automatically, so the first generation already prioritizes those features. You're building an e-commerce app and realize you need a pricing strategy. You create a Solve task in the same project. Rocket already knows the product category and target audience from the Build task, so the pricing analysis is specific to your product rather than generic advice. You build an MVP web app as your first Build task. Later, you create a Build task for a companion landing page. Rocket carries forward the branding, messaging, and product details, so the landing page is consistent with the app from the start. ## Standalone tasks vs project tasks You don't need a project to use Rocket. Standalone tasks work fine for one-off questions and quick builds. The difference is context. | | Standalone task | Task in a project | | :- | :- | :- | | Works on its own | Yes | Yes | | Accesses shared files | No | Yes | | Benefits from other tasks' outputs | No | Yes | | Uses connected services | No | Yes | If you start with a standalone task and later want shared context, you can add it to a project at any time without losing any history. ## Tips * **Upload files early.** Add brand guidelines, product specs, or reference docs when you create the project so every task starts with the right foundation. * **Be specific in prompts.** Even with shared context available, explicit references get better results: "Based on the competitive analysis from earlier, build a landing page that emphasizes our differentiators." * **Keep related work together.** The more relevant tasks you group in one project, the richer the shared context becomes. ## What's next? Add documents and data that all tasks in your project can reference. Bring in live content from Notion and Google Drive. # Manage Source: https://docs.rocket.new/getting-started/project/manage Create a new Rocket.new project, rename it, star it for quick access from the workspace sidebar, and delete projects you no longer need. ## Create a project Click **Projects** in the sidebar. Sidebar with Projects highlighted and the Create new project card visible. Sidebar with Projects highlighted and the Create new project card visible. Click the **Create new project** card. A dialog opens with a name and description field. Create project dialog with Name and Description fields. Create project dialog with Name and Description fields. Enter a name and an optional description, then click **Create**. Your project appears in the Projects list. Projects page showing the newly created project card alongside the Create new project card. Projects page showing the newly created project card alongside the Create new project card. Use the **Search** bar at the top of the Projects page to quickly find a project by name. ## Edit a project On the **Projects** page, hover over a project card and click the **...** menu, then select **Edit**. Project card with the three-dot menu open showing Edit, Star, and Delete options. Project card with the three-dot menu open showing Edit, Star, and Delete options. The edit dialog opens with the current name and description. Edit project dialog with Name and Description fields showing current values. Edit project dialog with Name and Description fields showing current values. Make your changes and click **Save changes**. Edit project dialog with updated name and description, Save changes button highlighted. Edit project dialog with updated name and description, Save changes button highlighted. ## Star a project Star a project to pin it to the top of your list for quick access. Hover over a project card and click the **...** menu. Click **Star** to pin the project to the top of your list. To unstar, open the same menu and select **Star** again. You can also filter your project list to show only starred projects using the filter at the top of the Projects page. ## Delete a project Deleting a project is permanent. All tasks, context, documents, deployments, and preview links inside the project are deleted and cannot be recovered. On the **Projects** page, click the **...** menu on the project card and select **Delete**. Project card three-dot menu with Delete highlighted. Project card three-dot menu with Delete highlighted. Review what will be deleted and click **Delete** to confirm. Delete project confirmation dialog listing all tasks, context, documents, deployments, and preview links that will be permanently deleted. Delete project confirmation dialog listing all tasks, context, documents, deployments, and preview links that will be permanently deleted. ## What's next? Learn how projects organize your Solve and Build tasks. Upload files and connect services for shared context. # Overview Source: https://docs.rocket.new/getting-started/project/overview A Rocket.new project groups related tasks together and shares files, integrations, and collaborators so every task starts with the same context. A project is a space in Rocket where all related work lives together. Every Solve task and Build task you create inside a project automatically shares the same files, connected services, and team members. It acts as a knowledge container for an initiative, whether that is launching a product, redesigning a website, or exploring a market. The practical benefit is that you front-load your context once. Upload your company overview, financial model, or strategy deck when you create the project, and every task inside it has that foundation from the start. No re-uploading, no re-explaining. **Intelligence is separate from projects.** Monitoring and the Intelligence dashboard live outside of projects entirely. They operate at the platform level, not scoped to any single project. You can still use Intelligence insights to inform what you Solve or Build. They are managed from the Intelligence panel. ## What's inside a project Solve and Build tasks that represent the actual work. A project can hold any number of tasks, and each task has its own chat history, outputs, and conversation. Files from your device, connected documents, and Notion pages that inform your tasks. See [Context](/getting-started/project/context/overview). Team members who can view or edit the project and its tasks. Two task types available inside a project. Solve for strategic research, Build for app creation. ## When to use a project | Scenario | Use a project | Use a standalone task | | :- | :- | :- | | Building a product with research and an app | Yes, group the Solve and Build tasks together | | | Quick one-off question about a market | | Yes, create a Solve task directly | | Team working on a website redesign | Yes, shared context and collaboration | | | Testing a single app idea solo | Either works; a project adds organization | Either works; standalone is faster to start | | Ongoing monitoring of a competitor | | No project needed. Intelligence is managed at the workspace level | You can always add a standalone task to a project later. There's no penalty for starting simple. ## The project lifecycle Start a new project from the home screen. Give it a name that describes the initiative. Create Solve and Build tasks inside the project. Each task gets its own conversation, but they all share the project's files and connected services. Invite team members to the project. Everyone works in the same shared space with access to all tasks, files, and context. Keep adding tasks, uploading files, and refining outputs. Context flows between tasks within the project, so later work benefits from earlier research. **Create, rename, star, and delete projects.** Step-by-step instructions. ## How context flows Grouping tasks in a project means shared context. Files uploaded to the project are available to every task automatically. No re-uploading or re-referencing required. When you run a Solve task to research a market and then start a Build task in the same project, Rocket can use the research findings to inform the build if you use [cross-task context](/getting-started/task/task-context). Connected services provide live data across the board. This works in both directions. A Build task's outputs can prompt new Solve questions, and Solve findings can shape what you build next. Context flow is automatic within a project. You do not need to manually copy information between tasks. Rocket surfaces relevant context when it is useful. ## Frequently asked questions Yes. There's no limit on the number of projects you can create. Most teams organize by initiative: one project per product, campaign, or research task. No. Intelligence is a workspace-level dashboard entirely separate from projects. You run the Intelligence setup wizard once for your workspace, and the Intelligence panel in your sidebar manages all monitoring from that point. Currently, Solve or Build can not refer to Insights from Intelligence. Yes. You can add any standalone Solve or Build task to a project from the task's **...** menu. A task can only belong to one project at a time. There's no hard limit on the number of tasks in a project. However, each task consumes credits based on your plan, so your total active work is governed by your subscription. See [Credits](/getting-started/credits) for details. ## What's next? Learn how files, connected services, and task outputs create shared context. Understand how Solve, Build, and Intelligence tasks work. # Quick start Source: https://docs.rocket.new/getting-started/quick-start Sign up for Rocket.new and complete your first Solve, Build, or Intelligence task in under five minutes using the quick start walkthrough. Rocket.new has three product pillars. Pick the one you want to try first and each walkthrough takes under five minutes. Don't have an account yet? [Create one at rocket.new](https://rocket.new). It takes about 30 seconds. Turn a business question into a structured research report. Ask about market sizing, competitive landscapes, pricing strategy, or any strategic topic. Light Solve returns a fast conversational answer; Full Solve decomposes deeper prompts into parallel research streams and typically takes about 45 minutes. Go from an idea to a live web or mobile app. Describe what you want, watch Rocket generate it in real time, iterate with chat or visual editing, then launch with one click. Next.js for web, Flutter for mobile. Set up continuous competitor monitoring. A setup wizard collects your business context, competitor URLs, and notification preferences. Intelligence then delivers daily, weekly, or monthly briefs automatically. ## Explore further Market analysis, competitive teardowns, pricing strategy, and more. Web apps, mobile apps, redesigns, and deployment. Monitors, signals, and your competitive dashboard. # Attachments Source: https://docs.rocket.new/getting-started/task/attachments Attach files or paste reference URLs inside a Rocket.new task to give the AI extra context that only applies to that specific conversation. Attachments let you bring your own data into a task. Attach a file or paste a URL alongside your message and Rocket reads, parses, and uses it in the response. This works in both **Solve** and **Build** tasks. Use it when the context is specific to one conversation rather than shared across the whole project. For context that should persist across every task in a project, use [project file uploads](/getting-started/project/context/file-uploads) instead. Task attachments are scoped to the current conversation only. ## Attach a file Navigate to an existing task or start a new one. Click the **+** icon **(1)** next to the message input and choose **Add files & photos** **(2)**. Select up to **5 files** from your device. Each file must be under 5 MB. Task input bar with the + button highlighted and Add files & photos option shown. Task input bar with the + button highlighted and Add files & photos option shown. Write your question or instruction alongside the attachment. Being specific gets better results. "Using the attached financial model, estimate our runway under three growth scenarios" works better than attaching without context. To start a new Build task from an attachment, see [Build from an attachment](/build/create/from-an-attachment). ## Import from a URL Paste a URL directly into the message box. Rocket fetches and parses the page content automatically. | Source | Requirement | | :- | :- | | Public web pages | None | | Notion pages | [Connect Notion](/getting-started/project/context/connected-services) first | | Google Drive files | [Connect Google Drive](/getting-started/project/context/connected-services) first | Private URLs only work if you have already connected that service. If the service is not connected, Rocket cannot access the content. ## Supported file types | File type | What Rocket understands | | :- | :- | | Markdown (`.md`) | Headings, sections, code blocks, and tables | | PDF (`.pdf`) | Full text, structure, tables, and embedded images | | Excel (`.xlsx`) | Multi-sheet workbooks, formulas, and cross-sheet dependencies | | CSV (`.csv`) | Column structure, data types, and row relationships | | Images (`.jpg`, `.jpeg`, `.png`) | Visual content, embedded text, diagrams, and UI layouts | ## How Rocket uses attachments Rocket extracts text, structure, and data from the attached file or URL and uses it as source material for the response. For Full Solve tasks, attachments also reduce how often prompt intelligence needs to ask questions. If your attached pitch deck already identifies your industry, Rocket won't ask. Light Solve does not use prompt intelligence; it may ask conversational follow-ups in chat instead. If a file cannot be fully read, Rocket works with what it can extract and continues with the task. ## What's next? Upload files once at the project level so every task has access automatically. Connect Notion and Google Drive to use their URLs in tasks. Reference a previous task to carry its findings into the current one. Learn how attachments help Rocket skip redundant questions. # Launchpad Source: https://docs.rocket.new/getting-started/task/launchpad Connect Notion, Linear, Supabase, Google, Airtable, Mixpanel, or Directus so Rocket uses them as the foundation for better builds and smarter research. Launchpad lets you point Rocket at your existing docs, tickets, schemas, or data so it builds apps and produces research grounded in real material instead of a blank prompt. Every rocket needs a launchpad to launch properly. Without one, it launches from thin air. No structure, no direction. With a launchpad, there is **solid ground**. The launch is more powerful, more precise, more directed. **Your existing work is the launchpad.** The Notion doc. The Linear ticket. The Google Sheet. The Supabase schema. The Airtable base. The Mixpanel project. The Directus collection. Rocket reads it, extracts intent, and launches from that foundation. *** ## Supported sources PRDs, product notes, specs, feature lists, strategy docs, meeting notes. Google Docs (requirements, briefs, RFCs, design docs) and Google Sheets (structured data, metrics trackers, planning sheets). Issues, projects, epics, feature requests, acceptance criteria, status history. Bases, tables, records, CRM data, operational records. Existing schema, tables, field structure, live data for analysis. Event data, funnels, cohorts, retention metrics, user behavior analytics. Collections, fields, content models, relational data, headless CMS content. This is the initial supported set. More connectors will be added in future releases. *** ## How it works You can reference a source in two ways: * **Paste a URL** to a Notion page, Linear issue, Supabase project, Google Doc, Google Sheet, Airtable base, Mixpanel project, or Directus instance. Rocket detects the reference automatically. * **Type `@`** at the start of your prompt, select **Connectors**, then choose from the available connectors: * **First message:** Notion, Google, Linear, Airtable, Supabase, Mixpanel, or Directus * **Follow-up messages:** Notion, Google, or Linear If the connector is not yet linked to your workspace, Rocket prompts you to connect it. If already connected, Rocket reads the source immediately. Rocket pulls context from the source. For Build tasks, it extracts features, workflows, data shape, and scope. For Solve tasks, it identifies entities, metrics, timelines, and relationships. Build tasks produce apps grounded in your specs. Solve tasks produce research grounded in your data. Follow-up questions are sharper because Rocket already understands what you have. *** ## Build vs Solve Launchpad works in two flows. The source material is the same, but Rocket uses it differently depending on what you ask for. | Flow | What Rocket does with your source | | :- | :- | | **Build** | Reads the source to understand what app to create. Extracts features, screens, workflows, and data models, then generates a complete app that matches your source material. | | **Solve** | Reads the source to ground research in real material. Cites exact records, references actual docs, pulls real numbers, and produces deliverables anchored in your data. | *** ## Build examples **Sources:** Notion, Airtable, Google Rocket reads the event plan from Notion, the speaker database from Airtable, and the sponsorship tracker from Google Sheets. The generated app includes a conference schedule, speaker directory, and sponsorship pipeline. ```plaintext wrap theme={null} Build an event management dashboard for TechConf 2026. Use my event plan at [NOTION_URL], speaker database at [AIRTABLE_URL], and sponsorship tracker at [SHEETS_URL]. ``` **Sources:** Notion (launchpad), Supabase (launchpad + app connector) Rocket reads product requirements from a Notion PRD and the existing schema from Supabase. The generated app includes submissions, voting, admin moderation, and uses Supabase for live auth and storage. ```plaintext wrap theme={null} Build a customer feedback portal from this Notion PRD: [NOTION_URL]. Use my existing Supabase project for auth and storage. ``` **Source:** Linear Rocket reads the full Linear project including issues, statuses, and acceptance criteria. The generated app shows completed work by epic, in-progress items with progress bars, and blockers. ```plaintext wrap theme={null} Generate a sprint review page for stakeholders from this Linear project: [LINEAR_URL]. Show completed work by epic, in-progress items with progress bars, and blockers. ``` **Sources:** Airtable, Google Rocket reads two Airtable tables (Clients and Projects) and a Google Sheets billing log. The generated app includes client filters, active projects, team assignments, and a monthly summary chart. ```plaintext wrap theme={null} Build a client reporting dashboard from my Airtable base at [AIRTABLE_URL] and billing data at [SHEETS_URL]. Show per-client status, active projects, and monthly billing summaries. ``` **Source:** Mixpanel Rocket reads your Mixpanel project including events, funnels, and cohorts. The generated app includes a real-time event feed, conversion funnel visualization, and retention curves segmented by user properties. ```plaintext wrap theme={null} Build a product analytics dashboard from my Mixpanel project at [MIXPANEL_URL]. Show key funnels, retention by cohort, and a breakdown of top events over the last 30 days. ``` **Source:** Directus Rocket reads your Directus collections, fields, and relational structure. The generated app includes a content editor, media library browser, and a publishing workflow with draft/review/published states. ```plaintext wrap theme={null} Build a content management portal from my Directus instance at [DIRECTUS_URL]. Include a content editor, media browser, and a publishing workflow based on my existing collections. ``` *** ## Solve examples **Source:** Supabase Rocket reads your audit\_events table, identifies workspaces with declining activity, flags accounts that stopped using key features, and produces a prioritized risk report with retention recommendations. ```plaintext wrap theme={null} Analyze at-risk workspaces from my Supabase audit_events table. Flag accounts with declining usage over the last 90 days and recommend retention actions. ``` **Source:** Linear Rocket traces each issue through its status history, identifies blockers, and produces a structured memo with what shipped, what slipped, and recommended next actions. ```plaintext wrap theme={null} Summarize delivery progress for this Linear epic: [LINEAR_URL]. Include what shipped, what is blocked, and recommended next steps for the team. ``` **Sources:** Google, Notion Rocket reads competitor feature matrices from Sheets and positioning notes from Notion, then produces a one-pager with win themes, objection handlers, and comparison tables. ```plaintext wrap theme={null} Create a competitive battlecard using my competitor dossier at [SHEETS_URL] and positioning doc at [NOTION_URL]. Include win themes, objection handlers, and a feature comparison. ``` **Sources:** Airtable, Google Rocket reads CRM records from Airtable and billing data from Google Sheets, segments accounts by health score, and produces a rollup with per-account recommendations. ```plaintext wrap theme={null} Produce an account health report from my Airtable CRM at [AIRTABLE_URL] and billing tracker at [SHEETS_URL]. Segment by health score and flag at-risk accounts. ``` **Source:** Mixpanel Rocket reads event data and funnel metrics from Mixpanel, identifies underperforming features, and produces a report with adoption rates, drop-off points, and recommendations for improving engagement. ```plaintext wrap theme={null} Analyze feature adoption from my Mixpanel project at [MIXPANEL_URL]. Identify features with low adoption, highlight drop-off points in key funnels, and recommend improvements. ``` **Source:** Directus Rocket reads all collections and content items from Directus, identifies stale or incomplete entries, and produces a structured audit with recommendations for updates, archival, and missing content gaps. ```plaintext wrap theme={null} Run a content audit on my Directus instance at [DIRECTUS_URL]. Flag stale items older than 6 months, identify incomplete entries, and recommend content gaps to fill. ``` *** ## Solve deliverable formats When Launchpad is used with a Solve task, Rocket can produce: * **Memos and briefs** - narrative write-ups that summarize findings and cite exact docs, issues, or rows. * **PDFs and one-pagers** - shareable summaries for leadership or partners, with claims tied to real source material. * **Battlecards** - competitive or account-level cards built from Sheets, Notion pages, and Airtable records. * **Playbooks and SOPs** - step-by-step guides assembled from decision logs, process docs, and operational records. * **Dashboards and rollups** - structured views over Supabase, Sheets, or Airtable that aggregate real metrics. * **Research reports** - longer analyses that cross-reference PRDs, issues, docs, and data to answer strategic questions. Source context is what makes every deliverable defensible. Launchpad gives Rocket something real to cite. *** ## Launchpad vs app connectors Launchpad and app connectors serve different purposes. Both can appear in the same prompt. | Intent | What it means | Example | | :- | :- | :- | | **Launchpad** | Rocket *reads from* a connector to understand context | "Use this Notion PRD as the requirements." | | **App connector** | A connector becomes *part of the generated app's functionality* | "Add Stripe payments to the app." | The same connector can play both roles. For example, Supabase can be your launchpad (Rocket reads the existing schema) and an app connector (the generated app uses Supabase for auth and database) in the same prompt. Launchpad does not automatically embed the connector into the generated app. It uses the source to understand your intent. If you also want the connector as a live feature in the app, say so explicitly. *** ## Tips for better results * **Point to the most precise source you have.** A structured PRD produces a better launch than a brainstorm with loose notes. * **Be explicit about connector roles.** If you want Supabase as your launchpad *and* as a live backend, say both: *"Read my existing schema from Supabase and use Supabase for auth and storage in the app."* * **Mix Launchpad with app connectors.** Reference a Notion PRD (launchpad) and ask for Stripe payments (app connector) in the same prompt. * **For Solve, ask a specific question.** The sharper your research question, the more precisely Rocket can use your source material. * **Make sure the source is accessible.** Connect the relevant connector to your workspace before starting, or Rocket will prompt you during the flow. *** ## What's next? Start a Build task from a plain-language description. Run your first research task with Solve. Connect Notion, Linear, Supabase, Google, Airtable, Mixpanel, and Directus to your workspace. Browse every connector available for Build tasks. # Manage tasks Source: https://docs.rocket.new/getting-started/task/manage Create new Rocket.new tasks, rename them, star favorites, add them to a project, and delete ones you no longer need from the sidebar. Manage all aspects of a task from the task list or from inside the task itself. This page covers creating, renaming, starring, moving, and deleting [Solve and Build tasks](/getting-started/task/overview). ## Create a task You can start a task from three places: the **Home** screen, the **Tasks** page, or from inside a project. Go to **Home**, type your prompt in the input, and press **Enter** or click the send button. Rocket detects whether this is a Solve or Build task from your description. You can also click **Solve** or **Build** in the input bar to set the type explicitly. Home screen with a prompt typed in, showing the Solve button selected and task suggestions below. Home screen with a prompt typed in, showing the Solve button selected and task suggestions below. Go to **Tasks** in the sidebar and click the **Start new Task** card. This takes you to the Home screen input to describe your task. Tasks page with Start new Task card highlighted. Tasks page with Start new Task card highlighted. Go to **Projects**, open a project, and type your prompt in the project's input. The task is automatically scoped to that project and benefits from its shared context. Projects page with a project card highlighted. Projects page with a project card highlighted. Project view showing the input with Solve and Build cards, and existing tasks listed below. Project view showing the input with Solve and Build cards, and existing tasks listed below. Intelligence is a workspace-level setup, not a project task. Run the Intelligence setup wizard once from **New task > Intelligence**. Competitors are managed from the **Intelligence** panel in your sidebar. ## Task menu Many task actions (rename, star, add to project, and delete) are available from the same **`...` menu**. You can open this menu from two places: * **Tasks page or sidebar:** hover over a task and click the **`...`** that appears * **Inside the task:** click the task name in the top-left to open the task dropdown, then select **Settings**, **Star**, or **Add to Project** The sections below show both entry points for each action. ## Rename a task Hover over the task in the **Tasks** page or in the **Recent Tasks** sidebar, click the **`...`** menu, and select **Rename**. Tasks page with the ... menu open on a task, showing Rename highlighted. Tasks page with the ... menu open on a task, showing Rename highlighted. A **Rename your task** popup appears. Type the new name and click **Rename**. Rename your task popup with a text field pre-filled with the current task name. Rename your task popup with a text field pre-filled with the current task name. Click the task name at the top-left of the task view to open the dropdown, then select **Settings**. Task view with the task name dropdown open, showing Settings highlighted. Task view with the task name dropdown open, showing Settings highlighted. In the **Settings** panel, click into the **Name** field, type the new name, and press **Enter** or click outside the field to save. Settings panel showing the Task Overview section with the Name field highlighted. Settings panel showing the Task Overview section with the Name field highlighted. ## Star a task Star a task to pin it to the top of your task list for quick access. Hover over the task in the **Tasks** page or in the **Recent Tasks** sidebar, click the **`...`** menu, and select **Star**. To unstar, open the same menu and select **Star** again. Tasks page with the ... menu open on a task, showing Star highlighted. Tasks page with the ... menu open on a task, showing Star highlighted. You can also star a task from the sidebar. Hover over the task in **Recent Tasks**, click the **`...`** menu, and select **Star**. Sidebar with Recent Tasks showing the ... menu open with Star highlighted. Sidebar with Recent Tasks showing the ... menu open with Star highlighted. ## Add a task to a project You can add any standalone Solve or Build task to a project at any time without losing history. A task can only be part of one project at a time. Hover over the task, click the **`...`** menu, and select **Add to Project**. Tasks page with the ... menu open, showing Add to Project highlighted. Tasks page with the ... menu open, showing Add to Project highlighted. The **Add to project** popup appears. Select a project from the list or search for one. You can also click **+ Create a new project** if needed. Click **Save** to confirm. Add to project popup showing a list of existing projects with a Save button. Add to project popup showing a list of existing projects with a Save button. Click the task name at the top-left of the task view and select **Add to Project** from the dropdown. Task name dropdown open with Add to Project highlighted. Task name dropdown open with Add to Project highlighted. The same **Add to project** popup appears. Select a project and click **Save**. ## Delete a task Deleting a task is permanent. All messages, outputs, and history within the task will be lost. Hover over the task, click the **`...`** menu, and select **Delete**. Confirm the deletion in the prompt that appears. Tasks page with the ... menu open on a task, showing Delete highlighted. Tasks page with the ... menu open on a task, showing Delete highlighted. Click the task name at the top-left, select **Settings**, then click **Delete** next to **Delete Task** in the **Overview** panel. Confirm the deletion. Task Settings Overview panel with Delete Task and the Delete button highlighted. Task Settings Overview panel with Delete Task and the Delete button highlighted. ## What's next? Public/Private visibility is Build-only. Control who can see each Build task. Reference a previous task to carry its knowledge into your current work. # Task notifications Source: https://docs.rocket.new/getting-started/task/notifications Enable per-task notifications in Rocket.new so long-running Solve and Build jobs alert you the moment results are ready. Long-running tasks like deep Solve research or complex Build generation continue in the background after you submit them. You do not need to stay on the page. Rocket can notify you when the result is ready. ## Enable notifications A notification banner appears at the top of the chat when a task is running in the background. Get notified when your preview is ready banner with Notify me and Later buttons. Get notified when your preview is ready banner with Notify me and Later buttons. Click **Notify me** to enable browser notifications, or **Later** to dismiss it for now. Your browser will ask for permission the first time. Once granted, Rocket sends a notification when the task finishes, even if you have navigated away or closed the Rocket tab. Notifications require browser permission. If you dismiss the permission prompt, you can re-enable it from your browser's site settings for rocket.new. ## What triggers a notification Rocket sends a notification when: * A Solve research task finishes and the final report is ready * A Build task completes generation or a major step You can return to Rocket at any time, with or without enabling notifications. Your task and all outputs are saved automatically. Manage push and audio alert preferences for your account. # Task overview Source: https://docs.rocket.new/getting-started/task/overview Understand how tasks work in Rocket.new and what makes Solve research, Build app generation, and Intelligence monitoring different. A **task** is the core unit of work in Rocket. Every time you ask Rocket to research a market, build an app, or set up competitor monitoring, you are creating a task. ## Task types Rocket has three task types, each with its own workflow and output format. All three start the same way: describe what you need in plain language. Strategic research. Ask a business question and get a structured report with data, insights, and recommendations. App creation. Describe a web app, mobile app, or website and Rocket generates production-ready code. Includes **Redesign** for transforming existing sites. Continuous monitoring. Run the Intelligence setup once per workspace. After that, Intelligence works as a dashboard that monitors competitors and surfaces changes automatically. ## Standalone vs. project tasks Tasks exist in two ways: * **Inside a project:** grouped with related tasks that share context, files, and collaborators. Insights from one task are available to others in the same [project](/getting-started/project/overview). Solve and Build tasks can live in projects. * **Standalone:** created independently without a project. Useful for quick one-off research, experiments, or individual builds. Intelligence works differently. Running the setup wizard creates an Intelligence task for the workspace. After approval, you manage competitors and view signals from the **Intelligence** dashboard in your sidebar, separate from any project. You do not create a new Intelligence task for each monitoring cycle. If you are working on a larger initiative with multiple related tasks, use a project. For quick standalone questions or experiments, create a task directly. ## Task lifecycle Every task follows the same general flow: Start a new task from the home screen or within a project. Describe what you need in plain language: a business question, an app idea, or competitors to monitor. Review Rocket's output and refine it through conversation. Ask follow-up questions, request changes, or provide additional context. For Intelligence, refine competitors and preferences from the dashboard after setup. Use or share the result. Export a Solve report, deploy a Build app, or review Intelligence signals in the dashboard as they arrive. ## Credit usage Solve and Build tasks consume [credits](/getting-started/credits) based on complexity. Clear, specific prompts use fewer credits than vague requests. Intelligence is included on eligible plans. | Task type | Credit usage | | :- | :- | | **Solve** | Depends on research depth and question complexity | | **Build** | Scales with app complexity and number of screens | | **Intelligence** | Included on Rocket and Booster plans at no additional credit cost | Check your plan's credit allocation and compare options. ## What's next? Learn when Rocket asks questions before starting and how to write prompts that skip them. Create, rename, star, and delete tasks. Group related tasks together with shared context and files. # Prompt intelligence Source: https://docs.rocket.new/getting-started/task/prompt-intelligence See how Rocket.new scores prompt quality and asks clarifying questions before running Solve or Build tasks so results match what you meant. Rocket scores every prompt for clarity before starting work. If the score meets the minimum threshold, work starts immediately. If it falls below, **Prompt intelligence** asks a short set of targeted questions to fill the gaps, then starts once it has enough to proceed. This applies to [Build](/build/overview) and [Full Solve](/solve/overview#how-full-solve-works). [Light Solve](/solve/light-solve) does not use prompt intelligence; vague prompts may get conversational follow-ups in chat instead. Prompt intelligence questions for a Build task Prompt intelligence questions for a Build task ## Why Rocket pauses for clarity A vague prompt produces worse output and wastes your tokens. Rather than make assumptions that send the task in the wrong direction, Rocket pauses to ask the minimum it needs to do the job well. The questions are targeted, not a form to fill out. Rocket asks only the specific gaps it needs filled before it can start confidently. ## What the questions cover The questions depend on what is missing from your prompt. Full Solve questions focus on scope and audience: * What type of company are you targeting? (for example, horizontal platform, vertical SaaS, enterprise) * Which aspects of this question are most critical? (for example, market size, competitive landscape, customer pain points) * Is this for internal use, a client, investors, or another audience? * What geography or market segment should this cover? * Are there specific competitors or companies you want included? Build questions focus on platform and product: * What platform are you building for: web or mobile? * Who is this app for and what is the core action they take? * What are the must-have screens or features? * Are there any design references, similar apps, or style preferences? * Are there specific integrations that need to be included? ## How to answer Answer the questions that appear. Some are multiple choice, others have an open text field for custom input. You do not need to be exhaustive. Give Rocket enough to narrow the direction, then click **Submit**. You can always refine through conversation once the first output is ready. Rocket starts the task as soon as the questions are answered. The answers become part of the task context and inform everything it produces. ## Write prompts that skip the questions If you want Rocket to start without asking anything, make your prompt specific enough that there is nothing left to guess. The more of these elements you include, the less likely Rocket is to ask. | Element | Example | | :- | :- | | **Platform** | "a web app" or "a Flutter mobile app for iOS and Android" | | **Who it is for** | "for small business owners managing appointments" | | **Key screens** | "homepage, booking flow, confirmation page, and booking history" | | **Must-have features** | "Stripe for payments, email confirmation via Resend" | | **Constraints** | "no login screen needed" or "dark mode only" | | Element | Example | | :- | :- | | **Who it is for** | "for a B2B SaaS company targeting mid-market HR teams" | | **What you need** | "a competitive analysis" vs. "a feature matrix comparing pricing, onboarding, and integrations" | | **Scope** | "focused on the US market, 2024-2025 data" | | **Output format** | "structured as an investor memo" | | **Constraints** | "must include Workday and BambooHR" | The goal is not a perfect prompt. It is a prompt specific enough that Rocket can make confident choices without checking. ## What's next? Tips for writing Build prompts that start without clarification. Best practices for writing Solve prompts that produce sharper results. # Cross-task context Source: https://docs.rocket.new/getting-started/task/task-context Use @-mentions in Rocket.new to pull findings, decisions, and outputs from previous tasks into a new prompt without copying content by hand. By default, each task is isolated. It has no knowledge of what was discussed in a separate task, even within the same project. Cross-task context removes that limitation. Type `@` in the message input to reference a previous task. Rocket retrieves the conversation, findings, and conclusions from that task and uses them in the current one. You build on past work instead of re-explaining it. This works in both **Solve** and **Build** tasks. ## How to use @-mentions Navigate to an existing task or start a new one. Type `@` **(1)** in the chat input. A menu appears showing **Files & Folders** and **Task**. Select **Task (2)** to browse your previous tasks. Chat input with @ typed and context menu showing Files & Folders and Task options. Chat input with @ typed and context menu showing Files & Folders and Task options. A list of your tasks appears. Click the task you want to reference. Task list dropdown with a task highlighted for selection. Task list dropdown with a task highlighted for selection. Add your question or instructions alongside the @-mention. Being specific about what you want from the referenced task gets better results: > *"@Q3 competitor analysis - how has the competitive landscape shifted since that report?"* > *"@Landing page build - apply the same visual style to this new pricing page."* ## What gets carried over Rocket pulls the relevant context from the referenced task based on your message. For Solve tasks, it brings over the findings and conclusions from the report. Exported formats like PDF, HTML, and PPT are not included, only the underlying content. ## Scope Tasks you can reference depend on where your current task lives: | Current task | Can reference | | :- | :- | | Inside a project | Any other task inside the same project | | Standalone task | Any other standalone task | Cross-task context is scoped to the project. You cannot @-mention a task from a different project or reference a standalone task from inside a project. ## What's next? Attach files or paste URLs to give a task additional source material. Add files and connected services that persist across all tasks in a project. Rename, delete, and organize your tasks. # Connectors Source: https://docs.rocket.new/getting-started/workspace/connectors Connect GitHub, Notion, Google Drive, and other tools to a Rocket.new workspace so every project inside can read live data from them. Workspace connectors let you establish connections to external services once and make them available to every project in the workspace. Instead of reconnecting in each project, you authorize a service at the workspace level and individual projects choose which specific resources to use. This page covers **workspace-level connectors**: OAuth-based services like Notion, GitHub, and Google Workspace that are authorized once and shared across all projects. API key connectors (OpenAI, Anthropic, Stripe, and others) are task-level and connected per task from inside Build. **Browse all connectors** including task-level API key connectors like OpenAI, Stripe, and Resend. ## Connectors Share pages, databases, wikis, and meeting notes across all projects. Share Docs, Sheets, and Calendar data across all projects. Sync your codebase for backups, collaboration, and version control. Add a PostgreSQL database, auth, file storage, and edge functions. Deploy your app to the web with one click. Manage leads, content, inventory, and internal workflows. Build from tickets and write follow-up issues back to your board. Email campaigns, audience management, and marketing automation. Conversational forms for lead capture, surveys, and feedback. Scheduling and appointment booking with automatic calendar sync. Accept payments, manage orders, and process refunds in your app. Pull CMS collections and site content as a live data source. Use team docs, specs, and wikis as context for code generation. More connectors are coming. Check the [changelog](/changelog/2026/march/week-4) for the latest additions. ## Connect a service Click your workspace name in the top left of the sidebar, then select **Settings**. Workspace menu with Settings highlighted. Workspace menu with Settings highlighted. Click **Connectors** in the left sidebar. You will see all available workspace connectors. Click the one you want to connect. Settings Connectors tab with Connectors selected in the sidebar and the Supabase row highlighted. Settings Connectors tab with Connectors selected in the sidebar and the Supabase row highlighted. On the connector detail page, click **Connect**. Complete the OAuth flow by signing in to the external service and granting Rocket the access it needs. Supabase connector detail page with the Connect button highlighted. Supabase connector detail page with the Connect button highlighted. A green dot appears next to the connector name when the connection is active. The connection is now available to all projects in the workspace. ## Disconnect a service Follow the same steps as connecting: open [**Settings > Connectors**](#connect-a-service), click the connector, then click **Disconnect**. Supabase connector detail page with the Disconnect button highlighted. Supabase connector detail page with the Disconnect button highlighted. Disconnecting removes the connection for **all projects** in the workspace. Any project using resources from this connector will lose access to that context. Existing task outputs are not affected. Once connected, each project selects which specific pages, documents, or sheets to use as context. Learn how at the project level. ## What's next? Select specific resources from workspace connectors for a project. Browse all connectors and see setup guides for each service. Understand who can manage connectors and project access. Learn about workspaces, billing, and team management. # Manage Source: https://docs.rocket.new/getting-started/workspace/manage Create additional Rocket.new workspaces, rename them, and switch between workspaces from the sidebar. All workspace actions, creating, renaming, and switching, are performed from the workspace menu in the top left of the sidebar. When you create a Rocket account, a default workspace is automatically created using your name with the Free plan. ## Create a workspace Click your workspace name in the top left of the sidebar to open the workspace menu. Sidebar showing the workspace name button highlighted. Sidebar showing the workspace name button highlighted. Select **New workspace** at the bottom of the menu. Workspace menu showing Switch workspace, Invite members, Settings, and New workspace options. Workspace menu showing Switch workspace, Invite members, Settings, and New workspace options. Enter a **Name** for your workspace. Add an optional **Description** to give context to your team. Toggle **Allow workspace members to invite others** if you want Editors to invite new members at the workspace level. This toggle also applies to project and task owners who are Editors in the workspace. When it is on, those owners can invite anyone. When it is off, they can invite only existing workspace members. Editors who do not own a project or task can never invite anyone to it. Create a new workspace dialog showing Name, Description, and invite toggle fields. Create a new workspace dialog showing Name, Description, and invite toggle fields. Click **Create**. Your new workspace opens immediately and is added to your workspace switcher. ## Edit workspace settings Open Settings to rename your workspace, update its description, or manage the member invite toggle. Click your workspace name in the top left, then select **Settings**. Workspace menu with the Settings option highlighted. Workspace menu with the Settings option highlighted. The **Overview** tab is selected by default. Update the workspace **Name** or **Description**, then click **Save changes**. Settings panel showing the Overview tab with Name, Description, and Save changes button. Settings panel showing the Overview tab with Name, Description, and Save changes button. Scroll down in the Overview tab to toggle **Allow workspace editors to invite members**. This setting applies to Editors at the workspace level, and to project and task owners who are Editors in the workspace. * **Enabled:** Editors can invite new members to the workspace. Project and task owners can invite anyone to the projects and tasks they own. * **Disabled:** Editors cannot invite new members to the workspace. Project and task owners can invite only existing workspace members to the projects and tasks they own. Editors who do not own a project or task can never invite anyone to it. Allow workspace editors to invite members toggle switch. Allow workspace editors to invite members toggle switch. ## Switch between workspaces Click your workspace name in the top left, then click **Switch workspace**. A list of all workspaces you belong to expands inline. Click any workspace to switch to it immediately. Switch workspace panel showing two workspaces, with John Doe checked as active. Switch workspace panel showing two workspaces, with John Doe checked as active. You can belong to more than one workspace. This is useful when you work with multiple organizations or when your company separates teams into distinct workspaces for billing or access control. ## What's next? Learn about workspace features, settings, and member management. Manage your plan, credits, and payment methods. # Overview Source: https://docs.rocket.new/getting-started/workspace/overview A Rocket.new workspace is the top-level container that holds your projects, teammates, connected integrations, credits, and billing plan. A workspace is the top-level container in Rocket. It represents your organization, or a distinct team within it, and holds all projects, members, billing, and connectors in one place. When you create a Rocket account, a default workspace is automatically created using your first and last name. This default workspace comes with the Free plan and its one-time 20 credits. A workspace is the organizational shell. Projects live inside workspaces and contain the actual work (tasks, files, services). Think of a workspace as the company, and projects as the initiatives within it. ## What a workspace provides | Feature | Description | | :- | :- | | **Unified billing** | One subscription and one invoice. All credit usage across projects is billed at the workspace level. | | **Team management** | Invite members to the workspace. Grant project or task access separately. New projects and tasks are not shared automatically. | | **Connectors** | Connect services like Notion and Google at the workspace level so all projects can use them. | | **Project organization** | All projects in the workspace are visible to members based on their role, making it easy to find work and collaborate. | | **Centralized settings** | From Settings, manage the workspace name and description, member invite permissions, connectors, billing, and members. | ## Manage your workspace **Create, rename, and switch between workspaces.** Step-by-step instructions. ## Members Go to **Settings → Members** to view, invite, or manage workspace members. You can assign roles (**Editor** or **Viewer**) when inviting, or change them later. The **Owner** role is not assignable. You are the owner of any workspace you create. See the full roles and permissions breakdown. Removing a member revokes their access to the workspace and all projects within it. Their contributions (tasks and files) remain in the workspace. ## Multiple workspaces You can belong to more than one workspace. This is useful when you work with multiple organizations, or when your company separates teams into distinct workspaces for billing or access control. * Your entire team works on related projects * You want unified billing and a single member directory * Cross-project visibility is important * You are a small to mid-size team * You work with distinct organizations (e.g., your company + a client) * Teams need completely separate billing * You need hard boundaries between groups of projects * You are a large organization with independent departments ## View all workspaces The **All workspaces** view lists every workspace you own in one place, with visibility into members and their roles, tasks, projects, and messages. Use it to monitor activity across workspaces and manage collaboration without switching contexts. Click your workspace name in the top left of the sidebar to open the workspace menu. Sidebar showing the workspace name button highlighted. Sidebar showing the workspace name button highlighted. From the workspace menu, click **View all workspaces**. Workspace menu with the View all workspaces option highlighted. Workspace menu with the View all workspaces option highlighted. The **All workspaces** page opens with a row per workspace you own. Each row shows the workspace name alongside its members and roles, tasks, projects, and messages so you can see activity at a glance. All workspaces page showing workspaces with members, roles, tasks, projects, and messages. All workspaces page showing workspaces with members, roles, tasks, projects, and messages. Only workspaces you own are listed in this view. To switch into a workspace where you are a member but not the owner, use **Switch workspace** in the menu. See [Manage workspaces](/getting-started/workspace/manage#switch-between-workspaces). ## Workspace settings Click your workspace name in the sidebar, then select **Settings**. Here is what you can manage: | Setting | Description | | :- | :- | | **Overview** | Edit the workspace name and description. Control whether Editors can invite members at the workspace level, and whether project and task owners can invite anyone or only existing workspace members. | | **Connectors** | Connect and manage external services at the workspace level. See [Connectors](/getting-started/workspace/connectors). | | **Subscription** | View plan details, credit usage, and manage payment methods. See [Subscription](/getting-started/workspace/subscription). | | **Members** | Invite, remove, and manage roles for workspace members. See [Workspace collaboration](/getting-started/collaboration/workspace). | ## What's next? Connect external services at the workspace level for all projects. Manage your plan, credits, and payment methods. Understand roles, permissions, and the full sharing model. Start a new project inside your workspace. # Subscription Source: https://docs.rocket.new/getting-started/workspace/subscription Choose a Rocket.new subscription plan, top up credits, update payment methods, and manage invoices from workspace billing settings. Subscription management is only available on the web browser. You need a logged-in Rocket account to manage your plan. Each workspace has its own subscription plan and credit balance. Make sure you are in the correct workspace before managing your subscription. You can switch workspaces from the sidebar. See [Manage workspaces](/getting-started/workspace/manage). ## Supported payment methods Rocket processes all payments through **Stripe**. When you [buy a plan](#buy-a-plan) or [add credits](#add-credits), Stripe checkout opens with the payment options available in your region. * **Cards (default)**: Credit and debit cards are accepted everywhere Rocket is available. Supported brands include **Visa**, **Mastercard**, **American Express**, and most major international cards. Enter your card number, expiry date, and security code on the checkout form. See [Update your payment method](#update-your-payment-method) to add or change a saved card after subscribing. * **Link**: **Link** is Stripe's express checkout. If you have a Link account, Stripe securely fills in your payment and billing details so you can complete checkout in one click. Look for the **Secure, fast checkout with Link** option on the checkout page. * **Amazon Pay**: **Amazon Pay** lets you use your Amazon account to complete checkout quickly. Select **Amazon Pay** on the checkout page and authorize the payment with your Amazon credentials. The payment methods shown in Stripe checkout depend on your country and currency. You may see additional local options like **iDEAL**, **Bancontact**, **SEPA Direct Debit**, or **Klarna** based on your region. If you do not see a method you expect, [contact support](mailto:support@rocket.new) and we will help you find a way to subscribe. ## Buy a plan Go to **Settings → Subscription**. Click the **Upgrade** button. The Upgrade modal opens showing available plans (Pro, Rocket, Booster). Toggle **Yearly (save 20%)** to see annual pricing. Upgrade the plan modal showing Pro, Rocket, and Booster plans. Upgrade the plan modal showing Pro, Rocket, and Booster plans. Click **Upgrade** on the plan that fits your workload. You are redirected to Stripe checkout. Review the plan details, fill in the checkout fields, and click **Subscribe**. Your credits are available immediately. * **Email**: Pre-filled from your Rocket account. * **Payment method**: Card number, expiry date, and security code. You can also use [Link or Amazon Pay](#supported-payment-methods) if they appear for your region. * **I'm purchasing as a business** (optional): Check this to bill a company. **Full name** becomes **Organisation name**, and a **Tax ID** section appears with **Business name**, **Tax ID type**, and VAT or tax number. * **Billing address**: Full name (or organisation name), country or region, and address. Click **Use a saved address** if Stripe already has one on file. Stripe checkout screen for subscribing to the Pro plan. Already on a paid plan? See [Upgrade to another plan](#upgrade-to-another-plan). ## Upgrade paths by plan The Subscription tab shows different options based on your current plan. See [how to buy a plan](#buy-a-plan) or [upgrade to another plan](#upgrade-to-another-plan). | Current plan | Available upgrades | | :- | :- | | **Free** | Pro, Rocket, Booster | | **Pro** | Rocket, Booster | | **Rocket** | Booster | | **Booster** | No upgrades available (highest tier) | ## Upgrade to another plan Go to **Settings → Subscription**. Your current plan is shown at the top. Click the **Upgrade** button. Settings Subscription tab showing the Upgrade button. Settings Subscription tab showing the Upgrade button. The Upgrade modal shows all available plans. Click **Upgrade** on the plan you want to move to. Upgrade the plan modal with Upgrade button highlighted on a higher-tier plan. Upgrade the plan modal with Upgrade button highlighted on a higher-tier plan. Stripe shows the prorated charge for the remainder of your billing cycle. Review and click **Confirm**. Stripe confirmation screen showing prorated charge for upgrading to Booster. No cancellation is required. The upgrade takes effect immediately with prorated charges, and you receive the additional credits right away. ## Add credits The **Add credits** button is visible in **Settings → Subscription** for paid users. Clicking it takes you directly to Stripe checkout where you choose how many credits to buy. If you find yourself adding credits regularly, consider [upgrading to a higher plan](#upgrade-to-another-plan) for better value. Open **Settings → Subscription** and click **Add credits**. Settings Subscription tab with Add credits button highlighted. Settings Subscription tab with Add credits button highlighted. Select the number of credits (100, 1,000, or more), confirm the total, and click **Pay**. Stripe checkout showing credit pack quantity selector. Free plan users do not see the Add credits button. [Upgrade to a paid plan](#buy-a-plan) first. ## Cancel your subscription Open **Settings → Subscription** and click **Upgrade**. In the modal, your current plan shows a **Manage** button. Click it to open the Stripe billing portal. Upgrade modal showing Manage button highlighted on the current Pro plan. Upgrade modal showing Manage button highlighted on the current Pro plan. In the Stripe billing portal, click **Cancel subscription**. Stripe billing portal showing Cancel subscription button. Review the end date and click **Cancel subscription** to confirm. Stripe cancellation confirmation screen showing the subscription end date. Billing stops immediately, but you keep access until the displayed end date. If you cancel your subscription, your unused credits will reset to zero at the end of the billing cycle. Want to switch to a lower plan instead of cancelling? See [Downgrade your plan](#downgrade-your-plan). ## Downgrade your plan To downgrade, [click **Manage**](#cancel-your-subscription) next to your active plan in Settings → Subscription, then select a lower-tier plan in the Stripe billing portal. Downgrades are scheduled for your next billing cycle. You keep your current plan and credit balance until then. ## Update your payment method [Open **Settings → Subscription** and click **Manage**](#cancel-your-subscription), then scroll to the **Payment Method** section. Click **+ Add payment method** to add a new card, or use the three-dot menu on an existing card to delete it or set it as default. Stripe billing portal showing Payment Method section with Add payment method button and three-dot menu. Enter your card number, expiry, and security code, then click **Save**. Stripe card entry form with fields for card number, expiry, and security code. Keep at least one payment method linked to any active plan. Methods tied to a live subscription stay locked until you switch the plan to a different method. ## Update your billing information [Open **Settings → Subscription** and click **Manage**](#cancel-your-subscription), then scroll to the **Billing Information** section and click **Update information**. Edit the billing address, then click **Save** (or **Cancel** to discard): * **Address line 1** * **Address line 2** (optional) * **City** * **Postal code** * **State** * **Country** Stripe billing portal address form with Address line 1, Address line 2, city, postal code, state, country, Save, and Cancel. ## Download an invoice or receipt [Open **Settings → Subscription** and click **Manage**](#cancel-your-subscription), then scroll to **Invoice History**. Each row shows the date, amount, and plan. Click **Invoice** to download. Stripe billing portal showing Invoice History with Invoice download button. ## What's next? Compare plans and see what's included in each tier. Learn how credits work, rollover policies, and when to add credits vs. upgrade. # FAQs Source: https://docs.rocket.new/help/faq Frequently asked questions about Rocket.new covering account setup, credit usage, integrations, collaboration, and deploying generated apps.