# Best practices
Source: https://docs.rocket.new/build/best-practices
Prompt patterns, iteration strategies, and complexity management techniques for 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **AdSense** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > AdSense**](#connect-adsense). Click **Edit** to update your Publisher ID or **Disconnect** to remove the integration.
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.
# Comparison guide
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 and build CRMs, content calendars, and inventory trackers: all wired up from chat.
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.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Airtable** card, then click **Connect**.
**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.
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.
# Comparison guide
Source: https://docs.rocket.new/build/connectors/analytics-guide
Compare Google Analytics and Mixpanel in Rocket: choose the right analytics tool for your app.
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
Connect Anthropic to Rocket and add Claude-powered AI to your app: chatbots, document analysis, content moderation, and more.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Anthropic** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
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.
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.
# Brevo
Source: https://docs.rocket.new/build/connectors/brevo
Connect Brevo to your Rocket.new app - send emails, SMS, and manage CRM contacts with a single prompt.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Brevo** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > Brevo**](#connect-brevo). Update your key or click **Disconnect** to remove the integration.
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.
# Cal.com
Source: https://docs.rocket.new/build/connectors/cal-com
Connect Cal.com to Rocket and embed open-source scheduling with full customization, all wired up from chat.
Describe the scheduling flow you need in chat and Rocket generates the embedded booking widget, confirmation logic, and calendar sync automatically.
## What you can do
Fully branded booking pages that match your app's design, with custom fields, colors, and layouts.
Route meetings to available team members using round-robin, collective, or managed event types.
Distribute meetings evenly across your team so no one person gets overloaded.
Drop a compact scheduling widget into any page for frictionless booking without leaving the app.
## Before you connect
Cal.com is only available for **Next.js** tasks in Rocket.
You need a Cal.com API key.
**Get your Cal.com API key** from the Cal.com documentation.
Go to **Settings > Developer > API Keys**, create a new key, give it a name, and copy it.
Cal.com is a **task-level** connector. Each Rocket task connects to its own API key independently.
## Connect Cal.com
You can connect from two places. Both do the same thing.
**Option 1: From chat**
Type a prompt that mentions Cal.com, for example `Connect Cal.com and let users book a meeting from my availability`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Cal.com** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
A green dot appears next to Cal.com when the connection is active.
**Update or disconnect**
Open [**Connectors > Cal.com**](#connect-calcom) and click the card. Click **Edit** to update the key or **Disconnect** to remove it from this task.
You can connect from two places. Both do the same thing.
**Option 1: From chat**
Type a prompt that mentions Cal.com. 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 **Cal.com** card, then tap **Connect**.
**After tapping Connect**
A popup opens. Paste your **API key** and tap **Done**.
A green dot appears next to Cal.com when the connection is active.
**Update or disconnect**
Go back to the **Cal.com** 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 |
| :------------------ | :---------------------------------------------------------------------------------- |
| Booking page | `Embed a Cal.com widget on my /book page for 30-minute consultations.` |
| Team scheduler | `Add a Cal.com team booking page with round-robin assignment across 3 reps.` |
| Sidebar widget | `Drop a Cal.com scheduling widget into my dashboard sidebar for quick check-ins.` |
| Paid session | `Embed Cal.com booking and charge $75 per session via Stripe before confirming.` |
| Intake plus booking | `Create a two-step flow: intake form first, then Cal.com time picker on step two.` |
| Custom branding | `Embed Cal.com on my /schedule page and match the widget colors to my app theme.` |
| Office hours | `Set up Cal.com office hours on Wednesdays and embed on my /support page.` |
| Reminder email | `Send a custom reminder email via Resend 24 hours before each Cal.com appointment.` |
| Post-call survey | `After a Cal.com meeting ends, email the attendee a feedback form.` |
| Recurring meetings | `Add a Cal.com booking option for weekly recurring 1-on-1 meetings.` |
## Tips
* **Next.js only.** Cal.com is available exclusively in Next.js tasks on Rocket.
* **API key connection.** Cal.com uses an API key (not OAuth). Keys start with `cal_live_` for production.
* **Full customization.** Because Cal.com is open source, you can customize booking page styles, fields, and workflows beyond what other scheduling tools allow.
* **Calendar sync is automatic.** Cal.com syncs with Google Calendar, Outlook, and Apple Calendar. Availability updates in real time.
* **Self-hosting optional.** Cal.com can be self-hosted for full data control, but the hosted version at cal.com works out of the box with Rocket.
* **One API key per task.** Each Rocket task connects to one Cal.com API key independently.
## What's next?
A managed scheduling alternative that works across all Rocket task types.
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 sessions by combining Cal.com with Stripe checkout.
# Calendly
Source: https://docs.rocket.new/build/connectors/calendly
Connect Calendly to Rocket and embed booking widgets, demo schedulers, and team scheduling flows - all wired up from chat.
Describe the scheduling flow you need in chat and Rocket generates the embedded scheduler, confirmation pages, and notification flows automatically.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Calendly** card, then click **Connect**.
**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
Connect Confluence to your Rocket.new app and use your team docs, specs, and decision records as context for generating code that reflects your organization's actual 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.
This connector is only available for **Next.js TypeScript** web build tasks.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Confluence** card, then click **Connect with Confluence**.
**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**.
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.
# Comparison guide
Source: https://docs.rocket.new/build/connectors/databases-and-cms
Compare database and CMS integrations in Rocket: Supabase, Airtable, Strapi, and Directus for backends and content management.
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
Connect Directus to Rocket and build content-driven apps, product catalogs, and multi-language sites: all from chat.
Describe the content experience you want in chat and Rocket generates pages, listing views, and dynamic layouts that pull directly from your Directus collections.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Directus** card, then click **Connect**.
**After clicking Connect**
A popup opens. Enter your **Project URL** and **Access Token**, then click **Save**.
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.
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.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **ElevenLabs** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
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.
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.
# Comparison guide
Source: https://docs.rocket.new/build/connectors/email-and-messaging
Compare Rocket.new email and SMS integrations - Resend, SendGrid, Brevo, MailerLite, Mailchimp, and Twilio.
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.
# Figma
Source: https://docs.rocket.new/build/connectors/figma
Import your Figma designs into Rocket and convert them into production-ready code - layouts, spacing, and components included.
Import a Figma frame and describe what you want to build. Rocket converts your visual layers into working, production-ready components - no manual translation needed.
Figma import is available on web only. It is not supported in the Rocket mobile app.
## What you can do
Import any Figma frame and get a fully coded version with responsive layouts. Rocket matches your layers, spacing, and styling automatically.
Turn your Figma component library into reusable code components with variant support.
Import a clickable Figma prototype and get a working multi-page app with real navigation and route transitions.
Convert Figma marketing designs into pixel-perfect, responsive code for desktop, tablet, and mobile.
## Connect Figma
Figma connects via OAuth - no API key needed.
You can connect from two places - both open the same popup.
**Option 1: From the import flow (fastest)**
Click the **+** button at the lower left of the chat input and select **Add from Figma**.
A popup appears asking you to connect.
**Option 2: From workspace Settings**
Click your workspace name in the top-left, select **Settings**, then open the **Connectors** tab. Click the **Figma** card and click **Connect**.
Connect once from Settings and it is available to all tasks.
**After clicking Connect**
Figma opens an authorization screen. Sign in if prompted, review the permissions, and click **Allow access**.
A green dot appears next to Figma when the connection is active.
**Disconnect or switch accounts**
Open workspace Settings, go to **Connectors**, and click the **Figma** card. Click **Disconnect** and confirm. Connect again to use a different account.
Disconnect or switch accounts from workspace Settings.
## Import a design
Once connected:
In Figma, open your file and click **Share > Copy link** to get the URL.
In Rocket, click the **+** button at the lower left of the chat input and select **Add from Figma**.
Paste your Figma URL and select the frames you want to import.
Click **Import**. Rocket generates production-ready code from your selected screens.
Use chat to add interactivity, connect data sources, or refine layouts.
Step-by-step guide to finding and copying your Figma file URL.
Follow these Figma best practices to get the best code output.
## Tips
* **File organization affects output quality.** Well-named layers, proper auto-layout, and consistent spacing produce better code. Flattened images or ungrouped elements may need manual cleanup.
* **Prototype flows map to routes.** Click-through connections in your Figma prototype are mapped to page routes and navigation links in the generated app.
* **Complex animations may need refinement.** Rocket handles standard transitions, but advanced Figma animations may need adjustment after import.
* **One Figma account per Rocket workspace.** To switch accounts, disconnect and reconnect from workspace Settings.
* **Web only.** Figma import is not available in the Rocket mobile app.
## What's next?
Wire up your imported Figma designs with real data from Supabase.
Add payment flows to your Figma-designed pages with Stripe checkout.
Deploy your Figma-to-code project to a live URL with Netlify.
Browse every available integration.
# Comparison guide
Source: https://docs.rocket.new/build/connectors/forms-and-scheduling
Compare forms and scheduling integrations in Rocket.new: Typeform, Tally, and Calendly for lead capture, surveys, and booking.
Rocket supports four 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Gemini** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
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.
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
Connect GitHub code sync to your Rocket.new app: two-way sync for Next.js TypeScript projects.
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.
## 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.
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.
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 behaviour.** 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.
# Overview
Source: https://docs.rocket.new/build/connectors/github/overview
Connect GitHub to your Rocket.new app: push code to repos, collaborate with your team, and keep version history.
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.
**Option 3: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **GitHub** card, then click **Connect**.
**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**.
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.
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 behaviour.** 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 your Rocket.new app: build from Docs, Sheets, and Calendar, then write outputs back.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Google Workspace** card, then click **Connect**.
**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**.
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
Connect Google Analytics GA4 to Rocket and track page views, conversions, and traffic sources: all wired up 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 centre.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Google Analytics** card, then click **Connect**.
**After clicking Connect**
A popup opens. Enter your **Measurement ID**, then click **Connect**.
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.
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.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **HubSpot** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > HubSpot**](#connect-hubspot). Update your token or click **Disconnect** to remove the integration.
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
Connect Instagram to your Rocket.new app - display social feeds, media grids, and social proof sections.
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.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Jira** card, then click **Connect**.
**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**.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Linear** card, then click **Connect**.
**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**.
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 your Rocket.new app - run email campaigns, manage audiences, and automate marketing.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Mailchimp** card, then click **Connect**.
**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.
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
Connect MailerLite to your Rocket.new app - build newsletters, subscriber forms, and email automation.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **MailerLite** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > MailerLite**](#connect-mailerlite). Update your token or click **Disconnect** to remove the integration.
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
Connect Mixpanel to Rocket and track feature adoption, analyze funnels, and segment users: all wired up from chat.
Describe the analytics you want in chat and Rocket generates the complete tracking logic: event calls, funnel visualizations, retention charts, and user segmentation.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Mixpanel** card, then click **Connect**.
**After clicking Connect**
A popup opens. Enter your **Account username**, **Account secret**, and **Region**.
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.
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
Connect Netlify to your Rocket.new app: deploy to a live URL with one click, automatic HTTPS, and global CDN.
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 includes a default Netlify account for deployments. Connecting your own gives you full control over deployment history, custom domains, and 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.
After deploying, connect your own domain through the [Netlify dashboard](https://app.netlify.com) and update your DNS records.
## 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**.
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.
Select **Production** or **Staging**.
Rocket builds and deploys your app to a live Netlify URL automatically.
For a full walkthrough of staging and production environments, 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.
* **Default account available.** If you do not connect your own Netlify account, Rocket uses a default one. Connect your own for full control over deployment history and custom domains.
* **Custom domains are configured in Netlify.** After deploying, go to the [Netlify dashboard](https://app.netlify.com) to connect a custom domain and update DNS records.
* **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?
Connect your own domain to your Netlify deployment.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Notion** card, then click **Connect with Notion**.
**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**.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **OpenAI** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
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.
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.
# Overview
Source: https://docs.rocket.new/build/connectors/overview
Connect 26+ third-party services to your Rocket.new apps with a single prompt - payments, CRM, databases, AI, email, and more. Part of the only vibe solutioning platform with research, building, and intelligence.
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. Supabase, Stripe, AdSense, HubSpot) are connected per task. Each task stores its own credentials independently.
* **Workspace-level** connectors (e.g. 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.
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?
### Design and development
Import Figma designs and convert them into production-ready code.
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
Connect Perplexity to Rocket and add AI-powered search with cited, real-time answers to your app.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Perplexity** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
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.
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.
# Comparison guide
Source: https://docs.rocket.new/build/connectors/productivity-guide
Compare productivity integrations in Rocket.new: Google Workspace, Notion, Linear, Jira, and Confluence for docs, specs, and project management.
Rocket supports five 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 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 |
| --------------------------- | ------------------------------------------------- | ------------------------------------------ | ----------------------------------------------- | ----------------------------------------------- |
| **Best for** | Structured data, specs, calendars | Team knowledge, PRDs, content | Issue tracking, sprints, project management | Issue tracking, epics, sprint boards |
| **What Rocket reads** | Docs, Sheets, Calendar events | Pages, databases, wikis, templates | Tickets, projects, acceptance criteria | Issues, epics, acceptance criteria, sprint data |
| **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) |
| **Content types** | Text, tabular data, calendar events | Rich text, databases, relations, embeds | Issues, projects, documents, labels | Issues, epics, sprints, workflows |
| **Real-time data** | Yes (Sheets, Calendar) | Yes (databases, pages) | Yes (issues, projects) | Yes (issues, sprints) |
| **Write-back creates** | New documents and spreadsheets | New pages with structured content | New issues and project boards | N/A |
| **Connection method** | OAuth | OAuth | OAuth | OAuth (Atlassian) |
| **Pricing** | Free (personal), paid (Workspace) | 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 or Jira.** Point Rocket at a ticket 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.
```
### 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.** 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 five.** Specs from Notion or Docs inform the build. Jira or Linear tickets define the scope. Rocket generates the app. Documentation flows back to Notion, follow-up tickets flow to Linear, 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 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.
This connector is only available for **Next.js TypeScript** web build tasks.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Razorpay** card, then click **Connect**.
**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.
**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
Connect Resend to your Rocket.new app - send welcome emails, password resets, and order confirmations with a single 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Resend** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > Resend**](#connect-resend). Update your key or click **Disconnect** to remove the integration.
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 - send transactional emails, run campaigns, and manage subscribers.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **SendGrid** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > SendGrid**](#connect-sendgrid). Update your key or click **Disconnect** to remove the integration.
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.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Strapi** card, then click **Connect**.
**After clicking Connect**
A popup opens. Enter your **Instance URL** and **API token**, then click **Connect**.
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.
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
Connect Stripe to your Rocket.new app and accept payments, subscriptions, and donations with 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Stripe** card, then click **Connect**.
**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.
**Update or disconnect**
Go to [**Connectors > Stripe**](#connect-stripe). Update your keys or click **Disconnect** to remove the integration.
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
Connect Supabase Edge Functions to your Rocket.new app - generate and deploy serverless backend logic from chat.
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`.
* Show a **Push to Supabase** popup so you can deploy the function.
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:**
**View stored secrets:**
## 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 email templates in your Rocket.new app - brand confirmation, reset, and magic link 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.
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
Connect an existing Supabase project to your Rocket.new app - share a database 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
Configure Google sign-in for Android APKs built with Rocket.new - set up Google Cloud Console and Supabase OAuth.
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.
## 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 **Authorised 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
Connect Supabase to Rocket and get a full backend - database, auth, file storage, and edge functions - all scaffolded 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**.
Open the **Connectors** tab, click the **Supabase** card, and follow the OAuth flow.
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**.
Click the **Supabase** card in the Connectors panel.
Then click **Connect**.
**Option 3: From chat**
Type a prompt that mentions auth, database, or file storage. Rocket detects the intent and shows a **Connect** button inline.
**After clicking Connect**
A Supabase authorization screen opens. Sign in, review the permissions, and click **Authorize Rocket**.
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.
Click **Create organization**. Rocket redirects you to select it and continue.
Choose your organization from the dropdown, then click **Authorize Rocket**.
Once authorized, you will be prompted to link a project to this task.
**Select an existing project** from the dropdown.
Or click **Create new Supabase project**, enter a name, password, and region, then click **Create a new 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.
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**.
**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**.
**After tapping Connect**
A Supabase authorization screen opens. Sign in, review the permissions, and tap **Authorize Rocket**.
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.
Tap **Create organization**. Rocket redirects you to select it and continue.
Choose your organization from the dropdown, then tap **Authorize Rocket**.
Once authorized, you will be prompted to link a project to this task.
**Select an existing project** from the dropdown.
Or tap **Create new Supabase project**, enter a name, password, and region, then tap **Create a new 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 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
Apply Rocket.new-generated SQL migration scripts to keep your Supabase schema 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.
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.
### 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."
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.
### 2. Supabase project was deleted or disconnected
What you will see:
"Your connected Supabase project appears to be deleted."
To fix this:
In Rocket, go to **Connectors → Supabase**.
Select a valid project from the dropdown.
Click **Save**, then try pushing the script again.
### 3. Supabase is temporarily down
What you will see:
"Your Supabase project 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.
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.
**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.
Paste the SQL into the SQL editor in your Supabase dashboard and click **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
Set the correct Supabase redirect URL so auth links work in your Rocket.new app.
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.
Find the **Site URL** field. Replace `http://localhost:3000` with your app's live URL.
Examples:
* `https://your-app-name.netlify.app`
* `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
Set up social authentication providers in Supabase for your Rocket.new app - Google, GitHub, and more.
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**.
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.
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
Connect Supabase Storage to your Rocket.new app - upload, manage, and secure files 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.
## 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
Connect Tally to Rocket and embed free, unlimited forms for signups, feedback, and data collection - all wired up 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.
This connector is only available for **Next.js TypeScript** web build tasks.
## 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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Tally** card, then click **Connect**.
**After clicking Connect**
A popup opens. Paste your **API key** and click **Connect**.
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.
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
Connect Twilio to Rocket and send SMS verification codes, alerts, and notifications - all wired up from chat.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Twilio** card, then click **Connect**.
**After clicking Connect**
A popup opens. Enter your **Account SID**, **Auth Token**, and **From Phone Number**, then click **Connect**.
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.
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
Connect Typeform to Rocket and embed conversational forms for lead capture, surveys, and quizzes - all wired up from chat.
Describe the form you need in chat and Rocket generates the embed, response handling, and conditional logic automatically.
This connector is only available for **Next.js TypeScript** web build tasks.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Typeform** card, then click **Connect with Typeform**.
**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.
This connector is only available for **Next.js TypeScript** web build tasks.
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.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Webflow** card, then click **Connect with Webflow**.
**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**.
**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**.
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
Transform any website with Rocket.new Build - paste a URL, pick a redesign command, and get a rebuilt page.
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.
Type `/` in the chat input. The command menu opens. Browse by category or start typing to filter, then select a redesign command.
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.
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.
## 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.
# Components outside screen
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/components-outside-screen
Keep all components inside the Figma frame for accurate import in Rocket.new's Figma-to-code pipeline.
## Keep components inside the frame
Do not let design components sit on the canvas outside their screen frame. All elements must be placed **inside** the screen's Frame.
Elements placed outside the frame are ignored during import and may cause visual gaps or missing content in the generated app.
In the example below, some components are outside the screen frame. Rocket will skip them during import, causing gaps in your generated app. Remove them before importing.
## Exception: scrolling elements
For **horizontal lists** and **horizontal scrolls**, the scrolling content can extend outside the screen Frame. All other components should remain inside the frame.
See all design guidelines for preparing your Figma files.
# Design guidelines
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/design-guidelines
Structure Figma frames, screen sizes, and layers for accurate import in Rocket.new's Figma-to-code pipeline.
For Rocket to recognize and import your screens correctly, follow these structure rules before sharing your Figma link.
## Screen structure
Rocket identifies screens that are either a **Frame placed directly on the Page**, or inside a **Section placed directly on the Page**.
**Accepted structures:**
* Page > Frame
* Page > Section > Frame
Do not nest Frames or Sections inside groups or other elements that are not directly on the Page. These screens will not be detected correctly.
Use the **Frame Tool** or [Frame Presets](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma-Design#Change_the_frame_preset) from the Properties Panel to set up your screen structure.
## Frame size requirements
**For mobile screens:**
* Height: greater than 200px
* Width: between 200px and 800px
**For web screens:**
* Height: greater than 200px
* Width: between 992px and 2500px
**Image-only frames are not supported.** Code cannot be generated for frames containing only images. Include design elements (text, components, or shapes) alongside the image.
## Layer organization
Use **Groups** or **Frames** to maintain a clean, logical hierarchy.
Organized layers:
* Make designs easier to read and update.
* Enable smart resizing and responsiveness inside Rocket.
## Vectors and icons
* Group related vectors into a **single grouped vector** for icons and visuals.
* Use Figma's vector tools to build shapes and fill areas. Avoid image-based workarounds or overlays.
Do not leave hidden elements in your design. If an element is tucked behind another or made invisible, Rocket will not include it during import.
## Keep everything inside the frame
All components and visual elements must be placed **inside** the screen's Frame.
Elements placed outside the Frame are ignored during import and may cause visual gaps or missing content.
See all design guidelines for preparing your Figma files.
# Excess text boundary
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/excess-text-boundary
Fix oversized text boxes with auto-width before import in Rocket.new's Figma-to-code pipeline.
## Why text boundaries matter
Text boxes that are wider than their actual content cause misalignment in the generated app. Rocket uses the text boundary to determine positioning, so excess width shifts elements out of place.
## Best practice: use auto-width
Always wrap your **Text** element with its boundary using **auto-width** in Figma. This prevents alignment and positioning errors during import.
## Aligning text with other objects
When a text element sits next to another element (for example, an image), the text must be centered with it. If the text boundary extends beyond the actual text content, it will appear misaligned in the generated design.
See all design guidelines for preparing your Figma files.
# Group components and layers
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/group-components-and-layers
Organize Figma layers and component hierarchies for cleaner imports in Rocket.new's Figma-to-code pipeline.
## Why grouping matters
Everything in a screen design is made up of layers. When those layers are properly grouped, Rocket can generate better, more accurate results. [Groups](https://www.figma.com/best-practices/groups-versus-frames/) reduce clutter by combining related components into fewer layers, and they auto-adjust when child objects are resized.
## How to group effectively
* Combine related elements like **background images, buttons, or text** into a single group.
* Maintain a clear hierarchy order inside groups.
* Use groups to simplify layering across your design, making components easier to manage and reuse.
Avoid ungrouped designs. Proper grouping helps Rocket identify and map your components accurately during import.
## Example
In an e-commerce shopping list screen:
Place the background image as the base layer.
Add product image, title, description, and price on top.
Layer them properly, then group them into one element.
This creates a clean hierarchy that is easy to manage and generates accurately in Rocket.
See all design guidelines for preparing your Figma files.
***
## What's next?
Learn how to import your Figma design into Rocket.
Start a project from a text prompt instead of a design file.
# Group vectors
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/group-vectors
Combine vector elements into single groups for clean image output in Rocket.new's Figma-to-code pipeline.
## Why vector grouping matters
[Fill elements](https://help.figma.com/hc/en-us/articles/360040450213-Vector-networks#Fills) like images are often made up of many individual vectors combined into one. If those vectors are not grouped, Rocket downloads each one separately and cannot reconstruct the image correctly.
Icons should be designed using vectors, not PNGs. Vector-based icons scale cleanly and import correctly into Rocket.
## Best practices
* Combine all related vectors into a **single group** before importing.
* Proper grouping makes it easier to manage and identify elements later.
* Ungrouped vectors are downloaded as separate images, producing broken or duplicated output in the generated code.
See all design guidelines for preparing your Figma files.
# Image masking
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/image-masking
Apply image masks correctly in Figma for accurate rendering in Rocket.new's Figma-to-code pipeline.
## What is image masking
When an image is masked with a layer, Figma creates a **mask object** in the layer hierarchy that includes both the mask shape and the layers being masked.
Incorrect masks cause broken layouts during import. Rocket relies on the mask hierarchy to determine which parts of an image to render.
## Best practices
* All inner layers used for masking must remain under the **mask object**.
* Group these inner layers properly so only the intended images are included.
* Perform masking with a **single group** that contains all masked layers.
See all design guidelines for preparing your Figma files.
# Invisible components
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/invisible-components
Remove hidden or masked Figma elements to avoid broken layouts in Rocket.new's Figma-to-code pipeline.
## Remove hidden elements
While designing, it is common to hide elements by placing them behind visible ones. These hidden elements should be removed before importing into Rocket.
Hidden elements reduce import accuracy. Rocket processes every layer it finds, so invisible elements can produce unexpected code and broken layouts.
In the example below, **Rectangle 2** is hidden behind **Rectangle 1**. Since it will never appear on screen, it should be deleted before importing.
## Avoid hiding with matching fills
Another common issue is hiding an element by applying the same fill as the background color. In the example below, a square box is hidden this way. This should also be avoided.
## Best practice
Make hidden components **visible** or simply **delete** them. Designs with invisible elements will reduce accuracy when imported into Rocket.
See all design guidelines for preparing your Figma files.
# Overlay controls
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/overlay-controls
Design dialogs, drawers, and bottom sheets in Figma for correct detection in Rocket.new's Figma-to-code pipeline.
## Why overlay design matters
Overlays like dialogs, drawers, and bottom sheets need to follow specific practices to be detected correctly during import.
## Requirements
When designing dialogs, drawers, and bottom sheets, include these three elements:
Common issues occur when overlays do not cover the screen fully, or when dialog edges extend beyond the screen bounds. Following the practices below ensures your overlay components are detected correctly.
## Best practices
1. The overlay must **cover the screen completely**. If it does not, the dialog, drawer, or bottom sheet will not be detected.
2. Place the component in the correct position inside the overlay:
* **Dialog** - exact center of the overlay
* **Bottom sheet** - aligned to the bottom
* **Drawer** - aligned to the left
3. Maintain the correct layer hierarchy:
* Top: dialog, drawer, or bottom sheet
* Below: the overlay layer
* Bottom: everything else in the screen
## Reference designs
See all design guidelines for preparing your Figma files.
# Overview
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/overview
Figma best practices for preparing files before import in Rocket.new's Figma-to-code pipeline.
The cleaner your Figma file, the better your generated app. Follow these guidelines before importing to avoid common issues and get production-ready results right away.
## Guidelines
Follow the complete set of best practices to prepare Figma files for Rocket.
Organize related elements into groups or components for cleaner imports.
Design overlays (like modals) clearly so Rocket imports them as separate layers.
Combine vector layers into single groups to avoid messy outputs.
Keep all design elements inside their screen frame.
Use proper masks so images render as intended.
Remove hidden layers that could cause broken layouts.
Delete placeholder or unused layers before importing.
Resize text boxes so Rocket matches your intended layout.
## What's next?
Your designs are ready. Import them into a web app.
Your designs are ready. Import them into a mobile app.
# Unwanted components
Source: https://docs.rocket.new/build/create/figma/figma-design-guidelines/unwanted-components
Remove duplicate and unused Figma screens before import in Rocket.new's Figma-to-code pipeline.
## Remove unused screens and layers
Do not duplicate previous screens when creating new ones. A common mistake is placing a rectangle over an old screen, duplicating it, and adding new components on top - leaving all the original components buried underneath. This creates unnecessary clutter that Rocket treats as intentional design.
Leftover components from duplicated screens inflate the generated code and cause confusion during import. Rocket treats every visible layer as intentional.
## Best practice
Only keep screen designs that are meant to appear in the app. Delete everything else before importing.
See all design guidelines for preparing your Figma files.
# Get your Figma URL
Source: https://docs.rocket.new/build/create/figma/get-your-figma-url
Copy the right Figma file or frame link to import your design in Rocket.new's Figma-to-code pipeline.
Rocket accepts two types of Figma links: a **full file URL** (for importing an entire flow) or a **frame URL** (for a specific screen). Both work the same way in Rocket - paste either one to get started.
## Before you begin
**You will need:**
* A [rocket.new](https://rocket.new) account.
* A Figma account and a design file with **view or edit permission**.
**Prototype links are not valid.** Use the file or frame URL instead. Prototype links will fail to import.
## Method 1: Share the full file
Copy the URL in two ways:
* Copy the **browser URL** while viewing the file.
* Or, click **Share** then **Copy link** in Figma.
**Success check:** You will see "Link copied!" in Figma.
## Method 2: Share a specific frame
Copy a frame URL in two ways:
* Select the frame, then copy the **browser URL**.
* Or, right-click the frame and choose **Copy/Paste as > Copy link to selection**.
**Success check:** You will see "Link copied to clipboard" in Figma.
## What's next?
Import your Figma designs into a React or Next.js web app.
Generate a Flutter mobile app from your Figma screens.
# Create a mobile app
Source: https://docs.rocket.new/build/create/figma/mobile-app
Convert Figma designs into deployable Flutter mobile apps using Rocket.new's Figma-to-code pipeline.
**Figma to Flutter mobile app in minutes.** Import your mobile screen designs and Rocket generates a complete Flutter app for iOS and Android with native navigation, styled components, and clean Dart code. Then iterate with chat to add state management, connect APIs, and submit to app stores.
Figma import is only available on the web browser at [rocket.new](https://rocket.new). It is not available in the Rocket mobile app.
## What you can build
Turn your social, fitness, food, or lifestyle app designs into working Flutter apps with real navigation and data.
**Try this prompt after import:**
```plaintext wrap theme={null}
Add pull-to-refresh on the feed screen, a bottom navigation bar, and connect Supabase for user profiles and authentication.
```
Convert CRM, task management, or internal tool designs into functional mobile apps.
**Try this prompt after import:**
```plaintext wrap theme={null}
Make the task list sortable by date and priority. Add swipe-to-delete and connect Firebase for real-time sync across devices.
```
Build mobile shopping experiences from your Figma product catalog and checkout designs.
**Try this prompt after import:**
```plaintext wrap theme={null}
Add a working shopping cart with quantity controls. Connect Stripe for mobile checkout and add order confirmation with push notifications.
```
## Before you begin
**You will need:**
* Access to [rocket.new](https://rocket.new).
* A Figma account and a design file with **view or edit permission**.
Not sure how to get your Figma link? **Follow this quick guide to grab the right URL.**
## Launch your mobile app
Click the **+** button at the lower left of the input box and select **Add from Figma**.
First time? **Connect your Figma account to Rocket** before importing.
In the **Import Figma design** dialog, paste your Figma frame or file URL and click **Start import**.
You can import up to **40 screens** at a time.
Select the mobile screens you want to import:
**Using the free plan?** Some features may be limited. Upgrade to keep generating without interruptions.
Click **Start import**, then select **Flutter** as your framework:
Rocket asks how your app should manage user actions and screen changes.
Pick the option that fits your app:
* **BLoC** - Great for apps with complex logic and data flows
* **GetX** - Lightweight and fast, ideal for quick builds
* **Provider** - Simple and reliable for most apps
* **Riverpod** - A flexible upgrade to Provider, great for scaling
* **Without state management** - Use only widgets (best for basic apps or prototypes)
Rocket parses your Figma file, optimizes images and layout, and generates clean Flutter code.
All status indicators turn green when your app is ready.
Once generation is complete, use the **Preview** tab at the top of the editor to view your Rocket-generated mobile app.
To view your original Figma design directly in Rocket, click the **** icon in the top-right navbar. This opens the Figma preview panel, showing your source design alongside the chat panel.
If your design looks slightly off, fine-tune it using chat. For example:
* **What you see:** The card has a shadow that does not appear in the original design
* **What Figma shows:** No shadow on the card
* **Fix it:** `"Remove the shadow from the product cards on the Home screen"`
Need to bring in more screens after the initial import?
Click the **+** button at the bottom of the chat, then select **Add new screen**.
* **From the same file:** Select from the list of available screens (already-imported ones are marked) and click **Start import**.
Select the screens you want to add and click **Start import**.
* **From a different file:** Choose **From different file**, then paste a new Figma URL. This starts a new task. Your current task is not affected.
## After your import
Once Rocket generates your Flutter app, iterate with chat to add functionality:
| Goal | Prompt |
| :--------------------- | :---------------------------------------------------------------------------- |
| Add navigation | `Add a bottom tab bar with Home, Search, Favorites, and Profile tabs.` |
| Connect a database | `Connect Supabase and load the product list from a "products" table.` |
| Add authentication | `Add login and signup screens with email/password auth and a splash screen.` |
| Fix visual differences | `The card shadow is too dark. Match the shadow from my Figma design exactly.` |
| Add animations | `Add a slide-in animation when navigating between screens.` |
| Push notifications | `Connect Firebase and add push notification support for order updates.` |
## Tips
* **Start with key screens.** Import your most important 5-10 screens first, then add more incrementally.
* **Choose the right state management.** For simple apps, Provider or no state management works fine. For complex apps with lots of data flow, use BLoC or Riverpod.
* **Use the Figma preview.** Click the icon in the top-right navbar to view your original Figma design directly in Rocket. Use the **Preview** tab to see the Rocket-generated app.
* **Fix visual mismatches in chat.** If a shadow, spacing, or color does not match, describe the difference and Rocket corrects it.
* **Follow the design guidelines.** Mobile frames should be between 200px and 800px wide. See the [guidelines](/build/create/figma/figma-design-guidelines/overview).
* **Prototype links do not work.** Use file or frame URLs, not prototype links.
## What's next?
Refine your imported app with natural language prompts.
Add payments, databases, AI, email, and analytics.
Test your Flutter app on real devices or emulators.
Publish your Flutter app to the App Store and Google Play.
# Overview
Source: https://docs.rocket.new/build/create/figma/overview
Turn Figma designs into production-ready code with Rocket.new Build. Import files and generate working web and mobile apps.
**Your designs, running as real apps.** Import Figma files or frames and Rocket generates production-ready code that matches your design - layout, colors, typography, spacing, and components. No manual frontend work.
Figma import is only available on the web browser at [rocket.new](https://rocket.new). It is not available in the Rocket mobile app.
## When to use Figma import
| Scenario | Best starting method |
| :----------------------------------------------------------------- | :----------------------------------------------------- |
| You have completed Figma designs | **From Figma** (you are here) |
| You have a rough idea but no designs | [From an idea](/build/create/from-an-idea) |
| You have a screenshot, PDF, spreadsheet, or other file (not Figma) | [From an attachment](/build/create/from-an-attachment) |
| You have an existing live website | [Redesign](/build/create/commands/redesign) |
## What you can build
Import your full Figma file and generate a responsive React or Next.js web app that matches your designs screen by screen.
**Try this prompt after import:**
```plaintext wrap theme={null}
Make the sidebar collapsible and add smooth transitions between pages. Connect Supabase for user authentication.
```
Convert mobile screen designs into Flutter apps for iOS and Android with proper navigation and native feel.
**Try this prompt after import:**
```plaintext wrap theme={null}
Add pull-to-refresh on the feed screen, swipe-to-delete on list items, and connect Firebase for push notifications.
```
Import your design system components and generate reusable, styled code components that maintain consistency across your app.
**Try this prompt after import:**
```plaintext wrap theme={null}
Extract the button, card, and input components as reusable components. Add hover states and loading states to all buttons.
```
## Quick start
Copy the URL of your Figma file, or select a specific frame to copy its URL. You need view or edit access to the file.
Step-by-step guide for copying the right URL.
Click the **+** button at the lower left of the input box and select **Add from Figma**.
Paste your Figma link into the dialog and click **Start Import**. Select your frames, choose a tech stack, and Rocket builds your app.
* You need either **view or edit** permission on the Figma file.
* Prototype links are not valid. Use the file or frame URL instead.
## Platform guides
Full walkthrough for converting Figma designs into React or Next.js web apps.
Full walkthrough for generating Flutter mobile apps from your Figma screens.
## Prepare your designs
Follow these guidelines to get the best results from Figma import:
Best practices for structuring frames, grouping layers, handling vectors, and avoiding common import issues.
## Troubleshooting
Understand Figma's API rate limits by plan and when you can safely retry.
## What's next?
Refine your imported app using natural language prompts.
Add payments, databases, AI, and more to your Figma-generated app.
Click any element to tweak colors, text, spacing, and layout.
Publish your Figma-generated app to the web.
# Rate limit errors
Source: https://docs.rocket.new/build/create/figma/rate-limit-errors
Understand Figma API rate limit errors and retry timing in Rocket.new's Figma-to-code pipeline.
You will see this page when Rocket shows:
**"Figma's API rate limit reached. Please try again later."**
Use it to know when you can safely press **Retry**.
## What this error means
Figma has stopped accepting more API requests from your account. Rocket is showing you that Figma's limit for your account has been reached.
Nothing in your Rocket project or Figma file is broken.
## Figma limits by plan and seat
| Seat | Starter | Professional | Organization | Enterprise |
| :------------ | :-------------- | :-------------- | :-------------- | :-------------- |
| View / Collab | Up to 6 / month | Up to 6 / month | Up to 6 / month | Up to 6 / month |
| Dev / Full | Up to 6 / month | 10 / min | 15 / min | 20 / min |
For the full and most up-to-date limits.
If you purchase a Figma subscription after connecting Figma in Rocket, you need to reconnect your Figma account. Otherwise, you will continue to face the same rate limit issues.
## When you can press Retry
| Plan | Seat | Limit | What to do |
| :----------- | :------------ | :--------------------- | :----------------------------------------------------------------- |
| Any plan | View / Collab | 6 requests per month | Wait until next month, or ask your admin to move you to Dev / Full |
| Starter | Dev / Full | 6 requests per month | Wait until next month, or upgrade your plan |
| Professional | Dev / Full | 10 requests per minute | Wait **1 minute**, then press **Retry** once |
| Organization | Dev / Full | 15 requests per minute | Wait **1 minute**, then press **Retry** once |
| Enterprise | Dev / Full | 20 requests per minute | Wait **1 minute**, then press **Retry** once |
Pressing **Retry** repeatedly will not bypass the limit. Always wait first, then retry once.
## What's next?
Continue importing your Figma designs into a web app.
Continue importing your Figma designs into a mobile app.
# Create a web app
Source: https://docs.rocket.new/build/create/figma/web-app
Convert Figma designs into deployable React or Next.js web apps using Rocket.new's Figma-to-code pipeline.
**Figma to production-ready web app in minutes.** Import your Figma designs and Rocket generates a complete React or Next.js web app with responsive layouts, styled components, and clean code that matches your design. Then iterate with chat to add functionality, connect integrations, and ship.
Figma import is only available on the web browser at [rocket.new](https://rocket.new). It is not available in the Rocket mobile app.
## What you can build
Turn your marketing design into a live, responsive site with SEO-ready code.
**Try this prompt after import:**
```plaintext wrap theme={null}
Add a contact form that sends submissions to my email via Resend. Make the hero section animate on scroll.
```
Transform dashboard, SaaS, or product designs into interactive web apps with real logic.
**Try this prompt after import:**
```plaintext wrap theme={null}
Connect Supabase for user authentication. Add login/signup flows and protect the dashboard behind auth. Make the sidebar navigation functional.
```
Convert product catalog designs into working stores with cart and checkout.
**Try this prompt after import:**
```plaintext wrap theme={null}
Connect Stripe for checkout. Make the product grid filterable by category and add a working shopping cart with quantity controls.
```
## Before you begin
**You will need:**
* Access to [rocket.new](https://rocket.new).
* A Figma account and a design file with **view or edit permission**.
Not sure how to get your Figma link? **Follow this quick guide to grab the right URL.**
## Launch your web app
Click the **+** button at the lower left of the input box and select **Add from Figma**.
First time? **Connect your Figma account to Rocket** before importing.
In the **Import Figma design** dialog, paste your Figma frame or file URL and click **Start Import**.
You can import up to **40 screens** at a time.
Rocket shows the frames from your Figma file. Select the ones you want to build, then click **Start import**.
**Using the free plan?** Some features may be limited. Upgrade to keep generating without interruptions.
Choose your tech stack. Options include **Next.js**, **HTML**, and **React**:
Rocket fetches your Figma design assets, optimizes layers, and generates structured, readable code screen by screen.
All status checks turn green when your web app is ready.
Once generation is complete, use the **Preview** tab at the top of the editor to view your Rocket-generated web app.
To view your original Figma design directly in Rocket, click the **** icon in the top-right navbar. This opens the Figma preview panel, showing your source design alongside the chat panel.
**Want to make changes?** Just describe what you want in the chat. No need to go back to Figma.
Try things like:
* "Make the hero section background dark and the text white"
* "Add dark mode to the website"
* "Increase the size of the hero image"
* "Switch the font to Roboto and make the header smaller"
Need to bring in more screens after the initial import?
Click the **+** button at the bottom of the chat, then select **Add new screen**.
* **From the same file:** Select from the list of available screens (already-imported ones are marked) and click **Start import**.
Select the screens you want to add and click **Start import**.
* **From a different file:** Choose **From different file**, then paste a new Figma URL. This starts a new task. Your current task is not affected.
## After your import
Once Rocket generates your web app, iterate with chat to bring it to life:
| Goal | Prompt |
| :--------------------- | :--------------------------------------------------------------------------------- |
| Add interactivity | `Make the navigation links functional and add smooth page transitions.` |
| Connect a database | `Connect Supabase and store form submissions in a "contacts" table.` |
| Add authentication | `Add login and signup pages with email/password auth via Supabase.` |
| Improve responsiveness | `Make the layout fully responsive. Stack the sidebar below the content on mobile.` |
| Fix visual differences | `The hero section font size does not match my Figma design. Make it 48px bold.` |
| Add dark mode | `Add a dark mode toggle that switches all colors to a dark theme.` |
## Tips
* **Start with key screens.** Import your most important 5-10 screens first, then add more incrementally.
* **Use the Figma preview.** Click the icon in the top-right navbar to view your original Figma design directly in Rocket. Use the **Preview** tab to see the Rocket-generated app.
* **Fix visual mismatches in chat.** If a shadow, spacing, or color does not match, describe the difference and Rocket corrects it.
* **Follow the design guidelines.** Properly grouped layers, correct frame sizes, and clean vectors produce significantly better results. See the [guidelines](/build/create/figma/figma-design-guidelines/overview).
* **Prototype links do not work.** Use file or frame URLs, not prototype links.
## What's next?
Refine your imported app with natural language prompts.
Add payments, databases, AI, email, and analytics.
Best practices for preparing Figma files for import.
Publish your Figma-generated web app.
# From an attachment
Source: https://docs.rocket.new/build/create/from-an-attachment
Upload images, PDFs, spreadsheets, or CSVs and Rocket.new builds a working app from your real content.
**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.
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.
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.
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 what you want and Rocket.new generates a complete, production-ready app from your prompt.
## 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: Next.js for web, Flutter for mobile. You cannot change the framework after the task is created.
## 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.
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.
Once your prompt is in the input field, click the **send** button or press Enter.
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.
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.*
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.
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
Import a Next.js TypeScript repo from GitHub and continue building with Rocket.new AI.
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**.
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**.
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
Share your Rocket.new apps as remix links - recipients clone your full app and customize it.
**Turn any task into a shareable starter.** Generate a remix link for any task and share it with anyone. Recipients get an instant clone of your entire app - screens, code, and integrations - ready to customize with their own credentials.
Creating a remix link requires a paid plan (Pro or above). Anyone with the link can clone the project for free.
## Use cases
Build a project for a client and share the remix link. They clone it, add their own API keys, and own the project.
Create reusable starter projects for common app types and share them with your team or community.
Share working demos of your projects. Viewers can clone and explore the full codebase.
Build example projects for courses or tutorials. Students clone 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 task you want to share.
### Creating a remix link
Open the 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 generates a unique shareable URL. Click **Copy link** and share it with anyone.
Anyone with the link can clone your 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.
Click **Remix in Rocket** to clone the entire task to your account.
**Success check:** You will be redirected to your new task with a confirmation message.
After cloning, add any required API keys or credentials for integrations used in the project (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 project 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 task to the web once you have made it yours.
# Start from a template
Source: https://docs.rocket.new/build/create/using-templates
Pick a template, customize it with chat, ship a production-ready app. Zero credits consumed.
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) |
| You have completed Figma designs | [From Figma](/build/create/figma/overview) |
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**.
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.
Hover over a card to reveal the link icon and preview it live in the browser before committing.
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.
**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.
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.
Tap any template to see details, included pages, and layout screenshots.
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.
# Agent sleeping
Source: https://docs.rocket.new/build/editor/agent-sleeping
Wake up the Rocket.new agent after inactivity and resume your task 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**
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 APIs from Postman, cURL, or Swagger into Rocket and attach them to UI elements 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**.
## 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**.
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**.
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**.
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**.
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**.
### 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.
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)
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**.
## 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
Build and iterate on your app through Rocket.new chat - describe changes in plain language and the AI writes production code.
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
**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.
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.
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, labels, and per-version launch
* [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.
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
Browse project files and make direct edits inside the Rocket.new Build editor.
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.
### 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
### 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
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
### 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
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.
### 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.
### Refresh
Tap the **Refresh** button in the top-right corner to reload the editor and file tree.
### 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
Execute precise edits with Rocket.new slash and @ commands inside the Build editor.
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.
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.
### 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.
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
Inject any code into your Rocket.new app through chat - scripts, embeds, widgets, and custom components.
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 and secrets securely in Rocket without hardcoding them.
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**.
In the Settings sidebar under **Task**, click **Environment**. The panel opens showing your existing variables across **Staging** and **Production** tabs.
## 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.
| Variable | Service |
| :------------------------------ | :--------------- |
| `NEXT_PUBLIC_SUPABASE_URL` | Supabase |
| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Supabase |
| `STRIPE_SECRET_KEY` | Stripe |
| `OPENAI_API_KEY` | OpenAI |
| `GEMINI_API_KEY` | Google Gemini |
| `ANTHROPIC_API_KEY` | Anthropic |
| `RESEND_API_KEY` | Resend |
| `NEXT_PUBLIC_GA_MEASUREMENT_ID` | Google Analytics |
| `NEXT_PUBLIC_ADSENSE_ID` | Google AdSense |
## 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
### 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.
### 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.
### 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
Available device models:
* Samsung Galaxy S23
* iPhone SE
* iPhone 14 Pro
* iPhone 16 Pro
* iPhone 16 Pro Max
* iPhone 17 Pro
### 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.
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.
### 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.
### 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
Change fonts, colors, logo, and images across your Rocket.new site from one panel - no code needed.
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.
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.
**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.
**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.
| 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.
* **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 build saves a version. Compare diffs, roll back, label milestones, and deploy any version directly 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 four 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 |
| **Launch** | Deploys this specific version to staging or production |
## 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.
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 all changes made after the selected version. This cannot be undone. If you want to keep your current state, create a label before rolling back (see [Create label](#create-label) below).
Locate the version you want to return to in the chat.
Click **Rollback**.
Click **Rollback now** to confirm.
## Create label
Labels let you name and bookmark a specific version for easy reference later.
Locate the version in the chat.
Click **Create label**.
Type a name and press Enter.
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.
Locate the version in the chat.
Click **Launch**.
Select **Staging** or **Production**.
| 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
Set Rocket.new tasks as public or private to control who sees your work.
Every Build task has its own visibility setting. You choose who can view each task: just you, or anyone with the link. Visibility is set per task, giving you fine-grained control over what you share.
## Visibility levels
| Level | Who can see it | Best for |
| :---------- | :-------------------------- | :--------------------------------------------------------- |
| **Public** | Anyone with the link | Showcasing work, sharing examples, community contributions |
| **Private** | Only you (the task creator) | Personal work, sensitive data, draft explorations |
Public tasks display a Rocket watermark. Anyone can view the output, but only the task creator can edit it. Private tasks are completely hidden from other users even if they have the URL.
Setting a task to Private requires a paid plan (Pro or above). Free plan tasks are public by default.
## Set task visibility
You can set visibility when creating a task, or change it at any time from inside the task.
Before submitting a new task from **Home**, click the **lock icon** next to the send button to choose **Public** or **Private**.
Open the task, then click the **task name** at the top-left to open the dropdown.
Select **Settings** from the dropdown.
In the **Overview** panel, open the **Task Visibility** dropdown and choose **Public** or **Private**. The change takes effect immediately.
## How visibility affects sharing
**Public tasks:** Copy the task URL and share it with anyone. Recipients can view the task output without logging in.
**Private tasks:** Private tasks are completely hidden from other users. 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. 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 links stop working immediately. Anyone who previously had access will see an error page. If you switch back to public, the same link becomes active again.
No. Each task has its own visibility setting. You can have a mix of public and private tasks within a single [project](/getting-started/project/overview).
## What's next?
Share tasks with teammates via link or email.
Rename, star, move, or delete a task.
# Visual edit
Source: https://docs.rocket.new/build/editor/visual-edit
Click any element in your Rocket.new app preview to change text, style, spacing, or images without writing code.
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**.
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.
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**.
### 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**.
### 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**.
### 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**.
### 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.
### 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
Build an Android APK from your Rocket.new mobile app and install it on a device for native testing.
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.
Click the **APK** tab, then click **Build** to start generating your APK.
A progress bar shows the build status. If it takes more than a minute, Rocket emails you a download link when it is ready.
When the build finishes, click **Download** to save the `.apk` file to your computer. Click **Build new APK** to rebuild with your latest changes.
From your project screen, tap **More** in the header bar.
Tap **Launch on Android phone** from the menu.
Tap **Build APK** to start the build.
A progress indicator shows the build status. If it takes more than a minute, Rocket emails you a download link when it is ready.
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.
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.
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
Submit your Rocket.new-built Flutter app to the Apple App Store for public iOS 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
Submit your Rocket.new-built Flutter app to Google Play for public Android distribution.
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
Deploy your Rocket.new mobile app as a browser-accessible web preview for instant sharing and testing.
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.
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.
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.
In the settings modal, tap **Launch on Netlify**.
Tap **Launch** to start deployment. The button changes to **Launching** while Rocket deploys your app.
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.
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
Choose the right distribution method for your Rocket.new mobile app - web links, APK downloads, or app store submissions.
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
Purchase and connect a domain to your Rocket.new app without leaving the editor. Part of the only vibe solutioning platform with research, building, and intelligence.
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.
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**.
Switch to the **Production** tab. It shows a **Custom domain** input field with a **Purchase a new domain** link. Click it.
The IONOS domain search opens inside Rocket. Type the name you want and click **Search**.
Browse available domains and their pricing. Click the **→** button next to the domain you want.
Rocket redirects you to IONOS to complete payment. Keep this screen open. Rocket connects your domain automatically once the purchase is confirmed.
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
Connect your own domain to a Rocket.new app with automatic HTTPS. Rocket can configure DNS automatically for supported providers, or you can add records manually.
Connect any domain you own to your Rocket app so it is reachable at your custom address with automatic HTTPS.
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.
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**.
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.
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**.
Add your required environment variables in the Production environment settings, then click **Done** to continue.
Rocket opens a popup explaining that it will configure your domain automatically. Click **Continue**.
Rocket shows a login screen for your domain provider. Enter your credentials and click **Continue** to grant one-time permission to configure DNS.
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.
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.
Once live, the Launch panel shows your domain URL. You can click it to open your app.
## 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.
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.
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.
In the settings modal, tap **Launch on custom domain**.
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.
Copy the DNS records that Rocket shows you.
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.
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 for testing before going live.
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.
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.
Rocket uses a default Netlify account if you have not connected your own. You can [connect your Netlify account](/build/connectors/netlify) to use your own.
When deployment finishes, you see your staging URL. Share it with teammates to collect feedback, or open it yourself to test.
Click **Update** any time to push your latest changes to the same URL.
Click **Unpublish** to take the staging URL offline. Unpublishing requires a paid plan (Pro or above).
After unpublishing, the link stops working immediately. You can republish at any time.
## 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.
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
Monitor visits, bounce rate, traffic sources, and campaigns with Rocket.new built-in analytics - zero setup required.
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.
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. |
## 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
Grade your Rocket.new site on Core Web Vitals and fix issues in one click with the built-in performance dashboard. Part of the only vibe solutioning platform with research, building, and intelligence.
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.
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.
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.
### 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.
Import a Figma design and convert it to working code.
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 your Rocket.new site with WCAG 2.1 AA compliance - alt text, ARIA labels, keyboard navigation, and contrast fixes.
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
Implement GDPR, CCPA, and privacy compliance in your Rocket.new site with consent banners and policies.
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 your Rocket.new site for Google rankings, AI search citations, and social previews with built-in SEO tools.
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
Go from idea to a live app in 10 minutes with Rocket.new Build.
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.
# April 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/april/week-4
Rocket launches with natural language editing, Figma to code, and a full 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](/billing-and-subscription/pricing)
New
* **Visual editing**: Click any element to modify it directly. Works across React, Flutter, and Next.js. [Learn more](/command-center/visual-edit)
* **Live preview**: Multi-tab support with real-time updates as you make changes. [Learn more](/command-center/preview)
Rocket is here.
New
* **Natural language editing**: Describe changes in plain English across React, HTML, and Flutter. [Learn more](/command-center/chat-interface)
* **Figma to code**: Convert Figma designs into working apps for React, HTML, Flutter, and Next.js. [Get started](/ignition/figma/overview)
# August 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/august/week-1
Custom domains, APK downloads, faster Figma-to-Flutter, 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 the [Figma integration](/ignition/figma/overview) significantly quicker.
New
* **Supabase Storage.** Upload, retrieve, and manage files with zero setup through [Supabase Storage buckets](/build/connectors/supabase/storage-buckets).
# August 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/august/week-2
Workflow polish, bug fixes, and system stability.
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.
# August 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/august/week-3
Error visibility, friendlier setup flows, and better long-thread context.
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.
# August 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/august/week-4
SMS via Twilio, smarter AI agent, Google Maps for Flutter, and 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.
# December 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/december/week-1
Platform stability and reliability improvements.
Improved
* **Platform stability**: A round of stability work covering edge case fixes, UI consistency, and reliability improvements across the platform.
# December 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/december/week-2
Rocket mobile app now available on iOS.
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)
# December 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/december/week-3
Smarter generation, smart suggestions, and better HTML structure.
New
* **Smart suggestions**: Context-aware build ideas based on your current project. Click one to turn it into a prompt. [Learn more](/command-center/chat-interface#smart-suggestions)
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.
# December 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/december/week-4
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](/command-center/visual-edit)
* **API integrations**: Import from Postman, cURL, or Swagger and Rocket wires the endpoints into your UI automatically. [Learn more](/command-center/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](/command-center/preview#capture-screenshots)
* **Inject custom code**: Add tracking scripts, widgets, fonts, or embeds through chat without touching the codebase. [Learn more](/command-center/inject-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.
# December 2025, Week 5
Source: https://docs.rocket.new/changelog/2025/december/week-5
Error-free first generation, image improvements, and Supabase Flutter setup.
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](/command-center/commands)
Fixed
* **Supabase Flutter setup**: Required package dependencies are added automatically during project creation. Eliminates a common source of build errors.
# July 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/july/week-1
Responsive Figma-to-code, accuracy boost, and smarter component detection.
Improved
* **Responsive Figma-to-code output.** Generated code now automatically adapts to Mobile, Tablet, Laptop, and Desktop views. Get started with the [Figma integration](/ignition/figma/overview).
* **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. Review the [design guidelines](/ignition/figma/figma-design-guidelines/design-guidelines) for best results.
# July 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/july/week-2
Reusable components, backend stability, mobile fixes, and foldable phone support.
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.
# July 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/july/week-3
Safer publishing, better instruction parsing, and proactive 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](/command-center/visual-edit).
# July 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/july/week-4
Connect existing Supabase projects, image memory, and smarter 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.
# July 2025, Week 5
Source: https://docs.rocket.new/changelog/2025/july/week-5
Backup LLM providers, faster generation, and cost-free Fix It for paid users.
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.
# June 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/june/week-1
Multi-error fixing, preview navigation, and mobile editing improvements.
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.
# June 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/june/week-2
Flutter preview links, templates, faster follow-ups, and Supabase improvements.
New
* **Flutter preview links**: Share your Flutter app via URL with no install required. [Learn more](/command-center/preview)
* **Templates**: Start from pre-built projects with smart suggestions tailored to your prompt. [Explore templates](/ignition/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](/command-center/project-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.
# June 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/june/week-3
Fewer generation errors, mobile fixes, and Netlify publish feedback.
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.
# June 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/june/week-4
Image uploads, batch Figma conversion, and multi-element editing.
Improved
* **Image uploads**: Upload custom logos, screenshots, and mockups as design references for more accurate generation. [Learn more](/ignition/from-an-attachment)
* **Figma to code**: Import up to 40 screens at once with improved layout accuracy. [Get started](/ignition/figma/overview)
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.
# May 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/may/week-1
Subscription cancellation fix, cookie consent, and Netlify branding update.
Fixed
* **Subscription cancellation fix**: End-of-cycle cancellation now processes correctly so you retain access until your billing period ends. [Learn more](/billing-and-subscription/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.
# May 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/may/week-2
Image uploads, natural language editing, and smarter code generation.
New
* **Image uploads**: Use screenshots, logos, and mockups as design references for more accurate results. [Learn more](/ignition/from-an-attachment)
* **Natural language editing**: Describe changes in plain English and Rocket implements them automatically. [Learn more](/command-center/chat-interface)
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](/command-center/chat-interface)
Improved
* **Integration categories**: Services are now grouped by type for easier discovery. [Browse integrations](/build/connectors/overview)
# May 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/may/week-3
Cross-platform design system and redesigned 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.
# May 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/may/week-4
Figma screen tracking, tab notifications, and key 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.
# November 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/november/week-1
Next.js and React TypeScript support with full integrations, plus 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)
# November 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/november/week-2
More built-in commands and Flutter SDK dependency validation.
New
* **More built-in commands** let you run common actions with short triggers instead of writing full prompts. [See all commands](/command-center/commands)
Improved
* **Flutter SDK package validation** catches invalid or mismatched dependencies before they cause build failures.
# October 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/october/week-1
Backend performance and reliability work.
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.
# October 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/october/week-2
Google Auth for Flutter, slash and at commands, and 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](/command-center/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.
# October 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/october/week-3
Code quality and error handling improvements.
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.
# October 2025, Week 4
Source: https://docs.rocket.new/changelog/2025/october/week-4
Token rollover, faster streaming, and auto-run safe 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](/billing-and-subscription/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.
# September 2025, Week 1
Source: https://docs.rocket.new/changelog/2025/september/week-1
Honest failure status and Supabase errors in the 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.
# September 2025, Week 2
Source: https://docs.rocket.new/changelog/2025/september/week-2
Generation drops to 3 minutes, Amazon Bedrock, and simpler integrations.
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.
# September 2025, Week 3
Source: https://docs.rocket.new/changelog/2025/september/week-3
Mission Control redesigned with space-black panels and updated navigation.
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.
# April 2026, Week 1
Source: https://docs.rocket.new/changelog/2026/april/week-1
Internal updates and improvements.
Improved
* Working on updates - more coming next week.
# April 2026, Week 2
Source: https://docs.rocket.new/changelog/2026/april/week-2
Rocket 1.0 - full redesign, projects system, Solve, Intelligence, GitHub Clone, agent sleep, cross-task context, and more.
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)
# April 2026, Week 3
Source: https://docs.rocket.new/changelog/2026/april/week-3
Connector fixes, improved error messaging, and agent-aware UI controls.
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.
# April 2026, 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.
# April 2026, 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.
# February 2026, Week 1
Source: https://docs.rocket.new/changelog/2026/february/week-1
Remove screens command, default screen selection, and 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.
# February 2026, Week 2
Source: https://docs.rocket.new/changelog/2026/february/week-2
E-commerce project type, Next.js defaults, HTML deprecated, 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.
Deprecated
* **HTML for landing pages and websites**: New landing pages and websites are now built with Next.js. HTML remains available through [Figma to Code](/build/create/figma/web-app). Existing HTML projects continue to work and can still be edited.
# February 2026, Week 3
Source: https://docs.rocket.new/changelog/2026/february/week-3
Build from a URL, website redesign, workspaces, and live web search.
New
* **Build from a URL**: Give Rocket a website URL and it reads the design system, then generates a matching site. [Learn more](/ignition/from-a-url)
* **Redesign existing websites**: Point Rocket at a live site and it redesigns it while preserving the content you want to keep. [Learn more](/ignition/from-a-url)
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](/launchpad/workspaces)
New
* **Logo generation**: Landing pages get an auto-generated logo that matches the site style and color palette.
# February 2026, Week 4
Source: https://docs.rocket.new/changelog/2026/february/week-4
Claude Sonnet 4.6, accessibility audits, performance optimizations, 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](/mission-control/improve-accessibility)
* **Automatic performance optimizations**: Image compression, code splitting, and lazy loading applied on every build automatically. [Learn more](/mission-control/site-performance)
New
* **SEO commands**: Analyze pages and apply meta tags, Open Graph, JSON-LD, sitemaps, and robots.txt to your site code. [Learn more](/mission-control/improve-seo)
* **GEO and AEO commands**: Structure content for AI search engines. Adds FAQ sections, entity formatting, and source authority signals. [Learn more](/mission-control/improve-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](/mission-control/add-privacy-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.
# January 2026, Week 1
Source: https://docs.rocket.new/changelog/2026/january/week-1
Share with Remix, fallback LLM, browser notifications, Next.js 15, 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](/ignition/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](/launchpad/account-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.
# January 2026, Week 2
Source: https://docs.rocket.new/changelog/2026/january/week-2
APK auto bug fix, image attachments, 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](/ignition/from-an-attachment#images)
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](/command-center/apis)
# January 2026, Week 3
Source: https://docs.rocket.new/changelog/2026/january/week-3
Built-in site analytics, Flutter web checks, and Supabase V2.
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](/mission-control/site-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.
# January 2026, Week 4
Source: https://docs.rocket.new/changelog/2026/january/week-4
Multi-page website generation and platform reliability improvements.
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.
# March 2026, Week 1
Source: https://docs.rocket.new/changelog/2026/march/week-1
11 new integrations and a Performance tab.
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](/mission-control/site-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.
# March 2026, 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`](/command-center/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.
Deprecated
* **React**: All new web app use cases are now built with Next.js. React remains available through [Figma to Code](/build/create/figma/web-app). 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](/ignition/from-an-attachment)
# March 2026, 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](/mission-control/site-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.
# March 2026, Week 4
Source: https://docs.rocket.new/changelog/2026/march/week-4
ICO image upload support, image generation fix in visual edits, and SEO audit reliability improvements.
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.
# May 2026, Week 1
Source: https://docs.rocket.new/changelog/2026/may/week-1
Workspaces Listing view, Supabase refresh token fix, hydration error detection, and intelligence credit improvements.
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.
# May 2026, 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.
# May 2026, Week 3
Source: https://docs.rocket.new/changelog/2026/may/week-3
Enhanced Mobile Preview navigation with route updates and URL handling for tab changes.
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.
# Appearance
Source: https://docs.rocket.new/getting-started/account/appearance
Set Rocket.new to light mode, dark mode, or system theme.
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.
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.
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
Enable push and audio alerts in Rocket.new for build status and 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.
In the account menu, click **Settings**.
In the Settings panel, click **Notifications** under the Account section.
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**.
On the home screen, tap the **Settings** icon in the footer bar at the bottom.
In the settings sheet that slides up, toggle the **Notifications** switch to ON (green).
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
Open the Rocket.new notification panel for requests, updates, and task alerts.
The notification panel keeps you informed about activity across your workspaces, projects, and tasks. It organizes activity into three tabs: **Requests**, **Updates**, and **Notifications**.
## 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:
* **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
Update your avatar, name, and location in Rocket.new profile settings.
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.
In the account menu, click **Settings**. The Profile tab opens by default.
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.
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.
The Profile modal shows your current picture, name, email, and location.
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.
## 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
Control who sees what in Rocket.new with workspace, project, and task sharing.
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.
Access cascades downward.
* A workspace member can access all projects in the workspace based on their role.
* A project member can access all tasks in the project.
* Task-level sharing does **not** grant access to the parent project or workspace.
## When to use which level
| Level | Best for | Example |
| :------------ | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------- |
| **Workspace** | Core team members who need access to everything: billing, connectors, all 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 access to everything, add them to the workspace.
Reserve workspace-level invitations for people who genuinely need broad visibility. Use task sharing for clients, advisors, and stakeholders who rarely need project access.
## 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, connect services, invite members |
| **Viewer** | Read-only: see all outputs and leave feedback, 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. Each new member is automatically assigned a default credit limit of **100 credits per month**. You can change this at any time from **Settings → Members** using the **Credit limit** dropdown on the member's row.
The credit limit controls how many credits that member can consume per month across all their activity in the workspace. 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 tasks and control visibility.
# Project
Source: https://docs.rocket.new/getting-started/collaboration/project
Invite collaborators to a Rocket.new project and manage their roles.
Project-level collaboration lets you invite teammates directly into a project. Collaborators gain access to all tasks, shared context, and connected services within that project. Use this for day-to-day teamwork on a specific initiative: a product launch, a research sprint, or a website redesign.
Inviting a collaborator grants access to all existing tasks in the project. Tasks created after the invitation are not automatically shared. Share them individually at the [task level](/getting-started/collaboration/task) if needed.
## Steps
In the sidebar, click **Projects**.
Click the project you want to share.
In the right panel, click the **Collaborators** tab.
Type the collaborator's email address and select a role (**Editor** or **Viewer**) from the dropdown.
Before clicking **Invite**, decide whether to share existing tasks:
* **Ticked:** the collaborator can see 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.
## 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 | No |
Day-to-day collaborator. Editors can create tasks, iterate on existing work, upload files, connect services, and invite other collaborators.
Read-only access. Viewers can see all tasks and outputs 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-only access on a specific project.
## What's next?
Share individual tasks and control visibility settings.
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 individual Rocket.new tasks via email without exposing the full project.
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. Use this for external reviewers, clients, or stakeholders who only need to see one output.
## Steps
In the left sidebar, click **Tasks** to open your tasks list.
Click the task card you want to share.
In the task toolbar at the top-right, click the **Members** icon to open the sharing panel.
In the **Share your task** panel, type the recipient's email address **(1)** and select a role **(2)**: **Editor** or **Viewer**. See [Roles and permissions](#roles-and-permissions) for what each role can do.
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).
Task-level sharing does **not** grant access to the parent project or workspace. Recipients can only see the specific task you shared.
## Remove a collaborator
To remove someone's access to the task, open the **Share your task** panel, find the collaborator's row, and click their role dropdown.
In the **Share your task** 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 task immediately.
## Task visibility
Each task also has a visibility setting, either **Public** or **Private**, that controls who can see it independently of sharing. Visibility and sharing work together: you might set a task to Private but still share it with a specific client via email. See [task visibility settings](/build/editor/visibility) for the full breakdown of visibility levels, plan availability, and how to change settings.
## Roles and permissions
| Permission | **Editor** | **Viewer** |
| :------------------------------- | :--------- | :--------- |
| **View task and outputs** | Yes | Yes |
| **Chat and iterate on the task** | Yes | No |
| **Upload files** | Yes | No |
## 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.
Understand how visibility options vary by plan.
# Workspace
Source: https://docs.rocket.new/getting-started/collaboration/workspace
Invite members and assign roles at the Rocket.new workspace level.
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 the projects and tasks that exist at that moment. Any project or task created after the invitation is not automatically shared with them and requires a separate invitation at the [project](/getting-started/collaboration/project) or task level.
## Steps
Click your workspace name in the top-left of the sidebar.
In the dropdown, click **Invite members**. You can also reach this screen via **Settings → Members**.
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.
Before sending, decide how much of the workspace to share:
* **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.
Click **Invite** when ready.
After sending the invitation, the invitee appears in the members list with a **Pending** badge. Every new member is automatically assigned a default credit limit of **100 credits per month**. Use the **Credit limit** dropdown on their row if you want to change this value.
Credit limits apply at all collaboration levels: workspace, project, and task. You can set or update the limit at any time from **Settings → Members**.
If the default of 100 credits per month does not fit your needs, open the **Credit limit** dropdown on the member's row and choose a different value. Available options range from 0 to 700 or more. Setting the limit to **0** prevents the member from generating any output.
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.
The invitee receives an email with a link to accept. You can also copy the invite link directly using the copy icon next to their name in the members list. When they accept, you will see a confirmation in the **Requests** tab of the [notification panel](/getting-started/account/notifications).
## 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 | No |
| **Change member roles** | No | No |
| **Archive or delete projects** | Yes | No |
| **Manage billing** | No | No |
Day-to-day collaborator. Editors can create tasks, iterate on existing work, upload files, connect services, and invite new members.
Read-only access. Viewers can see all tasks and outputs 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-only access 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.
Select **Revoke invite** from the dropdown. The pending row is removed immediately and the invitation link in the recipient's email becomes invalid.
## Manage workspace members
To change a member's role, update their credit limit, or remove them, go to **Settings → Members**. Click the role dropdown on the member's row and select **Remove** to revoke their access entirely.
The members panel also shows the credit usage for every member, so you can see at a glance how many credits each person has consumed against their limit. New members are assigned a default limit of **100 credits per month**, which you can adjust at any time from this panel.
## Best practices
Invite core team members to the workspace, add collaborators to specific projects, and share individual tasks with external reviewers. Avoid defaulting to workspace-level invitations for everyone, since this grants broad visibility across all existing projects.
## What's next?
Invite members to specific projects and collaborate on tasks.
Share individual tasks and control visibility.
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.
A popup opens with three options. Pick the one that works best for you.
Click **Continue with Google**.
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**.
Enter your work email address and click **Continue with SSO**. You will be redirected to your organization's identity provider to complete authentication.
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**.
Check your inbox for an email from Rocket with a 6-digit OTP. Paste it into the field and click **Continue**.
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.
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.
Tap **Continue with Google**, then select your Google account.
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.
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**.
Check your inbox for a 6-digit OTP from Rocket. Paste it into the field and tap **Continue**.
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.
## 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
How Rocket.new's credit system works. One balance for Solve, Build, and Intelligence.
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 when you use:
* **Build:** Natural language app generation, UI styling, responsiveness, attachments
* **Consultant-grade solutions (Solve):** Strategic research, PRDs, market analysis, competitive reports
* **Competitive intelligence:** Competitor monitoring setup, signal tracking, brief generation
| Action | Credit usage |
| :-------------------------------------------------------- | :----------- |
| 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 |
| Buying 2+ credit packs 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
Rocket.new is the complete vibe solutioning platform. Research, build, and monitor competitors in one place. Start free at rocket.new.
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.
## 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, submitted directly to the App Store and Google Play.
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. Every plan includes a monthly credit allocation that powers Build, Solve, and Intelligence. [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/month | What's included |
| :---------- | :--------- | :------------ | :---------------------------------------------------------------------------------------------------------------- |
| **Free** | USD 0 | 20 | Build production-ready websites, landing pages, web apps, mobile apps |
| **Pro** | USD 25/mo | 100 | Build production-ready websites, landing pages, web apps, mobile apps |
| **Rocket** | USD 50/mo | 250 | Build + Consultant-grade solutions on demand + Competitive intelligence |
| **Booster** | USD 250/mo | 1,500 | Build + Consultant-grade solutions on demand + Competitive intelligence + SSO, data localisation, premium support |
All paid plans include unlimited team members. Buy additional credits as needed. Credits never expire.
## 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 credit packs every month | Upgrade to the next tier |
## Plan details
### Free
**What you get:**
* 20 free monthly credits
* Build production-ready websites, landing pages, web apps, mobile apps
* Buy additional credits as needed
* Credits never expire
### Pro (USD 25/month)
Build production-ready websites, landing pages, web apps, mobile apps.
**What you get:**
* 100 free monthly credits
* Build production-ready websites, landing pages, web apps, mobile apps
* Buy additional credits as needed
* Credits never expire
### Rocket (USD 50/month)
Total Rocket suite for frequent use by individuals and teams.
**What you get:**
* 250 free monthly credits
* Build production-ready websites, landing pages, web apps, mobile apps
* Consultant-grade solutions on demand
* Competitive intelligence
* Buy additional credits as needed
* Credits never expire
### Booster (USD 250/month)
Total Rocket suite for power users and fast-moving teams.
**What you get:**
* 1,500 free monthly credits
* Build production-ready websites, landing pages, web apps, mobile apps
* Consultant-grade solutions on demand
* Competitive intelligence
* Buy additional credits as needed
* Credits never expire
Need SSO, data localisation, premium support, or onboarding assistance? Contact Sales.
## Frequently asked questions
Yes. The Free plan gives you 20 credits with no time limit. No credit card is required to start.
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**
Buy one-time credit packs when you need a burst
**Upgrade**
Get more monthly 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
Link Notion and Google Drive to your Rocket.new project for live context.
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.
Click the **Context** tab on the right panel. You'll see connectors for My Device, Google Drive, and Notion.
Click the service you want to connect. A modal appears. Paste the URL of the file or page, then click **Submit**.
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 files once to a Rocket.new project and every task gets access instantly.
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.
Inside your project, click the **Context** tab on the right panel. You'll see connectors for My Device, Google Drive, and Notion.
Click **My Device** to open a file picker. Select the files you want to upload. You can select multiple at once.
Uploaded files appear in the **Files** section of the Context tab. They are immediately available to every task in the project.
**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
See how context flows between Solve and Build tasks in Rocket.new projects.
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, rename, star, and delete projects in Rocket.new.
## Create a project
Click **Projects** in the sidebar.
Click the **Create new project** card. A dialog opens with a name and description field.
Enter a name and an optional description, then click **Create**. Your project appears in the Projects list.
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**.
The edit dialog opens with the current name and description.
Make your changes and click **Save changes**.
## 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. Archive instead if you might need the work later.
On the **Projects** page, click the **...** menu on the project card and select **Delete**.
Review what will be deleted and click **Delete** to confirm.
## 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
Share context, files, and collaborators across tasks in a Rocket.new project.
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, edit, or comment on 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, archive, 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.
Archived projects become read-only. All tasks, files, and history are preserved, but you can't create new tasks or make edits. You can unarchive a project at any time to resume work.
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
Get your first result on Rocket.new in under 5 minutes. Pick Solve, Build, or Intelligence and follow the dedicated 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. Rocket decomposes it into parallel research streams and delivers a versioned report you can export as PDF, HTML, or PowerPoint.
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, Figma-to-code, redesigns, and deployment.
Monitors, signals, and your competitive dashboard.
# Attachments
Source: https://docs.rocket.new/getting-started/task/attachments
Attach files or paste URLs directly in a task to give Rocket context for 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.
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 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.
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 docs, Linear tickets, Google Docs, or Sheets so Rocket uses them as the foundation for better builds and smarter research.
Launchpad lets you point Rocket at your existing docs, tickets, 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. Rocket reads it, extracts intent, and launches from that foundation.
***
## Supported sources
PRDs, product notes, specs, feature lists, strategy docs, meeting notes.
Issues, projects, epics, feature requests, acceptance criteria, status history.
Requirements documents, briefs, RFCs, design docs, long-form notes.
Structured data, metrics trackers, competitive dossiers, planning sheets.
This is the initial supported set. More connectors will be added in future releases.
***
## How it works
Paste a URL to a Notion page, Linear issue, Google Doc, or Sheet. Rocket detects the reference automatically.
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, Google Sheets
Rocket reads the event plan from Notion 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] and sponsorship tracker at [SHEETS_URL].
```
**Sources:** Notion, Linear
Rocket reads product requirements from a Notion PRD and issue history from Linear. The generated app includes submissions, voting, and admin moderation.
```plaintext wrap theme={null}
Build a customer feedback portal from this Notion PRD: [NOTION_URL]. Use feature requests from this Linear project: [LINEAR_URL].
```
**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:** Google Docs, Google Sheets
Rocket reads the client brief from Google Docs and a billing log from Google Sheets. 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 client brief at [DOCS_URL] and billing data at [SHEETS_URL]. Show per-client status, active projects, and monthly billing summaries.
```
***
## Solve examples
**Source:** Google Sheets
Rocket reads your usage metrics spreadsheet, 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 usage tracker at [SHEETS_URL]. 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 Sheets, 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:** Google Docs, Google Sheets
Rocket reads account notes from Google Docs 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 account notes at [DOCS_URL] and billing tracker at [SHEETS_URL]. Segment by health score and flag at-risk accounts.
```
***
## 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 and Notion pages.
* **Playbooks and SOPs** - step-by-step guides assembled from decision logs, process docs, and operational records.
* **Dashboards and rollups** - structured views over Sheets 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, Google Sheets can be your launchpad (Rocket reads the existing data) and an app connector (the generated app syncs with Sheets) 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 Google Sheets as your launchpad *and* as a live data source, say both: *"Read my metrics from Sheets and use Sheets as the data source 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, and Google to your workspace.
Browse every connector available for Build tasks.
# Launchpad
Source: https://docs.rocket.new/getting-started/task/launchpad-full
Connect Notion, Linear, Supabase, Google Docs, Sheets, or Airtable 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. Rocket reads it, extracts intent, and launches from that foundation.
***
## Supported sources
PRDs, product notes, specs, feature lists, strategy docs, meeting notes.
Issues, projects, epics, feature requests, acceptance criteria, status history.
Existing schema, tables, field structure, live data for analysis.
Requirements documents, briefs, RFCs, design docs, long-form notes.
Structured data, metrics trackers, competitive dossiers, planning sheets.
Bases, tables, records, CRM data, operational records.
This is the initial supported set. More connectors will be added in future releases.
***
## How it works
Paste a URL to a Notion page, Linear issue, Supabase project, Google Doc, Sheet, or Airtable base. Rocket detects the reference automatically.
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 Sheets
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 Sheets
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.
```
***
## 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 Sheets, 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 Sheets
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.
```
***
## 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, and Airtable to your workspace.
Browse every connector available for Build tasks.
# Manage tasks
Source: https://docs.rocket.new/getting-started/task/manage
Create, rename, star, move, and delete tasks in Rocket.new.
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.
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.
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.
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**.
A **Rename your task** popup appears. Type the new name and click **Rename**.
Click the task name at the top-left of the task view to open the dropdown, then select **Settings**.
In the **Settings** panel, click into the **Name** field, type the new name, and press **Enter** or click outside the field to save.
## 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.
You can also star a task from the sidebar. Hover over the task in **Recent Tasks**, click the **`...`** menu, and select **Star**.
## 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**.
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.
Click the task name at the top-left of the task view and select **Add to Project** from the dropdown.
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.
Click the task name at the top-left, select **Settings**, then click **Delete** next to **Delete Task** in the **Overview** panel. Confirm the deletion.
## What's next?
Control who can see each Build task and understand plan-level availability.
Reference a previous task to carry its knowledge into your current work.
# Task notifications
Source: https://docs.rocket.new/getting-started/task/notifications
Get notified when a long-running Rocket.new task finishes so you can step away and return when 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.
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
Learn how Solve, Build, and Intelligence tasks work in Rocket.new.
A **task** is the core unit of work in Rocket. Every time you ask Rocket to research a market, build an app, or monitor a competitor, 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. Intelligence monitors your competitors and surfaces changes to the dashboard 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 is a one-time workspace configuration, not a task you repeat. Once approved, Intelligence monitors your competitors continuously. You manage competitors and view signals from the **Intelligence** panel in your sidebar, separate from any project.
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 something to monitor.
Review Rocket's output and refine it through conversation. Ask follow-up questions, request changes, or provide additional context.
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
All tasks consume [credits](/getting-started/credits) based on complexity. Clear, specific prompts use fewer credits than vague requests.
| Task type | Credit usage |
| :--------------- | :-------------------------------------------------------------- |
| **Solve** | Depends on research depth and question complexity |
| **Build** | Scales with app complexity and number of screens |
| **Intelligence** | Based on monitoring frequency and number of competitors tracked |
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
How Rocket scores prompts and asks targeted questions before starting vague Solve or Build tasks.
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 both [Solve](/solve/overview) and [Build](/build/overview) tasks.
## 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.
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
Reference past Rocket.new tasks with @-mentions to carry findings and decisions into your current work.
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.
A list of your tasks appears. Click the task you want to reference.
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, Figma, and more to your Rocket.new workspace.
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.
Import Figma designs and convert them into production-ready code.
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**.
Click **Connectors** in the left sidebar. You will see all available workspace connectors. Click the one you want to connect.
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.
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**.
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, rename, switch, and delete workspaces in Rocket.new.
All workspace actions, creating, renaming, switching, and deleting, 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.
Select **New workspace** at the bottom of the menu.
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 be able to invite new members independently.
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**.
The **Overview** tab is selected by default. Update the workspace **Name** or **Description**, then click **Save changes**.
Scroll down in the Overview tab to toggle **Allow workspace editors to invite members**. When enabled, workspace members with edit rights can invite other users without needing owner approval.
## 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.
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
Manage projects, members, and billing in one Rocket.new workspace.
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 once to the workspace. They can be added to any project without re-inviting. |
| **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** | Configure workspace-wide defaults for visibility, notifications, and security. |
## Manage your workspace
**Create, rename, switch between, and delete 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, comments, 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.
From the workspace menu, click **View all workspaces**.
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 and jump into any workspace directly.
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** | Workspace name, description, and default visibility for new projects. |
| **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
Buy a plan, add credits, and manage billing in Rocket.new.
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).
## 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.
Click **Upgrade** on the plan that fits your workload. You are redirected to Stripe checkout.
Review the plan details, enter your payment information, and click **Subscribe**. Your credits are available immediately.
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.
The Upgrade modal shows all available plans. Click **Upgrade** on the plan you want to move to.
Stripe shows the prorated charge for the remainder of your billing cycle. Review and click **Confirm**.
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**.
Select the number of credits (100, 1,000, or more), confirm the total, and click **Pay**.
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.
In the Stripe billing portal, click **Cancel subscription**.
Review the end date and click **Cancel subscription** to confirm.
Billing stops immediately, but you keep access until the displayed end date.
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.
Enter your card number, expiry, and security code, then click **Save**.
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**.
Update your name, address, or tax ID, then click **Save**.
Include your legal entity details for compliant invoices.
## 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.
## 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
Answers to common questions about building with Rocket.new, managing billing, using integrations, and more.
## Getting Started
Rocket.new is the complete vibe solutioning platform that covers the entire software development lifecycle. Rocket combines three capabilities in one platform: Solve (AI-powered market research, idea validation, and PRDs), Build (production-ready web apps, mobile apps, SaaS, e-commerce, and landing pages), and Intelligence (continuous competitive monitoring and tracking). You can use each capability independently or chain them together for end-to-end product development.
Learn more in the Introduction.
Visit rocket.new and register with your email (or use the iOS app). Once logged in, you can start a project by describing your idea, importing a Figma design, choosing a template, or uploading an image.
See the complete guide in Create an Account and Start from an Idea.
You can create web apps (Next.js) and mobile apps (Flutter) including SaaS platforms, dashboards, marketing sites, AI tools, e-commerce sites, internal apps, and more.
If you can describe it, Rocket can build it. Check out examples in the Template catalog.
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 based on your existing content.
See Redesign for details.
Yes. Rocket generates Flutter-based mobile apps for iOS and Android. You can start from a mobile Figma design or describe your mobile app idea in chat.
See Create a Mobile App from Figma for details.
In Figma, click **Share** → **Copy link**, and ensure viewing permissions are enabled. Paste the shareable URL into Rocket's project setup.
Rocket will convert your Figma design into a live, editable app. Learn more: Get Your Figma URL and Figma Overview.
All your projects are available on your **Dashboard** at rocket.new. You can reopen, edit, or relaunch them anytime.
See Your Projects for more details.
Yes. Rocket has an iOS app available on the App Store. Most features work on both web and iOS, but some advanced features are web-only and require a paid plan, including: [Visual Edit](/build/editor/visual-edit), [Commands](/build/editor/commands) (`/` and `@`), Figma import, code download, [subscription management](/getting-started/workspace/subscription), API integration, screenshots, audio notifications, and remix links.
Yes. The quick start guide walks you through creating your first project in minutes. See Quick Start.
Rocket.new is the only vibe solutioning platform that goes beyond code generation.
Rocket covers the full product lifecycle:
* **Solve:** Validate your idea with AI research
* **Build:** Ship production-ready web and mobile apps
* **Intelligence:** Track competitors automatically
No switching between tools. One platform, three pillars.
No. Rocket.new is a vibe solutioning platform for anyone who wants to go from idea to live product. Describe what you want in plain language and you get production-ready Next.js web apps or Flutter mobile apps. You also get strategic research (Solve) and competitive intelligence (Intelligence).
Yes. Upload a screenshot, mockup, PDF, spreadsheet, CSV, or Markdown file and Rocket will generate a working app from it. See Start from an Attachment.
## Files and Attachments
You can attach up to **5 files per message** at the task level. Each file must be under **5 MB**.
Supported file types include images (`.png`, `.jpg`, `.jpeg`), PDFs, Excel (`.xlsx`), CSVs, and Markdown (`.md`). See Task Attachments for full details.
Each attachment must be under **5 MB**. This applies to all file types: images, PDFs, spreadsheets, CSVs, and Markdown files.
Rocket supports the following file types in task attachments:
* **Images**: `.png`, `.jpg`, `.jpeg`
* **Documents**: `.pdf`
* **Spreadsheets**: `.xlsx`
* **Data**: `.csv`
* **Text**: `.md` (Markdown)
You can also paste a URL directly into the message box and Rocket will fetch the content automatically. See Task Attachments.
**Task attachments** are scoped to the current conversation only. Use them when the file is relevant to one specific message.
**Project file uploads** persist across every task in a project. Use them for reference material you want Rocket to use throughout the entire project.
See Task Attachments and Project File Uploads.
## Intelligence
Intelligence is Rocket's continuous competitive monitoring system. Set it up once and it watches your competitors automatically - tracking changes across their websites, social media, news, customer reviews, and more - then surfaces findings to a persistent dashboard in your sidebar.
No manual check-ins. No calendar reminders. Once configured, Intelligence runs until you pause or stop it.
Learn more in Intelligence Overview.
Select **Intelligence** from the bottom of the home screen input area. A 5-step wizard walks you through:
1. Your business URL and team size
2. Signal categories that matter most to you (Pricing and packaging, Product updates, Key hires and exits, Funding and valuation, Blogs, Revenue)
3. Adding competitor URLs to watch
4. Choosing notification channels (Push, Email) and brief frequency (Daily, Weekly, Monthly)
5. Approving the configuration
Intelligence begins scanning immediately after approval. Your first brief arrives within 24 hours.
See Intelligence Quick Start for the full walkthrough.
For every competitor URL you add, Intelligence automatically monitors:
* Website changes (pricing pages, product pages, landing pages)
* Social media activity and announcements
* News and press releases
* Customer reviews and sentiment on review platforms
* People signals (hiring patterns, leadership changes)
* Advertising and positioning changes
You do not need to specify what to watch per competitor.
The underlying monitoring runs continuously. You control how often Rocket summarizes and delivers findings to you: Daily briefs, Weekly digest, or Monthly digest. You can change your delivery frequency at any time from the Intelligence dashboard.
Yes. Intelligence is fully independent. Run the setup wizard once and Intelligence monitors your competitive landscape whether or not you use Solve or Build.
**Intelligence** watches for changes over time. It is a one-time workspace setup that continuously monitors competitors and surfaces changes to your dashboard automatically.
**Solve** answers a specific question once. You create a Solve task with a question, Rocket researches it, and returns a structured report.
They work well together: use Solve to research a competitor in depth, then set up Intelligence to watch for changes going forward. See Intelligence vs. Solve.
## Using the Interface
Type in natural language to build and iterate on your app. Examples: "Add a login form with email and password" or "Connect this app to Supabase."
Rocket interprets your requests and generates code. Learn more in Chat Interface.
Commands let you make precise, repeatable changes. Use **/** to trigger actions like /fix, /explain, or /optimize. Use **@** to scope edits to specific files or components.
Commands are web-only. See Commands.
Visual Edit lets you click and modify any element in your app's preview without writing code. It is available on web browser only. Learn more: Visual Edit.
The preview panel displays your app live as you build. No compilation needed. You can interact with it in real-time and choose between web and mobile views.
See Preview.
Wait 1-2 minutes for the build to complete, then refresh the preview panel. If changes still do not appear, check the chat for any errors during code generation, or use the /fix command to troubleshoot.
Yes. Use Code View to inspect, browse, and edit your app's source code. On web, you have full editing capabilities. On iOS, you can browse code and push to GitHub but cannot edit directly.
See Code View.
Ensure you are logged into the correct account. Projects sync automatically between web and iOS.
If a project is still missing, try refreshing the dashboard or contact support at [support@rocket.new](mailto:support@rocket.new).
No. The framework is locked once a task is created. You cannot switch a web task to Flutter or vice versa.
If you need a different framework, start a new project and mention the framework in your initial prompt. See Default frameworks.
Rocket offers push notifications (web and mobile) and audio notifications (web only). On web, go to **Account Settings** to toggle push and audio notifications. On mobile, open **Settings** from the footer bar and toggle notifications ON.
See Account Settings.
A remix link is a shareable URL that lets anyone clone your project. Creating a remix link requires a paid plan (Pro or above). To create one, open your project on web browser, access the left sidebar menu, and select **Create remix link**.
Anyone with the link can clone a project to their Rocket account for free. Remix links are web browser only. See Share with Remix.
The Performance tab is only available for landing page and website projects. Other project types (web apps, mobile apps, etc.) do not include the Performance tab.
See Site Performance.
Workspaces help you organize projects and collaborate with team members. You have a personal workspace by default and can create team workspaces to share projects.
See Workspaces.
## Prompting and AI
Be clear, specific, and goal-oriented. Use prompts like "Create a signup form with email and password fields" or "Add a dashboard with charts showing monthly revenue from Supabase."
Start with action verbs (Create, Add, Connect, Update) and include details about layout, data, and integrations. See Get started.
**Best practices:**
* Break complex requests into smaller steps
* Be specific about inputs, outputs, and behavior
* Mention integrations and data sources explicitly
* Use iterative refinement (start simple, then add features)
* Reference specific screens or components with @ commands
Learn more: Core Concepts.
Yes. You can describe a complete idea and Rocket will generate a deployable app with backend, authentication, and deployment configured. For complex apps, it is often better to start with a template or describe the app in stages, adding features iteratively.
**Try these approaches:**
* Simplify your request and break it into smaller steps
* Be more specific about what you want
* Use the /fix command to address issues
* Ask Rocket to explain what went wrong
* Check Debugging for common issues
Yes. Browse the library for ready-to-use examples covering dashboards, landing pages, user authentication, forms, and more. See Library.
Yes. Clear, specific prompts help Rocket generate accurate code faster, reducing credit usage. Vague prompts may require multiple iterations and regenerations, consuming more credits.
Learn more in Understanding Credits.
## Integration and API Setup
Rocket includes 25+ built-in integrations across multiple categories:
* **Payments**: Stripe, Razorpay
* **Email and messaging**: Resend, SendGrid, Brevo, MailerLite, Mailchimp, Twilio
* **AI models**: OpenAI, Anthropic, Gemini, Perplexity
* **Databases and CMS**: Supabase, Airtable, Strapi, Directus, Webflow
* **Analytics**: Google Analytics, Mixpanel, AdSense
* **Forms and scheduling**: Typeform, Tally, Calendly
* **Social and media**: Instagram
* **Productivity**: Google Workspace, Notion, Linear, Confluence
* **Design and development**: Figma, GitHub, Netlify
You can also connect to any REST API using the APIs feature. See Integrations Overview.
Rocket provides deep Supabase integration. You can create a new Supabase project or connect an existing one directly from project settings.
Describe what you need in chat (e.g., "add user login" or "create a products table") and Rocket generates the code and migration scripts. You push migration scripts to Supabase using the button that appears in the UI. Learn more: Supabase Integration.
**Common fixes:**
* Ensure your Supabase project is active and not paused
* Push migration scripts successfully (see Push Migration Scripts)
* Check redirect URLs for authentication (see Redirect URLs)
* Verify storage bucket permissions (see Storage Buckets)
For more help, see Debugging.
Yes. Rocket supports Stripe integration for payment processing, subscriptions, and checkout flows. Connect your Stripe account from project settings. See Stripe Integration.
Yes. Rocket supports Razorpay for payments, subscriptions, order management, and refunds. Razorpay connects via OAuth - no API key required. It is available for Next.js TypeScript tasks. See Razorpay Integration.
Yes. Rocket offers multiple ways to connect to custom APIs:
* **APIs feature**: Import API definitions from Postman, cURL, Postman JSON, or Swagger, then integrate them into UI elements. Rocket generates the code automatically. See APIs.
* **Chat prompts**: Describe your API endpoints, authentication method, and data structure in chat, and Rocket will generate the integration code.
Yes. Rocket uses Supabase Auth for secure user authentication. You can request authentication features in chat (e.g., "Add email/password login") or start from templates that include auth.
Rocket supports email/password, social auth (Google, GitHub, etc.), and magic links. See Social Auth.
Connect GitHub from your project settings and push your project to a repository (paid plan required). For Next.js projects, two-way sync is supported. After the initial push, you can pull changes made outside Rocket back in.
See GitHub Integration.
Import API definitions from Postman, cURL, or Swagger and integrate them into UI elements. Rocket generates the integration code automatically. See APIs.
Open the **APIs** section and click **Add APIs**. Choose from:
* **Postman key**: Connect to a workspace
* **cURL**: Paste a working command
* **Postman JSON**: Upload an export file
* **Swagger/OpenAPI**: Upload a spec (JSON or YAML)
See APIs for details.
Select the route, choose the API from the dropdown, and click **Integrate API**. Click the UI element to attach it.
Configure triggers (page load, button click, etc.) and add pre/post-call instructions. Rocket generates the code automatically. See APIs.
API import is web-only. Once imported on web, APIs are available for both web and mobile apps. See APIs.
The import may not have completed. Reopen **Add APIs** and re-import. Verify you are in the correct project and your source is valid. See APIs.
Your API includes placeholders (like `{{accessToken}}`) that need mapping. Bind them to state or environment variables during integration. See APIs and Code View.
The response is not stored to a state variable your UI binds to. Update **Post API call instructions** to store the response, then bind your UI component to that variable. See APIs.
Your token is missing, expired, or incorrectly formatted. In **Pre API call instructions**, validate the token exists and is valid. Make sure the Authorization header format matches your backend (e.g., `Bearer `).
See APIs.
Rocket supports integrations across many categories including analytics (Google Analytics, Mixpanel), forms (Typeform, Tally), scheduling (Calendly), CMS (Strapi, Directus, Airtable), and productivity tools (Google Workspace, Notion, Linear).
Each has a dedicated setup guide. Browse all options in the Integrations Overview.
## Publishing and Deployment
Click **Launch** in your project to deploy. Web apps are hosted on Netlify with a public URL. You can use the default Netlify link or connect a custom domain.
Mobile apps get a mobile-optimized web link for instant sharing. See Launch Web App, Launch Mobile App, and Connect Custom Domain.
**Three ways to share your app:**
* **Web links**: Instant sharing via public URLs (best for demos and testing)
* **Download builds**: APK/IPA files for device testing (available on web only)
* **App stores**: Official distribution via Google Play or App Store (requires developer accounts)
See Sharing vs. Stores for detailed comparison.
Yes. Rocket creates mobile-optimized public web links (PWA) for your Flutter apps. Anyone with the link can access your mobile app in their browser. See Launch Mobile App.
Yes. Use Code View to download your complete project as a .zip file. This feature requires a paid plan (Pro or above). See Code View.
Yes. Download your Flutter code (web only, paid plan required), then follow the submission guides:
* **iOS**: Open in Xcode and submit via Apple Developer account (\$99/year). See Apple Store Guide.
* **Android**: Build APK and submit via Google Play Console (\$25 one-time fee). See Google Play Guide and Download App.
Download the APK from Rocket (web only, paid plan required), transfer it to your Android device, enable installation from unknown sources, and install. Full instructions: Install APK on Android.
Yes. Free plan apps are public by default, may appear in the Rocket showcase, and may be used to improve Rocket's AI. On paid plans, your apps are never used for AI training whether they are public or private.
You can set apps to private from Project Settings to exclude them from the showcase. See Project Visibility.
The "Built with Rocket" badge is tied to task visibility. Public tasks always display the badge regardless of your plan. To remove it, you need to be on a paid plan and set the task to **Private**.
To change visibility, open the task, click the **task name** at the top-left, select **Settings**, then open the **Task Visibility** dropdown and choose **Private**. The change takes effect immediately. See Task Visibility.
## Editor and Customization
Yes. You can upload images by describing your needs in chat (e.g., "Add a logo image here") or using Supabase Storage for user-uploaded images.
Drag and drop or file selection is supported where applicable.
Yes. Use Code View to inspect and edit your app's source code directly. On web, you have full editing capabilities including environment variables and build configurations.
On iOS, you can browse code and push to GitHub but editing is limited. See Code View.
Browse templates by category during project setup. Templates are pre-built apps you can customize immediately after selecting one.
See Using Templates.
You can add new screens using the "Add Figma screens" feature (web only). Updating existing screens from Figma is not yet fully supported but is under development.
Yes. Rocket includes a rollback button below each code change. You can click that button to restore earlier states of your app.
**Supported technologies:**
* **Web apps**: Next.js (TypeScript)
* **Mobile apps**: Flutter (Dart) for iOS and Android
* **Backend**: Supabase (PostgreSQL database, authentication, storage, edge functions)
* **Hosting**: Netlify for web deployment
Each use case (Web App, Landing Page, Dashboard, etc.) defaults to a specific framework and language. See the full mapping in Default frameworks.
Yes. Rocket has recipe guides for building SaaS apps, e-commerce stores, AI-powered tools, content sites, booking apps, and lead generation sites.
Each recipe includes architecture guidance and all the prompts you need. See Recipes.
## Plans, Credits, and Billing
Credits are Rocket's usage currency. One balance covers everything you do in Rocket: Build generation, Consultant-grade solutions (Solve), and Competitive intelligence. They are consumed whenever Rocket generates or modifies outputs on your behalf.
Clear, specific prompts use fewer credits than vague ones. Each paid plan includes a monthly credit allocation that rolls over. On annual plans, credits roll over month to month within the 12-month term and any remaining balance expires at renewal. See Understanding Credits for full details.
**Available plans:**
* **Free**: USD 0, 20 free monthly credits, Build only
* **Pro**: USD 25/month, 100 free monthly credits, Build production-ready websites, landing pages, web apps, mobile apps
* **Rocket**: USD 50/month, 250 free monthly credits, Build + Consultant-grade solutions on demand + Competitive intelligence
* **Booster**: USD 250/month, 1,500 free monthly credits, All Rocket features + SSO, data localisation, premium support, onboarding assistance
All paid plans include unlimited team members. Buy additional credits as needed.
Annual billing gives you 20% off. See Pricing for full comparison.
Go to **Settings > Subscription** (web only) to:
* Upgrade or downgrade your plan
* Buy additional credit packs
* Cancel your subscription (no penalties)
* View and download invoices
See Subscription Management.
When your credit balance reaches zero, Build, Solve, and Intelligence features pause.
**You can:**
* Wait for your monthly refresh (paid plans)
* Buy additional credit packs from **Settings > Subscription**
* Upgrade to a higher plan for more monthly credits
Your projects and existing outputs remain accessible.
**Yes, for paid plans:**
* **Monthly plans**: Unused credits roll over to the next month indefinitely
* **Annual plans**: Unused credits roll over month to month within your 12-month term. At renewal, remaining credits expire and you get a fresh annual balance
* **Free plan**: One-time credits, do not roll over
Yes. You can purchase additional credit packs anytime from **Settings > Subscription**. They do not expire while your subscription is active. If you are buying extra credits every month, upgrading to the next tier is usually better value. See Add credits vs. upgrade.
Yes. Upgrades take effect immediately with prorated charges. You receive additional credits right away.
To downgrade, click **Manage** beside your active plan in **Settings > Subscription** to open the Stripe portal, then select a lower-tier plan. Downgrades are scheduled for your next billing cycle. You keep your current credit balance until then. See Subscription Management.
When you cancel, all unused credits expire at the end of the current billing cycle. Your projects remain accessible, but you will not be able to generate new outputs once credits are depleted.
See Subscription Management.
The Understanding Credits page explains credit consumption in detail, including how different actions use credits and tips for reducing usage. See Understanding Credits.
## App Development and Debugging
Use the Preview Panel to interact with your app in real-time. Test on different screen sizes using web and mobile preview modes.
Request fixes in chat (e.g., "Fix the login error" or "Debug why the button is not working"). See Preview.
Yes. You retain full ownership and rights to everything you create with Rocket, including all source code and outputs. You can download (paid plan required), modify, and deploy your code anywhere.
Yes. Download your source code (paid plan required) and continue development locally in your preferred IDE. You can also push to GitHub and clone your repository.
See Code View and GitHub Integration.
Yes. This feature requires a paid plan (Pro or above). Web apps are hosted on Netlify. Connect your Netlify account from project settings, then follow Netlify's domain setup to link your custom domain. See Connect Custom Domain.
Currently, Rocket generates mobile-optimized Flutter apps for phones. Larger Figma frames (desktop/tablet size) are treated as web layouts. Tablet-specific Flutter layouts are not currently supported, so use the web preview for tablet-sized screens in the meantime.
Use Code View (web only) to add environment variables. Integration secrets (Supabase, Stripe, etc.) are managed through the integrations panel in project settings. See Code View.
## Troubleshooting and Known Issues
Common causes include unpushed migration scripts, a paused Supabase project, or incorrect redirect URLs.
See Troubleshooting for step-by-step fixes, or check Push Migration Scripts and Redirect URLs.
Check your plan's screen limit, Figma link permissions, and design guidelines. See Troubleshooting for detailed steps or Figma Design Guidelines.
This occurs when the Figma link is already associated with another Rocket project. Use a different Figma file or upgrade your plan. See Troubleshooting.
Your app likely needs a backend database connection. Connect Supabase and push the migration scripts using the **Push to Supabase** button that appears in the UI.
See Troubleshooting or Supabase Integration.
Check your registration email, Supabase redirect URLs, and social auth configuration. See Troubleshooting for detailed steps.
Wait 1-2 minutes for the build to complete, then refresh the preview. If issues persist, use the /fix command. See Troubleshooting.
This is usually a temporary network or caching issue.
**Try:**
* Refreshing the page
* Clearing your browser cache
* Waiting a few moments and trying again
If the issue persists, email [support@rocket.new](mailto:support@rocket.new) or post in #rocket-support on Discord.
Email [support@rocket.new](mailto:support@rocket.new) or join the Rocket Discord and post in #rocket-support.
## Account, Privacy, and Community
Access account settings from the dashboard menu. You can update your display name, location, and other personal information. See Account Settings.
**Privacy by plan:**
* **Paid plans**: Your projects are never used for AI training. You can set projects to private in **Project Settings > Visibility** to exclude them from the Rocket showcase.
* **Free plan**: Projects are public and may appear in the Rocket showcase. They may be used to improve Rocket's AI.
To make a project private, go to **Project Settings > Visibility** (web only, paid plans). Private projects are excluded from the Rocket showcase. See Project Visibility.
Yes. Join the active Rocket community on Discord to share projects, get help, ask questions, and connect with other builders.
Join the Rocket Discord. For support, post in the #rocket-support channel.
**Explore these resources:**
* Template catalog: Browse pre-built templates to remix and customize
* Video Gallery: Walkthroughs and tutorials
* Library: Example prompts and use cases
To permanently delete your account, send a request to [support@rocket.new](mailto:support@rocket.new). Include your registered email address.
Your account and all associated data will be permanently deleted within 48 hours.
Check the Changelog for weekly updates on new features, improvements, and fixes. See Changelog.
## Features in Development
Yes, for Next.js TypeScript projects. Click the **+** button on the home screen and select **Clone from GitHub** to import your repository. After importing, you get full two-way sync: Rocket pushes changes to the `rocket-update` branch and you can pull the latest state of `main` back into Rocket at any time.
See Import from GitHub.
You can add new screens from an updated Figma file, but updating existing screens is not fully supported yet. This feature is under development.
Not at this time. You will need to manage TestFlight distribution through your Apple Developer account.
Download your Flutter code (paid plan required) and follow Apple's TestFlight setup. See Apple Store Guide.
Not yet. Currently, you can download APK files for Android. IPA download for iOS is coming soon.
For now, download source code (paid plan required) and build locally in Xcode. See Download App.
## Still have questions?
Cannot find what you are looking for? We are here to help.
Reach us at [support@rocket.new](mailto:support@rocket.new) for direct help.
Learn best practices and tips to build faster and smarter.
Watch video tutorials and walkthroughs.
Connect with other builders and get community support.
# Tokens to Credits
Source: https://docs.rocket.new/help/tokens-to-credits
What changed when Rocket moved from tokens to credits, and what it means for your account.
With Rocket 1.0, tokens have been renamed to credits. Your balance was converted automatically. Nothing was lost.
## What changed
Tokens are now called credits. The number is smaller, but the value is identical. The conversion is 1:1 in value, with every 1,000,000 tokens becoming 20 credits.
| Old system | New system | Value |
| :--------------- | :---------- | :---- |
| 1,000,000 tokens | 20 credits | Same |
| 2,500,000 tokens | 50 credits | Same |
| 5,000,000 tokens | 100 credits | Same |
If you had a partial or custom balance, it was converted at the same rate. The number is different; the value is not.
## Plan names changed too
All plans were renamed alongside the credits transition. If you were on a paid plan, it is now called **Pro**. Same price, same capabilities, same billing cycle. Only the name changed.
| Old name | New name | What changed |
| :-------- | :------- | :--------------------------- |
| Starter | Free | Name and token → credit unit |
| Paid plan | Pro | Name only |
The plan lineup has since expanded. The current plans include Free, Pro, Rocket, and Booster. See Pricing for the full comparison.
## Common questions
No. If you had 5,000,000 tokens worth of usage, you now have 100 credits worth of exactly the same usage. Nothing was lost, reduced, or expired during the transition.
No. The conversion happened automatically. Your balance, your projects, and your subscription are exactly as they were.
Yes. All tokens in your account, including bonus tokens, were converted to credits at the same rate. Nothing was lost.
No. Your annual subscription continues as before on the same schedule. The only change is the name (tokens to credits) and the unit displayed.
Your credit balance is visible on your home page and in **Settings**.
## Still have questions?
Email [support@rocket.new](mailto:support@rocket.new) and we'll help you out.
How credits work, rollover policy, and what consumes credits.
Compare current plans and find the right fit.
# Troubleshooting
Source: https://docs.rocket.new/help/troubleshooting
Solutions to common Rocket.new issues with Supabase, Stripe, email, AI integrations, deployment, and more.
This page collects the most common issues you may run into while building with Rocket, organized by category. Each entry includes what you will see, why it happens, and step-by-step instructions to fix it.
The prompts below include placeholders like `[TABLE_NAME]`, `[path]`, and `[MAX_CHARS]`. Replace these with your actual values before pasting into Rocket chat.
## Supabase issues
**What you see:** Your app fails to load, shows a blank screen, or displays database-related errors after connecting Supabase.
**Why it happens:** Migration scripts have not been pushed to the remote Supabase project, the Supabase project is paused due to inactivity, or the redirect URLs for authentication are misconfigured.
**How to fix it:**
1. Open your project settings and go to the Supabase integration panel
2. Check the migrations panel and push any pending migration scripts
3. Log into the [Supabase dashboard](https://supabase.com/dashboard) and verify your project is active (not paused). If paused, click "Restore" to reactivate it
4. Under Authentication > URL Configuration, confirm your redirect URLs match your app's URLs
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
My app is stuck after connecting Supabase. Verify the Supabase client is initialized with correct environment variables. If there are connection errors, show me what is wrong.
```
Migration scripts cannot be pushed via chat. When a script is generated, a popup appears with a **Push to Supabase** button. Click it to apply the script.
See Push Migration Scripts and Redirect URLs for details.
**What you see:** Queries return empty results even though data exists, or you see "new row violates row-level security policy" errors.
**Why it happens:** Row Level Security (RLS) is enabled on the table but no policies have been created, or existing policies do not match the current user's authentication state.
**How to fix it:**
1. Open the Supabase dashboard and navigate to the table in question
2. Check the "Policies" tab to see if any RLS policies exist
3. If no policies exist, create policies that allow authenticated users to read rows and modify only their own rows
4. If policies exist, verify they match the expected user role and auth state
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
The [TABLE_NAME] table has RLS enabled but queries return empty results. Create RLS policies that allow authenticated users to read, insert, update, or delete only their own rows (where user_id matches auth.uid()). Explain each policy you create.
```
See Supabase Integration.
**What you see:** Errors like "JWT expired", "invalid JWT", or "no API key found in request" when making Supabase calls.
**Why it happens:** The Supabase client is not initialized correctly, the anon key is missing or incorrect, or the user's session token has expired and is not being refreshed.
**How to fix it:**
1. Open Code View and verify that `SUPABASE_URL` and `SUPABASE_ANON_KEY` environment variables are set correctly
2. Check that the Supabase client is imported and initialized in your code
3. Make sure your app refreshes the auth session automatically so expired tokens get renewed
4. If tokens keep expiring, redirect the user to the login page instead of showing a broken state
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Supabase calls are failing with JWT token errors. Make sure the Supabase client uses SUPABASE_URL and SUPABASE_ANON_KEY from environment variables. Add automatic auth session refresh so expired tokens get renewed. If the session expires, redirect the user to the login page instead of showing a broken state.
```
See Supabase Integration.
**What you see:** After social login (Google, GitHub), users see a "redirect URL mismatch" error or get stuck on a blank page instead of returning to the app.
**Why it happens:** The redirect URL configured in the Supabase dashboard does not match the URL your app is actually using. This is especially common when switching between localhost and a deployed domain.
**How to fix it:**
1. Go to the Supabase dashboard > Authentication > URL Configuration > Redirect URLs
2. Add your app's callback URL (for example, `https://your-app.netlify.app/auth/callback`)
3. For local development, also add `http://localhost:[PORT]/auth/callback`
4. Make sure the auth callback handler in your code extracts the session from the URL hash correctly
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Social login is failing with a redirect URL mismatch. Update the auth callback handler to use the correct redirect URL. For development, use http://localhost:[PORT]/auth/callback. Remind me to add this URL to the Supabase dashboard under Authentication > URL Configuration > Redirect URLs. Handle the auth callback properly by extracting the session from the URL hash.
```
See Redirect URLs.
**What you see:** Clicking "Sign in with Google" (or another social provider) does nothing, shows an error, or redirects to a broken page.
**Why it happens:** The social auth provider is not configured in the Supabase dashboard, the OAuth client ID and secret are missing, or the callback URL is not registered with the provider.
**How to fix it:**
1. In the Supabase dashboard, go to Authentication > Providers and enable the social provider you want (e.g., Google, GitHub)
2. Enter the OAuth client ID and client secret from the provider's developer console
3. Copy the callback URL from Supabase and add it to the provider's authorized redirect URIs
4. In your Rocket app, verify the login button calls the correct Supabase social auth method
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Social login with [PROVIDER] is not working. Make sure the signInWithOAuth call uses the correct provider name and that the auth callback handler processes the response properly.
```
See Social Auth and Google Sign-In.
**What you see:** File uploads fail with "new row violates row-level security policy" or "Bucket not found" errors.
**Why it happens:** The storage bucket does not exist, its RLS policies are not configured, or the bucket is set to private without the correct access policies.
**How to fix it:**
1. In the Supabase dashboard, go to Storage and confirm the bucket exists
2. If the bucket is private, add RLS policies to allow uploads and downloads for authenticated users
3. If you need public access (e.g., for profile images), set the bucket to public
4. Verify the file path format in your upload code matches what the policies expect
See Storage Buckets.
## Stripe issues
**What you see:** Stripe checkout completes successfully, but your app never updates the order status or subscription because the webhook endpoint is not receiving events.
**Why it happens:** The webhook endpoint URL is incorrect in the Stripe dashboard, the webhook signing secret does not match, or the endpoint is not publicly accessible.
**How to fix it:**
1. In the Stripe dashboard, go to Developers > Webhooks and verify the endpoint URL points to your deployed app (e.g., `https://your-app.netlify.app/api/webhooks/stripe`)
2. Copy the webhook signing secret and add it as an environment variable in your app
3. Make sure the endpoint parses the raw request body (not JSON-parsed) for signature verification
4. For local testing, use the Stripe CLI: `stripe listen --forward-to localhost:[PORT]/api/webhooks/stripe`
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Stripe webhooks are not reaching the app after checkout. Verify the webhook endpoint is correctly set up at /api/webhooks/stripe. Check that the endpoint parses the raw request body for signature verification. Log incoming webhook events for debugging.
```
See Stripe Integration.
**What you see:** Payments fail with "No such product" or "Invalid API key" errors. Or test transactions appear in the live dashboard unexpectedly.
**Why it happens:** The app is using test keys (`sk_test_...`) with live mode products, or live keys (`sk_live_...`) with test mode products. Test and live environments are completely separate in Stripe.
**How to fix it:**
1. Check your environment variables: `STRIPE_SECRET_KEY` and `STRIPE_PUBLISHABLE_KEY`
2. For development, make sure both keys start with `sk_test_` and `pk_test_`
3. Verify that product and price IDs were created in the same environment (test or live) as your keys
4. When going to production, swap to live keys and recreate products in live mode
See Stripe Integration.
**What you see:** After completing Stripe checkout, the user is not redirected back to the app. They stay on the Stripe page or see a broken link.
**Why it happens:** The `success_url` or `cancel_url` in the checkout session uses a relative path instead of an absolute URL, or the domain is not configured in Stripe settings.
**How to fix it:**
1. Open your checkout session creation code and verify `success_url` and `cancel_url` use absolute URLs (e.g., `https://your-app.netlify.app/success`)
2. For development, use `http://localhost:[PORT]/success`
3. Include any required query parameters like `session_id={CHECKOUT_SESSION_ID}`
4. Test both the success and cancel flows
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
After Stripe checkout, users are not redirected back to the app. Update the success_url and cancel_url in the checkout session creation to use absolute URLs. Include the session_id query parameter so the success page can retrieve the session details.
```
See Stripe Integration.
**What you see:** A user completes a subscription checkout but their account still shows as "free" or "inactive". The subscription status never changes.
**Why it happens:** The webhook handler is not processing the relevant Stripe events (like `checkout.session.completed` or `customer.subscription.updated`), or the database is not being updated when the webhook fires.
**How to fix it:**
1. Verify your webhook endpoint is receiving events (check Stripe dashboard > Developers > Webhooks > Recent events)
2. Confirm your handler processes these events: `checkout.session.completed`, `customer.subscription.updated`, `customer.subscription.deleted`
3. Check that the handler updates the user's subscription status in your database after processing each event
4. Add logging to your webhook handler to trace what happens when each event arrives
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
After Stripe checkout, the user's subscription status is not updating. Check the webhook handler at /api/webhooks/stripe. Make sure it processes checkout.session.completed and customer.subscription.updated events. When these events fire, update the user's subscription status in the database. Add logging so I can see what events are received.
```
See Stripe Integration.
## Email issues (Resend/SendGrid)
**What you see:** Email sending fails with "unauthorized", "API key missing", "authentication failed", or "sender address not verified" errors.
**Why it happens:** The API key environment variable is not set, is misspelled, or the "from" email address or domain has not been verified in the email provider's dashboard.
**How to fix it:**
1. Open Code View and verify your email API key environment variable is set (e.g., `RESEND_API_KEY` or `SENDGRID_API_KEY`)
2. Confirm the API key is only accessed server-side to avoid exposing it
3. For development with Resend, use `onboarding@resend.dev` as the sender address
4. For production, verify your custom domain in the provider's dashboard by adding the required DNS records
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Email sending is failing. Make sure API calls happen on the server, not the client. For development, use "onboarding@resend.dev" as the sender. Add error handling that logs the specific failure reason.
```
See Resend Integration and SendGrid Integration.
**What you see:** Emails are sent successfully (no errors) but recipients find them in their spam or junk folder.
**Why it happens:** The sending domain lacks proper authentication records (SPF, DKIM, DMARC), the email content triggers spam filters, or the sender reputation is low.
**How to fix it:**
1. In your domain's DNS settings, add the SPF, DKIM, and DMARC records provided by your email service
2. Use a recognizable "from" name (e.g., "YourApp Team") instead of a generic address
3. Avoid spam trigger words, all-caps, and excessive punctuation in subject lines
4. Include a plain-text version alongside HTML and add an unsubscribe link
See Resend Integration and SendGrid Integration.
**What you see:** Authentication emails (confirmation, password reset, magic link) arrive with default Supabase branding instead of your app's branding, or they come from a generic Supabase email address.
**Why it happens:** Supabase uses its own built-in email service by default. To customize auth emails, you need to configure a custom SMTP provider (like Resend) in the Supabase dashboard.
**How to fix it:**
1. Set up a Resend account and verify your domain
2. In the Supabase dashboard, go to Project Settings > Authentication > SMTP Settings
3. Enable "Custom SMTP" and enter your Resend SMTP credentials (host: `smtp.resend.com`, port: 465, username: `resend`, password: your API key)
4. Customize your email templates under Authentication > Email Templates
See Resend Integration and Email Templates.
## AI integration issues (OpenAI/Anthropic/Gemini)
**What you see:** AI API calls fail with "429 Too Many Requests" or "rate limit exceeded" errors, especially when multiple users trigger AI features simultaneously.
**Why it happens:** The app is sending too many requests to the AI provider within their rate limit window. Free-tier API keys have stricter limits.
**How to fix it:**
1. Add a loading state that disables the trigger button while a request is in progress
2. Debounce user-triggered AI calls so rapid clicks do not send multiple requests
3. Implement exponential backoff retry on 429 errors (wait 1s, then 2s, then 4s)
4. Cache recent AI responses to avoid duplicate requests for the same input
5. If you hit limits frequently, consider upgrading your API plan with the provider
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
AI API calls are hitting rate limits. Add these safeguards: debounce user-triggered AI calls, add a loading state that disables the button while a request is in progress, implement exponential backoff retry on 429 errors, show a user-friendly message saying "AI is busy, please try again in a moment", and cache recent AI responses to avoid duplicate requests.
```
See OpenAI, Anthropic, and Gemini.
**What you see:** AI responses are cut off mid-sentence or you see "maximum context length exceeded" errors.
**Why it happens:** The input (prompt plus context) exceeds the model's token limit. This often happens when sending entire pages or large documents as context.
**How to fix it:**
1. Truncate input text to a reasonable character limit before sending
2. Show a warning if the user's input is too long
3. For long content, split it into chunks, process each chunk, then combine the results
4. Consider using a model with a larger context window
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
AI calls are failing because the input exceeds the token limit. Truncate the input to a maximum of [MAX_CHARS] characters before sending. Show a warning if the user's input is too long. If summarizing long content, split it into chunks, summarize each chunk, then combine the summaries.
```
See OpenAI, Anthropic, and Gemini.
**What you see:** The AI feature shows a permanent loading spinner. No response comes back and no error is displayed.
**Why it happens:** The API call has no timeout configured, the API key is invalid, the model name is misspelled, or the AI provider is experiencing an outage.
**How to fix it:**
1. Verify the API key environment variable is set and correct
2. Check the model name is spelled correctly (e.g., `gpt-4o` not `gpt4o`)
3. Set a 30-second timeout on the API call
4. Add a "Cancel" button so users can abort a stuck request
5. Check the provider's status page to rule out outages
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
The AI feature hangs with a loading spinner and never returns a result. Set a 30-second timeout on the API call. If it times out, show "AI is taking too long to respond. Please try again." Add a Cancel button that aborts the request. Log the full error details for debugging.
```
See OpenAI, Anthropic, and Gemini.
## Deployment issues
**What you see:** The **Launch** button is greyed out and cannot be clicked.
**Why it happens:** There is a pending error in the chat that has not been resolved, or the Rocket agent is in a sleeping state.
**How to fix it:**
1. Check the chat for any unresolved errors or pending messages. Resolve or dismiss them before trying to launch.
2. If the agent appears inactive, send a message in chat to wake it, then try launching again.
See Launch Web App.
**What you see:** The app deploys but features break in production. Database queries fail, payments do not work, or emails do not send.
**Why it happens:** The **Production** tab in the Environment panel is empty or missing values. Rocket keeps staging and production values separate, so setting a variable while building does not automatically apply it to production.
**How to fix it:**
1. Click your task name in the top-left of the editor, then click **Settings**
2. Under Task, click **Environment**
3. Switch to the **Production** tab and verify all required keys have real values set
4. Relaunch the app after updating any variables
See Environment Variables.
**What you see:** After setting up a custom domain, visiting it shows "site not found", a DNS error, or the wrong page.
**Why it happens:** DNS records are not configured correctly, or DNS changes have not propagated yet (this can take up to 48 hours).
**How to fix it:**
1. Follow the DNS setup instructions shown in Rocket's custom domain flow exactly
2. Wait up to 48 hours for DNS propagation
3. Use a DNS lookup tool (like [dnschecker.org](https://dnschecker.org)) to verify records are set correctly
See Connect Custom Domain.
**What you see:** The Rocket preview looks correct, but the deployed site shows an older version or behaves differently.
**Why it happens:** A stale version is live, or environment variables are missing or incorrect in the deployed app.
**How to fix it:**
1. Relaunch the app from the **Launch** panel to push the latest version
2. Check that all required environment variables are set correctly in Code View
3. Confirm you are viewing the version you intend to deploy
See Launch Web App.
## Web app issues
**What you see:** The app loads but shows nothing - just a blank white page.
**Why it happens:** A JavaScript error is preventing the page from rendering.
**How to fix it:**
1. Open the browser console (F12 → Console tab) and look for error messages
2. Copy the error and paste it into Rocket chat - Rocket will diagnose and fix it
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
My app shows a blank white screen. Check the root component for JavaScript errors and fix any issues preventing the page from rendering.
```
**What you see:** Clicking a nav link lands on a "404 - Page Not Found" error.
**Why it happens:** The linked page doesn't exist yet, or the route path is incorrect.
**How to fix it:**
1. Open code view and check the `app/` directory - verify the page file exists at the expected path
2. If it's missing, ask Rocket: "Create a \[page name] page" to generate it
3. If the file exists but the route is wrong, check the folder name matches the URL slug
**What you see:** A feature that calls a backend API route shows an error or fails silently.
**Why it happens:** A missing environment variable, broken database query, or unhandled edge case in the route handler.
**How to fix it:**
1. Open browser DevTools (F12 → Network tab), find the failing request, and check the response body for the specific error
2. Share the error message with Rocket in chat for a targeted fix
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
The API route at [path] is returning a 500 error. Add error handling and logging so I can see what's failing.
```
**What you see:** Toggling dark mode leaves some components with hardcoded light colors.
**Why it happens:** Some components use hardcoded color values instead of theme-aware Tailwind tokens.
**How to fix it:**
1. Identify which components look wrong in dark mode by toggling it on in the preview
2. Ask Rocket to update those components to use Tailwind's theme-aware color tokens
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Fix dark mode for all components - make sure every element uses theme-aware color tokens and respects the dark mode toggle.
```
## Mobile app issues
**What you see:** The device simulator shows a grey or blank screen instead of your app.
**Why it happens:** A widget build error is preventing the UI from rendering.
**How to fix it:**
1. Check the error overlay in the simulator for details
2. Copy the error message and paste it into Rocket chat - Rocket will fix the widget tree
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
The simulator shows a grey screen. Diagnose the widget build error and fix the root cause.
```
**What you see:** Tapping a button does nothing, or the wrong screen opens.
**Why it happens:** The route may not be defined in `router.dart`, or the navigation call uses an incorrect path.
**How to fix it:**
1. Open code view and check `router.dart` to verify the target route is defined
2. Confirm the navigation call in the button handler uses the same route name or path as the definition
**Prompt to paste in Rocket chat:**
```plaintext wrap theme={null}
Fix the navigation from [screen A] to [screen B]. Make sure the route is defined in router.dart and the navigation call uses the correct path.
```
**What you see:** Image widgets show broken placeholders or error icons.
**Why it happens:** Assets must be declared in `pubspec.yaml` and placed in the `assets/` directory. A missing declaration or wrong file path causes the load to fail.
**How to fix it:**
1. Open code view and verify the asset path in the widget matches the file location
2. Check `pubspec.yaml` to confirm the asset is listed under `flutter: assets:`
3. Ask Rocket to fix the asset reference if it's incorrect
**What you see:** The simulator shows an immediate crash or error overlay on startup.
**Why it happens:** A missing dependency, misconfigured plugin, or broken initialization in `main.dart`.
**How to fix it:**
Tell Rocket the exact error message from the simulator overlay - it will fix the initialization issue.
## Preview and editor issues
**What you see:** You made changes in Rocket chat, but the preview panel still shows the old version of your app.
**Why it happens:** The build may not have completed yet, the preview needs a manual refresh, or there was an error during code generation that prevented the change from applying.
**How to fix it:**
1. Wait 1-2 minutes for the build to complete
2. Refresh the preview panel
3. Check the chat history for any error messages during code generation
4. If the issue persists, use the `/fix` command or ask Rocket to regenerate the changes
See Preview.
**What you see:** Clicking on elements in the preview does not open the Visual Edit panel, or changes made through Visual Edit do not apply.
**Why it happens:** Visual Edit is a web-only feature (not available on the iOS app). Additionally, some dynamically generated elements or deeply nested components may not be selectable.
**How to fix it:**
1. Make sure you are using Rocket on a web browser, not the iOS app
2. Try clicking on a different, simpler element to confirm Visual Edit is active
3. For elements that are not selectable, use the chat interface instead to describe the change you want
4. If Visual Edit was working before but stopped, refresh the page
See Visual Edit.
**What you see:** Figma import fails, generates unexpected results, or you receive "rate limit" or "permission denied" errors.
**Why it happens:** The Figma link may not have view access enabled, you may have exceeded the Figma API rate limit, or the design does not follow Rocket's recommended design guidelines.
**How to fix it:**
1. In Figma, click Share and verify that "Anyone with the link" can view the file
2. If you see a rate limit error, wait a few minutes and try again. See Rate Limit Errors for details
3. Review the Figma Design Guidelines to ensure your design follows best practices
4. Common design issues include ungrouped layers, components outside screen boundaries, and invisible components
**Prompt to paste in Rocket chat (after a successful but incorrect import):**
```plaintext wrap theme={null}
The Figma import generated code that does not match my design. Review the generated components and fix the layout, spacing, and styling to match the original Figma design more closely.
```
See Figma Overview, Get Your Figma URL, and Design Guidelines.
## Intelligence issues
**What you see:** The wizard gets stuck, errors out, or does not advance past a step.
**How to fix it:**
1. Ensure your business URL is a valid, publicly accessible URL (e.g., `https://yourcompany.com`)
2. If the competitor URL step fails, verify each URL is a real, publicly accessible website
3. Refresh the page and re-open the wizard from the Intelligence card on the home screen - your progress may be saved
4. If the issue persists, try a different browser or clear your cache
See Intelligence Quick Start for the expected wizard flow.
**What you see:** You completed the wizard and approved setup, but no briefs have arrived.
**Why it happens:** The initial data collection can take 1 to 3 hours. Brief delivery is also controlled by your chosen frequency (daily, weekly, or monthly).
**How to fix it:**
1. Check your notification channels - confirm Push notifications are enabled in your browser and the correct email is set in your account
2. Allow 1 to 3 hours after approval for the initial data collection to complete
3. Check the **Intelligence** panel in your sidebar - signals and briefs appear there directly, even if push notifications are off
4. Verify your brief frequency setting. If you selected Weekly, your first brief arrives at the end of your first monitoring week
See Following feed to navigate your Intel feed directly.
**What you see:** The Intelligence dashboard is empty or shows no signals after setup.
**Why it happens:** Initial data collection is in progress, the competitor URLs added are not publicly crawlable, or no meaningful changes have occurred since monitoring began.
**How to fix it:**
1. Wait at least 24 hours after approval before expecting signals - the initial scan takes time
2. Verify that the competitor URLs you added are live, public websites (not behind login pages)
3. Open **All signals feed** from the VIEWS section in the sidebar to see every detected change unfiltered
4. If a competitor has been quiet, that is itself a valid signal - Intelligence only surfaces changes, not absence of activity
See Following feed for how to navigate your Intel feed.
**What you see:** A competitor you added shows no signals or the profile seems incomplete.
**How to fix it:**
1. Confirm the URL you added is the competitor's main public website (not a login page, subdomain, or app URL)
2. Try re-adding the competitor using their root domain (e.g., `https://competitor.com` rather than `https://competitor.com/product/features`)
3. New competitors added after the initial wizard run appear in the sidebar. Click **+ Add competitors** in the Intelligence panel to add them
See Company pillars for what Intelligence covers per company.
## Solve issues
**What you see:** Solve returns a broad overview instead of the specific, structured analysis you expected.
**Why it happens:** The question was too broad, lacked context about your situation, or did not specify the expected output format.
**How to fix it:**
Add scope and context to your question. Include:
* Specific companies, markets, or topics to cover
* Your context (who you are, what decision you're making)
* The format you want (comparison table, recommendation with trade-offs, ranked list)
* Constraints (geography, time frame, company size)
**Before:**
```plaintext wrap theme={null}
Analyze the CRM market.
```
**After:**
```plaintext wrap theme={null}
Compare HubSpot, Salesforce, and Pipedrive for a 20-person B2B SaaS sales team. Cover pricing at 20 seats, ease of onboarding, Slack and Gmail integrations, and mobile app quality. Recommend the best fit with trade-offs.
```
See Solve best practices for question-framing techniques.
**What you see:** Solve keeps asking follow-up questions through prompt intelligence instead of starting research.
**Why it happens:** The initial question is ambiguous enough that Solve cannot determine the research scope without more context.
**How to fix it:**
Answer the questions in prompt intelligence. They help Solve produce a more targeted report. Alternatively, rewrite your prompt to pre-answer the most likely follow-up questions: who you are, what decision this informs, and what scope you want.
See Prompt intelligence for how to write prompts that skip them.
## Still stuck?
If you have tried the solutions above and the problem persists, here are more ways to get help.
Browse frequently asked questions about Rocket features, billing, and more.
Learn how to describe problems clearly and use prompts to debug your app.
Get community support and connect with other Rocket builders.
Reach us at [support@rocket.new](mailto:support@rocket.new) for direct help with your issue.
# Best practices
Source: https://docs.rocket.new/intelligence/best-practices
Get the most value from Rocket Intelligence with proven strategies for following, prioritizing, reading signals, and connecting Intel to decisions.
The difference between Intelligence that drives decisions and Intelligence that becomes background noise comes down to how you set up and use it. These strategies help you get maximum value with minimum effort.
## Getting started right
Provide your business URL and role during first login. Intelligence uses this to rank signals. Without it, personalization cannot work properly.
Start with the competitors your sales team loses deals to, the ones your customers compare you to, and the one you are most worried about. You can always add more later.
The company that most directly affects your business should be pinned so its Intel always surfaces first.
Click **Subscribe** on the company dashboard to tell Intelligence why you follow each company. You see the prompt "Why are you following \[company]? Please select one more categories to get personalized Intel." Choose a category:
* **Sales**: Enterprise hires, pricing tiers, deal patterns, customer wins
* **Marketing**: Brand voice, content cadence, narrative shifts, ad spend visibility
* **Product**: Releases, feature direction, velocity changes, roadmap signals
* **Hiring**: Department surges, executive moves, role types, attrition patterns
* **Funding**: Rounds raised, investor moves, valuation shifts, financial disclosures
* **Traffic**: Visit volume, channel mix, engagement quality, geography shifts
* **Competitive**: Posture vs. peers, share-of-voice moves, positioning overlaps
Each category produces differently framed Intel based on its focus area.
Spend 5-10 minutes each morning reviewing your Following feed. Use For You weekly for broader discovery.
## Choosing what to follow
More companies means more signals and more time reviewing. Start with 3-5 companies you can act on, then expand once you have a rhythm.
**Tier your universe:**
* **Tier 1 (2-3 companies):** Direct competitors you encounter in sales and product decisions every week. Pin these.
* **Tier 2 (2-3 companies):** Adjacent competitors who overlap with part of your market.
* **Tier 3 (optional):** Aspirational or tangential companies. Check via For You before committing to Follow.
If a company's signals would not change any decision you make, do not follow them. Every company in your universe should connect to a real question: "If this company changes something, would we respond?"
Two companies you follow for different reasons should have different purposes set. After selecting a category, you write a custom purpose title (e.g., "Tracking Competitive Performance") and description (e.g., "Track Product Strategies, Social Media, Content updates and etc."). You can add multiple purposes per company by clicking **+ Add another**. Click **Save purposes** to confirm. This tells Intelligence exactly how to frame Intel for that company.
## Reading signals effectively
### Start on Overview, then go deep
The Overview tab on any company gives you a cross-pillar scan. Only open individual pillar tabs when something on Overview warrants investigation. This prevents getting lost in detail on quiet days.
### Recognize cross-pillar patterns
The highest-value Intel comes from connecting signals across pillars. Three pattern types to watch for:
A series of small signals building toward a bigger move.
| Week | What you see |
| :------- | :---------------------------------------------------------- |
| 1 | Blog post about "the future of AI in our product" (Website) |
| 2 | Five new ML engineering roles posted (People) |
| 3 | Pricing page adds "AI" badge to enterprise tier (Website) |
| **Read** | This competitor is about to make a major AI feature push |
Each signal alone is moderate. Together they form a high-confidence prediction.
Multiple companies making similar moves in the same window.
| Company | Move |
| :----------- | :--------------------------------------------------------------------------------- |
| Competitor A | Raises Pro tier price by 15% |
| Competitor B | Adds new premium tier |
| Competitor C | Reduces free tier limits |
| **Read** | Market-wide repricing driven by shared cost pressures or higher willingness to pay |
One company breaking from the group.
If three competitors are raising prices and one drops theirs, the outlier is often the most important signal. It may indicate a different strategic bet, a struggle for market share, or new funding enabling aggressive growth.
### Absence matters
Watch for what stops happening:
* A competitor that posted daily goes quiet
* A regularly updated changelog stops getting entries
* Hiring in a department suddenly freezes
Silence can be as significant as activity. It may indicate a pivot, a reorg, or a strategic pause.
## Using Intelligence by role
Before a competitive deal, open the competitor's company canvas. Check:
* **Website**: current pricing and positioning
* **Product**: what they shipped recently that might come up
* **Reviews**: what their customers complain about (your ammunition)
* **Daily brief**: what moved this week that affects your pitch
Before planning campaigns, check:
* **Social**: what content themes competitors emphasize
* **GTM**: what channels and creative they are running
* **Website**: how they position against you
* **Traffic**: which channels drive their growth (and which you can compete on)
Before locking priorities, check:
* **Product & Technology**: what competitors shipped and release velocity
* **People**: where they are hiring (signals what they build next)
* **Reviews**: what pain points their customers report (your opportunity)
* **Website**: what they promote and deprioritize
For strategic reviews, check:
* **Overview**: cross-pillar summary of each competitor
* **Business & Finance**: funding, partnerships, pricing model evolution
* **News & Media**: press narrative and sentiment direction
* **Daily brief**: the "What this means for your business" section
## When to act vs. when to wait
| Signal type | Recommended response |
| :------------------------------------------------------- | :-------------------------------------------------------------------------------- |
| Competitor changes pricing directly affecting your deals | Act immediately. Update battlecards and brief the sales team. |
| Escalation pattern forming across pillars | Investigate soon. Create a [Solve task](/solve/overview) to analyze implications. |
| Single moderate signal, no supporting evidence | Wait. Note it and watch for corroboration. |
| Routine activity (blog posts, regular social content) | Acknowledge and move on |
Intelligence signals are based on publicly available data and AI interpretation. For critical business decisions, validate important signals with additional research. Use [Solve](/solve/overview) to dig deeper before committing to a response.
## Common mistakes
| Mistake | What to do instead |
| :-------------------------------------------------- | :---------------------------------------------------------------------------------------------- |
| Following too many companies at once | Start with 3-5 and expand once you have a rhythm |
| Treating every signal as urgent | Use the daily brief's "What this means" section to gauge significance |
| Never checking For You | Review weekly. It surfaces companies entering your market before you hear about them elsewhere. |
| Reading pillar tabs without checking Overview first | Overview gives context; pillars give depth. Start broad. |
| Monitoring without acting | When Intel reveals something significant, create a Solve task or brief your team |
| Following companies without setting purposes | Purposes enable personalization. Without them you get generic ranking. |
## What's next
Set up your universe and start receiving Intel.
Understand signals, Intel, and personalization.
How to read the company canvas effectively.
# Key concepts
Source: https://docs.rocket.new/intelligence/concepts
Understand the core concepts behind Rocket Intelligence: signals, Intel, pillars, personalization, and how they connect.
This page explains the concepts you will encounter throughout Intelligence. Understanding these makes the rest of the documentation clearer.
## Terminology
| Term | Meaning |
| :---------------------- | :---------------------------------------------------------------------------------------------------------------- |
| **Signal** | A single detected change such as a pricing update, a new hire, a social post, a traffic shift, or a press article |
| **Intel** | What you read in the product: signals interpreted with context and connections, ranked for you |
| **Following** | Your feed of Intel from every company in your universe |
| **For You** | Intel from companies outside your universe, surfaced when signals match your interests |
| **Discover** | Where you browse and add companies to follow |
| **My Universe** | Your personal set of followed companies (shown in the sidebar) |
| **Follow** | Add a company to your universe and start receiving Intel about it |
| **Pin** | Mark a company as priority so its Intel surfaces first |
| **Subscribe / Purpose** | Set why you follow a company so Intel is tailored to your specific interest |
| **Pillar** | A category of intelligence on a company dashboard (Website, Social, News, etc.) |
| **Company canvas** | A company's full dashboard: Overview tab plus nine content pillar tabs |
| **Preview mode** | Viewing a company without following. It appears in sidebar but does not generate personalized Intel |
## How signals become Intel
Intelligence is not a feed of raw alerts. It is an interpretation layer that connects signals into a strategic picture.
Intelligence monitors every public surface a company operates on, including their website, social accounts, news coverage, job boards, review platforms, traffic patterns, and more. When something changes, a **signal** is created.
Each signal is evaluated against everything else: other signals from the same company in the same window, historical patterns of that company's behavior, and your specific business context.
Intelligence determines not just what changed, but what the change likely means. A pricing page update alone is a data point. That same update combined with enterprise-focused social posts and senior sales hiring is a pattern, revealing an enterprise push becoming visible.
The interpreted signal is ranked based on your role, your purposes for following that company, and your pinned priorities. A sales leader and a product manager see the same underlying signals ranked differently.
The result appears as **Intel** in your Following feed, For You feed, or the company's pillar dashboard.
## The daily brief
Every day, Intelligence produces a structured brief for each company you follow. The brief has three parts:
| Section | What it contains |
| :------------------------------------ | :----------------------------------------------------------------------------------------------------------------------- |
| **Signals and insight** | A synthesized paragraph connecting everything that moved across surfaces in the past 24 hours into one strategic picture |
| **Observed events and patterns** | The specific evidence: every signal that was detected and contributed to the synthesis |
| **What this means for your business** | A direct, specific implication written in the context of your competitive position |
The brief arrives before the workday starts. The sales team reads it before a call. The product team reads it before sprint planning. The competitive picture is current, interpreted, and connected to your next decision.
## Personalization
Intelligence personalizes what you see through three mechanisms:
During first login, you provide your name, business URL, and role. Intelligence uses your role to determine which signals are most relevant. A marketing leader sees content and campaign signals ranked higher; a product leader sees feature launches and hiring patterns ranked higher.
For each company you follow, you can set one or more purposes (why you are tracking them). Click **Subscribe** on the company dashboard to begin. You first select a category (such as Competitive, Sales, or Marketing), then write a custom title and description explaining your specific interest. You can click **+ Add another** to attach additional purposes to the same company.
Once saved, your purpose appears as a badge next to the **Following** button on the company dashboard, confirming that Intel for this company will be tailored to your stated reason for tracking.
Pinned companies always surface first. Use pins for the competitors that affect your daily decisions.
## Cross-pillar pattern detection
A single real-world event often creates signals in several pillars. Intelligence connects those dots automatically.
**Example:** A competitor preparing an enterprise push might generate:
* **Website**: Pricing page adds an enterprise tier
* **Social**: CEO posts about "enterprise-grade reliability"
* **People**: Five new enterprise sales roles posted
* **GTM**: First LinkedIn ads targeting IT leaders
Each signal alone is moderate. Together, they reveal a coordinated strategy with high confidence. Intelligence surfaces this as connected Intel rather than four separate notifications.
## Absence detection
Silence is a signal. Intelligence tracks not just what happens, but what stops happening.
* A competitor that posted twice daily goes quiet for two weeks
* A regularly updated changelog stops getting entries
* Job postings in a department suddenly disappear
These absences can be as significant as activity. They may indicate a pivot, a reorganization, or a strategic pause worth understanding.
## Public vs. authenticated experiences
| Experience | What you see |
| :-------------------------------------------- | :----------------------------------------------------------------------------- |
| **Public** (`/intelligence/{slug}`) | Company signals and pillar data, browsable without an account |
| **Authenticated** (`/dashboard/intelligence`) | Personalized feeds, daily briefs, interpretation layers, purpose-based ranking |
Anyone can browse a company's public Intelligence page. Following, subscribing, and receiving personalized Intel requires an account on a Rocket or Booster plan.
## What's next
Your daily source of Intel from companies in your universe.
What each pillar tracks and how to read the company canvas.
Find and add companies to your universe.
Tips for getting maximum value from Intelligence.
# Discover
Source: https://docs.rocket.new/intelligence/feeds/discover
Browse and add companies to your Intelligence universe. Search by name or paste URLs to start tracking.
**Discover** is where you find and add companies to your universe. Browse the full catalog of available entities or add companies by URL.
## Browsing companies
Navigate to the **Discover** tab in your Intelligence header. You see a grid of all available entities with a count displayed (e.g., "All entities (2307)"). Filter by entity type using the tabs at the top right: **All**, **Companies**, **Spaces**, or **Trends**.
The first card in the grid is a **+ Add new entities** shortcut for adding companies by URL. Each company card displays the company logo, name, domain URL, a **Follow** button, and a **View dashboard** link. Browse by scrolling, or use the search bar at the top for a specific company.
## Adding companies
There are two ways to add companies:
Click **Follow** on any company in the Discover grid. The company is immediately added to your universe and signal collection begins.
Use the search bar at the top of the Discover page to type a company name or URL. Results appear as you type, showing matching companies with their domain. Click a result to view its dashboard, then Follow from there.
Click the **+ Add new entities** card at the start of the Discover grid or in the sidebar to open the **Add to My Universe** modal. Search or enter a company name and confirm the associated social accounts. You can switch between **Company**, **Space**, and **Trend** tabs within the modal. Browse suggested companies, or type/paste a URL in the search field and click **Add**. Click **Follow** to confirm.
## What happens after you follow
Once you follow a company:
1. It appears in your sidebar under **Following Entities**
2. Signal collection begins across all ten pillars
3. Intel from that company starts appearing in your **Following** feed
4. You can click the company in the sidebar to open its **company canvas** and browse individual pillar tabs (Overview, Website Intelligence, Social media, News & media, GTM, Traffic, Product & technology, People & hiring, Business & finance, Reviews & community)
## Pricing
Intelligence is included with Rocket and Booster plans at no additional credit cost. Follow as many companies as you need.
You do not need to specify what to monitor per company. Intelligence automatically covers all ten pillars for every company you follow.
## When to add more companies
Good times to expand your universe:
* A new competitor enters your market
* A company you heard about in a deal shows up repeatedly
* An adjacent market is making moves that could affect you
* Your For You feed keeps surfacing a company you want more detail on
## What's next
See Intel from companies you just added.
Deep-dive into a company's activity across all dimensions.
How to choose what to track and avoid noise.
# Following
Source: https://docs.rocket.new/intelligence/feeds/following
The Following feed shows Intel from every company in your universe, serving as your daily source of competitive awareness.
The **Following** feed is your primary view in Intelligence. It shows Intel from every company in your universe, ranked by significance and personalized to your role and purposes.
## What you see
Each Intel item in your feed includes:
* **Company logo, name, and relationship label** at the top (e.g., "Asics, Direct Competitor, a day ago")
* **Headline** summarizing the interpreted insight
* **Detail paragraph** explaining what was detected and its broader context (expandable via "Show more" for longer items)
* **Pillar tags** below the detail showing which pillars contributed (Business, News, GTM, etc.)
* **"WHAT THIS MEANS FOR YOU"** section with a personalized implication for your business
* **Confidence score** (green circular badge, e.g., 76, 84) indicating how strongly the signals support the interpretation
* **View dashboard** link to open the company's full pillar canvas for deeper investigation
Some Intel items reference multiple companies simultaneously (e.g., "HOKA and ASICS both standardize midsole platforms") when cross-company patterns are detected.
Intel is ranked based on:
* **Confidence score:** how strongly the underlying signals support the interpretation
* **Your pins:** pinned companies surface first
* **Your purposes:** the reason you follow each company weights which signals matter more
* **Your role:** from your profile, used to determine which signal types get priority
## Daily rhythm
The recommended way to use Following:
Spend 5-10 minutes reviewing what surfaced overnight.
Each Intel item includes a "What this means for you" section connecting the signal to your business context.
Click **View dashboard** on any Intel item to open the company's full pillar canvas and investigate further.
Decide whether a signal needs a [Solve task](/solve/overview), a conversation with your team, or just awareness.
## Company dashboard
Clicking **View dashboard** on any Intel item (or selecting a company from the sidebar) opens the company canvas. This shows the full pillar breakdown with quick-access statistics for all dimensions of company activity.
The dashboard includes:
* **Company header** showing the name, URL, last update time, and community stats (Followers and Subscribers)
* **Following dropdown** with options to Copy link or Unfollow
* **Subscribe button** (orange) to set a purpose for why you track this company
* **Pillar summary cards** (GTM campaigns, Traffic visits, Product & technology releases) with trend graphs and tags indicating what changed this week
* **Pillar stat row** showing counts for Website changes, Social engagements, People hiring signals, Business data, News articles, and Reviews with G2 rating
* **Significant signals** section listing the highest-confidence findings with pillar tags, confidence percentages, and expandable details
* **Pillar navigation** in the left sidebar to open specific tabs (Overview, Website Intelligence, Social media, News & media, GTM, Traffic, Product & technology, People & hiring, Business & finance, Reviews & community)
Clicking a company in your sidebar expands the pillar navigation, giving you direct access to each dimension of their activity.
## Empty state
If you have not followed any companies yet, Following shows a welcome message directing you to **Discover** to build your universe.
Following only shows Intel from companies in your universe. For signals from companies you do not follow, check the [For You](/intelligence/feeds/for-you) feed.
## What's next
Intel from outside your universe that matches your interests.
Find and add companies to grow your universe.
Deep-dive into a specific company's activity.
How to set up your universe for maximum signal quality.
# For You
Source: https://docs.rocket.new/intelligence/feeds/for-you
The For You feed surfaces Intel from companies outside your universe when their signals match your interests.
The **For You** feed shows Intel from companies that are relevant to your interests. It includes signals from companies already in your universe (marked with a green "Following" checkmark) and companies you do not yet follow (showing a "Follow" button). When signals match your profile, role, or the patterns Intelligence has learned from your activity, they surface here.
## What you see
Each Intel item in the For You feed includes:
* **Company name and category** (e.g., "Submagic, Compliance, 15 hours ago")
* **Following indicator** or **Follow button** depending on whether you already track that company
* **Headline and detail** with the interpreted insight
* **Related signals** section listing supporting evidence with timestamps and sources
* **View dashboard** link to open the company's full canvas
## How it works
For You identifies relevance through several signals:
* **Your role:** a product leader sees product and hiring signals from adjacent companies
* **Your industry:** companies in your market that you have not followed yet
* **Pattern matching:** if companies you follow are making a certain move, For You surfaces other companies making similar moves
* **Cross-market signals:** significant events that affect your competitive landscape even from companies outside your direct space
## When to check
For You is not a daily obligation. Check it when you want to:
* Discover companies entering your market
* Spot industry-wide trends before they reach your direct competitors
* Find inspiration from adjacent markets
* Expand your universe with companies you did not know to watch
## Acting on For You signals
When something in For You catches your attention:
* **Follow** adds the company to your universe so future Intel appears in Following.
* **Subscribe** lets you follow and immediately set a purpose for why you are tracking that company, tailoring future Intel.
* **View dashboard** opens the company's full pillar canvas so you can investigate deeper before deciding.
* **Ignore** by scrolling past; Intelligence learns from your engagement patterns over time.
### Subscribing from For You
When you click **Subscribe** on a company from For You, you select a category for why you are following (Sales, Marketing, Product, Hiring, Funding, Traffic, or Competitive) and then provide a custom purpose title and description.
### Viewing a company dashboard
Clicking **View dashboard** opens the company's pillar canvas where you can explore all dimensions of activity before deciding whether to follow.
## Empty state
If For You shows no signals yet, it means Intelligence has not identified relevant matches outside your universe. This resolves as you follow more companies and your profile data helps Intelligence understand your interests better.
## What's next
Intel from companies already in your universe.
Actively browse and add companies.
How personalization and signal matching work.
# Overview
Source: https://docs.rocket.new/intelligence/overview
Rocket Intelligence is always-on competitive intelligence that watches companies you care about and tells you what their activity means for your business.
Rocket Intelligence watches companies you care about across every public surface they operate on, including website, social, news, hiring, traffic, product, GTM, finance, and reviews. It tells you not just what changed, but what it means for your business specifically.
Those findings are packaged as **Intel**: ranked, personalized updates that surface in your dashboard so you can scan and act without hunting for information.
## What Intelligence does
Intelligence is an interpretation layer, not an alerting system. When a signal appears, it is evaluated against everything else happening across every surface simultaneously, including other signals in the same window, the competitor's historical patterns, and your specific business context.
Monitors companies across ten pillars: website, social, news, GTM, traffic, product, people, business, reviews, and a cross-pillar overview.
Spots meaningful signals, including changes, absences, and cross-pillar patterns that reveal strategy.
Ranks what matters based on your role, purposes, and pinned priorities.
Shows Intel in **Following** and **For You** feeds, plus company pillar dashboards.
## What Intelligence replaces
People typically do this manually:
* Refreshing competitor websites for changes
* Scanning Reddit, Hacker News, and social for sentiment
* Watching LinkedIn for hiring and leadership moves
* Checking G2 and app stores for review shifts
* Piecing together signals from five different tools into a spreadsheet
Intelligence does this continuously, across many pillars at once, with **absence detection** (when something stops happening) and **cross-pillar patterns** (when several signals together imply a strategy).
## What Intelligence is not
* **Not** a news aggregator or general-interest newsletter
* **Not** a research database you query on demand (that is [Solve](/solve/overview))
* **Not** a simple alert tool that pings every change
* **Not** a team workspace with a shared feed. Each user has a personalized universe.
Intelligence pushes what matters, ranked and personalized, instead of making you hunt for it.
## Core principles
| Principle | What it means |
| :---------------------------------- | :------------------------------------------------------------------------------------ |
| **Signals are truth** | Everything you see traces back to a detected change |
| **Change beats state** | What changed matters more than a static snapshot |
| **Absence is a signal** | Silence or slowdown can be as important as activity |
| **Significance is personalized** | The same signal can matter differently per user |
| **Facts free, interpretation paid** | Raw signals are visible on public pages; deeper interpretation aligns with paid plans |
## Who it is for
Intelligence serves operators with skin in the game, people whose work changes because of what they learn:
* **Founders and CEOs** need competitive awareness before board meetings and strategic decisions
* **Product leaders** need to know what competitors shipped and what their hiring implies about what they are building next
* **Sales leaders** need current positioning, pricing moves, and competitive deal prep before every call
* **Marketing leaders** need competitor messaging shifts, campaign themes, and content gaps
* **Strategy and corp dev** need market-wide patterns, M\&A signals, and convergence moves
* **Investors** need portfolio company monitoring and market-level pattern detection
## Intelligence vs. Solve
Rocket has two research capabilities that serve different purposes.
| | **Intelligence** | **Solve** |
| ---------------- | ------------------------------------------------- | ------------------------------------------------- |
| **When to use** | You want ongoing awareness of changes | You have a specific question right now |
| **How it works** | Follow companies, receive continuous Intel | One-time research task, structured report |
| **Output** | Personalized feeds and company dashboards | A report with data, analysis, and recommendations |
| **Setup** | Follow companies in Discover | New Solve task per question |
| **Example** | "Tell me when Competitor X changes their pricing" | "What is Competitor X's current pricing model?" |
They work well together: use Intelligence to watch for changes over time, then create a Solve task to analyze the implications when something significant surfaces.
## Where to find Intelligence
| Surface | URL | What you see |
| :------------------ | :---------------------------------------- | :-------------------------------------------- |
| Marketing landing | `/intelligence` | Product overview, browse companies |
| Public company page | `/intelligence/{slug}` | Company signals, browsable without an account |
| Dashboard (default) | `/dashboard/intelligence/following` | Your Following feed after login |
| For You | `/dashboard/intelligence/for-you` | Recommended Intel outside your universe |
| Discover | `/dashboard/intelligence/discover` | Browse and add companies |
| Company deep-dive | `/dashboard/intelligence/{slug}/{pillar}` | Pillar-level detail for a specific company |
Once inside the dashboard, your sidebar organizes followed companies with expandable pillar navigation for quick access to any dimension.
## What's next
Follow your first companies and start receiving Intel.
Understand signals, Intel, pillars, and personalization.
What each pillar tracks and how to read a company canvas.
Get the most value with the least effort.
# Business & Finance
Source: https://docs.rocket.new/intelligence/pillars/business-finance
The Business & Finance pillar tracks how a company makes money, who funds it, and commercial partnerships.
The Business & Finance pillar tells you how a company **makes money**, who funds it, and what commercial relationships signal about direction. This is pricing strategy and business model evolution, not just the pricing page HTML.
The Business & Finance pillar has five sub-tabs: **Overview**, **Funding & investment**, **Pricing strategy**, **Partnerships & customers**, and **Revenue signals**. The Pricing strategy tab shows stats like Pricing changes (count by severity), Current model classification, Pricing signals (with dominant theme), and Velocity. It also displays a Model classification history and Pricing change history timeline with event severity and tags such as "Competitive Response" or "Market Contraction".
## What it tracks
* **Pricing strategy evolution**: model shifts (seat-based to usage-based, freemium changes, tier restructuring)
* **Funding rounds**: investors, valuation, amount raised
* **Revenue signals**: publicly inferable revenue indicators, growth metrics shared publicly
* **Partnerships**: major customer relationships, integration partnerships, co-selling
* **Monetization and commercial posture**: how aggressively they monetize and what it signals
## Sub-tabs
### Overview
A cross-tab summary of commercial activity including funding status, pricing model classification, and partnership count.
### Funding & investment
Tracks funding rounds, investors, valuation changes, and capital market activity. Funding events often precede major product or GTM acceleration within 6-12 months.
### Partnerships & customers
Monitors major partnership announcements, integration partners, and customer relationships. A first co-selling partnership or a new ecosystem integration signals GTM strategy shifts.
### Revenue signals
Surfaces publicly inferable revenue indicators and growth metrics. Includes publicly shared ARR milestones, customer count changes, and growth rate signals from press or filings.
## Example Intel
* Added usage-based tier on top of existing seat pricing, suggesting they are testing PLG expansion
* First major partnership announced in 12 months, indicating a break from solo GTM
* Series C raised at 3x previous valuation, serving as a market confidence signal
* Removed free tier entirely, suggesting a shift to sales-led or an effort to reduce support burden
## What is not in this pillar
| Signal type | Where to find it |
| :------------------------------------- | :----------------------------------------------------- |
| Pricing page layout change (HTML/copy) | [Website](/intelligence/pillars/website) |
| Funding article as press coverage | [News & Media](/intelligence/pillars/news-media) |
| Revenue-related job postings | [People & Hiring](/intelligence/pillars/people-hiring) |
A pricing model change (Business & Finance) is different from a pricing page update (Website). The Business pillar tracks the strategic shift: did they change how they charge? The Website pillar tracks the page itself: did they rewrite the copy? Both matter, but they answer different questions.
## What's next
What customers and the market say back.
How all pillars connect and when to cross-reference.
# GTM
Source: https://docs.rocket.new/intelligence/pillars/gtm
The GTM pillar tracks how a company actively acquires customers through paid campaigns, creator partnerships, PR motions, and developer marketing.
The GTM (Go-to-Market) pillar tells you how a company **actively acquires** customers. This is the demand-generation and distribution strategy in motion.
The GTM pillar has seven sub-tabs: **Overview**, **Paid marketing**, **Creator & influencer**, **PR & Media** (coming soon), **SEO & content** (coming soon), **Developer marketing** (coming soon), and **Community & virality** (coming soon). The Paid marketing tab shows stats like Total visits, Top channel, Paid share, Diversity score, and GTM posture, along with a "GTM fingerprint" radar chart and "Top motions" breakdown showing percentage allocation across Paid, Creator, PR, SEO, Dev, and Community channels.
## What it tracks
* **Paid campaigns and ad creative**: messaging, format, and targeting (not unreliable spend estimates)
* **Creator and influencer partnerships**: sponsored content, brand ambassadors
* **PR outreach and launch motions**: coordinated media pushes
* **SEO and content strategy**: programmatic SEO, content clusters, keyword targeting
* **Developer marketing**: DevRel programs, open source activity, events and sponsorships
* **Community and virality**: company-driven community growth, referral programs
## Example Intel
* First LinkedIn ads appeared targeting enterprise IT decision-makers
* Creator partnership program went quiet for six weeks after running weekly
* New programmatic SEO pages detected for comparison keywords ("X vs Y")
* Sponsored developer conference presence increased from one event to four in a quarter
## What is not in this pillar
| Signal type | Where to find it |
| :------------------------------------------- | :------------------------------------------------- |
| Resulting visit volumes and traffic patterns | [Traffic](/intelligence/pillars/traffic) |
| Blog pages on their own site | [Website](/intelligence/pillars/website) |
| Organic social posts (non-paid) | [Social Media](/intelligence/pillars/social-media) |
| Press articles resulting from PR | [News & Media](/intelligence/pillars/news-media) |
GTM signals often appear before results show up in Traffic. A new paid campaign (GTM) should produce a traffic spike (Traffic) within weeks. If it does not, the campaign may be underperforming.
## What's next
The results of GTM efforts: who visits and from where.
What the company is shipping.
# News & Media
Source: https://docs.rocket.new/intelligence/pillars/news-media
The News & Media pillar tracks third-party press and editorial coverage, revealing the narrative a company does not control.
The News & Media pillar tells you how **third-party press and editorial** cover a company. This is the narrative the company does not control: what journalists, analysts, and publications say about them.
The News & Media pillar has five sub-tabs: **Overview**, **Article feed**, **Sentiment analysis**, **Awards & recognition**, and **PR activity**. The Article feed shows stats including Total Articles, Positive/Negative Sentiment percentages, Tier 1 Coverage count, and Coverage Velocity, along with a coverage volume trend chart and a top articles table with impact ratings.
## What it tracks
* **Coverage volume and velocity**: how much press a company gets and when it spikes
* **Top articles and tier-1 placements**: which outlets are writing about them
* **Sentiment and narrative themes**: how the tone and story evolve over time
* **Press releases and PR strategy signals**: when they are actively driving media
* **Executive media appearances**: interviews, awards, analyst recognition
* **Narrative gaps**: differences between what the company says (Website/Social) and what press says
## Sub-tabs
### Overview
A high-level summary of all media coverage including volume, sentiment breakdown, and top-line narrative themes.
### Sentiment analysis
Tracks how the tone and narrative themes evolve over time across all press coverage. A shift from positive to negative sentiment, or a new dominant theme emerging, reveals market perception changes.
### Awards & recognition
Surfaces industry awards, analyst mentions, and recognition events. Useful for tracking when competitors gain credibility in new categories or analyst frameworks.
### PR activity
Detects coordinated press releases and media outreach patterns. Distinguishes between organic coverage and company-driven PR motions, showing when a competitor is actively shaping their narrative.
## Example Intel
* Tier-1 coverage shifted from "AI safety" to "enterprise readiness" over six weeks
* Coverage volume spiked 3x coinciding with a funding announcement
* Press narrative turned negative after a security incident, while company website made no acknowledgment
* First analyst mention in a Magic Quadrant category
## What is not in this pillar
| Signal type | Where to find it |
| :----------------------------------------- | :------------------------------------------------------------- |
| Company-driven PR motions and ad campaigns | [GTM](/intelligence/pillars/gtm) |
| User reviews on G2, Reddit, or app stores | [Reviews & Community](/intelligence/pillars/reviews-community) |
| Company's own blog posts | [Website](/intelligence/pillars/website) |
Watch for divergence between what a company says about itself (Website and Social pillars) and what the press says about them (News). Gaps between self-narrative and external narrative often reveal vulnerabilities or upcoming pivots.
## What's next
How the company actively acquires customers.
Who visits and from where.
# Overview
Source: https://docs.rocket.new/intelligence/pillars/overview
Every company you follow gets a canvas with ten pillar tabs. Each pillar tracks a different dimension of activity. Together they reveal strategy.
When you open a company in Intelligence, you see a **company canvas**, a dashboard with an Overview tab and nine content pillar tabs. Each pillar tracks a different dimension of the company's public activity.
Signals are detected inside individual pillars. The Intel in your [Following](/intelligence/feeds/following) and [For You](/intelligence/feeds/for-you) feeds may combine signals from one or many pillars into a single interpreted insight.
## Overview tab
The Overview is not a separate data source. It is a cross-pillar summary that gives you a quick read before opening specific pillars.
**What you see on Overview:**
* **Pillar summary cards** at the top showing key metrics with trend graphs (GTM campaigns, Traffic visits, Product & technology releases) and highlighted tags for what changed this week
* **Pillar stat row** showing counts across all dimensions: Website changes, Social engagements, People hiring signals, Business data, News articles, and Reviews with G2 rating trends
* **Significant signals** section listing high-confidence findings with pillar tags, confidence scores, and expandable details
* **Data coverage** and **Activity heatmap** sections at the bottom showing monitoring completeness
**Use Overview when:** You want a quick read on "what is moving" before diving into a specific dimension.
When you click a company in your sidebar, it expands to show all available pillar tabs. Click any pillar name (Website Intelligence, Social media, News & media, etc.) to jump directly to that dimension of the company's activity.
## Pillar tabs
What the company says on its own site
Posts, engagement, and executive activity
Third-party press and editorial coverage
How the company acquires customers
Who visits and from where
What the company ships
Who works there and what hiring implies
Revenue signals, funding, and partnerships
What customers and the market say back
## Pillar boundary cheat sheet
One real-world event can create signals in several pillars. Use this table to know where to look.
| If you are looking at... | Open this pillar |
| :----------------------------------------- | :----------------------- |
| Homepage, pricing page, blog on their site | **Website** |
| Company or executive posts | **Social Media** |
| Visits, SEO rankings, channel mix | **Traffic** |
| Ads, campaigns, creators, DevRel | **GTM** |
| Releases, GitHub, API, changelog | **Product & Technology** |
| Jobs, exec moves, Glassdoor | **People & Hiring** |
| Funding, pricing strategy, partnerships | **Business & Finance** |
| Press, journalists, media narrative | **News & Media** |
| G2, Reddit, HN, app reviews | **Reviews & Community** |
| Everything at a glance | **Overview** |
Intelligence's core value is connecting signals across pillars. A pricing page change (Website) combined with enterprise sales hiring (People) and LinkedIn ads targeting IT leaders (GTM) is one story: an enterprise push, visible across three tabs simultaneously.
## Reading across pillars
Individual pillar tabs give depth. The real insight often comes from cross-referencing:
* **Launch detection**: Website changes + Social posts + News coverage spiking in the same window
* **Strategic pivot**: Messaging shift (Website) + New department hiring (People) + Ad theme change (GTM)
* **Trouble signals**: Review ratings dropping (Reviews) + Hiring freeze (People) + Media tone shifting negative (News)
* **Enterprise expansion**: Pricing tier added (Website) + Enterprise sales hiring (People) + First LinkedIn ads targeting CIOs (GTM) + Security certification page added (Website)
## What's next
Start with the most direct window into a competitor's strategy.
How to read pillars effectively and spot patterns.
# People & Hiring
Source: https://docs.rocket.new/intelligence/pillars/people-hiring
The People & Hiring pillar tracks who works at a company, who is joining or leaving, and what hiring patterns imply about strategy.
The People & Hiring pillar tells you **who works there**, who is joining or leaving, and what hiring patterns imply about strategic direction. Hiring signals are often the earliest indicator of a move, appearing months before any public announcement.
The People & Hiring pillar has five sub-tabs: **Overview**, **Employee sentiment**, **Active hiring**, **Leadership**, and **Departures**. The Employee sentiment tab shows Glassdoor and Blind ratings, CEO Approval, Recommend to Friend percentage, Review Volume, and sentiment signals including burnout warnings, rating trends, and sub-rating breakdowns compared to industry averages.
## What it tracks
* **Open roles**: count, departments, required skills, posting velocity
* **Executive hires and departures**: C-suite and VP-level changes
* **Hiring patterns mapped to strategy**: which departments are growing and what it implies
* **Employee sentiment**: Glassdoor ratings, Blind mentions (the internal voice)
* **Headcount trends**: total team size and rate of change
## Sub-tabs
### Overview
A high-level summary of team composition, headcount trends, and hiring velocity across all departments.
### Active hiring
Shows open roles by department, posting velocity, and hiring pattern signals. A sudden cluster of roles in a new department is one of the earliest indicators of a strategic bet.
### Leadership
Tracks C-suite and VP-level changes, new executive hires, and organizational structure. New leadership often signals a direction change within 3-6 months.
### Departures
Detects executive and key personnel departures with context on replacement status. An unfilled leadership gap lasting weeks is a meaningful signal about organizational health.
## Example Intel
* First VP Customer Success hire plus cluster of enterprise sales roles, suggesting enterprise expansion is imminent
* CTO departed with no replacement posted for three weeks, indicating a leadership gap
* Engineering hiring surged from 5 open roles to 19 in two weeks, signaling major product investment
* Glassdoor rating dropped from 4.2 to 3.6 over three months, pointing to internal morale issues
## What is not in this pillar
| Signal type | Where to find it |
| :----------------------------------- | :------------------------------------------------------------- |
| Careers page design and copy | [Website](/intelligence/pillars/website) |
| Executive LinkedIn posts and content | [Social Media](/intelligence/pillars/social-media) |
| Customer reviews on G2 or app stores | [Reviews & Community](/intelligence/pillars/reviews-community) |
Job postings are often the earliest signal of a strategic direction. A competitor hiring five ML engineers signals a product investment months before any public announcement. Cross-reference with Product & Technology to confirm when the investment starts shipping.
## What's next
Revenue signals, funding, and partnerships.
What customers and the market say back.
# Product & Technology
Source: https://docs.rocket.new/intelligence/pillars/product-technology
The Product & Technology pillar tracks what a company ships, including feature releases, engineering velocity, API changes, and tech stack evolution.
The Product & Technology pillar tells you what a company **ships** and how fast its engineering organization moves. This is the most direct view into a competitor's product investment.
The Product & Technology pillar has nine sub-tabs: **Overview**, **Changelog**, **Feature analysis**, **API Platform**, **GitHub & OSS**, **Dev ecosystem**, **Tech stack**, **App store**, and **More**. The Feature analysis tab shows stats including Release velocity, Days since last ship, Releases in 30 days, Active GitHub repos, and API changes. It also displays "Features on roadmap (predicted)" with confidence scores, "Feature silences (no marketing support)", and metrics like AI feature ratio, Enterprise language frequency, Bug fix vs feature ratio, and Documentation growth.
## What it tracks
* **Feature releases and changelogs**: what was shipped and when
* **Release velocity**: how often they ship, and whether the cadence is changing
* **Silent releases**: features shipped without marketing (no blog post, no social announcement)
* **API and platform changes**: new endpoints, deprecations, SDK updates
* **GitHub activity**: open source contributions, repository activity where available
* **SDK downloads and ecosystem health**: package manager stats, developer adoption signals
* **Tech stack evolution**: detected infrastructure changes, new frameworks adopted
* **App store version history**: release notes and update frequency
## Sub-tabs
### Overview
A high-level summary of shipping activity, release velocity, and engineering investment signals.
### Changelog
Tracks official changelog entries and release notes over time. See exactly what was shipped, when, and how the release cadence is trending.
### API Platform
Monitors new endpoints, deprecations, SDK updates, and API versioning. Critical for platform teams tracking developer ecosystem competition.
### GitHub & OSS
Tracks open source contributions, repository activity, and community health. A repository going stale or a burst of new commits both tell a story about engineering priorities.
### Dev ecosystem
Shows package manager stats, SDK downloads, and developer adoption signals. Useful for gauging whether a competitor's developer platform is gaining or losing traction.
### Tech stack
Detects infrastructure changes, new frameworks adopted, and technology evolution. Reveals platform bets and architectural shifts before they appear in marketing.
### App store
Monitors app store version history, release notes, and update frequency. Tracks how mobile investment compares to web and whether updates are feature-driven or maintenance-only.
## Example Intel
* Three features shipped in one week with no launch post, indicating a silent release pattern
* New enterprise SSO endpoints appeared in API changelog
* Release cadence slowed from weekly to monthly, suggesting a possible team reorg or pivot
* Open source repository went from active maintenance to stale (no commits in 60 days)
## What is not in this pillar
| Signal type | Where to find it |
| :----------------------------------- | :------------------------------------------------------------- |
| Launch tweets and announcement posts | [Social Media](/intelligence/pillars/social-media) |
| Homepage feature copy changes | [Website](/intelligence/pillars/website) |
| App store star ratings and reviews | [Reviews & Community](/intelligence/pillars/reviews-community) |
| Press coverage of product launches | [News & Media](/intelligence/pillars/news-media) |
Silent releases (Product pillar shows shipping, but Social and News show nothing) often indicate features being tested or soft-launched before a public push. Watch for the marketing follow-through in subsequent weeks.
## What's next
Team composition and what hiring tells you about future product direction.
Revenue signals, funding, and commercial posture.
# Reviews & Community
Source: https://docs.rocket.new/intelligence/pillars/reviews-community
The Reviews & Community pillar tracks what customers and the market say back, covering review platforms, forums, and community sentiment.
The Reviews & Community pillar tells you what **customers and the market** say back. This is the uncontrolled voice: real users sharing real experiences on platforms the company cannot edit.
The Reviews & Community pillar has seven sub-tabs: **Overview**, **Review platforms**, **Reddit**, **HackerNews**, **Product Hunt**, **Community forums**, and **Social mentions**. The Product Hunt tab shows audience context notes, stats (Total launches, #1 rankings, Avg upvotes, Avg rating), and a Launch history table with upvotes, comments, star ratings, and AI-generated insight summaries for each launch.
## What it tracks
* **Review platforms**: G2, Capterra, Trustpilot, app store reviews (platform varies by company type)
* **Rating trends**: how scores change over time and whether version releases impact them
* **Reddit, Hacker News, Product Hunt**: community discussions and organic mentions
* **Complaint and praise themes**: recurring topics across reviews
* **Community pulse**: viral third-party moments, organic advocacy or backlash
## Sub-tabs
### Overview
A cross-platform sentiment summary showing aggregate ratings, review volume trends, and community pulse.
### Review platforms
Shows G2, Capterra, Trustpilot, and app store ratings with trend analysis. Rating drops after a product update or pricing change reveal immediate market reaction.
### Reddit
Tracks Reddit discussions, mentions, and sentiment about the company. Reddit threads often surface unfiltered user frustrations weeks before they appear in formal reviews.
### HackerNews
Monitors Hacker News threads, comments, and community perception. HN discussions tend to focus on technical depth and are a leading indicator of developer sentiment.
### Social mentions
Surfaces organic mentions and community discussions across social platforms. Unlike the Social Media pillar (which tracks the company's own posts), this captures what others say about them unprompted.
## Example Intel
* New Reddit complaint theme around pricing after a recent increase, serving as a market pushback signal
* G2 rating drifted down citing missing enterprise features, revealing a vulnerability in the upmarket segment
* Product Hunt launch generated 500+ upvotes and positive community reception
* App store reviews turned negative after latest version update, suggesting a possible quality regression
## What is not in this pillar
| Signal type | Where to find it |
| :------------------------------------- | :----------------------------------------------------- |
| Company's own social posts | [Social Media](/intelligence/pillars/social-media) |
| Employee Glassdoor reviews | [People & Hiring](/intelligence/pillars/people-hiring) |
| Press articles and journalist coverage | [News & Media](/intelligence/pillars/news-media) |
| Company blog responses to feedback | [Website](/intelligence/pillars/website) |
A competitor with dropping review sentiment (Reviews) while actively hiring in Sales (People) may be compensating for product issues with sales effort. That pattern is worth investigating, especially if their pricing is also increasing (Business & Finance).
## What's next
How all pillars connect and the boundary cheat sheet.
How to read across pillars and spot patterns.
# Social Media
Source: https://docs.rocket.new/intelligence/pillars/social-media
The Social Media pillar tracks what a company and its executives post publicly, and how it lands across platforms.
The Social Media pillar tells you what a company and its **tracked executives** post publicly, and how that content lands with their audience.
The Social Media pillar has five sub-tabs: **Overview**, **Executive**, **Content intelligence**, **Engagement anomalies**, and **Ad creatives**. Each provides a different lens on social activity.
## What it tracks
* **Company posts**: activity across LinkedIn, X, YouTube, TikTok, Instagram, Facebook, Reddit
* **Executive posting and cadence**: individual executives tracked with their content
* **Engagement anomalies**: detects spikes above baseline (e.g., "+486% above 90-day baseline") classified as Major or Moderate, with platform and trend data
* **Content intelligence**: themes, topics, and messaging patterns across posts
* **Deleted content**: tracks removals detected within the monitoring window
* **Cross-platform presence**: where the company is active and where it is silent
* **Coordinated posting patterns**: detects when brand and executives post on the same theme simultaneously
## Sub-tabs
### Overview
A cross-platform summary showing posting activity, engagement levels, and platform distribution at a glance.
### Executive
Tracks individual executive posting cadence, topics, and audience engagement. A CEO shifting themes from "developer-first" to "enterprise reliability" signals strategy changes before any official announcement.
### Content intelligence
Analyzes themes, topics, and messaging patterns across all social posts. Reveals what narratives the company is investing in and how their messaging evolves over time.
### Ad creatives
Shows paid social ad creatives detected across platforms. See the exact messaging, visuals, and targeting a competitor uses in their paid social campaigns.
## Example Intel
* CEO posting cadence dropped from daily to once per week
* Product launch post hit 4x normal engagement on LinkedIn
* First TikTok content appeared after months of zero activity
* Executive started posting about "enterprise reliability", a theme shift from developer-focused content
## What is not in this pillar
| Signal type | Where to find it |
| :------------------------------------- | :------------------------------------------------------------- |
| Reddit/HN threads about the company | [Reviews & Community](/intelligence/pillars/reviews-community) |
| Journalist coverage and press articles | [News & Media](/intelligence/pillars/news-media) |
| Paid social ads and campaigns | [GTM](/intelligence/pillars/gtm) |
A spike in executive social activity combined with website messaging changes often signals a coordinated launch happening within days. Check the Website pillar when social activity jumps.
## What's next
Third-party coverage you do not control.
How the company actively acquires customers.
# Traffic
Source: https://docs.rocket.new/intelligence/pillars/traffic
The Traffic pillar tracks who visits a company's surfaces and from where, covering visit volumes, source mix, and growth model signals.
The Traffic pillar tells you **who visits** a company's surfaces and **from where**. Traffic patterns reveal growth models, channel dependencies, and the real-world impact of marketing efforts.
The Traffic pillar is currently rolling out. You may see "Coming soon" in the sidebar for some companies while data collection expands.
## What it tracks
* **Visit volume and trends**: often estimated (disclosed in the UI when applicable)
* **Source mix**: organic, paid, direct, referral, social breakdown
* **Growth model signals**: whether the company grows via PLG, sales-led, or content-led
* **Geography and referrals**: where visitors come from geographically and which sites refer them
* **Organic search**: keyword gains, losses, and ranking movements
* **Engagement quality**: bounce rate, session duration, pages per session
* **App store traffic**: where relevant for mobile-first companies
## Example Intel
* Organic search traffic down 22% over 40 days, suggesting algorithm impact or content decay
* Referral mix shifting from direct to social, indicating a possible viral moment or campaign
* Paid traffic share jumped from 10% to 35%, suggesting they are aggressively buying growth
* New geographic traffic from APAC appeared without corresponding marketing (possible expansion signal)
## What is not in this pillar
| Signal type | Where to find it |
| :--------------------------------------- | :------------------------------------------------------------- |
| The ad campaign that caused a paid spike | [GTM](/intelligence/pillars/gtm) |
| App store reviews | [Reviews & Community](/intelligence/pillars/reviews-community) |
| Website content changes | [Website](/intelligence/pillars/website) |
Traffic data is often estimated using third-party sources. Intelligence discloses estimation where applicable. Use traffic signals directionally (trends and relative changes) rather than as precise absolute numbers.
## What's next
What the company ships and engineering velocity.
Team composition and what hiring implies.
# Website Intelligence
Source: https://docs.rocket.new/intelligence/pillars/website
The Website pillar tracks what a company says on its own website, including messaging, pricing, features, content, and technical surface.
The Website pillar tells you what a company says **on its own website**. This is the surface they control most directly, so every change is intentional.
The Website Intelligence pillar has six sub-tabs: **Overview**, **Pricing**, **About & company**, **Blog & content**, **Legal & compliance**, and **Technical**. Each tab shows relevant stats (total changes, last change time, pages tracked, change velocity, most active area), a recent changes timeline, a change distribution chart, and a change heatmap.
## What it tracks
* **Homepage**: headline, hero copy, CTAs, banners, social proof
* **Pricing page**: tiers, packaging, pricing model, copy and layout
* **Product pages**: what is promoted, deprioritized, or newly added
* **About / company**: mission statements, positioning, team pages
* **Blog and content**: publishing cadence, topics, and themes
* **Legal / compliance**: terms of service, certifications, privacy policy changes
* **Technical surface**: detected stack changes, infrastructure signals
## Sub-tabs
### Overview
A high-level summary of all detected website changes across every monitored page, with a change heatmap and activity timeline.
### About & company
Tracks changes to mission statements, team pages, positioning language, and company narrative. Use this to detect when a competitor reframes who they are or who they serve.
### Blog & content
Monitors publishing cadence, topic themes, and content strategy shifts. A sudden drop in publishing or a new topic cluster often signals a strategic pivot.
### Legal & compliance
Detects terms of service updates, new certifications, and privacy policy changes. New compliance pages (SOC 2, HIPAA, GDPR) often precede an enterprise push.
### Technical
Surfaces detected stack changes, infrastructure signals, and technology evolution. Useful for engineering teams tracking competitor tech choices and platform bets.
## Example Intel
* Homepage CTA moved from developer signup to enterprise demo request
* New compliance certifications page added (SOC 2, HIPAA)
* Pricing restructured from three tiers to four with a new enterprise tier
* Blog publishing cadence dropped from weekly to monthly
## What is not in this pillar
| Signal type | Where to find it |
| :-------------------------------- | :--------------------------------------------------------------- |
| Paid ads and campaigns | [GTM](/intelligence/pillars/gtm) |
| Press articles about the company | [News & Media](/intelligence/pillars/news-media) |
| Product shipping and changelogs | [Product & Technology](/intelligence/pillars/product-technology) |
| Visit volumes and traffic sources | [Traffic](/intelligence/pillars/traffic) |
A pricing page change in the Website pillar often appears alongside signals in People (enterprise sales hiring), GTM (new ad targeting), and Social (executive posts about enterprise readiness). Cross-reference to confirm whether a change is cosmetic or strategic.
## What's next
What the company and its executives post publicly.
Third-party press coverage and editorial narrative.
# Quick start
Source: https://docs.rocket.new/intelligence/quick-start
Start receiving competitive Intel in minutes. Follow companies, set your priorities, and let Intelligence surface what matters.
Intelligence starts delivering value the moment you follow your first company. This guide walks you through getting set up and into a daily rhythm.
## Before you start
You need a Rocket account with an Intelligence-enabled plan (Rocket or Booster). If you have not signed up yet, [create an account](/getting-started/create-an-account) first.
## First-time visitor
If you land on Intelligence without an account, you can browse freely before committing.
Visit `/intelligence` to see the product landing page. Open any company at `/intelligence/{company-slug}` to view their public signals and pillar data.
When you find a company worth tracking, click **Follow** to add it to your universe or **Subscribe** to set a specific purpose for why you are tracking them. Either action prompts sign-up if you are not logged in.
After sign-up, you land on your **Following** feed with the company already in your universe.
## First login
On your first authenticated visit, Intelligence personalizes your experience.
A modal titled "Let's personalize your experience" asks for your first name, last name, business URL, and role. Intelligence uses this to tune which signals surface first and how Intel is framed for you.
Available roles include:
* Founder & CEOs
* Product leaders
* Marketing leaders
* Sales leaders
* VCs & Investors
* Strategy/Corp dev
* Growth teams
* Customer success management
Be specific about your role. A sales leader sees different Intel rankings than a product manager, even for the same company.
A five-step tour introduces the core surfaces:
| Step | What you learn |
| :------------ | :------------------------------------------------------------------- |
| **Following** | Intel from all companies you follow |
| **For You** | Intel from companies outside your universe that match your interests |
| **Discover** | Find and add companies to your universe |
| **Pin** | Priority companies surface first |
| **Subscribe** | Personalized Intel via purposes per company |
The tour ends on your **Following** feed. If you have not followed any companies yet, you see a prompt to visit Discover.
## Add companies to your universe
Click the **Discover** tab in the header or navigate to `/dashboard/intelligence/discover`. You see a browsable grid of all available entities with **Follow** and **View dashboard** buttons on each one.
Click **Follow** on any company card, or click **+ Add new entities** in the sidebar to open the **Add to My Universe** modal. In this modal you can search by name, browse suggested companies, or switch between Company, Space, and Trend tabs to find what you want to track.
For the companies that matter most, click **Pin**. Pinned companies surface first in your feeds and sidebar.
Click **Subscribe** on a company's dashboard to tell Intelligence why you are tracking them. You will first select a category (Sales, Marketing, Product, Hiring, Funding, Traffic, or Competitive), then write a custom purpose title and description. This tailors the Intel you receive for that specific company.
Intelligence is included with your Rocket or Booster plan at no additional credit cost.
## Daily use
Once you are set up, Intelligence works in the background. Here is the typical daily pattern.
### Your sidebar: My Universe
The left sidebar shows your followed companies organized under **Following Entities**. You will see:
* Company names with their icons listed under the header
* Expanded pillar navigation when you click a company (Overview, Website Intelligence, Social media, etc.)
* **+ Add new entities** button at the bottom to add more companies
* **Preview mode** label for companies you are viewing without following
Above the entity list, toggle between **My Universe** and **Deep Dive** views using the buttons at the top of the sidebar.
### Header tabs
The top navigation bar displays three main feed tabs:
| Tab | Use it for |
| :------------ | :--------------------------------------------------------------- |
| **Following** | Daily scan of Intel from companies in your universe |
| **For you** | Discoveries from outside your universe that match your interests |
| **Discover** | Browse all entities and add new companies |
You will also see a search bar on the right side of the header to quickly look up any company by name or URL.
### Company deep-dive
Click any company name in the sidebar or click **View dashboard** on a feed card to open it.
The Overview tab shows pillar summary cards (GTM campaigns, Traffic visits, Product releases), a pillar stat row, and Significant signals detected in the current window.
Use the pillar navigation in the sidebar (or the tabs on the dashboard) to switch between: Website Intelligence, Social media, News & media, GTM, Traffic, Product & technology, People & hiring, Business & finance, and Reviews & community.
## Actions reference
| Action | What it does |
| :--------------------- | :--------------------------------------------------------------------------------------------------------- |
| **Follow** | Adds company to your universe; signal collection begins across all pillars |
| **Subscribe** | Opens the purpose-setting flow: select a category, write a purpose, and receive tailored Intel |
| **Pin** | Marks priority; surfaces first in feeds and sidebar |
| **+ Add new entities** | Opens the "Add to My Universe" modal to search for and add companies |
| **View dashboard** | Opens a company's full pillar canvas from an Intel card |
| **Track Performance** | Purpose badge on the company dashboard showing your stated reason for tracking (visible after subscribing) |
| **Copy link** | Copies the company's dashboard URL (available in the Following dropdown menu) |
| **Unfollow** | Removes from your universe (available in the Following dropdown menu) |
## What's next
Understand signals, Intel, pillars, and how personalization works.
How to read and act on your daily Following feed.
What each pillar tracks and how to read a company canvas.
Get the most value with the least effort.
# Video gallery
Source: https://docs.rocket.new/learn/examples/video-gallery
Watch tutorials, feature walkthroughs, and community builds to learn how others use Rocket.new.
Watch step-by-step tutorials from the Rocket team and builds from the community. Use the tabs to filter by type, or search for a specific topic.
# Configure Intelligence
Source: https://docs.rocket.new/learn/guides/configure-track
How to set up the Rocket.new Intelligence wizard and get useful signals from the Intelligence dashboard.
Intelligence is a one-time workspace setup, not a repeatable task. You run the Intelligence setup wizard once, and it monitors your competitors from that point forward. This guide covers how to configure each step effectively and how to manage your monitoring after setup.
## How to start
From the home screen after login, select **Intelligence** from the bottom of the input area. The wizard walks you through five steps.
## Step 1: Your context
Tell Intelligence who you are so it knows what signals matter.
Paste the URL of your company website.
Choose from the dropdown:
| Option |
| :--------- |
| 1 to 10 |
| 11 to 50 |
| 51 to 200 |
| 201 to 500 |
| 500+ |
Proceed to the next step.
The more specific your business URL and context, the more relevant the signals Intelligence surfaces.
## Step 2: What matters most to you
Select the signal categories you care about. Choose as many as you want.
| Signal category |
| :-------------------- |
| Pricing and packaging |
| Product updates |
| Key hires and exits |
| Funding and valuation |
| Blogs |
| Revenue |
Click **Next** when you have made your selections.
## Step 3: Who are you watching?
Add the URLs of the competitors you want to monitor.
Type or paste a valid URL for the competitor you want to watch.
Click **Add more** and enter another URL. Repeat for every competitor you want to monitor.
Proceed once all competitor URLs are added.
There is no limit on the number of competitors you can add. Start with your most direct competitors and expand later from the Intelligence dashboard.
## Step 4: Channel and frequency
Configure where Intelligence delivers your briefs and how often.
**Notification channels:**
| Channel | Status |
| :-------------------------- | :------------ |
| Push notification | Available now |
| Email (your signup address) | Available now |
| WhatsApp | Coming soon |
| Slack | Coming soon |
**Brief frequency:**
| Frequency | Description |
| :------------- | :---------------------------------------------------- |
| Daily briefs | Selected by default. You receive a summary every day. |
| Weekly digest | A consolidated summary once per week. |
| Monthly digest | A high-level overview once per month. |
Select your preferred channel and frequency, then click **Next**.
## Step 5: Approval
Review everything you configured in the previous steps. When you approve, Rocket starts watching all the competitors and signal categories you selected. Your first brief arrives within 24 hours.
After approval, Intelligence begins processing immediately. You do not need to keep the page open.
## After setup: managing from the dashboard
Once your wizard is approved, everything is managed from the Intelligence panel:
* **Add more competitors** - click **+ Add competitors** in the Intelligence sidebar to add new competitors at any time
* **Review daily briefs** - summary of what changed across all competitors since your last brief
* **Browse all signals** - the full feed, filterable by competitor, channel, or date
* **Open competitor profiles** - six-tab view (Overview, News, Website, Customers, People, Social) for each tracked company
When a signal warrants deeper analysis, use it as the starting point for a Solve task:
```plaintext wrap theme={null}
My competitor just dropped their enterprise pricing by 20% according to my Intelligence brief. Analyze what this likely signals about their strategy - are they commoditizing to grow volume, responding to a new entrant, or preparing for a fundraise? How should we respond?
```
## What to watch for by signal type
**Pricing changes**
Worth analyzing immediately. Price changes signal positioning shifts, competitive pressure, or a push into a new segment.
**New feature launches**
Cross-reference with their hiring patterns (People tab) and job listings to understand investment level.
**Messaging changes**
Homepage headline and positioning changes often precede a campaign or audience pivot. Compare old vs. new in the Website tab.
**Leadership changes**
New VP of Sales, CPO, or CMO hires often signal upcoming strategic shifts. Worth monitoring over the following quarter.
**Customer wins and case studies**
New logos in sectors you're targeting indicate competitive movement in those accounts.
## Common configuration mistakes
"We make software" tells Intelligence nothing about what matters to you. Describe your product, your target customer, your stage, and what competitor moves would change your plans. Better context means better signal curation.
Adding 20 competitors immediately floods your daily brief with noise. Start with your three to five most direct competitors and add others over time as you see what the dashboard surfaces.
More channels means more signals, not better signals. Pick the channels that match your competitive priorities. If you don't care about hiring patterns yet, leave People unchecked for now.
Daily briefs work for very fast-moving markets. For most teams, weekly is enough - and keeps the signal-to-noise ratio healthy. Switch to daily for specific competitors if something heats up.
## What's next?
Frame strategic research questions effectively.
Describe apps and features for better results.
Learn how Intelligence and the dashboard work.
React to competitor changes with a structured workflow.
# Core concepts
Source: https://docs.rocket.new/learn/guides/core-concepts
The essential principles for prompting in Rocket.new, from clear intent to reliable, reusable patterns.
Prompting is how you direct Rocket using clear, natural language. You describe *what* you want (screens, logic, fixes, flows) and Rocket figures out the *how*.
This guide covers:
* The S.I.M.P.L.E. framework for writing effective prompts
* Core prompting strategies (zero-shot, instructional, one-shot)
* How to build features incrementally
* Common mistakes and how to fix them
Looking for ready-to-use prompts? Browse the [Prompt library](/learn/guides/prompt-library). Running into issues? Check the [Debugging guide](/learn/guides/debugging).
## Start with clear intent
Strong prompting always starts with one question: **What should this app, screen, or feature do, in one sentence?** Write that sentence first. Then layer in:
What the user can do (core actions)
Where it lives (which screen, component, or flow)
Avoid vague prompts like "Make this better", "Fix the layout", or "Clean up the logic." These feel fast to write but are slow to fix.
A slightly longer, more specific prompt is almost always faster overall.
## The S.I.M.P.L.E. framework
Use the **S.I.M.P.L.E.** framework as a quick checklist before you send any substantial prompt.
```mermaid theme={null}
graph LR
A[Your Prompt] --> B{S.I.M.P.L.E. Check}
B --> C[S: Specific?]
B --> D[I: Incremental?]
B --> E[M: Meaningful context?]
B --> F[P: Pattern-aware?]
B --> G[L: Limited scope?]
B --> H[E: Explicit structure?]
C --> I[Ready to send]
D --> I
E --> I
F --> I
G --> I
H --> I
```
| Letter | Principle | What it means |
| :----- | :--------------------- | :-------------------------------------------------------- |
| **S** | **Specific** | Say exactly what you want, not just how it should "feel". |
| **I** | **Incremental** | Ask for one focused change at a time. |
| **M** | **Meaningful context** | Include only the context Rocket actually needs. |
| **P** | **Pattern-aware** | Point to existing screens, styles, or flows when helpful. |
| **L** | **Limited scope** | State what **not** to touch to avoid drift. |
| **E** | **Explicit structure** | Describe layout and order the way users experience it. |
You do not need to label each part in your prompt. Just make sure these ideas are present.
### S - Specific
**Vague:**
```plaintext wrap theme={null}
Make a screen that shows some user data.
```
**Specific:**
```plaintext wrap theme={null}
Create a dashboard that shows name, email, and last login date from the `users` table.
```
Specific prompts are faster overall because you skip back-and-forth corrections.
### I - Incremental
Break big ideas into small, safe steps.
```plaintext wrap theme={null}
Step 1: Build just the layout for the checkout page (no payment logic yet).
Step 2: Add basic form validation.
Step 3: Connect to the payment provider.
```
Each prompt should move the app forward in a way you can quickly review.
### M - Meaningful context
Include only the details that change the outcome, enough to be clear, not a full spec.
```plaintext wrap theme={null}
This is the main analytics dashboard for marketing.
Users scan it quickly, often on laptops.
Focus on making key metrics readable at a glance.
```
If a teammate would not need a detail to build it, the AI probably does not either.
### P - Pattern-aware
When you already have good examples in your app, reuse them.
```plaintext wrap theme={null}
Create a settings page using the same card layout, spacing,
and button styles as the existing profile page.
Include sections for notifications, privacy, and account settings.
```
This keeps your app consistent without rewriting every requirement.
### L - Limited scope
Tell Rocket what not to change so it does not "help" too much.
```plaintext wrap theme={null}
Only update the header layout on this page.
Do not change navigation links, routes, or any data fetching logic.
```
Use [@ commands](/build/editor/commands) to automatically limit changes to specific files or folders, ensuring edits stay focused and predictable.
* `@pages/dashboard.jsx only update the header layout. Do not change navigation links or data fetching.`
* `@components/card.jsx fix spacing between title and content. Keep all other styling unchanged.`
### E - Explicit structure
Describe the layout in the same top-to-bottom order a user experiences it.
```plaintext wrap theme={null}
Create a dashboard layout:
- Top: header with the user's name and a "New report" button.
- Middle: three metric cards in a row (revenue, active users, churn rate).
- Bottom: a table showing the last 20 events.
```
Logical order helps Rocket structure the screen cleanly on the first try.
### Self-check before sending
Before you submit a prompt, ask yourself:
1. Do you know exactly what "done" looks like?
2. Is it Specific, Incremental, contextual, Pattern-aware, Limited, and Explicitly structured?
3. Could you review the result in under 5 minutes?
If any answer is "no", shrink the prompt or clarify the outcome.
## Basic prompting strategies
Once you are comfortable with S.I.M.P.L.E., these core strategies cover most day-to-day work.
**Direct instructions.** Use when the task is small and clear, and you do not need to match an existing pattern.
```plaintext wrap theme={null}
Create a screen that lists all orders placed in the last 7 days.
```
Combine with **S**, **L**, and **E** from S.I.M.P.L.E. to keep it specific, scoped, and structured.
**Step-by-step "how."** Use when layout and structure really matter.
```plaintext wrap theme={null}
Build a form layout:
- Title centered at the top,
- Three input fields stacked vertically with 16px spacing,
- Submit button centered below the last field.
```
You are telling Rocket *how* to build it, not just *what* to build.
**"Like this, but for X."** Use when you already have a good example in your app and want to mirror it.
```plaintext wrap theme={null}
Create a billing settings page using the same card layout and spacing
as the existing profile page. Include sections for payment methods,
invoices, and subscription details.
```
This leans on the **Pattern-aware** part of S.I.M.P.L.E.
## Plan, Build, Refine
Think of your prompting workflow in three lightweight phases.
Spend a minute writing down:
* What you are building
* Who it is for
* The top 3 jobs it must do well
```plaintext wrap theme={null}
I am building an internal CRM for our support team.
Top 3 jobs: 1) track conversations, 2) see customer history, 3) schedule follow-ups.
Start by creating a main dashboard layout that surfaces today's tasks and recently updated tickets.
```
Use **Incremental** and **Limited scope**:
```plaintext wrap theme={null}
First, create the layout for the dashboard only.
Do not connect to real data yet, just use mock data.
```
Then:
```plaintext wrap theme={null}
Now connect this dashboard to the existing `tickets` table.
Keep the current layout exactly the same.
```
Once something basically works, avoid "start over" prompts. Instead:
```plaintext wrap theme={null}
The current version of this screen works correctly.
Now only improve the visual hierarchy:
- Keep all existing behavior and data loading,
- Focus on spacing, typography, and grouping related content.
```
Use [`/` commands](/build/editor/commands) to make targeted changes - swap components, reorganize sections, or fix issues - without rebuilding from scratch.
## Common mistakes and how to fix them
These common prompting mistakes map directly to the S.I.M.P.L.E. principles. Use this table as a quick reference when prompts are not working as expected.
| Mistake | Example | Why it fails | S.I.M.P.L.E. fix |
| :----------------------- | :------------------------------------------------------------------------------------------------ | :-------------------------------------- | :---------------------------------------- |
| **The Vague Vanisher** | "Make it look nice" | Subjective, no clear anchor | **S**pecific, **E**xplicit structure |
| **The Everything Bagel** | "Create a full e-commerce site with products, cart, checkout, user accounts, and admin dashboard" | Too many responsibilities at once | **I**ncremental, **L**imited scope |
| **The Missing Data** | "Show all user data in a table" | "All" is undefined, no source specified | **S**pecific, **M**eaningful context |
| **The Silent Change** | "Clean this up" | No definition of what stays the same | **L**imited scope, **E**xplicit structure |
| **The Assumption Trap** | "Make it user-friendly and fast" | Assumes Rocket knows your preferences | **S**pecific, **M**eaningful context |
| **The Reverse Order** | "Add a submit button, then create a form with name and email fields above it" | Describes elements in wrong order | **E**xplicit structure |
| **The Constraint Gap** | "Update the header" | No boundaries on what to change | **S**pecific, **L**imited scope |
### The Vague Vanisher
**Mistake:**
```plaintext wrap theme={null}
Make it look nice.
```
"Nice" is subjective and open to interpretation. Rocket does not know what "nice" means to you.
**Fix:**
```plaintext wrap theme={null}
Improve the visual design of this screen while keeping all logic the same.
Increase white space between sections, use a clean sans-serif font,
set body text to 14-16px, and add subtle 8px rounded corners and soft shadows
to cards so they stand out from the background.
```
### The Everything Bagel
**Mistake:**
```plaintext wrap theme={null}
Create a complete e-commerce site with product pages, shopping cart, checkout, user accounts, payment processing, order tracking, and admin dashboard.
```
Too many responsibilities in one prompt. Hard to review, debug, or roll back.
**Fix (break it into smaller prompts):**
```plaintext wrap theme={null}
Step 1: Create a product listing page with product cards showing image, name, price, and "Add to Cart" button.
```
Then build incrementally using iterative refinement.
### The Missing Data
**Mistake:**
```plaintext wrap theme={null}
Show all the user data in a table.
```
"All" is undefined. No source table, fields, ordering, or filters specified.
**Fix:**
```plaintext wrap theme={null}
Display user data from the `users` table in a table format. Show columns for: user ID, name, email, registration date, and account status. Sort by registration date (newest first). Add a filter to show only active users.
```
### The Assumption Trap
**Mistake:**
```plaintext wrap theme={null}
Make it user-friendly and fast.
```
Assumes Rocket knows your definition of "user-friendly" and "fast."
**Fix:**
```plaintext wrap theme={null}
Use large input fields (minimum 44px height), minimal text, and a single-step submission flow. Optimize by lazy-loading images and implementing pagination for lists over 50 items.
```
### The Silent Change
**Mistake:**
```plaintext wrap theme={null}
Clean this up.
```
No definition of what "clean" means and no boundaries on what should stay the same.
**Fix:**
```plaintext wrap theme={null}
Improve the code organization in the `utils` folder only:
- Refactor helper functions into separate files by category
- Add JSDoc comments to exported functions
- Do not change any function logic, parameters, or return values
- Do not modify files outside the `utils` folder
```
Or with commands: `@utils/helpers.jsx refactor helper functions into separate files. Do not change function logic or parameters.`
### The Reverse Order
**Mistake:**
```plaintext wrap theme={null}
Add a submit button, then create a form with name and email fields above it.
```
Describes elements bottom-to-top instead of top-to-bottom.
**Fix:**
```plaintext wrap theme={null}
Create a form layout:
- Top: form title "Contact Us"
- Middle: name input field (required)
- Below name: email input field (required)
- Bottom: submit button labeled "Send Message"
```
### The Constraint Gap
**Mistake:**
```plaintext wrap theme={null}
Update the header.
```
Too vague. No boundaries on what can be changed.
**Fix:**
```plaintext wrap theme={null}
Update only the header text color and font size:
- Change header text color to #1a1a1a
- Increase font size to 24px
- Do not change header layout, navigation links, logo, or any other styling
- Keep all existing functionality unchanged
```
Or with commands: `@components/header.jsx update only the text color and font size. Do not change layout or navigation.`
When a prompt is not working, check which S.I.M.P.L.E. principle it violates. Most mistakes fall into one of these categories: being too vague (**S**), asking for too much (**I**, **L**), missing context (**M**), or unclear structure (**E**).
## Prompting for integrations
When prompting Rocket to work with external services, being specific about names, keys, and configuration makes the difference between a working integration and a broken one.
### Stripe
Always include the exact product name, price, billing interval, and mode (test or live).
```plaintext Bad prompt wrap theme={null}
Add Stripe payments to my app.
```
```plaintext Good prompt wrap theme={null}
Add a Stripe checkout button for the "Pro Plan" at $29/month. Use test mode. On success, redirect to /dashboard?upgraded=true. On cancel, redirect back to /pricing. Show a loading state on the button while the session is being created.
```
**Key details to include:**
* Product or plan name (for example, "Pro Plan", "Starter Pack")
* Exact price and billing interval (for example, "$29/month", "$199/year")
* Test or live mode
* Success and cancel redirect URLs
* Whether it is a one-time payment or a subscription
### Supabase
Always name your tables, list the columns with their types, and specify which auth method you are using.
```plaintext Bad prompt wrap theme={null}
Connect my app to Supabase and show user data.
```
```plaintext Good prompt wrap theme={null}
Fetch data from the Supabase `profiles` table. Show columns: display_name (text), avatar_url (text), bio (text), and created_at (timestamp). Filter by the currently authenticated user's ID using auth.uid(). Display the data in an editable form on the /settings page.
```
**Key details to include:**
* Table name and column names with types
* Auth method (email/password, Google OAuth, magic link)
* RLS requirements (who can read, write, update, delete)
* Redirect paths after auth events
* Whether to use real-time subscriptions
### AI features
Always specify which model to use, the desired tone or style of output, and any context limits.
```plaintext Bad prompt wrap theme={null}
Add AI to generate descriptions for my products.
```
```plaintext Good prompt wrap theme={null}
Add a "Generate Description" button next to the product description field. When clicked, send the product name and category to OpenAI's gpt-4o model with the prompt: "Write a 2-sentence product description in a friendly, professional tone." Insert the result into the description field. Let the user edit the result before saving.
```
**Key details to include:**
* Model name (for example, gpt-4o, claude-3.5-sonnet, gemini-pro)
* Tone or style (for example, professional, casual, technical)
* Output format (for example, bullet points, paragraph, JSON)
* Maximum length or token limit
* Fallback behavior if the API call fails
### Email
Always specify the trigger event, recipient, subject line, and body content.
```plaintext Bad prompt wrap theme={null}
Send emails when things happen in my app.
```
```plaintext Good prompt wrap theme={null}
When a user completes checkout, send an order confirmation email using Resend. Recipient: the user's email from their profile. Subject: "Order #[order_id] confirmed". Body: list purchased items with name, quantity, and price, then show the total and a "View Order" button linking to /orders/[order_id]. Use the RESEND_API_KEY from environment variables.
```
**Key details to include:**
* Trigger event (for example, signup, purchase, password reset)
* Recipient (who gets the email)
* Subject line
* Body content and any dynamic data to include
* Which email service to use (Resend, SendGrid)
* API key location (environment variables)
### Quick comparison
| Integration | Bad prompt | Good prompt | Why it is better |
| :------------ | :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- |
| **Stripe** | "Add payments" | "Add a Stripe checkout for the Pro Plan at \$29/month in test mode, redirecting to /success on completion" | Specifies plan, price, mode, and redirect |
| **Supabase** | "Save data to the database" | "Insert a new row into the `tasks` table with columns title (text), status (text), and user\_id (uuid) from the task creation form" | Names the table, columns, and types |
| **AI** | "Use AI to help users" | "Add a summarize button that sends article content to OpenAI gpt-4o and returns 3 bullet points in a professional tone" | Names the model, output format, and tone |
| **Email** | "Send notification emails" | "When a team member is invited, send an email via Resend with subject 'You have been invited to \[team\_name]' and an accept button linking to /invite/\[token]" | Specifies trigger, subject, body, and service |
| **Analytics** | "Add tracking" | "Track a 'signup\_completed' GA4 event with parameters signup\_method and plan\_name when a user finishes registration" | Names the event, parameters, and trigger |
# Debugging
Source: https://docs.rocket.new/learn/guides/debugging
Use prompts to debug apps in Rocket.new. Describe problems clearly, isolate issues, and fix them safely.
When something in your app is not working as expected, debugging means figuring out what is wrong and fixing it. In Rocket, you do this by explaining the problem clearly so the AI can help you fix it without starting over.
This guide covers:
* How to describe problems so they are easy to fix
* Quick commands for common issues
* How to make small, safe fixes instead of big rewrites
* Common integration errors and fix prompts
## When something goes wrong
Before you write a long message, try these quick checks:
Sometimes the page just needs to reload.
If you know what broke it, undo it.
Look for spelling mistakes in names and labels.
Make sure your connections and configuration are correct.
Try simple commands before writing a long debugging message:
* `/Fix Navigation Issues` for broken links or pages not loading
* `/Fix Layout Issues` for spacing, alignment, or things looking wrong
* `/Fix Theme Switching` for problems switching between light and dark mode
## How to describe problems
The best way to get help is to explain your problem clearly. Use this template:
```plaintext wrap theme={null}
1. What I expected:
[Describe what should happen]
2. What actually happened:
[Describe what happens instead]
3. Error message (if any):
[Copy any error messages you see, or say "no error message"]
4. Where this is happening:
[Which page or part of your app]
5. What I already tried:
[List anything you already checked or changed]
```
Then ask Rocket to help:
```plaintext wrap theme={null}
Based on this information, explain what is most likely causing this issue.
Then suggest a safe, minimal change to fix it.
```
### Example
```plaintext wrap theme={null}
1. What I expected:
On the login page, when I enter my login information and click submit,
I should go to the main dashboard page.
2. What actually happened:
I click submit, the button shows it is working for a moment,
but then I stay on the login page. The page address does not change.
3. Error message (if any):
I see an error message that says: "Cannot read property 'userId' of undefined"
4. Where this is happening:
The login page
5. What I already tried:
- Checked that my login information is correct
- Made sure the information is being saved
- Tried opening in a different browser
```
## Step-by-step guide when something breaks
Look for any error messages on the screen or in the browser.
* If you see an error message, copy the exact text and use it in your problem description.
* If you do not see an error message, move to the next step.
Compare what is on the page to what you expected.
* If something looks wrong, describe what you expected and what you actually see.
* If everything looks correct, move to the next step.
If clicking buttons or interacting with the page does nothing at all:
* Look more carefully for error messages you might have missed
* Describe what should happen when you interact with the page
* Describe what actually happens (nothing)
Use the template from "How to describe problems" above to organize what you found. Include the error message, what looks wrong, or what does not respond.
## Quick commands for common problems
Rocket has special commands that can fix common problems quickly. Try these before writing a longer message.
### Layout and spacing
* `/Fix Layout Issues` fixes things that look misaligned or spaced wrong
* `/Fix Layout Issues in pricing grid` fixes layout in a specific area
* `/Fix Layout Issues for mobile breakpoints` fixes responsive layout issues
### Navigation
* `/Fix Navigation Issues` fixes broken links or pages that do not load
* `/Fix Navigation Issues in header navigation` targets a specific area
* `/Fix Navigation Issues for dashboard routes` targets specific routes
### Theme
* `/Fix Theme Switching` fixes problems switching between light and dark mode
### Login and authentication
* `/Fix Supabase Authentication Issues` fixes common login and signup problems
* `/Fix Supabase Authentication Issues for users who can sign up but cannot log in` targets a specific scenario
### Code organization
* `/Organize Code` cleans up messy or hard-to-find code
* `/Organize Code in src/components/dashboard.tsx` targets a specific file
### Scoping changes to one file
Use `@` followed by the file name to make sure changes only happen in that file:
```plaintext wrap theme={null}
@pages/login.jsx fix the submit button behavior
```
## Common problems and how to fix them
```plaintext wrap theme={null}
The popup window opens correctly, but closing it does not work:
- Clicking outside the popup does nothing
- The "Cancel" button sometimes works, sometimes does not
Only fix how the popup closes:
- Clicking the area behind the popup should close it
- The "Cancel" button should always close it
- Pressing the Escape key should close it
Do not change how it looks or any other parts of the page.
```
```plaintext wrap theme={null}
This list is showing the same items twice, and sometimes
it does not update when I add a new item.
First, explain in simple terms what might be causing:
- Why items appear twice
- Why new items do not show up
Then suggest a small change to fix both problems,
and only make that change.
```
Try `/Fix Layout Issues` first. Sometimes layout problems make pages feel slow. If that does not help:
```plaintext wrap theme={null}
This page feels slow when loading a lot of information.
Check for things that might be making it slow:
- The page refreshing when it does not need to
- Loading the same information more than once
- Loading too much information when the page first opens
Explain what is making it slow, then suggest specific ways to make it faster.
Do not change how it looks, just focus on making it work better.
```
Use `@pages/profile.jsx` to limit changes to one file, then describe the problem:
```plaintext wrap theme={null}
@pages/profile.jsx fix the submit button behavior. Check what happens when clicked and when form is submitted.
On the "Save" button in the profile form, clicking it does nothing:
- The button is visible and I can click it
- Nothing happens when I click
- No error message appears
- The information does not save
Do not change how the form looks or how it is styled.
```
Use `@pages/tasks.jsx` to limit changes to one file:
```plaintext wrap theme={null}
@pages/tasks.jsx check whether the save function is being called and whether data is being sent correctly.
When I update a task and click "Save", the changes show up temporarily
but disappear after I refresh the page. The information is not being saved
to where it is stored.
Check:
- Whether the save function is being called
- Whether the information is being sent to where it is stored correctly
- Whether the response is being handled properly
Focus only on making sure information saves. Do not change how it looks.
```
Use `@pages/dashboard.jsx` to limit changes to one file:
```plaintext wrap theme={null}
@pages/dashboard.jsx check whether the user list is set up correctly and whether data is being loaded properly.
The user list does not show up on the dashboard page.
The page loads, but the list area is empty even though there are users
stored in the system.
Check:
- Whether the list is set up and used correctly
- Whether the information is being loaded properly
- Whether there are any errors preventing it from showing
Do not change other parts of the dashboard.
```
## Example: Fixing a login problem
Here is how a vague message becomes a clear one.
**Bad (too vague):**
```plaintext wrap theme={null}
The login is broken, please fix.
```
Does not say which page, does not explain what should happen, no error message or details.
**Better (still needs work):**
```plaintext wrap theme={null}
Login does not work after the user signs in.
```
**Good (clear and actionable):**
First try `/Fix Supabase Authentication Issues`. If that does not work, use a detailed description:
```plaintext wrap theme={null}
1. What I expected:
On the login page, when I enter my login information and click submit,
I should go to the dashboard page.
2. What actually happened:
I click submit, the button shows it is working for a moment,
then I stay on the login page. The page address does not change.
3. Error message:
I see an error message that says: "Cannot read property 'userId' of undefined"
4. Where this is happening:
The login page
5. What I already tried:
- Checked that my login information is correct
- Made sure the information is being saved
- Tried opening in a different browser
- Tried /Fix Supabase Authentication Issues
```
Then follow up:
```plaintext wrap theme={null}
@pages/login.jsx based on this information, identify the most likely cause of the issue
and propose a small, focused fix. Explain the change before applying it.
```
## What to avoid
### Being too vague
**Do not do this:** "The form is broken."
**Instead:**
```plaintext wrap theme={null}
On the "Contact" form, clicking "Submit" does nothing:
- Nothing happens when I click
- No success or error message appears
- No information is being sent
Help me fix only the submit button behavior.
```
Or even better: `@pages/contact.jsx fix the submit button behavior. Nothing happens when clicked, no error appears, and no data is sent.`
### Asking for too much at once
**Do not do this:** "Fix the checkout process."
**Instead:**
```plaintext wrap theme={null}
On the checkout page, the payment button shows it is working but never finishes.
The form checks work correctly. Focus only on making the payment button work.
```
Or: `@pages/checkout.jsx fix the payment button so it completes properly. The form validation works correctly.`
### Not giving enough details
**Do not do this:** "The table is not showing information."
**Instead:**
```plaintext wrap theme={null}
The "Orders" table is empty even though there are orders stored in the system.
The table layout looks correct, but no rows appear. Check how information
is loaded for this table.
```
### Saying "sometimes it does not work"
**Do not do this:** "Filtering does not always work."
**Instead:**
```plaintext wrap theme={null}
On the "Orders" table, filtering by status works for
"Pending" and "Completed", but selecting "Cancelled"
shows an empty table even though there are cancelled orders
stored in the system.
Focus on making filtering work for the "Cancelled" status.
Do not change how the table looks or how it is styled.
```
## When your messages are not working
If you have used the template above but Rocket keeps making changes that do not help:
| Situation | What to try |
| :------------------------- | :------------------------------------------------------------------------------ |
| Fix is completely wrong | Be more specific about the problem. Use the template structure. |
| Fix is partially right | Add more details about the problem. Include error messages and location. |
| Changed the wrong parts | Clearly state what NOT to change. Use `@` to scope to one file. |
| Fix changes each time | Break the problem into smaller parts. Fix one issue at a time. |
| Ignores your existing work | Point to similar parts that work correctly. Show what you want it to look like. |
If you are stuck, try explaining the problem to someone else in plain English. The words you use to explain it are often the words you should use in your message to Rocket.
## Common integration errors
The most frequent integration errors for Supabase, Stripe, email, AI, and deployment are documented with causes and fix prompts in the [Troubleshooting](/help/troubleshooting) page. If you are hitting an error from a connected service, check there for step-by-step solutions.
***
## What's next?
Step-by-step fixes for common integration and deployment errors.
Prompt patterns and iteration strategies for complex apps.
Ready-made prompts for common design and UI tasks.
Answers to the most frequently asked questions.
# Prompting for Build
Source: https://docs.rocket.new/learn/guides/for-build
Describe apps, features, and redesigns effectively in Rocket.new.
The better you describe what you want, the closer Rocket gets on the first try. This guide covers how to write Build prompts for new apps, features, iterations, and redesigns - with concrete examples of what works and what doesn't.
## Principles of effective Build prompts
### Be specific about what, not how
Tell Rocket **what** you want the app to do and look like. Don't tell it which CSS properties to use or how to structure the component tree - that's Rocket's job.
```plaintext wrap theme={null}
Build a task manager with a Kanban board. Three columns: To Do, In Progress, Done. Users can drag tasks between columns. Each task card shows the title, assignee avatar, and due date. Use a dark theme with purple accents.
```
**Why it works:** Describes the user experience clearly - layout, interaction, and visual style - without dictating implementation details.
```plaintext wrap theme={null}
Build a task manager. Use React DnD for drag-and-drop. Create a KanbanColumn component that maps over tasks and renders TaskCard components. Use flex-wrap with gap-4.
```
**Why it's weak:** Over-specifies implementation. Rocket already knows the best way to build a Kanban board. Describing the desired UX is more effective than prescribing code.
### Include the full picture in your first prompt
The more context you give upfront, the better the initial generation. Include:
* **App type** - web app, mobile app, landing page, dashboard
* **Key features** - the 3-5 most important things the app does
* **User flow** - what happens when someone uses the app (first, second, third)
* **Design direction** - color scheme, mood, reference sites, specific aesthetic
* **Data model** - what data exists and how it relates (users, projects, tasks)
```plaintext wrap theme={null}
Build a freelancer invoicing app. Features: create invoices with line items (description, quantity, rate), add client details (name, email, address), calculate totals with tax, send invoices by email, and track payment status (draft, sent, paid, overdue). Dashboard shows: total outstanding, total paid this month, and overdue count. Design: clean and professional, white background with blue accents, similar to FreshBooks. Include authentication - each freelancer only sees their own invoices.
```
```plaintext wrap theme={null}
Build an invoicing app.
```
The comprehensive prompt generates a near-complete app in one shot. The sparse prompt generates something generic that needs many iterations to become useful.
### Describe the experience from the user's perspective
Frame your prompt as if you're describing the app to a new user - what they see, what they do, what happens.
```plaintext wrap theme={null}
When a user opens the app, they see a dashboard with their active projects. Clicking a project opens a detail page with a timeline of milestones and a list of tasks. They can add a new task with a title, description, and due date. Tasks can be marked complete with a checkbox. Completed tasks show with a strikethrough and move to the bottom.
```
## Prompts for new apps
### Simple app
```plaintext wrap theme={null}
Build a habit tracker app. Users can add habits (e.g., "Drink 8 glasses of water," "Read for 30 minutes"). Each day shows a checklist of habits to complete. Track streaks - show the current streak count next to each habit. Include a weekly view that shows completion rates as a heatmap calendar. Use a warm, motivational color scheme (orange and cream). Mobile-responsive.
```
### Complex app
```plaintext wrap theme={null}
Build a project management tool for small teams. Include:
- Authentication with team workspaces (invite by email)
- A project list on the left sidebar
- Inside each project: a Kanban board with customizable columns
- Task cards with: title, description, assignee, due date, priority (low/medium/high), and labels
- A calendar view showing tasks by due date
- Team member profiles with role badges (admin, member)
- Activity feed showing recent actions across the workspace
- Settings page for workspace name, member management, and billing
Use Supabase for auth and database. Design: clean, professional, Notion-inspired aesthetic with a white and gray palette.
```
### Mobile app
```plaintext wrap theme={null}
Build a mobile fitness tracking app with Flutter. Screens: home dashboard (today's workout, calories, steps), workout library (categorized by muscle group), workout player (exercise name, timer, rep counter, rest intervals), progress tracker (charts showing weight/reps over time), and profile/settings. Use a dark theme with neon green accents. Include smooth transitions between screens and animated progress rings on the dashboard.
```
## Prompts for features and iterations
When iterating on an existing app, be specific about what to change and what to keep.
### Adding a feature
```plaintext wrap theme={null}
Add a notification system. Users should see a bell icon in the header with an unread count badge. Clicking it opens a dropdown showing recent notifications (task assigned, comment added, due date approaching). Each notification has a timestamp and a link to the relevant item. Add a "Mark all as read" button. Store notifications in Supabase and mark them as read when viewed.
```
### Changing design
```plaintext wrap theme={null}
Switch the entire app to a dark theme. Background: #0F0F0F. Card backgrounds: #1A1A1A. Text: #E5E5E5. Accent color: keep the existing blue (#3B82F6) but brighten it slightly for dark backgrounds. Update all borders to a subtle #2A2A2A. Make sure charts and graphs remain readable on the dark background.
```
### Fixing a specific issue
```plaintext wrap theme={null}
The mobile navigation menu overlaps the page content when open. Fix it so the menu slides in from the left as an overlay with a semi-transparent backdrop. Tapping the backdrop should close the menu. Also, the menu items are too small to tap on mobile - increase the tap target height to at least 48px.
```
## Prompts for Redesign
Redesign prompts work differently from new builds. You're transforming something that exists, so describe what to keep and what to change.
### Full visual refresh
```plaintext wrap theme={null}
Redesign my website at [url]. Keep all existing content, page structure, and navigation. Transform the visual design: update from the current serif typography to a modern sans-serif (DM Sans for headings, Inter for body), replace the muted color palette with a vibrant one (primary: #6366F1, accents: #EC4899), add more whitespace between sections, modernize the card components with subtle shadows and rounded corners, and improve the mobile layout so the hamburger menu has smooth animation.
```
### Conversion-focused redesign
```plaintext wrap theme={null}
Redesign the landing page at [url] to improve signups. Changes needed: move the email capture form above the fold, make the headline larger and benefit-focused, add a demo video below the hero, replace the generic stock photos with illustrations, add social proof (logos of companies, user count, testimonials) immediately after the hero, simplify the pricing section to reduce decision fatigue, and add a sticky CTA bar that appears on scroll.
```
### Brand-aligned redesign
```plaintext wrap theme={null}
Redesign the website at [url] to match our new brand identity. New brand guidelines: primary color #1E40AF, secondary #F59E0B, font family "Plus Jakarta Sans" for all text. The tone should feel modern and confident, not playful. Replace rounded corners with sharper edges. Use more structured grid layouts instead of the current free-flowing design. Keep all existing content.
```
## Iteration strategies
### Small, focused prompts work best
Instead of one massive prompt with 10 changes, make 2-3 changes at a time. This lets you see the impact of each change and catch issues early.
### Use visual edit for fine-tuning
For pixel-level adjustments - spacing, font sizes, specific colors - [visual edit](/build/editor/visual-edit) is faster than writing a prompt. Click the element, make the change, done.
### Reference what Rocket already built
When iterating, reference existing elements: "Make the sidebar navigation look like the header - same font weight and hover style" or "Apply the same card style from the dashboard to the settings page."
## Common mistakes
"Use a useState hook with useEffect to fetch data on mount" - Rocket handles the implementation. Describe what you want the user to experience instead.
"Make it look good" gives Rocket no direction. Instead: "Clean and minimal, similar to Linear's aesthetic - monochrome with one accent color, lots of whitespace, sharp typography."
Apps have loading states, empty states, error states, and success states. Mention them: "Show a skeleton loader while data loads, a friendly empty state with an illustration when there are no items, and a toast notification on successful save."
"Redesign the whole app, add 5 new features, and change the color scheme" in one prompt makes it hard to evaluate the result. Break it into focused iterations.
For iteration patterns, complexity management, and testing strategies for Build tasks, see [Build best practices](/build/best-practices).
## Quick reference: prompt template
Use this template as a starting point for any Build prompt:
```plaintext wrap theme={null}
Build a [app type] for [target user].
Features:
- [Feature 1 - describe what the user can do]
- [Feature 2]
- [Feature 3]
User flow: [describe the main path a user takes through the app]
Design: [color scheme, aesthetic reference, mood - e.g., "dark theme, Stripe-inspired, professional"]
Data: [what data exists - users, projects, tasks, orders - and how it connects]
Integrations: [Supabase, Stripe, external APIs, if any]
```
## What's next?
Frame strategic research questions effectively.
Describe monitoring needs for Intelligence.
Explore everything Build can create.
Copy-paste prompts organized by role.
# Prompting for Solve
Source: https://docs.rocket.new/learn/guides/for-solve
How to frame strategic questions in Rocket.new for the best results.
Solve is only as good as the question you ask it. This guide teaches you how to frame strategic research questions that produce structured, actionable reports - not generic overviews.
## Anatomy of a good Solve prompt
Great Solve prompts share four qualities:
1. **Specific scope** - a defined topic, market, or set of companies
2. **Clear deliverable** - what format or structure you want in the answer
3. **Context** - enough background for Rocket to understand your situation
4. **Constraints** - time frames, geographies, segments, or other boundaries
```plaintext wrap theme={null}
Compare Notion, Coda, and Slite for small team collaboration. For each, analyze: pricing tiers and limits, core features (docs, databases, wikis), integrations with Slack and Google Workspace, and user sentiment on G2 and Reddit. Which one is best for a 10-person startup that needs docs + lightweight project tracking? Include a recommendation with trade-offs.
```
**Why it works:** Names specific products, lists specific comparison criteria, defines the user's context (10-person startup), and asks for a clear deliverable (recommendation with trade-offs).
```plaintext wrap theme={null}
Tell me about collaboration tools.
```
**Why it's weak:** No specific products, no comparison criteria, no context about who's asking or why. The result will be a broad, generic overview that doesn't help you make a decision.
## Prompt frameworks for common analysis types
### Market sizing
Include the product category, geography, time frame, and what breakdown you want.
```plaintext wrap theme={null}
What is the total addressable market for AI-powered code review tools in North America? Break down by segment: enterprise (1000+ employees), mid-market (100-999), and SMB (under 100). Include 2024 market size and projected CAGR through 2028. Identify the top 5 vendors and their estimated revenue.
```
```plaintext wrap theme={null}
How big is the AI code review market?
```
### Competitive analysis
Name the competitors, specify what dimensions to compare, and describe your vantage point.
```plaintext wrap theme={null}
I'm building a scheduling tool for healthcare clinics. Compare Calendly, Acuity Scheduling, and Zocdoc on: features specific to healthcare (HIPAA compliance, intake forms, insurance verification), pricing for small practices (1-5 providers), patient experience (booking flow, reminders, telehealth), and integration with EHR systems. What gaps could a healthcare-focused alternative fill?
```
```plaintext wrap theme={null}
Compare scheduling tools.
```
### Pricing strategy
Describe your product, target audience, and the decision you're trying to make.
```plaintext wrap theme={null}
I'm launching a B2B SaaS product for HR teams at companies with 50-500 employees. My competitors charge $5-15/user/month. Should I use per-seat pricing, flat-rate tiers, or usage-based pricing? Analyze each model's pros and cons for my segment. Include examples of successful B2B HR tools and their pricing approaches. Recommend a pricing structure for launch with reasoning.
```
```plaintext wrap theme={null}
What should I charge for my SaaS product?
```
### Due diligence / investment analysis
Provide the company or space, the investment stage, and what you need to evaluate.
```plaintext wrap theme={null}
Build an investment thesis for a Series A company in the vertical SaaS space for restaurants. Cover: market size and growth, competitive landscape (Toast, Square, Clover), typical unit economics at this stage, key risks and mitigants, what metrics a Series A company should demonstrate, and comparable recent funding rounds in the space.
```
```plaintext wrap theme={null}
Should I invest in restaurant tech?
```
## Follow-up patterns
The first Solve prompt gets you a broad report. Follow-ups help you drill deeper. Here are effective follow-up patterns:
### Drill down on a section
```plaintext wrap theme={null}
Expand on the pricing analysis. Show me a detailed breakdown of each competitor's pricing tiers, what's included at each level, and how they've changed their pricing over the past 2 years.
```
### Challenge the findings
```plaintext wrap theme={null}
This analysis assumes our target customer is a startup. What changes if we target mid-market companies (200-1000 employees) instead? How does the competitive landscape shift?
```
### Make it actionable
```plaintext wrap theme={null}
Based on this report, give me a prioritized action plan. What are the 5 things I should do in the next 30 days to validate this opportunity?
```
### Cross-reference
```plaintext wrap theme={null}
In my previous analysis of [Topic A], you identified [Finding X]. How does that relate to the findings in this report? Are there contradictions or reinforcements?
```
## Common mistakes
"Analyze the fintech market" is too broad to produce useful results. Narrow it: which segment of fintech? Which geography? What decision are you trying to make?
Solve produces better recommendations when it knows who you are. "I'm a 5-person startup building for small retailers" gives Solve the context to tailor its analysis - not just describe the market in the abstract.
"Give me a full market analysis, competitive teardown, pricing strategy, and go-to-market plan" will produce a shallow overview of each. Break it into focused questions and use follow-ups to go deep.
If you want a comparison table, say so. If you want a recommendation, ask for one. If you want data points with sources, request them. Solve will match the output to your request.
For additional guidance on question framing, report evaluation, and iterative research strategies, see [Solve best practices](/solve/best-practices).
## Quick reference: prompt template
Use this template as a starting point for any Solve prompt:
```plaintext wrap theme={null}
[What I want to know]: [specific question about a defined topic]
Context: [who I am, what I'm building, what decision I'm trying to make]
Scope: [specific companies, markets, geographies, or time frames]
Deliverable: [comparison table, recommendation with trade-offs, prioritized list, action plan]
Constraints: [budget, team size, timeline, or other limiting factors]
```
## What's next?
Set up the Intelligence wizard for useful monitoring signals.
Describe apps and features for better Build results.
Learn how Solve works under the hood.
More tips for getting the most from Solve.
# Get started
Source: https://docs.rocket.new/learn/guides/get-started
Prompting is how you guide Rocket.new using natural language. Learn the basics and start building immediately.
Prompting is how you tell Rocket what you want, clearly, in plain English. You describe the goal and Rocket turns it into UIs, workflows, and fixes.
The clearer your prompt, the more precise the output.
This page covers:
* What prompting is and how Rocket interprets it
* Examples of effective prompts
* Common mistakes to avoid
## Why prompting matters
Prompting is the foundation of everything you do in Rocket. With a few words, you can:
* Create an app from scratch
* Edit or expand existing screens
* Automate logic and workflows
* Debug issues and fix behavior
* Move between design and implementation
The **S.I.M.P.L.E.** checklist from [Core concepts](/learn/guides/core-concepts) helps you write prompts that are specific, focused, and easy to debug.
## What happens when you prompt
Rocket interprets your prompt across three layers:
What are you trying to achieve?
What UI, data, or logic elements are involved?
What should Rocket generate, and how?
### Prompt examples
```plaintext Creating UI wrap theme={null}
Create a welcome screen with a short headline, one sentence of text, and a big button that says "Get started".
```
```plaintext Adding logic wrap theme={null}
When someone books a session, save their name and time, show a thank-you message, and send a calendar invite.
```
```plaintext Debugging wrap theme={null}
The "Next" button is not working on the sign-up screen. Make sure it is visible, clickable, and linked to the next step.
```
Start with: "What should this app, screen, or feature do?" Then describe it in one clear sentence.
After creating, use [`/` commands](/build/editor/commands) to make targeted edits. For edits scoped to specific files, use [@ commands](/build/editor/commands).
## Try it now
Copy one of these prompts and paste it into Rocket to see results:
```plaintext Landing page wrap theme={null}
Create a landing page with:
- Hero section: headline "Welcome to [Your App Name]", subheadline, and primary CTA (Call To Action) button "Get Started"
- Features section: 3 feature cards in a row with icons, titles, and descriptions
- Final CTA section before footer
Use a clean, modern design with plenty of white space.
```
```plaintext Dashboard wrap theme={null}
Create a dashboard layout with:
- Top: header with title and "New" button
- Middle: three metric cards in a row showing key stats
- Bottom: a table or list showing recent activity
Use consistent spacing (16px padding) and a card-based layout.
```
```plaintext Form wrap theme={null}
Create a form with:
- Fields: name (required), email (required), message (optional)
- All inputs stacked vertically with 16px spacing
- Submit button below the fields
- Show inline error messages under invalid fields
```
After creating, use [commands](/build/editor/commands) to change branding or apply your color scheme across all pages.
## Common prompt mistakes
Even if your idea is clear in your head, Rocket only sees what you type. Here are two patterns to avoid:
### Being vague
**Do not do this:** "Make a screen that shows some user data."
**Instead, be specific:**
```plaintext wrap theme={null}
Create a dashboard that shows name, email, and last login date from the `users` table.
```
### Asking for too much at once
**Do not do this:** "Create the UI, add logic, fix responsiveness, and make it look good."
**Instead, focus on one task at a time:**
```plaintext wrap theme={null}
Build just the layout for now. I will add logic next.
```
Three key principles for effective prompting:
1. **Be specific** - Say exactly what you want, not just how it should "feel"
2. **Stay focused** - Tackle one idea at a time. Break complex tasks into smaller prompts
3. **Add context** - Include meaningful details: layout, behavior, data sources, interactions
For more examples and patterns, see [Core concepts](/learn/guides/core-concepts).
Need ready-to-use prompts? Browse the [Prompt library](/learn/guides/prompt-library). Running into issues? Check the [Debugging guide](/learn/guides/debugging).
# Prompt library
Source: https://docs.rocket.new/learn/guides/prompt-library
Ready-to-use prompts organized by what you want to build. Copy, customize, and paste into Rocket.new.
Browse prompts by category, copy any code block, replace the bracketed placeholders with your own details, and paste into Rocket.
**Placeholder guide:**
* `[DATABASE/STORAGE]` becomes "Supabase", "Firebase", or your API
* `[AUTH_PROVIDER]` becomes "Supabase Auth", "Firebase Auth", or your auth service
* `[TABLE_NAME]` becomes your actual table name (for example, "users", "products")
* `[FIELD_1]`, `[FIELD_2]` become your actual field names
If you do not know what to replace, remove the placeholder line entirely or use a generic value like "local storage". You can always refine later.
## Quick start
New to prompting? Start here:
```plaintext wrap theme={null}
Create a landing page with:
- Hero section: headline "Welcome to [Your App Name]", subheadline, and primary CTA button "Get Started"
- Features section: 3 feature cards in a row with icons, titles, and descriptions
- Final CTA section before footer
Use a clean, modern design with plenty of white space.
```
Copy this, replace `[Your App Name]` with your app name, and paste into Rocket.
## Start a project
### Project vision
Define your app's purpose and core features.
```plaintext Template wrap theme={null}
Create a [TYPE] app for [AUDIENCE].
Core features: [FEATURE_1], [FEATURE_2], [FEATURE_3].
Start by building [FIRST_SCREEN_OR_FLOW]:
[Describe what should be on the first screen in 1-2 sentences].
```
```plaintext Example wrap theme={null}
Create a task management app for small teams.
Core features: project boards, due dates, and team assignments.
Start by building the main dashboard:
Show a list of projects with name, owner, and number of open tasks,
plus a section with "Today's tasks" for the logged-in user.
```
### Plan a feature
Break down a complex feature into manageable steps before building.
```plaintext Template wrap theme={null}
Plan the steps needed to add [FEATURE] to this app.
Include:
- Frontend screens or components,
- Data models or tables,
- Any connections to other services (like payment processors, email services, etc.),
- Edge cases we should consider.
Format this as an ordered list I can tackle step by step.
Do not implement anything yet.
```
```plaintext Example wrap theme={null}
Plan the steps needed to add overdue notification emails
for tasks in this app. Include what users see, what happens behind the scenes, and any
automated tasks that need to run, but do not implement yet.
```
### Landing page
```plaintext wrap theme={null}
Create a landing page with:
- Hero section: headline, subheadline, and primary CTA button
- Features section: 3-4 feature cards with icons and descriptions
- Social proof: testimonials or logos
- Final CTA section before footer
Use a clean, modern design with plenty of white space.
```
### Onboarding flow
```plaintext wrap theme={null}
Create a multi-step onboarding flow:
- Step 1: Welcome screen with app value proposition
- Step 2: Collect [INFO_1] and [INFO_2]
- Step 3: Guide to first key action
- Progress indicator showing current step
- Skip option for optional steps
After completion, redirect to [DESTINATION_PAGE].
```
## Build features
Copy, customize placeholders, and paste.
### User authentication
```plaintext Authentication system wrap theme={null}
Create a complete authentication system:
- Sign up page: form with email, password, confirm password, and "Sign up" button
- Login page: form with email, password, "Login" button, and "Forgot password?" link
- Password reset: flow to request and reset password via email
- Protected routes: redirect unauthenticated users to login
- User session: maintain login state and show user info in header
- Logout: button that clears session and redirects to home
Connect to [AUTH_PROVIDER] and handle loading/error states.
```
```plaintext Profile page wrap theme={null}
Create a user profile page with:
- Top section: avatar (circular, 120px), name, and email
- Editable bio section with character counter (max 500)
- Settings section: [SETTING_1], [SETTING_2]
- Save Changes button that validates and updates
Connect to existing user data source.
```
### Task and project management
```plaintext wrap theme={null}
Create a task management feature with:
- Main screen: list of tasks with checkboxes, task text, and delete button
- Add task: input field at top with "Add" button
- Task states: show completed tasks with strikethrough, filter by "All", "Active", "Completed"
- Task counter: show number of active tasks remaining
- Data persistence: save tasks to [DATABASE/STORAGE] and load on page refresh
- Empty state: show message when no tasks exist
Use a clean card-based layout with 16px spacing.
```
### Blog and content
```plaintext wrap theme={null}
Create a blog feature with:
- List page: grid of blog post cards showing title, excerpt, author, and date
- Detail page: full post with title, author, date, featured image, and content
- Create post: form with title, content (rich text), author, and publish button
- Edit/Delete: actions available on detail page for post owner
- Data source: connect to [DATABASE/STORAGE] with posts table/collection
Use a responsive layout that works on mobile and desktop.
```
### E-commerce and products
```plaintext wrap theme={null}
Create a product catalog with:
- Product listing: grid of product cards with image, name, price, and "Add to Cart" button
- Product detail: full product page with images, description, price, quantity selector, and "Add to Cart"
- Shopping cart: sidebar/modal showing cart items, quantities, subtotal, and checkout button
- Search: filter products by name or category
- Categories: filter products by category (if applicable)
- Data source: connect to [DATABASE/STORAGE] with products table/collection
Use consistent spacing and make it mobile-friendly.
```
### Social feed
```plaintext wrap theme={null}
Create a social feed feature with:
- Feed page: chronological list of posts showing author, timestamp, content, and like/comment buttons
- Create post: form at top with text input and "Post" button
- Post interactions: like button (toggle), comment button (opens comments), share button
- Comments: expandable section under each post showing comments with reply option
- User profiles: click author name to view their profile with their posts
- Data source: connect to [DATABASE/STORAGE] with posts, users, and interactions tables
Show loading states and handle empty feeds gracefully.
```
### Dashboard and analytics
```plaintext Analytics dashboard wrap theme={null}
Create an analytics dashboard with:
- Header: page title and date range selector
- Metrics cards: 4-6 cards showing key metrics (e.g., total users, revenue, growth %)
- Charts: line chart showing trends over time and bar chart for comparisons
- Data table: detailed breakdown of metrics with pagination
- Filters: filter by date range, category, or [FILTER_OPTION]
- Data source: connect to [DATABASE/STORAGE] and aggregate data for metrics
Make charts responsive and show loading states while fetching data.
```
```plaintext Dashboard layout wrap theme={null}
Create a dashboard layout with:
- A top header showing [TITLE] and [SECONDARY_ACTION] button.
- A three-card row of metrics: [METRIC_1], [METRIC_2], [METRIC_3].
- A main content area below with a table or list for [PRIMARY_DATA].
Use a card-based layout with 16px padding, 8px rounded corners,
and consistent spacing. Keep navigation and routes unchanged.
```
### Calendar and events
```plaintext wrap theme={null}
Create a calendar feature with:
- Calendar view: monthly grid showing dates with events marked
- Event list: list of upcoming events with title, date, time, and location
- Create event: form with title, date, time, location, description, and "Save" button
- Event detail: view full event details with edit and delete options
- Navigation: previous/next month buttons and today button
- Data source: connect to [DATABASE/STORAGE] with events table/collection
Make calendar responsive and highlight today's date.
```
### Search
```plaintext wrap theme={null}
Create a search feature with:
- Search bar: input field with search icon and clear button
- Search results: list/grid showing matching items with highlighted search terms
- Filters: dropdown filters for [CATEGORY_1], [CATEGORY_2], [CATEGORY_3]
- Sorting: sort by relevance, date, or [SORT_OPTION]
- No results: show helpful message when no matches found
- Data source: search [DATABASE/STORAGE] for [DATA_TYPE] matching query
Debounce search input and show loading state during search.
```
### Notifications
```plaintext wrap theme={null}
Create a notification system with:
- Notification center: dropdown/badge showing unread count
- Notification list: list of notifications with icon, message, timestamp, and mark as read
- Notification types: different styles for [TYPE_1], [TYPE_2], [TYPE_3]
- Real-time updates: show new notifications as they arrive
- Mark all read: button to mark all notifications as read
- Data source: connect to [DATABASE/STORAGE] with notifications table/collection
Show notification count badge and handle empty states.
```
### File upload and media
```plaintext wrap theme={null}
Create a file upload feature with:
- Upload area: drag-and-drop zone or file picker button
- File list: grid/list showing uploaded files with thumbnail, name, size, and delete button
- Upload progress: show progress bar during upload
- File preview: click file to view full-size preview or download
- File types: support images, documents, or [SPECIFIC_TYPES]
- Storage: upload to [STORAGE_PROVIDER] and save metadata to [DATABASE/STORAGE]
Handle upload errors and show file size limits.
```
### Detail page
```plaintext wrap theme={null}
Create a detail page for [ENTITY] with:
- A header showing primary identifier (e.g. name or title),
- Key stats in a small summary row,
- A main section with detailed fields,
- A sidebar (or secondary section) with related actions or metadata.
Make sure the layout adapts well to mobile by stacking sections vertically.
```
### Settings page
```plaintext wrap theme={null}
Create a settings page with:
- Sidebar navigation for settings categories: [CATEGORY_1], [CATEGORY_2], [CATEGORY_3]
- Main content area showing settings for the selected category
- Save button that persists changes
- Success message after saving
Keep existing user data and authentication logic unchanged.
```
## Add integrations
Connect your app to external services. For detailed integration guides, see [Integrations](/build/connectors/overview).
**Authentication**
```plaintext wrap theme={null}
Set up Supabase email/password authentication with signup, login, and password reset flows. Redirect authenticated users to /dashboard and unauthenticated users to /login. Show loading states during auth checks and display inline error messages for invalid credentials.
```
**Database CRUD**
```plaintext wrap theme={null}
Connect to the Supabase `[TABLE_NAME]` table and build a page that lists all rows with columns for [COLUMN_1], [COLUMN_2], and [COLUMN_3]. Add a form to create new records, inline editing for existing records, and a delete button with confirmation dialog. Include pagination (20 rows per page) and a loading skeleton while fetching.
```
**Storage and file uploads**
```plaintext wrap theme={null}
Set up Supabase Storage to handle file uploads in the `[BUCKET_NAME]` bucket. Add a drag-and-drop upload area that accepts images up to 5MB. Show upload progress, generate a public URL after upload, and display uploaded files in a grid with thumbnail previews and delete buttons.
```
**Edge Functions**
```plaintext wrap theme={null}
Create a Supabase Edge Function called `[FUNCTION_NAME]` that accepts a POST request with a JSON body containing [PARAM_1] and [PARAM_2]. The function should [DESCRIBE_LOGIC], then return a JSON response with the result. Add error handling for missing parameters and server errors.
```
**Row Level Security (RLS)**
```plaintext wrap theme={null}
Enable Row Level Security on the `[TABLE_NAME]` table. Create policies so that:
- Authenticated users can only read their own rows (where user_id matches auth.uid())
- Authenticated users can insert rows with their own user_id
- Only the row owner can update or delete their rows
- Unauthenticated users have no access
Explain each policy in a comment.
```
**Social auth providers**
```plaintext wrap theme={null}
Add Google and GitHub social login buttons to the existing login page. Use Supabase Auth with OAuth providers. After successful login, redirect to /dashboard. Handle errors like "account already exists with different provider" gracefully with a user-friendly message.
```
**Real-time subscriptions**
```plaintext wrap theme={null}
Subscribe to real-time changes on the `[TABLE_NAME]` table using Supabase Realtime. When a new row is inserted, update the list on screen without a full page refresh. Show a subtle "New item added" toast notification. Handle connection drops with automatic reconnection.
```
**Database query with filters**
```plaintext wrap theme={null}
Build a filtered view of the `[TABLE_NAME]` table. Add dropdown filters for [FILTER_COLUMN_1] and [FILTER_COLUMN_2], a date range picker for [DATE_COLUMN], and a text search on [SEARCH_COLUMN]. Combine all active filters in the Supabase query. Reset filters with a "Clear all" button.
```
**One-time checkout**
```plaintext wrap theme={null}
Add a Stripe checkout button for [PRODUCT_NAME] priced at [AMOUNT]. When clicked, create a Stripe Checkout session in test mode. On success, redirect to /success with order details. On cancel, redirect back to /pricing. Show a "Processing..." spinner on the button while the session is created.
```
**Subscription plans**
```plaintext wrap theme={null}
Create a pricing page with three subscription tiers:
- [PLAN_1]: $[PRICE_1]/month, includes [FEATURES_1]
- [PLAN_2]: $[PRICE_2]/month, includes [FEATURES_2]
- [PLAN_3]: $[PRICE_3]/month, includes [FEATURES_3]
Each plan has a "Subscribe" button that starts a Stripe Checkout session in subscription mode. Highlight the recommended plan. Include a monthly/annual toggle with a discount badge for annual billing.
```
**Customer portal**
```plaintext wrap theme={null}
Add a "Manage Subscription" button to the account settings page that opens the Stripe Customer Portal. Users should be able to update their payment method, view invoices, and cancel their subscription. After portal actions, redirect back to /settings.
```
**Webhook handling**
```plaintext wrap theme={null}
Set up a webhook endpoint that listens for Stripe events: checkout.session.completed, customer.subscription.updated, and customer.subscription.deleted. On checkout completion, update the user's subscription status in the database. On subscription change, update the plan. On deletion, downgrade to the free tier. Verify the webhook signature for security.
```
**Pricing page with feature comparison**
```plaintext wrap theme={null}
Build a pricing page with a comparison table. Rows represent features: [FEATURE_1], [FEATURE_2], [FEATURE_3], [FEATURE_4], [FEATURE_5]. Columns represent plans: Free, Pro, and Enterprise. Use checkmarks for included features and dashes for excluded ones. Add a CTA button under each plan column.
```
**Refund handling**
```plaintext wrap theme={null}
Add a "Request Refund" button to the order detail page that appears only for orders placed within the last 30 days. When clicked, show a confirmation modal with the order total. On confirm, initiate a full refund through Stripe and update the order status to "Refunded" in the database. Show a success or error message.
```
**Payment form with card element**
```plaintext wrap theme={null}
Create an inline payment form using Stripe Elements. Include a card input field, cardholder name input, and a "Pay $[AMOUNT]" button. Validate the card in real time and show inline error messages. On submit, create a PaymentIntent, confirm the payment, and redirect to /confirmation on success.
```
**Welcome email on signup**
```plaintext wrap theme={null}
After a new user signs up, send a welcome email using [Resend/SendGrid]. Subject: "Welcome to [APP_NAME]!" Body: greet the user by name, summarize what they can do, and include a "Get Started" button linking to /dashboard. Use the existing API key from environment variables.
```
**Transactional notification**
```plaintext wrap theme={null}
When [TRIGGER_EVENT] occurs, send a notification email to the affected user using [Resend/SendGrid]. Subject: "[SUBJECT_LINE]". Body: describe the event, include relevant details like [DETAIL_1] and [DETAIL_2], and add a link to view more in the app. Handle delivery failures by logging the error.
```
**Password reset email**
```plaintext wrap theme={null}
Send a password reset email when a user requests one. Subject: "Reset your [APP_NAME] password". Body: include a personalized greeting, a reset link that expires in 1 hour, and a note saying they can ignore the email if they did not request it. Use [Resend/SendGrid] with the existing API key.
```
**Weekly digest or newsletter**
```plaintext wrap theme={null}
Create a weekly digest email template using [Resend/SendGrid]. Subject: "Your weekly update from [APP_NAME]". Body: include a summary of activity (e.g., [METRIC_1], [METRIC_2]), top items from [DATA_SOURCE], and a CTA to "View full report" linking to /reports. Style it with a clean layout matching the app branding.
```
**Order confirmation email**
```plaintext wrap theme={null}
After a successful purchase, send an order confirmation email using [Resend/SendGrid]. Subject: "Order #[ORDER_ID] confirmed". Body: list purchased items with name, quantity, and price. Include the order total, estimated delivery date, and a "View Order" button linking to /orders/[ORDER_ID].
```
**Email with attachments**
```plaintext wrap theme={null}
When a user clicks "Export as PDF" on the report page, generate the report as a PDF and send it via email using [Resend/SendGrid]. Subject: "Your [REPORT_NAME] report". Body: include a brief summary and attach the PDF file. Confirm the email was sent with a success toast in the UI.
```
**Invite team member email**
```plaintext wrap theme={null}
When an admin invites a new team member, send an invitation email using [Resend/SendGrid]. Subject: "[INVITER_NAME] invited you to join [APP_NAME]". Body: explain what the app does, include an "Accept Invitation" button linking to /invite/[TOKEN], and note the invite expires in 7 days.
```
**SMS notifications (Twilio)**
```plaintext wrap theme={null}
Add SMS notifications using Twilio:
- When [TRIGGER_EVENT] occurs, send SMS to [PHONE_NUMBER]
- Message: "[MESSAGE_TEXT]"
- Handle delivery status and errors
- Log sent messages
Use existing Twilio credentials from environment variables.
```
**Chatbot interface**
```plaintext wrap theme={null}
Create a chatbot UI with a message list and input field at the bottom. Send user messages to [OpenAI/Anthropic/Gemini] using the [MODEL_NAME] model. Display AI responses in styled message bubbles. Show a typing indicator while waiting for a response. Maintain conversation history for context. Use the API key from environment variables.
```
**Content generation**
```plaintext wrap theme={null}
Add a "Generate with AI" button next to the [FIELD_NAME] input. When clicked, send a prompt to [OpenAI/Anthropic/Gemini] asking it to generate [CONTENT_TYPE] based on [CONTEXT_INPUT]. Insert the result into the field. Allow the user to regenerate or edit the result. Use a professional, concise tone.
```
**Text summarization**
```plaintext wrap theme={null}
Add a "Summarize" button on the [CONTENT_PAGE] page. When clicked, send the full content to [OpenAI/Anthropic/Gemini] with the prompt: "Summarize the following in 3-5 bullet points, keeping the key takeaways." Display the summary in a collapsible card above the full content. Show a loading spinner while processing.
```
**Smart search with AI**
```plaintext wrap theme={null}
Enhance the search feature on the [PAGE_NAME] page. When a user searches, send their query to [OpenAI/Anthropic/Gemini] to interpret the intent, then use the interpreted query to search the `[TABLE_NAME]` table. Show results ranked by relevance. Fall back to standard text search if the AI call fails.
```
**AI-powered form autofill**
```plaintext wrap theme={null}
Add an "Auto-fill with AI" button to the [FORM_NAME] form. When clicked, take the user's input from [SOURCE_FIELD] and use [OpenAI/Anthropic/Gemini] to generate suggestions for [TARGET_FIELD_1], [TARGET_FIELD_2], and [TARGET_FIELD_3]. Pre-fill those fields with the suggestions but let the user edit before submitting.
```
**Sentiment analysis**
```plaintext wrap theme={null}
Analyze the sentiment of new entries in the `[TABLE_NAME]` table. When a record is created with a [TEXT_COLUMN] field, send it to [OpenAI/Anthropic/Gemini] to classify the sentiment as positive, neutral, or negative. Store the result in a `sentiment` column. Display a colored badge (green, gray, red) next to each entry in the list view.
```
**Basic GA4 setup**
```plaintext wrap theme={null}
Set up Google Analytics 4 for this app. Add the GA4 tracking script using the measurement ID from the NEXT_PUBLIC_GA_ID environment variable. Track page views automatically on route changes. Verify it works by logging events to the browser console in development mode.
```
**Custom event tracking**
```plaintext wrap theme={null}
Track these custom events in Google Analytics:
- "signup_completed" when a user finishes registration
- "feature_used" with parameter feature_name when a user interacts with [FEATURE]
- "purchase_completed" with parameters value and currency after checkout
- "search_performed" with parameter search_term when a user searches
Create a reusable trackEvent helper function.
```
**Conversion goals**
```plaintext wrap theme={null}
Set up conversion tracking for the following goals:
- User signs up (track on the /signup/success page)
- User upgrades to a paid plan (track after Stripe checkout success)
- User completes onboarding (track on the final onboarding step)
Send each conversion as a GA4 event with relevant parameters like plan_name and signup_method.
```
**Mixpanel user identification**
```plaintext wrap theme={null}
Integrate Mixpanel using the project token from environment variables. Identify users after login with their user ID, email, and created_at date. Track "Page Viewed" on every route change. Track "Button Clicked" with button_name for all primary CTA buttons. Reset the Mixpanel identity on logout.
```
**A/B test tracking**
```plaintext wrap theme={null}
Set up A/B test tracking for the [FEATURE_NAME] feature. Randomly assign users to variant "A" or variant "B" and store the assignment in local storage. Track which variant is shown using a "experiment_viewed" event with parameters experiment_name and variant. Track conversion with an "experiment_converted" event.
```
**Dashboard analytics widget**
```plaintext wrap theme={null}
Add an analytics summary widget to the admin dashboard. Show: total page views (last 7 days), unique visitors, top 5 most visited pages, and average session duration. Fetch data from [Google Analytics Data API / Mixpanel API] using server-side credentials. Display each metric in a card with a sparkline chart.
```
## Build UI components
Build individual components to customize your features.
```plaintext Buttons and CTAs wrap theme={null}
Add a primary call-to-action button to this screen:
- Label: "[LABEL]"
- Full-width on mobile, auto-width on desktop
- Uses the app's primary color
Place it [POSITION] (e.g. below the form, top-right of the card).
Do not change any existing text or layout spacing.
```
```plaintext Forms and inputs wrap theme={null}
Create a form on this screen with:
- Fields: [FIELD_1], [FIELD_2], [FIELD_3]
- All inputs stacked with 16px spacing
Validation:
- [FIELD_1] is required,
- [FIELD_2] must match [CONDITION],
- [FIELD_3] is optional.
On submit:
- Use the existing [ACTION_NAME] (the function that handles this),
- Show a success toast on success,
- Show inline error messages under each invalid field.
```
```plaintext Modals and dialogs wrap theme={null}
Add a modal that opens when [TRIGGER] is clicked:
- Title: "[MODAL_TITLE]"
- Content: [DESCRIBE_CONTENT]
- Primary button: "[ACTION_LABEL]" that [ACTION]
- Secondary button: "Cancel" that closes the modal
- Close on backdrop click and ESC key
Do not change any existing functionality outside the modal.
```
```plaintext Cards and containers wrap theme={null}
Create a card component on this screen:
- White background with 16px padding
- 8px rounded corners and subtle shadow
- Header section with [TITLE] and optional [ICON]
- Body section with [CONTENT]
- Optional footer with [ACTION_BUTTON]
Use this card style consistently across the screen.
```
```plaintext Lists and tables wrap theme={null}
Create a [LIST/TABLE] showing [DATA_TYPE]:
- Columns/fields: [FIELD_1], [FIELD_2], [FIELD_3]
- Sortable by [PRIMARY_SORT_FIELD]
- Clickable rows that [ACTION_ON_CLICK]
- Loading state while fetching
- Empty state when no data
Data source: [TABLE_NAME or API_ENDPOINT]
```
```plaintext Navigation and menus wrap theme={null}
Add a [SIDEBAR/TOP] navigation with:
- Links: [PAGE_1], [PAGE_2], [PAGE_3]
- Active state highlighting for current page
- Mobile: [HAMBURGER_MENU/STACKED]
- Desktop: [HORIZONTAL/VERTICAL] layout
Keep existing routes and page content unchanged.
```
```plaintext Search and filters wrap theme={null}
Add a search/filter bar to this screen:
- Search input that filters [DATA_TYPE] by [FIELD]
- Filter dropdown for [CATEGORY] (options: [OPTION_1], [OPTION_2])
- Clear button to reset filters
- Real-time filtering as user types
Do not change the underlying data structure or layout.
```
## Polish and optimize
Enhance visuals, responsiveness, performance, and accessibility.
```plaintext Visual polish wrap theme={null}
Improve the visual hierarchy of this screen while keeping
all logic and data exactly the same.
Focus on:
- Clear section headings,
- Consistent font sizes for titles vs. body text,
- Increasing spacing between unrelated sections,
- Aligning labels and inputs for readability.
Do not change any page connections, data sources, or how things are named.
```
```plaintext Responsiveness wrap theme={null}
Make this layout responsive across mobile, tablet, and desktop:
- On small screens: stack sections vertically with comfortable spacing,
avoid horizontal scrolling, and keep tap targets large.
- On medium screens: use two-column layouts where it makes sense.
- On large screens: maintain a maximum content width so it does not feel too wide.
Preserve all existing functionality and data fetching.
Only change layout and responsive behavior.
```
```plaintext Loading and error states wrap theme={null}
Add clear loading and error states to this screen:
- Show a loading indicator while data is being fetched.
- If the fetch fails, show an inline error message with
a "Retry" action.
- Make sure the user never sees an empty or confusing state.
Keep the existing happy-path design unchanged.
```
```plaintext Empty states wrap theme={null}
Add empty states to this screen:
- When [DATA_TYPE] is empty, show:
- Icon or illustration
- Heading: "[HEADING_TEXT]"
- Description: "[DESCRIPTION_TEXT]"
- CTA button: "[ACTION_LABEL]" that [ACTION]
Keep the existing layout structure when data exists.
```
```plaintext Accessibility wrap theme={null}
Accessibility for this screen:
- Add ARIA (Accessible Rich Internet Applications) labels to interactive elements
- Ensure keyboard navigation works (Tab, Enter, Escape)
- Add focus indicators for keyboard users
- Ensure color contrast meets WCAG (Web Content Accessibility Guidelines) AA standards
- Add alt text for images
Do not change visual design, only add accessibility attributes.
```
```plaintext Performance wrap theme={null}
Optimize performance for this screen:
- Lazy load images and heavy components
- Memoize expensive calculations
- Debounce search/filter inputs
- Implement pagination or virtual scrolling for large lists
- Cache API responses where appropriate
Measure and report improvements. Do not change functionality.
```
```plaintext Code refactoring wrap theme={null}
Refactor this [COMPONENT/FILE] to improve maintainability:
- Extract repeated logic into reusable functions
- Break large components into smaller, focused ones
- Add TypeScript types (if using TypeScript)
- Add helpful comments for complex logic
- Organize imports and exports
Keep all existing functionality and behavior exactly the same.
```
## Ship
Prepare your app for launch and production.
```plaintext Deployment checklist wrap theme={null}
Review this project and outline a checklist to get it ready for launch:
- Any missing loading/error states,
- Screens that need empty states,
- Performance concerns (like pages loading slowly),
- Security or auth considerations,
- Analytics or event tracking we should add.
Return the checklist grouped into:
- Must-fix before launch,
- Nice-to-have after launch.
Do not implement changes yet, just give me the list.
```
```plaintext SEO optimization wrap theme={null}
Add SEO optimization to [PAGE/SCREEN]:
- Meta title: "[TITLE]"
- Meta description: "[DESCRIPTION]"
- Open Graph tags for social sharing
- Structured data (JSON-LD) for [CONTENT_TYPE]
- Canonical URL
Do not change page content, only add meta tags and structured data.
```
```plaintext Analytics setup wrap theme={null}
Set up analytics tracking:
- Page view tracking for all routes
- Custom events: [EVENT_1], [EVENT_2], [EVENT_3]
- User properties: [PROPERTY_1], [PROPERTY_2]
- Conversion tracking for [GOAL]
Use [ANALYTICS_PLATFORM] with existing credentials from environment variables.
```
## Notes
Use these prompts as **starting points**, not hard rules. Adjust fields, copy, and flows to match your product.
When in doubt, **reduce scope**: pick one screen, one component, or one flow per prompt.
For deeper strategy and debugging patterns, see [Core concepts](/learn/guides/core-concepts) and [Debugging](/learn/guides/debugging). For role-based copy-paste prompts, see [Prompt starters](/learn/prompt-starters/overview).
# Overview
Source: https://docs.rocket.new/learn/overview
Everything you need to master Rocket.new, from first prompt to production.
Welcome to Rocket Learn - your guide to getting the most out of Rocket, the complete vibe solutioning platform. Whether you're validating a business idea with Solve, building your first app with Build, or setting up competitive tracking with Intelligence, there's a path here for you.
## Find your path
Start with a hands-on tutorial that walks you from idea to deployed app. No experience required.
Grab ready-to-use prompts organized by role - founders, PMs, designers, developers, and marketers.
Browse production-ready templates for SaaS, e-commerce, dashboards, and more. Remix and customize.
Learn the art of prompting for Solve and Build, and how to configure Intelligence for useful signals.
## What's inside
### Tutorials
Step-by-step guides for core scenarios. Start here if you're new to Rocket or tackling something for the first time.
* [Your first task](/learn/tutorials/your-first-task) - end-to-end from idea to deployed app
* [Security checklist](/learn/tutorials/security-checklist) - API keys, auth, RLS, and privacy best practices
* [Add payments](/learn/tutorials/adding-payments) - connect Stripe and start accepting payments
### Prompt starters
Copy-paste prompts organized by who you are and what you're trying to do. Each prompt includes the task type to use and what to expect.
* [For founders](/learn/prompt-starters/for-founders) - validate ideas, build MVPs, track markets
* [For product managers](/learn/prompt-starters/for-product-managers) - competitive analysis, feature prototypes
* [For designers](/learn/prompt-starters/for-designers) - Figma imports, visual iteration, redesigns
* [For developers](/learn/prompt-starters/for-developers) - rapid prototypes, API integrations
* [For marketers](/learn/prompt-starters/for-marketers) - market research, landing pages, competitive intel
### Templates
Pre-built starting points for common app types. Browse the catalog, preview any template, and remix it to make it yours.
* [Template catalog](/learn/templates/overview) - SaaS, e-commerce, dashboards, portfolios, and more
### Workflows
Multi-capability patterns that chain Solve, Build, Intelligence, and Launch together for complex projects.
* [Research to launch](/learn/workflows/research-to-launch) - Solve → Build → Launch
* [Competitive response](/learn/workflows/competitive-response) - Intelligence → Solve → Build
* [Website overhaul](/learn/workflows/website-overhaul) - Intelligence → Redesign → Launch
* [Team product development](/learn/workflows/team-product-development) - Projects → Solve → Build → Launch
* [Market entry](/learn/workflows/market-entry) - Intelligence → Solve → Build → Launch
### Recipes
Focused, practical guides for building specific types of apps.
* [Website redesign](/learn/recipes/website-redesign) - complete redesign from audit to deploy
* [Internal tool](/learn/recipes/internal-tool) - dashboards, admin panels, and internal apps
### Prompting guides
Deep dives into writing effective prompts for each Rocket capability.
* [Prompting for Solve](/learn/guides/for-solve) - frame strategic questions for better results
* [Configure Intelligence](/learn/guides/configure-track) - set up the Intelligence wizard for useful signals
* [Prompting for Build](/learn/guides/for-build) - describe apps, features, and redesigns effectively
## How to use Rocket Learn
There's no required order. Jump to whatever matches your current need:
* **Just getting started?** Begin with [Your first task](/learn/tutorials/your-first-task).
* **Have a specific project?** Check [Templates](/learn/templates/overview) or [Recipes](/learn/recipes/website-redesign) for a head start.
* **Want to improve your results?** Read the [Prompting guides](/learn/guides/for-build) to write better prompts.
* **Planning a complex project?** Study the [Workflows](/learn/workflows/research-to-launch) to learn how capabilities chain together.
## What's next?
Build and deploy your first app in 15 minutes.
Copy-paste prompts organized by role.
Browse production-ready templates to remix.
Chain capabilities for end-to-end projects.
# Prompts for designers
Source: https://docs.rocket.new/learn/prompt-starters/for-designers
Figma imports, visual iteration, and client site redesigns with Rocket.new.
Workflows and prompts for designers - from importing Figma designs to iterating on visual details and redesigning client sites.
Replace the placeholder details (in brackets) with your own specifics - URLs, color codes, design references, and client details.
## Import from Figma
Figma import is a URL-based flow - no text prompt needed. Paste your Figma URL and Rocket generates your app automatically.
### Convert a Figma design to a web app
**How to start:**
Copy your Figma file or frame URL (you need view or edit access to the file).
Go to [rocket.new](https://rocket.new) and paste the URL.
Select **Web** as your platform.
Rocket imports your screens and generates a working web app.
**After import, use prompts to refine:**
```plaintext wrap theme={null}
Make the sidebar collapsible and add smooth transitions between pages. Connect Supabase for user authentication.
```
**What to expect:** A pixel-accurate implementation of your Figma design as a working web app. After import, iterate using chat exactly like any other Build task.
***
### Convert a Figma design to a mobile app
**How to start:**
Copy your Figma mobile screens URL.
Go to [rocket.new](https://rocket.new) and paste the URL.
Select **Mobile** as your platform.
Rocket generates a Flutter app for iOS and Android.
**After import, use prompts to refine:**
```plaintext wrap theme={null}
Add pull-to-refresh on the feed screen, swipe-to-delete on list items, and connect Firebase for push notifications.
```
**What to expect:** A cross-platform mobile app that implements your Figma mobile design. Use chat to add logic, interactions, and integrations.
Full walkthrough for importing Figma designs, platform setup, and design guidelines.
## Visual iteration
### Refine typography and spacing
**Task type:** Build
```plaintext wrap theme={null}
Refine the typography across the entire app. Use [font name] for headings and [font name] for body text. Set heading sizes to: h1 = 48px, h2 = 36px, h3 = 24px. Body text should be 16px with 1.6 line height. Increase the spacing between sections to 80px. Add 24px padding inside all card components.
```
**What to expect:** Updated typography and spacing applied consistently across all pages.
***
### Color palette swap
**Task type:** Build
```plaintext wrap theme={null}
Update the color scheme to: primary = [hex code], secondary = [hex code], background = [hex code], text = [hex code], accent = [hex code]. Apply these consistently across all pages - buttons, links, headings, backgrounds, and borders. Keep the current layout and structure unchanged.
```
**What to expect:** A complete color refresh applied globally without affecting layout or functionality.
***
### Animation and micro-interactions
**Task type:** Build
```plaintext wrap theme={null}
Add subtle animations throughout the app: fade-in on page load for hero sections, smooth hover transitions on buttons and cards (scale up slightly and add shadow), slide-in animations for content sections as they scroll into view, and a smooth page transition between routes. Keep animations performant - nothing should feel sluggish.
```
**What to expect:** Polished micro-interactions that make the app feel more refined and responsive.
***
### Component library consistency
**Task type:** Build
```plaintext wrap theme={null}
Audit the design consistency across all pages. Make sure: all buttons use the same border radius, padding, and font weight. All cards have consistent shadows, borders, and padding. All form inputs match in style. Headings follow the same hierarchy everywhere. Fix any inconsistencies you find.
```
**What to expect:** A visually consistent app where every component follows the same design system.
## Client site redesigns
### Full site redesign for a client
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign the website at [client-site.com]. The client wants a modern, premium look. Keep the existing content structure but transform the visual design: updated typography (use a clean sans-serif like Inter or DM Sans), new color palette based on [brand color], more whitespace, modern card layouts, and improved mobile responsiveness. The homepage, about page, and contact page are the priority.
```
**What to expect:** A redesigned version of the client's site that preserves their content while dramatically improving the visual design.
***
### Landing page conversion optimization
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign the landing page at [url] with a focus on conversion. Move the primary CTA above the fold. Add a sticky header with a CTA button. Improve the social proof section - make testimonials more prominent with photos and company logos. Add urgency elements (limited time offer, spots remaining). Streamline the pricing section to reduce decision fatigue.
```
**What to expect:** A conversion-optimized redesign of the existing landing page.
***
### Portfolio site refresh
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign my portfolio at [url]. I want a minimal, editorial aesthetic - lots of whitespace, large project images, clean typography. Use a monochrome palette with one accent color ([hex code]). The project grid should use a masonry layout. Add smooth hover animations on project cards and a full-screen project detail view.
```
**What to expect:** A redesigned portfolio with a refined, editorial aesthetic.
## Design research
### Design trend analysis
**Task type:** Solve
```plaintext wrap theme={null}
What are the current design trends for [type of app/website - e.g., SaaS dashboards, e-commerce, fintech apps] in 2026? Cover visual design (typography, color, layout), interaction patterns, and UX conventions. Include 5-10 examples of well-designed products in this category and explain what makes them effective.
```
**What to expect:** A trend report with specific examples and design principles you can reference in your work.
## What's next?
Rapid prototypes, API integrations, and custom code.
Learn to describe apps and redesigns more effectively.
Full redesign workflow from benchmark to deploy.
Click any element to tweak colors, spacing, and layout directly.
# Prompts for developers
Source: https://docs.rocket.new/learn/prompt-starters/for-developers
Rapid prototypes, API integrations, and custom code patterns with Rocket.new.
Copy-paste prompts for developers - from spinning up prototypes and integrating APIs to writing custom logic and debugging. Each prompt tells you which task type to use and what to expect.
Replace the placeholder details (in brackets) with your own endpoints, data schemas, and technical requirements.
## Rapid prototyping (Build)
### Full-stack CRUD app
**Task type:** Build
```plaintext wrap theme={null}
Build a full-stack CRUD app for managing [resource - e.g., invoices, projects, inventory items]. Include: a data table with sorting, filtering, and pagination. A form for creating and editing records. A detail view for each record. Delete with confirmation dialog. Connect to Supabase for the database. Add authentication so each user only sees their own records.
```
**What to expect:** A complete data management app with auth, CRUD operations, and a polished UI.
***
### API dashboard
**Task type:** Build
```plaintext wrap theme={null}
Build an API dashboard that displays data from [your API endpoint]. Show key metrics as cards at the top (total count, active count, revenue, growth rate). Below, add a data table with the full dataset - include columns for [list your columns]. Add a search bar and filters for [filterable fields]. Include a chart showing [metric] over time. Refresh data every 60 seconds.
```
**What to expect:** A real-time dashboard connected to your API with metrics, charts, and a data table.
***
### CLI tool web interface
**Task type:** Build
```plaintext wrap theme={null}
Build a web interface for a command-line tool. Users input parameters through a form: [list parameters with types]. When they click "Run," the app calls a server-side API route that executes the logic and returns the result. Display output in a terminal-style panel. Include a history of previous runs in a sidebar.
```
**What to expect:** A web wrapper around command-line functionality with a clean input form and terminal-style output.
## API integrations (Build)
### REST API integration
**Task type:** Build (iterate on existing task)
```plaintext wrap theme={null}
Integrate the [Service Name] API into my app. The base URL is [api endpoint]. I need to: fetch [data type] from GET /[endpoint], create new records via POST /[endpoint], and update records via PUT /[endpoint]/[id]. Use the API key from environment variables. Add error handling for rate limits (429), unauthorized (401), and server errors (500). Display the data in [describe the UI - table, cards, list].
```
**What to expect:** A working API integration with proper error handling and data display.
***
### Webhook handler
**Task type:** Build (iterate on existing task)
```plaintext wrap theme={null}
Create a webhook endpoint at /api/webhooks/[service] that receives POST requests from [service name]. Verify the webhook signature using the secret from environment variables. Handle these event types: [event 1] - [action to take], [event 2] - [action to take], [event 3] - [action to take]. Log each event and return a 200 response. If verification fails, return 401.
```
**What to expect:** A secure webhook handler with signature verification and event routing.
***
### OAuth integration
**Task type:** Build (iterate on existing task)
```plaintext wrap theme={null}
Add [Provider - e.g., Google, GitHub, Slack] OAuth login to my app. When a user clicks "Sign in with [Provider]," redirect them through the OAuth flow. On callback, create or update the user in Supabase and start a session. Display the user's name and avatar in the header after login. Add a sign-out button.
```
**What to expect:** A complete OAuth sign-in flow with session management and user display.
## Custom code and logic (Build)
### Custom server-side logic
**Task type:** Build (iterate on existing task)
```plaintext wrap theme={null}
Add a server-side API route at /api/[route-name] that: accepts a POST request with [describe the payload], validates the input (return 400 for invalid data), processes the data by [describe the business logic], stores the result in Supabase, and returns the processed result as JSON. Add rate limiting of [N] requests per minute per IP.
```
**What to expect:** A production-ready API route with validation, business logic, storage, and rate limiting.
***
### Scheduled job / cron
**Task type:** Build (iterate on existing task)
```plaintext wrap theme={null}
Add a scheduled job that runs every [interval - e.g., hour, day, week]. The job should: query [data source] for [condition], process the results by [describe logic], send a notification (email or webhook) if [threshold or condition] is met, and log the job execution with timestamp and result count.
```
**What to expect:** An automated background job with logging and notification triggers.
## Technical research (Solve)
### Architecture decision
**Task type:** Solve
```plaintext wrap theme={null}
I'm building a [describe your app] and need to decide between [Option A] and [Option B] for [specific technical decision - e.g., real-time updates, state management, database design]. Compare both options on: performance, complexity, scalability, cost, and developer experience. Which would you recommend for a team of [size] building a [type of product]?
```
**What to expect:** A structured comparison with a clear recommendation based on your constraints.
***
### API evaluation
**Task type:** Solve
```plaintext wrap theme={null}
Evaluate [API/Service A] vs [API/Service B] for [use case]. Compare on: pricing (include free tier limits), rate limits, SDK quality, documentation, reliability, and feature coverage for [specific features you need]. Which is better for a [describe your scale and use case]?
```
**What to expect:** A detailed technical comparison with pricing breakdowns and a recommendation.
## Monitor with Intelligence
Intelligence can monitor technical dependencies and competitor products after a one-time setup. Select **Intelligence** from the bottom of the home screen input area.
### Dependency and tech monitoring
Configure the wizard to watch your technical ecosystem:
* **Your context:** Describe your tech stack and what kinds of changes (breaking APIs, major version bumps, security patches) you need to know about
* **Competitors to track:** Add companies whose APIs, SDKs, or developer tools you depend on, using their main website URLs
* **Signal categories:** Select Product updates and Blogs to catch changelog and documentation updates
* **Frequency:** Weekly
**What to expect:** Signals about major releases, deprecations, and security patches from the platforms you depend on, surfaced in your Intelligence dashboard.
## What's next?
Market research, landing pages, and competitive intel.
Describe apps and features more effectively.
Edit generated source code directly.
Full guide to connecting APIs in Rocket.
# Prompts for founders
Source: https://docs.rocket.new/learn/prompt-starters/for-founders
Validate ideas, build MVPs, monitor markets, and redesign landing pages with Rocket.new.
Copy-paste prompts designed for founders at every stage - from validating an idea to shipping a product and monitoring the market. Each prompt tells you which task type to use and what to expect.
Replace the placeholder details (in brackets or italics) with your own specifics for best results.
## Validate and research (Solve)
### Market sizing
**Task type:** Solve
```plaintext wrap theme={null}
What is the total addressable market for [your product category] in [target geography]? Break down by segment. Include current market size, projected growth rate through 2028, and the key drivers behind growth. Identify the top 5 incumbents and their estimated market share.
```
**What to expect:** A structured report with market size figures, growth projections, segment breakdowns, and a competitive landscape overview.
***
### Competitive teardown
**Task type:** Solve
```plaintext wrap theme={null}
Compare [Competitor A], [Competitor B], and [Competitor C] on features, pricing, target audience, and go-to-market strategy. What do their users complain about most? Where are the biggest gaps that a new entrant could exploit?
```
**What to expect:** A side-by-side comparison table, user sentiment analysis, and strategic recommendations for differentiation.
***
### Idea validation
**Task type:** Solve
```plaintext wrap theme={null}
I'm considering building [describe your product idea]. Who is the target customer? What alternatives exist today? What would a user need to see in a v1 to switch from their current solution? Give me a honest assessment of whether this idea is worth pursuing.
```
**What to expect:** A validation framework covering target audience, existing alternatives, switching costs, and a candid recommendation.
## Build and launch (Build)
### MVP landing page
**Task type:** Build
```plaintext wrap theme={null}
Build a landing page for [product name], a [one-sentence description]. Include a hero section with headline and subheadline, three key benefits with icons, a "How it works" section with 3 steps, social proof section with placeholder testimonials, a pricing section with Free and Pro tiers, and an email signup form. Use a modern, clean design with [preferred color scheme].
```
**What to expect:** A complete, responsive landing page ready for deployment.
***
### SaaS MVP
**Task type:** Build
```plaintext wrap theme={null}
Build a SaaS MVP for [product name]. It should have: user authentication (sign up, log in, password reset), a dashboard showing [key metrics or data], a settings page where users can manage their account, and a billing page integrated with Stripe. Use a sidebar navigation layout with a clean, professional design.
```
**What to expect:** A full-stack web app with auth, dashboard, settings, and payment infrastructure.
***
### Pitch deck companion site
**Task type:** Build
```plaintext wrap theme={null}
Build a one-page pitch site for [company name]. Include: problem statement, solution overview, key metrics (use placeholders), team section with photos and bios, and a "Get in touch" form. The design should feel premium and investor-ready. Use a dark background with [accent color].
```
**What to expect:** A polished single-page site suitable for sharing with investors alongside your deck.
## Monitor with Intelligence
Intelligence monitors competitors continuously once you run the Intelligence setup. Select **Intelligence** from the bottom of the home screen input area and signals surface to your dashboard automatically.
### Competitor monitoring
Run the **Intelligence setup** wizard and configure it for your key competitors:
* **Your context:** Describe your company, product, and what competitor moves matter most to your strategy
* **Competitors to track:** Add \[Competitor A] and \[Competitor B] with their website URLs
* **Signal categories:** Choose which categories to highlight first: Pricing and packaging, Product updates, Key hires and exits, Funding and valuation, Blogs, Revenue
* **Frequency:** Weekly for most cases; daily if the market moves fast
**What to expect:** Ongoing signals in your Intelligence dashboard whenever competitors make significant changes.
***
### Market news tracking
Intelligence automatically monitors news and web sources for all your tracked competitors. In the wizard's **Your context** step, mention your market category so Intelligence knows what industry news to surface.
**What to expect:** News and announcement signals in your daily briefs covering funding rounds, product launches, and acquisitions.
## Redesign (Build - Redesign)
### Landing page refresh
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign my landing page at [your-site.com]. Keep the same content and messaging but modernize the visual design. Use a contemporary layout with more whitespace, updated typography, and a [preferred color scheme]. Make the CTA buttons more prominent and improve the mobile experience.
```
**What to expect:** A redesigned version of your existing landing page with a modern visual refresh.
## What's next?
Competitive analysis, feature prototypes, and tracking.
Walk through the full Rocket workflow end-to-end.
Write more effective research prompts.
Chain Solve → Build → Launch for a full project.
# Prompts for marketers
Source: https://docs.rocket.new/learn/prompt-starters/for-marketers
Market research, landing pages, competitive intel, and website refreshes with Rocket.new.
Copy-paste prompts for marketers - from researching markets and building landing pages to tracking competitors and refreshing websites. Each prompt tells you which task type to use and what to expect.
Replace the placeholder details (in brackets) with your own brands, URLs, audiences, and campaign specifics.
## Market research (Solve)
### Audience analysis
**Task type:** Solve
```plaintext wrap theme={null}
Who is the ideal customer for [your product/service]? Build a detailed profile covering: demographics (age, role, company size), psychographics (motivations, pain points, goals), buying behavior (where they research, what influences decisions), and channels where they spend time online. Include at least 3 distinct personas if the audience is broad.
```
**What to expect:** Detailed buyer personas with demographics, motivations, and channel recommendations.
***
### Competitive messaging analysis
**Task type:** Solve
```plaintext wrap theme={null}
Analyze how [Competitor A], [Competitor B], and [Competitor C] position themselves. For each, document: their headline and tagline, the primary value proposition, key messaging themes on their homepage, their tone of voice, and how they differentiate from alternatives. Identify messaging gaps we could own.
```
**What to expect:** A messaging teardown with positioning analysis and opportunities for differentiation.
***
### Content strategy research
**Task type:** Solve
```plaintext wrap theme={null}
What content topics should a [your type of company] be creating to attract [target audience]? Analyze what's ranking for [target keywords], what competitors are publishing, and what questions [target audience] asks on Reddit, Quora, and industry forums. Recommend a content calendar with 10 topic ideas, each with a suggested format (blog post, guide, comparison, case study) and target keyword.
```
**What to expect:** A content strategy with 10 prioritized topic ideas, formats, and target keywords.
## Landing pages and sites (Build)
### Product launch landing page
**Task type:** Build
```plaintext wrap theme={null}
Build a landing page for the launch of [product name]. Include: a hero section with headline "[your headline]" and a product screenshot placeholder, a "Problem → Solution" section, a 3-column benefits section with icons, a "How it works" section with 3 steps, a testimonials carousel with 3 placeholder quotes, a pricing section with [number] tiers, an FAQ section with 5 questions, and a footer with links. Use [brand colors] and a modern, conversion-focused design.
```
**What to expect:** A complete, conversion-optimized launch page ready to deploy.
***
### Lead generation page
**Task type:** Build
```plaintext wrap theme={null}
Build a lead capture landing page for [your offer - e.g., free ebook, webinar, product demo]. Include: a headline focused on the benefit ("[benefit-focused headline]"), a description of what they'll get, a 3-point bullet list of key takeaways, a lead capture form (name, email, company), social proof (logos of companies or "Join 5,000+ subscribers"), and a strong CTA button. Keep it minimal - one page, one goal: capture the lead.
```
**What to expect:** A focused lead gen page designed to maximize form completions.
***
### Comparison / vs page
**Task type:** Build
```plaintext wrap theme={null}
Build a "[Your Product] vs [Competitor]" comparison page. Include: a side-by-side feature comparison table (at least 10 rows), a section highlighting our key advantages with icons and descriptions, a customer testimonial about switching from [Competitor], a CTA section with "Switch to [Your Product]" button, and an FAQ addressing common switching concerns. The design should be professional and objective in tone.
```
**What to expect:** A comparison page that positions your product favorably while remaining credible.
## Monitor with Intelligence
Intelligence monitors competitors continuously after a one-time setup. Select **Intelligence** from the bottom of the home screen input area and signals arrive in your dashboard automatically.
### Competitor website monitoring
Configure the wizard for marketing intelligence:
* **Your context:** Describe your brand, target audience, and what competitor moves would affect your messaging or campaigns
* **Competitors to track:** Add \[Competitor A] and \[Competitor B] with their website URLs
* **Signal categories:** Choose the categories most relevant to marketing: Pricing and packaging, Blogs, and Product updates
* **Frequency:** Weekly
**What to expect:** Ongoing signals about competitor website changes with strategic context in your Intelligence dashboard.
***
### Industry news tracking
In the wizard's **Your context** step, describe your market category and what kinds of industry news matter to your positioning. Intelligence monitors news sources and social automatically for all your tracked competitors.
**What to expect:** A regular stream of industry signals - launches, partnerships, funding rounds, and market shifts - in your daily Intelligence briefs.
## Website refreshes (Build - Redesign)
### Homepage redesign
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign our homepage at [your-site.com]. Keep the core messaging but modernize the design: update to a contemporary layout with larger hero text, more whitespace, and modern illustrations or abstract graphics. Improve the CTA hierarchy - make the primary CTA (sign up / get started) unmissable. Ensure the mobile version feels native, not just responsive. Match our brand colors: [list colors].
```
**What to expect:** A modernized homepage that preserves your messaging with an improved visual hierarchy.
***
### Blog redesign
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign our blog at [blog-url.com]. The current design feels dated. Modernize the layout with: a featured post hero section, a clean card grid for recent posts, category filtering, estimated reading time badges, author avatars, and a newsletter signup section. The reading experience should feel like Medium or Notion's blog - clean, focused, and easy to scan.
```
**What to expect:** A modern, reader-friendly blog layout that encourages engagement and subscriptions.
## What's next?
Validate ideas, build MVPs, and track markets.
Full redesign workflow from intelligence to deployment.
Write more effective research prompts.
Optimize your pages for search engines after launch.
# Prompts for product managers
Source: https://docs.rocket.new/learn/prompt-starters/for-product-managers
Competitive analysis, feature prototypes, and competitor tracking with Rocket.new.
Copy-paste prompts for product managers - from competitive intelligence and user research to rapid prototyping and feature specification. Each prompt tells you which task type to use and what to expect.
Replace the placeholder details (in brackets) with your own company names, products, and requirements.
## Competitive intelligence (Solve)
### Feature comparison matrix
**Task type:** Solve
```plaintext wrap theme={null}
Create a detailed feature comparison of [Your Product], [Competitor A], [Competitor B], and [Competitor C]. Cover: core features, pricing tiers, integrations, platform support (web/mobile/desktop), and unique differentiators. Present results in a table format. Identify features that competitors offer and we don't, and vice versa.
```
**What to expect:** A structured comparison matrix with gap analysis and prioritization recommendations.
***
### User sentiment analysis
**Task type:** Solve
```plaintext wrap theme={null}
Analyze user reviews and public feedback for [Competitor Product] on G2, Capterra, Product Hunt, and Reddit. What are the top 5 things users love? Top 5 complaints? What features do users request most? Summarize the findings with specific quotes where possible.
```
**What to expect:** A sentiment report with categorized feedback, recurring themes, and actionable insights.
***
### Go-to-market teardown
**Task type:** Solve
```plaintext wrap theme={null}
Analyze [Competitor]'s go-to-market strategy. How do they acquire customers (PLG, sales-led, community)? What's their pricing and packaging strategy? How do they position themselves vs alternatives? What content and channels drive their growth? Identify tactics we could adapt.
```
**What to expect:** A strategic breakdown of a competitor's GTM motion with applicable takeaways.
## Rapid prototyping (Build)
### Feature prototype
**Task type:** Build
```plaintext wrap theme={null}
Build a prototype of a [feature name] feature. It should: [describe the user flow in 3-5 steps]. Use realistic placeholder data. Include empty states, loading states, and error states. The design should match our existing product style: [describe your design system - colors, fonts, general aesthetic].
```
**What to expect:** A working prototype you can share with stakeholders for feedback before committing engineering resources.
***
### User onboarding flow
**Task type:** Build
```plaintext wrap theme={null}
Build a user onboarding flow for a [type of product]. Include: welcome screen with value proposition, 3 setup steps (choose preferences, connect an integration, invite team members), a progress indicator, and a completion screen that drops the user into the main dashboard. Use a clean, friendly design.
```
**What to expect:** A complete onboarding experience you can test with users and iterate on.
***
### Internal feature spec demo
**Task type:** Build
```plaintext wrap theme={null}
Build a clickable demo of our proposed [feature name]. The flow is: [step 1] → [step 2] → [step 3] → [success state]. Include realistic data for a [your industry] use case. This is for an internal stakeholder review - make it look polished but it doesn't need backend logic.
```
**What to expect:** A visual demo that communicates the feature concept to engineering and leadership.
## Monitor with Intelligence
Intelligence continuously monitors competitors after a one-time setup. Select **Intelligence** from the bottom of the home screen input area and Intelligence handles the rest.
### Competitor release tracking
Configure the wizard for product intelligence:
* **Your context:** Describe your product, your competitive position, and what kinds of product changes would affect your roadmap
* **Competitors to track:** Add \[Competitor A] and any others you actively compete with
* **Signal categories:** Select Pricing and packaging and Product updates as top priorities; add Key hires and exits to track strategic hiring signals
* **Frequency:** Weekly
**What to expect:** Signals about competitor product changes in your Intelligence dashboard, with context to assess competitive impact.
***
### Industry trend monitoring
In the wizard's **Your context** step, describe your product category and market. Intelligence monitors news sources automatically and surfaces relevant industry developments in your daily briefs.
**What to expect:** An ongoing pulse on industry movements, new entrants, and category shifts in your Intelligence dashboard.
## Redesign (Build - Redesign)
### Product marketing page refresh
**Task type:** Build (Redesign)
```plaintext wrap theme={null}
Redesign our product page at [url]. Keep the same messaging but update the layout to better showcase [specific feature or value prop]. Add a feature comparison table, improve the testimonials section, and make the CTAs more prominent. Target audience: [describe your ICP].
```
**What to expect:** A redesigned product page optimized for conversion and clarity.
## What's next?
Figma imports, visual iteration, and client redesigns.
React to competitor moves with Intelligence → Solve → Build.
Frame strategic questions for deeper analysis.
Start from a pre-built template for faster prototyping.
# Prompt starters
Source: https://docs.rocket.new/learn/prompt-starters/overview
Ready-to-use Rocket.new prompts organized by role and capability. Copy, paste, and go.
Prompt starters are copy-paste prompts designed for specific roles and goals. Pick the set that matches who you are, copy a prompt, paste it into a Rocket task, and start getting results immediately.
Each prompt includes:
* **The prompt** - ready to copy and paste
* **Task type** - which Rocket capability to use (Solve or Build)
* **What to expect** - the output you'll get
## Choose your role
Validate ideas, build MVPs, monitor markets, and redesign landing pages.
Competitive analysis, feature prototypes, and competitor tracking.
Figma imports, visual iteration, and client site redesigns.
Rapid prototypes, API integrations, and custom code patterns.
Market research, landing pages, competitive intel, and website refreshes.
## How to use prompt starters
Browse the role-based pages above and find a prompt that's close to what you need.
Copy the prompt text from the code block.
In Rocket, create a new task of the type specified - Solve or Build. For Intelligence monitoring, select **Intelligence** from the bottom of the home screen input area to run the Intelligence setup wizard.
Paste the prompt and replace the placeholder details with your own specifics - company names, features, industries, URLs, or preferences.
Submit the prompt and review the results. Follow up with additional prompts to refine or expand.
These prompts are starting points, not rigid scripts. The more specific details you add - company names, target audiences, feature requirements - the better your results will be.
## What's next?
Validate ideas, build MVPs, and track markets.
Learn the art of writing great Solve prompts.
Describe apps and features more effectively.
Start from a pre-built template instead.
# Build an AI app
Source: https://docs.rocket.new/learn/recipes/ai-app
Build an AI writing assistant with chat, saved conversations, and subscription billing using Rocket.new.
An AI writing assistant where users chat with GPT to draft blog posts, edit copy, and brainstorm ideas. The app includes conversation history so users can pick up where they left off, user accounts with authentication, and a Pro subscription tier that unlocks unlimited messaging.
By the end of this recipe you will have a production-ready AI app that you can customize, rebrand, and launch as your own product.
## Tech stack
You do not need to understand these technologies. Rocket handles them automatically. This table is for reference.
| Integration | What it does |
| ------------------------ | ------------------------------------------------------------- |
| **OpenAI** | GPT models for chat completions and content generation |
| **Supabase** | User authentication, conversation storage, and usage tracking |
| **Stripe** | Pro subscription billing (\$12/month) |
| **Resend** | Welcome emails and daily usage alerts |
| **Netlify** | One-click deployment to production |
| **Next.js + TypeScript** | App framework with server-side API routes |
## Architecture overview
Here is how data flows through the app:
1. **Sign in.** The user creates an account or logs in through Supabase Auth.
2. **Send a message.** The user types a prompt in the chat interface. The message is sent to an API route that calls the OpenAI Chat Completions endpoint.
3. **Stream the response.** GPT's response is streamed back to the browser in real time, token by token.
4. **Save the conversation.** Each message pair (user + assistant) is saved to a Supabase `messages` table, grouped by conversation.
5. **Track usage.** A counter in Supabase tracks how many messages the user has sent today.
6. **Enforce limits.** Free users are capped at 20 messages per day. When they hit the limit, the app shows an upgrade prompt.
7. **Upgrade.** Clicking "Upgrade to Pro" redirects to a Stripe Checkout session for the \$12/month plan.
8. **Send emails.** Resend delivers a welcome email on signup and a daily usage summary for Pro users.
## How long does it take?
| Phase | What you are building | Estimated time |
| -------------- | ----------------------------- | ----------------- |
| Setup | Project, Supabase, OpenAI | 5-10 minutes |
| Chat | Interface, streaming, history | 10-15 minutes |
| Business logic | Usage limits, Pro plan | 5-10 minutes |
| Communication | Email notifications | 5 minutes |
| Launch | Deploy, test, go live | 5 minutes |
| **Total** | **Complete AI app** | **30-45 minutes** |
## Step-by-step build
Open [rocket.new](https://rocket.new) and describe the app you want to build. Be specific about the core features so Rocket generates a solid foundation.
```plaintext wrap theme={null}
Build an AI writing assistant called "DraftAI". Users can sign in, start a new chat conversation with GPT, and get help drafting blog posts, editing copy, and brainstorming content ideas. The chat should feel fast and modern with a clean, minimal UI. Use Next.js with TypeScript and Tailwind CSS. Include a sidebar with a list of past conversations and a "New Chat" button.
```
A detailed initial prompt saves you from reworking the layout later. Include the app name, core features, and UI preferences up front.
Connect Supabase to handle user accounts and store all conversation data. Rocket will create the database tables and auth flow automatically.
```plaintext wrap theme={null}
Connect Supabase. Set up email/password authentication with a sign-up page, login page, and protected routes. Create these database tables:
- conversations: id, user_id, title, created_at, updated_at
- messages: id, conversation_id, role (user or assistant), content, created_at
- usage: id, user_id, date, message_count
Add row-level security so users can only access their own data.
```
Add your OpenAI API key so the app can send messages to GPT and receive completions.
```plaintext wrap theme={null}
Connect OpenAI. Use the GPT-4o model for all chat completions. Add a system prompt that says: "You are DraftAI, a helpful writing assistant. You help users draft blog posts, edit copy, brainstorm ideas, and improve their writing. Be concise, clear, and encouraging. When asked to write content, match the tone the user requests."
```
Your OpenAI API key is billed separately by OpenAI based on token usage. Monitor your spending in the [OpenAI usage dashboard](https://platform.openai.com/usage).
Make the chat feel responsive by streaming GPT's responses token by token instead of waiting for the full completion.
```plaintext wrap theme={null}
Update the chat so that GPT responses stream in real time, word by word. Use the OpenAI streaming API. Show a typing indicator while the response is loading. Each message should display the sender (user or AI) with a subtle avatar. Add a text input at the bottom with a send button and support Enter to send. Auto-scroll to the latest message.
```
Streaming makes the app feel much faster because users see the first words immediately instead of waiting several seconds for a complete response.
Let users create multiple conversations, switch between them, and pick up past chats where they left off.
```plaintext wrap theme={null}
Add conversation history. The sidebar should list all past conversations for the logged-in user, sorted by most recent. Clicking a conversation loads its full message history. Add a "New Chat" button at the top of the sidebar that creates a fresh conversation. Auto-generate a short title for each conversation based on the first user message. Add a delete button on each conversation with a confirmation dialog.
```
Add a daily message cap for free users to control costs and incentivize upgrades.
```plaintext wrap theme={null}
Add usage tracking. Free users can send up to 20 messages per day. Track the count in the usage table in Supabase, resetting at midnight UTC. Show a small counter in the chat header like "5 of 20 messages used today". When a free user hits 20 messages, disable the input and show a friendly banner that says "You've reached your daily limit. Upgrade to Pro for unlimited messages." with an upgrade button.
```
Pick a daily limit that gives users enough value to see the product's potential while still creating a reason to upgrade. 20 messages is a good starting point.
Add a paid tier that removes usage limits. Stripe handles the checkout, billing, and subscription management.
```plaintext wrap theme={null}
Connect Stripe. Create a Pro plan at $12/month. Add a pricing section accessible from the sidebar and from the upgrade banner. The pricing page should show Free vs Pro with a feature comparison: Free: 20 messages/day, basic writing assistance, 5 saved conversations Pro: Unlimited messages, priority responses, unlimited saved conversations, export conversations as Markdown Use Stripe Checkout for payment. After successful payment, update the user's subscription status in Supabase and immediately unlock Pro features. Handle subscription cancellation and show billing status in account settings.
```
Start with Stripe Test mode keys during development. Use test card number `4242 4242 4242 4242` to simulate payments. Switch to Live keys only when you are ready to accept real payments.
Send a welcome email when users sign up and notify them about usage milestones.
```plaintext wrap theme={null}
Connect Resend. Send these emails:
1. Welcome email when a new user signs up, with a brief intro to DraftAI and tips for getting started.
2. Upgrade confirmation email when a user subscribes to Pro, with a thank-you message and a summary of their new features.
3. Usage alert email when a free user hits 15 of their 20 daily messages, nudging them toward the Pro plan.
Use clean, minimal email templates that match the app's branding.
```
Push the app to production and run through the full user journey.
Use the **Launch** button in your Rocket project to deploy to the web. Rocket handles the Netlify build configuration automatically. Make sure all required environment variables are set in your project's integration settings before launching.
**Test checklist:**
* Sign up with a new email and verify the welcome email arrives
* Start a conversation and confirm GPT responses stream correctly
* Create multiple conversations and switch between them
* Send 20 messages to trigger the usage limit banner
* Complete a Stripe test checkout and verify Pro features unlock
* Cancel the subscription and confirm the user reverts to the free tier
Once testing is complete, switch to production credentials and launch.
* Switch Stripe to **live** mode keys in the project environment variables
* Confirm Supabase row-level security is enabled on all tables
* Verify the OpenAI system prompt does not leak sensitive information
* Redeploy with the production environment variables
* Connect a custom domain if you have one
## Customization ideas
Let users choose between OpenAI GPT-4o, Anthropic Claude, and Google Gemini. Add a model selector dropdown in the chat header so users can switch models mid-conversation.
```plaintext wrap theme={null}
Add a model selector dropdown in the chat header with three options: GPT-4o (OpenAI), Claude 3.5 Sonnet (Anthropic), and Gemini Pro (Google). Connect all three integrations. Default to GPT-4o. Show the active model name next to each AI response so users know which model generated it.
```
Let users upload PDFs, text files, or Markdown documents and ask the AI to summarize, edit, or rewrite the content.
```plaintext wrap theme={null}
Add a file upload button next to the chat input. Support PDF, TXT, and MD files up to 5MB. When a user uploads a file, extract the text content, include it in the conversation context, and show a preview card in the chat. The user can then ask questions about the document or request edits.
```
Enable shared workspaces where team members can collaborate on conversations, share templates, and manage a shared Pro subscription.
```plaintext wrap theme={null}
Add team workspaces. A user can create a team, invite members by email, and share conversations within the team. Add a workspace switcher in the sidebar for personal vs team spaces. Team conversations are visible to all members. The team admin manages the Stripe subscription for the whole team.
```
Let users create and save custom personas or writing styles that modify how the AI responds.
```plaintext wrap theme={null}
Add a "Personas" section in settings where users can create custom system prompts. Each persona has a name and a system prompt, for example "Blog Editor" with the instruction "Edit the user's text for clarity, grammar, and flow. Return the edited version with tracked changes in Markdown." Let users select a persona before starting a new conversation.
```
Let users speak their prompts instead of typing, using the browser's built-in speech recognition API.
```plaintext wrap theme={null}
Add a microphone button next to the chat input that starts voice recording. Use the Web Speech API for speech-to-text. Show a pulsing animation while recording. When the user stops speaking, convert the audio to text and populate the chat input. The user can review and edit before sending.
```
## Troubleshooting
If the full response loads after a long pause instead of appearing word by word, streaming may not be set up correctly. Ask Rocket to fix it:
```plaintext wrap theme={null}
The chat responses are not streaming. Update the OpenAI API call to use streaming mode so the response appears word by word in real time instead of all at once after a delay.
```
Also make sure your OpenAI integration is connected and your API key has sufficient credits.
If you see errors when conversations get long, the chat history may be exceeding the model's limit. Ask Rocket to add a safeguard:
```plaintext wrap theme={null}
I am getting context length errors on long conversations. Limit the chat history sent to OpenAI to the last 20 messages and add a summary of older messages so the AI still has background context.
```
If users see error messages when sending messages quickly, your OpenAI account may be hitting its rate limit. Ask Rocket to handle it gracefully:
```plaintext wrap theme={null}
Users are seeing "too many requests" errors. Add rate limit handling that shows a friendly "Please try again in a few seconds" message and automatically retries the request after a short delay.
```
If this happens frequently, you can request a higher rate limit from OpenAI in your [account settings](https://platform.openai.com/account/limits).
If messages vanish when you refresh the page or switch between conversations, they may not be saving to the database. Ask Rocket to debug:
```plaintext wrap theme={null}
Messages are disappearing when I refresh or switch conversations. Make sure each message is being saved to the Supabase messages table after it is sent, and that the conversation loads all saved messages when I switch back to it. Add a notification if saving fails.
```
# Build a booking app
Source: https://docs.rocket.new/learn/recipes/booking-app
Build a consulting booking app with Rocket.new - calendar scheduling, user profiles, paid sessions, and email reminders.
A consulting booking app where clients browse available consultants, book time slots through an embedded calendar, pay for premium sessions, and receive email confirmations and reminders. The finished product includes user authentication, consultant profiles, calendar-based scheduling, Stripe payments for paid sessions, transactional email notifications, and one-click deployment to Netlify.
By the end of this recipe you will have a production-ready booking platform that you can customize, rebrand, and launch as your own service.
## Tech stack
You do not need to understand these technologies. Rocket handles them automatically. This table is for reference.
| Service | Role |
| ------------------------ | ---------------------------------------------------------------------- |
| **Next.js + TypeScript** | Frontend framework and API routes |
| **Calendly** | Calendar scheduling, availability management, and booking widgets |
| **Supabase** | User authentication, consultant profiles, booking records, and reviews |
| **Stripe** | Payment processing for paid consultation sessions |
| **Resend** | Booking confirmation emails, reminders, and cancellation notices |
| **Netlify** | Production deployment and hosting |
## Architecture overview
Here is how the pieces connect:
1. A visitor **signs up** using Supabase Auth (email/password or social login) and creates a client profile.
2. The client **browses consultant profiles** stored in Supabase, filtering by specialty, availability, and price.
3. The client selects a consultant and **picks a time slot** using an embedded Calendly scheduling widget.
4. If the session is a **paid consultation**, the client is redirected to a **Stripe Checkout** page to complete payment before the booking is confirmed.
5. Once the booking is confirmed, **Resend** sends a confirmation email to both the client and the consultant with meeting details and calendar invite.
6. Before the session, Resend sends a **reminder email** 24 hours in advance.
7. The entire app is **deployed to Netlify** with environment variables configured for each service.
## How long does it take?
| Phase | What you are building | Estimated time |
| ------------- | ---------------------------- | ----------------- |
| Setup | Project, Supabase, profiles | 5-10 minutes |
| Scheduling | Calendar, booking management | 10-15 minutes |
| Payments | Stripe for paid sessions | 5 minutes |
| Notifications | Email confirmations | 5 minutes |
| Launch | Deploy, go live | 5 minutes |
| **Total** | **Complete booking app** | **30-40 minutes** |
## Step-by-step build
Open [rocket.new](https://rocket.new) and create a new project. Give Rocket a detailed description of the app so it scaffolds the right pages, layout, and navigation from the start.
```plaintext wrap theme={null}
Build a consulting booking platform called "BookPro" using Next.js and TypeScript. Include these pages: landing page with hero section and featured consultants, consultant directory with search and filters, individual consultant profile page with bio and booking widget, client dashboard showing upcoming and past bookings, consultant dashboard for managing availability and viewing bookings, login page, and signup page. Use a clean, professional design with a blue and white color scheme. Add a responsive navbar with logo, navigation links, and login/signup buttons.
```
Be specific about both the client-facing and consultant-facing pages. Booking apps need views for both sides of the marketplace.
Go to **Integrations** in your Rocket project and connect your Supabase account via OAuth. Create a new Supabase project (or select an existing one), then ask Rocket to set up the database schema.
```plaintext wrap theme={null}
Connect Supabase and create the following database tables:
1. "profiles" - id (uuid, references auth.users), display_name (text), email (text), avatar_url (text), role (text, either 'client' or 'consultant'), created_at (timestamp)
2. "consultants" - id (uuid, references profiles), specialty (text), bio (text), hourly_rate (integer, in cents), is_featured (boolean), calendar_link (text), years_experience (integer), rating (decimal)
3. "bookings" - id (uuid), client_id (uuid, references profiles), consultant_id (uuid, references consultants), scheduled_at (timestamp with timezone), duration_minutes (integer, default 60), status (text, either 'confirmed', 'completed', 'canceled'), notes (text), stripe_payment_id (text), created_at (timestamp)
4. "reviews" - id (uuid), booking_id (uuid, references bookings), client_id (uuid, references profiles), consultant_id (uuid, references consultants), rating (integer, 1 to 5), comment (text), created_at (timestamp)
Add row-level security policies so clients can only access their own bookings and consultants can only see bookings assigned to them. Create a trigger that automatically inserts a profile row when a new user signs up.
```
Rocket handles the Supabase connection through OAuth, so you never need to copy API keys manually. Your credentials are encrypted and stored securely.
Wire up authentication so users can create accounts and sign in, then build profile management for both clients and consultants.
```plaintext wrap theme={null}
Implement user authentication and profiles using Supabase Auth:
- On the signup page, add email/password registration with a role selector (client or consultant). After signup, redirect to the appropriate dashboard.
- On the login page, add email/password login with a "Remember me" checkbox. Redirect to the correct dashboard based on role.
- Add Google sign-in as a social login option on both pages.
- For consultants, build a profile editor where they can set their display name, avatar, specialty, bio, hourly rate, years of experience, and calendar link.
- For clients, build a simpler profile page with display name, avatar, and email.
- Protect dashboard pages so only logged-in users can access them. Redirect unauthenticated visitors to the login page.
```
After Rocket builds the auth flow, preview the app and create test accounts for both a client and a consultant. Verify that each role sees the correct dashboard.
Connect a scheduling service so clients can see availability and book time slots directly from the consultant's profile.
```plaintext wrap theme={null}
Integrate Calendly for scheduling:
- On each consultant's profile page, embed the Calendly scheduling widget using the consultant's calendar_link from the database.
- The widget should show available time slots based on the consultant's configured availability.
- When a client selects a time slot, capture the booking details (date, time, duration) and create a booking record in the Supabase bookings table with status 'confirmed'.
- Add a Calendly webhook handler that listens for booking.created and booking.canceled events to keep the Supabase bookings table in sync.
- Show a confirmation screen after booking with the date, time, consultant name, and session details.
```
Calendly provides a managed service with a generous free tier that works well for embedding scheduling widgets.
Build dashboards for both clients and consultants to view and manage their bookings.
```plaintext wrap theme={null}
Build booking management dashboards:
- Client dashboard: show a list of upcoming bookings sorted by date with consultant name, date and time, duration, and status badge. Add a "Past Bookings" tab showing completed sessions. Include a "Cancel Booking" button that sets the status to 'canceled' (only allowed more than 24 hours before the session).
- Consultant dashboard: show all upcoming bookings with client name, date and time, duration, and any notes. Add a calendar view that displays bookings visually across the week. Include a "Past Sessions" tab with completed bookings.
- Add a booking detail page that both the client and consultant can access, showing full session information and a notes field.
```
Go to **Integrations** and connect Stripe using your **test mode** API keys. Then set up payment processing for paid consultation sessions.
```plaintext wrap theme={null}
Connect Stripe and set up payment for bookings:
- When a client books a paid session, redirect them to a Stripe Checkout page before confirming the booking. The checkout should show the consultant's name, session duration, and the hourly rate.
- Add a webhook handler that listens for checkout.session.completed. When payment succeeds, update the booking status to 'confirmed' and store the Stripe payment ID in the bookings table.
- If the client cancels a booking more than 24 hours before the session, issue an automatic refund through Stripe and update the booking status.
- Add a billing history page in the client dashboard showing all past payments with date, consultant, amount, and receipt link.
- For consultants, show an earnings summary with total revenue, completed sessions, and a payout history section.
```
Use Stripe test mode keys during development. The test card number `4242 4242 4242 4242` with any future expiration and any CVC will simulate a successful payment.
Go to **Integrations** and connect Resend by pasting your API key. Then set up transactional emails for key booking events.
```plaintext wrap theme={null}
Connect Resend and add email notifications:
- Send a booking confirmation email to both the client and consultant when a session is booked. Include the date, time, duration, consultant/client name, and a calendar invite (.ics) attachment.
- Send a reminder email 24 hours before the scheduled session to both parties with the meeting details and any join link.
- Send a cancellation email when a booking is canceled, including refund details if a payment was made.
- Send a follow-up email to the client 1 hour after the session ends, asking them to leave a review for the consultant.
- Use a clean, professional email template with the BookPro logo, a white background, and blue accent buttons.
```
Resend provides a free tier of 100 emails per day, which is plenty for development and early launch. You can upgrade later as your booking volume grows.
Go to **Integrations** and connect Netlify, then deploy your app to the web.
Use the **Launch** button in your Rocket project to deploy to the web. Rocket handles the Netlify build configuration automatically. Make sure all required environment variables are set in your project's integration settings before launching.
After deploying, update your Supabase redirect URLs to include your Netlify domain. Go to your Supabase dashboard, navigate to **Authentication > URL Configuration**, and add `https://your-app.netlify.app` to the allowed redirect URLs.
## Customization ideas
Once the base booking platform is running, here are ways to extend it.
Generate unique video meeting links automatically when a booking is confirmed so clients and consultants can meet virtually without any extra setup.
```plaintext wrap theme={null}
Add video call support. When a booking is confirmed, automatically generate a unique meeting room link using Daily.co or a similar video API. Include the video link in the confirmation email and on the booking detail page. Add a "Join Call" button that appears 15 minutes before the scheduled session.
```
Let consulting firms create a team page where clients can book with any available consultant in the group, or pick a specific team member.
```plaintext wrap theme={null}
Add team support. Create a "teams" table with team name, description, and owner. Consultants can join a team. Add a team profile page that shows all team members with their specialties and availability. Clients can book with a specific consultant or choose "Next Available" to be matched with whoever has the earliest open slot.
```
Let clients book a recurring series of sessions (weekly, biweekly, or monthly) with their preferred consultant.
```plaintext wrap theme={null}
Add recurring booking support. When a client books a session, offer an option to make it recurring: weekly, biweekly, or monthly. Generate all future bookings in the series (up to 12 weeks out) and charge via Stripe on a recurring schedule. Add the ability to cancel a single session or the entire series.
```
When a consultant's slots are fully booked, let clients join a waitlist and get notified automatically when a slot opens up.
```plaintext wrap theme={null}
Add a waitlist feature. When no time slots are available for a consultant, show a "Join Waitlist" button instead. Create a "waitlist" table in Supabase with client_id, consultant_id, and preferred_times. When a booking is canceled, automatically notify the first person on the waitlist via Resend and give them 2 hours to claim the slot before offering it to the next person.
```
Let clients rate and review consultants after completed sessions to build trust and help other clients make informed decisions.
```plaintext wrap theme={null}
Add a review system. After a session is marked as completed, prompt the client to leave a 1-5 star rating and an optional written review. Display reviews on the consultant's profile page with the average rating shown prominently. Update the consultant's rating field in Supabase as a running average. Only clients who have completed a session with that consultant can leave a review.
```
## Troubleshooting
If the scheduling widget is empty, the consultant may not have availability set up in Calendly. Make sure their calendar link is correct in the database and that they have configured at least one availability window.
If the widget loads but bookings do not appear in your app, ask Rocket to debug the sync:
```plaintext wrap theme={null}
Bookings made through the Calendly widget are not showing up in the Supabase bookings table. Check the webhook connection between Calendly and my app and make sure new bookings are being saved to the database when the webhook fires.
```
If the client and consultant see different times for the same booking, there may be a timezone issue. Ask Rocket to fix it:
```plaintext wrap theme={null}
Booking times are showing incorrectly for one party. Make sure all timestamps in the bookings table use timezone-aware storage. Display booking times in both the client's and consultant's local timezone on the confirmation page and in emails.
```
Also check that the consultant's timezone is set correctly in their Calendly settings.
If you are using Calendly, the scheduling tool should prevent conflicts automatically. Make sure the consultant has only one active event type with the correct duration.
If conflicts are still happening, ask Rocket to add a safeguard:
```plaintext wrap theme={null}
Two clients were able to book the same consultant at the same time. Add a server-side check that prevents creating a new booking if the consultant already has a confirmed booking at that time. Show a friendly error message asking the client to pick a different slot.
```
# Build a content site
Source: https://docs.rocket.new/learn/recipes/content-site
Build a modern blog with categories, author pages, SEO optimization, and a headless CMS using Rocket.new.
A modern content site and blog where editors create and manage articles through a headless CMS, readers browse posts by category, and each author has a dedicated profile page. The finished product includes full SEO metadata, a newsletter signup form, site-wide search, analytics tracking, and one-click deployment to Netlify.
By the end of this recipe you will have a production-ready blog that you can customize, rebrand, and launch as your own publication.
## Tech stack
You do not need to understand these technologies. Rocket handles them automatically. This table is for reference.
| Service | Role |
| ------------------------ | ------------------------------------------------------------------- |
| **Next.js + TypeScript** | Frontend framework with static generation and server-side rendering |
| **Strapi** | Headless CMS for managing articles, categories, and authors |
| **Supabase** | Comment system, newsletter subscribers, and user data |
| **Google Analytics** | Traffic analytics, page views, and audience insights |
| **Netlify** | Production deployment, hosting, and CDN |
## Architecture overview
Here is how the pieces connect:
1. An editor creates a new article in **Strapi**, assigning a category, author, featured image, and SEO metadata.
2. When the article is published, the **Next.js** frontend fetches the content from the Strapi API and renders it as a static page.
3. Readers can **browse by category** or use the **search bar** to find articles by title or keyword.
4. Each article page includes an **author card** that links to the author's profile, showing their bio and all published posts.
5. Readers can **subscribe to the newsletter** via a signup form powered by Supabase. Subscriber data is stored securely for future email campaigns.
6. **Google Analytics** tracks page views, popular articles, and reader engagement across the site.
7. The entire site is **deployed to Netlify** with automatic rebuilds triggered by CMS content changes.
## How long does it take?
| Phase | What you are building | Estimated time |
| --------- | ----------------------------- | ----------------- |
| Setup | Project, Strapi CMS | 5-10 minutes |
| Content | Articles, categories, authors | 10-15 minutes |
| Features | Search, newsletter | 5-10 minutes |
| Launch | Analytics, deploy | 5 minutes |
| **Total** | **Complete content site** | **25-40 minutes** |
## Step-by-step build
Open [rocket.new](https://rocket.new) and create a new project. Give Rocket a detailed description of the blog so it scaffolds the right pages, layout, and navigation from the start.
```plaintext wrap theme={null}
Build a modern blog called "The Daily Byte" using Next.js and TypeScript. Include these pages: homepage with hero section and featured articles grid, article listing page with category filters, individual article page with rich text content and author bio, author profile page listing all their posts, about page, and a contact page. Use a clean, modern design with a serif font for headings and a sans-serif font for body text. Add a responsive navbar with logo, navigation links, and a search icon. Include a footer with newsletter signup and social media links.
```
Be specific about the pages and layout you want in your first prompt. The more detail you give, the less back-and-forth you will need later.
Go to **Integrations** in your Rocket project and connect your Strapi instance. Then ask Rocket to set up the content types and connect them to the frontend.
```plaintext wrap theme={null}
Connect Strapi and create the following content types:
1. "Article" - title (text), slug (uid based on title), content (rich text), excerpt (text), featured_image (media), category (relation to Category), author (relation to Author), published_date (date), seo_title (text), seo_description (text), is_featured (boolean)
2. "Category" - name (text), slug (uid based on name), description (text), color (text for hex code)
3. "Author" - name (text), slug (uid based on name), bio (rich text), avatar (media), twitter_handle (text), website_url (text)
Fetch articles from Strapi on the homepage and article listing pages. Use static generation (getStaticProps) for fast page loads with incremental static regeneration so new articles appear without a full rebuild.
```
Rocket handles the Strapi connection through the integrations panel. Your API URL and tokens are encrypted and stored securely, so you never need to copy them manually.
Now create the individual article pages with rich content rendering, author attribution, and SEO metadata.
```plaintext wrap theme={null}
Build the article detail page at /articles/[slug]:
- Fetch the full article from Strapi by slug
- Render the rich text content with proper formatting for headings, paragraphs, lists, images, code blocks, and blockquotes
- Show the article title, published date, category badge, and reading time estimate at the top
- Display the featured image as a hero banner
- Add an author card at the bottom with avatar, name, bio snippet, and a link to their full profile page
- Add SEO metadata using Next.js Head: page title, meta description, Open Graph image, and Twitter card tags
- Add structured data (JSON-LD) for Article schema to help with search engine indexing
```
Build the category filter system and dedicated author profile pages so readers can explore content by topic or writer.
```plaintext wrap theme={null}
Add category and author pages:
- Create a category page at /categories/[slug] that lists all articles in that category with the category name, description, and a colored header matching the category's hex color
- Add category filter buttons on the main articles listing page that filter without a full page reload
- Create an author profile page at /authors/[slug] showing the author's avatar, full bio, website link, Twitter handle, and a grid of all their published articles sorted by date
- Add an "All Authors" page at /authors listing every author with their avatar, name, article count, and a link to their profile
```
Let readers find articles quickly with a site-wide search feature.
```plaintext wrap theme={null}
Add a search feature to the blog:
- Add a search icon in the navbar that opens a search modal overlay
- The search modal should have an auto-focused text input with a clean, minimal design
- Search articles by title, excerpt, and content using the Strapi search API or a client-side search index
- Show results as a list with article title, excerpt preview, category badge, and published date
- Highlight the matching text in the results
- Support keyboard navigation: arrow keys to move between results, Enter to open an article, and Escape to close the modal
- Show "No results found" with suggested categories when the query does not match any articles
```
For small to medium blogs (under 500 articles), client-side search with a library like Fuse.js is fast and simple. For larger sites, consider connecting Algolia or Meilisearch for server-side search.
Add a newsletter subscription form so readers can sign up for updates. Store subscribers in Supabase for future email campaigns.
```plaintext wrap theme={null}
Connect Supabase and add newsletter functionality:
- Create a "subscribers" table in Supabase with: id (uuid), email (text, unique), name (text, optional), subscribed_at (timestamp), is_active (boolean, default true)
- Add a newsletter signup form in the site footer with an email input and a "Subscribe" button
- Add a larger newsletter signup section at the bottom of each article page with a heading like "Stay in the loop" and a brief description
- Show a success message after subscribing and handle duplicate emails gracefully with a friendly message
- Add row-level security so subscribers cannot read other subscribers' data
- Add a simple admin API route to export the subscriber list as CSV
```
You can later connect a service like Mailchimp, Brevo, or Resend to send automated email campaigns to your subscriber list.
Connect Google Analytics to track page views, popular articles, and reader behavior.
```plaintext wrap theme={null}
Connect Google Analytics (GA4) and add tracking:
- Add the GA4 measurement script to the site
- Track page views automatically on every route change
- Add custom events for: article_view (with article title and category), newsletter_signup, search_performed (with search query), author_profile_view, and category_filter_used
- Set up content grouping by category so you can see which topics drive the most traffic
- Add UTM parameter tracking for measuring social media and email campaign performance
```
Go to **Integrations** and connect Netlify, then deploy your blog to the web.
Use the **Launch** button in your Rocket project to deploy to the web. Rocket handles the Netlify build configuration automatically. Make sure all required environment variables are set in your project's integration settings before launching.
After deploying, set up a Strapi webhook pointing to the Netlify build hook URL. This way your site automatically rebuilds whenever you publish or update an article in the CMS.
## Customization ideas
Once the base blog is running, here are ways to extend it.
Let readers leave comments on articles. Use Supabase to store comments with moderation support so you can approve or remove comments before they appear.
```plaintext wrap theme={null}
Add a comment section to each article page. Create a "comments" table in Supabase with article_slug, author_name, content, created_at, and is_approved fields. Show approved comments below the article. Add a comment form with name and message fields. New comments default to unapproved so you can moderate them from an admin page.
```
Give readers the option to switch between light and dark themes. Persist the preference in localStorage so it carries across visits.
```plaintext wrap theme={null}
Add a dark mode toggle to the navbar. Implement a theme provider that switches between light and dark color schemes. Use CSS variables for all colors so the switch is seamless. Default to the system preference, and save the user's choice in localStorage. Make sure all pages, components, and the newsletter form look correct in both modes.
```
Generate an RSS feed so readers can subscribe using their favorite feed reader and get notified about new articles automatically.
```plaintext wrap theme={null}
Generate an RSS 2.0 feed at /rss.xml that includes the 20 most recent articles. Each item should have the title, link, publication date, author, category, and the excerpt as the description. Add an Atom feed at /atom.xml as well. Include a link to the RSS feed in the site header meta tags and in the footer.
```
Make it easy for readers to share articles on social media with one-click share buttons.
```plaintext wrap theme={null}
Add social sharing buttons to each article page, positioned below the title and at the bottom of the article. Include buttons for Twitter, LinkedIn, Facebook, and a "Copy Link" button. Pre-fill the share text with the article title and URL. Use native share dialogs on mobile with the Web Share API where supported.
```
Show related articles at the end of each post to keep readers engaged and reduce bounce rate.
```plaintext wrap theme={null}
Add a "Related Articles" section at the bottom of each article page, above the comments. Show 3 related articles based on the same category. If there are fewer than 3 articles in the same category, fill the remaining slots with the most recent articles from other categories. Display each related article as a card with the featured image, title, excerpt, and published date.
```
## Troubleshooting
If the blog loads but articles are missing, the Strapi connection may need attention. First, make sure your articles are set to **Published** (not Draft) in Strapi. Then ask Rocket to debug:
```plaintext wrap theme={null}
The blog is loading but no articles are appearing. Review the code that fetches articles from the Strapi API and make sure the endpoint URL, content type name, and response parsing are correct. Remind me to verify that the API permissions in the Strapi dashboard allow public read access.
```
If featured images are broken or slow, ask Rocket to optimize the image handling:
```plaintext wrap theme={null}
Featured images are loading slowly or showing as broken. Optimize the image setup by using the Next.js Image component with proper configuration for my Strapi media URLs. Add lazy loading, modern image formats, and blurred placeholders for large images.
```
If sharing a link on social media shows a generic title instead of the article's own title and image, the SEO metadata may be missing. Ask Rocket to fix it:
```plaintext wrap theme={null}
When I share an article link on social media, it shows a generic preview instead of the article title and image. Add proper Open Graph and Twitter Card meta tags to each article page using the article's title, description, and featured image so social previews look correct.
```
After Rocket updates the code, you can test your links with the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) to verify the preview.
# Build an e-commerce store
Source: https://docs.rocket.new/learn/recipes/ecommerce
Build a complete online store with Rocket.new - product catalog, shopping cart, Stripe checkout, and order management.
A fully functional online store for handmade jewelry with a browsable product catalog, persistent shopping cart, Stripe-powered checkout, order management, and automated customer notifications. Customers can browse collections, filter by category, add items to their cart, pay securely, and receive order confirmation emails with tracking details.
By the end of this recipe you will have a production-ready store that you can customize, rebrand, and launch as your own product.
## Tech stack
You do not need to understand these technologies. Rocket handles them automatically. This table is for reference.
| Technology | Role |
| ------------------------ | --------------------------------------------------------------------------------------- |
| **Next.js + TypeScript** | Frontend framework and server-side rendering |
| **Supabase** | Database (products, orders, users), authentication, and file storage for product images |
| **Stripe** | Checkout sessions and payment processing |
| **SendGrid or Resend** | Order confirmation and shipping notification emails |
| **Google Analytics** | Conversion tracking and traffic attribution |
| **Netlify** | Production deployment and custom domain |
## Architecture overview
The store follows a straightforward data flow:
1. **Browse**: Customers explore products pulled from Supabase, with images served from Supabase Storage.
2. **Cart**: Selected items are stored in a client-side cart that syncs to Supabase for logged-in users.
3. **Checkout**: The cart is sent to Stripe Checkout for secure payment processing.
4. **Order saved**: On successful payment, a Stripe webhook writes the order to Supabase and updates inventory.
5. **Notification**: An order confirmation email is sent through SendGrid or Resend with order details and estimated delivery.
6. **Analytics**: GA4 tracks product views, add-to-cart events, and completed purchases for conversion analysis.
## How long does it take?
| Phase | What you are building | Estimated time |
| ------------- | -------------------------- | ----------------- |
| Setup | Project, Supabase, catalog | 5-10 minutes |
| Storefront | Products, cart, checkout | 10-15 minutes |
| Payments | Stripe integration | 5 minutes |
| Post-purchase | Emails, order history | 5-10 minutes |
| Launch | Analytics, deploy | 5 minutes |
| **Total** | **Complete store** | **30-45 minutes** |
## Step-by-step build
Open Rocket and describe the full scope of your store so it can scaffold the right structure from the beginning.
```plaintext wrap theme={null}
Build an e-commerce store for a handmade jewelry brand called "Luna & Stone." The store should have a homepage with featured products, a product catalog page with category filters (rings, necklaces, bracelets, earrings), individual product detail pages, a shopping cart, Stripe checkout, and an order confirmation page. Use Next.js with TypeScript and a clean, modern design with a warm neutral color palette.
```
Rocket generates the full project structure, page layouts, navigation, and placeholder product data.
Connect your Supabase project and ask Rocket to create the database schema for your store.
```plaintext wrap theme={null}
Connect Supabase. Create these tables:
- products: id, name, description, price (integer, in cents), category (enum: rings, necklaces, bracelets, earrings), images (text array of storage URLs), inventory_count, is_featured, created_at
- customers: id (linked to Supabase Auth user), email, name, shipping_address (jsonb), created_at
- orders: id, customer_id (FK to customers), stripe_session_id, status (enum: pending, paid, shipped, delivered), total_amount, shipping_address (jsonb), created_at
- order_items: id, order_id (FK to orders), product_id (FK to products), quantity, unit_price
Enable row-level security so customers can only read products and view their own orders. Add a Supabase Storage bucket called "product-images" with public read access.
```
Seed your products table with 8-12 sample items so you have real data to work with while building. You can ask Rocket to generate sample jewelry data with realistic names, descriptions, and prices.
Replace the placeholder data with live Supabase queries and build out the shopping experience.
```plaintext wrap theme={null}
Update the product catalog page to fetch products from Supabase. Add:
- A grid layout showing product image, name, and price
- Category filter buttons that update the query without a full page reload
- A "Featured" section on the homepage showing products where is_featured is true
- Individual product pages at /products/[id] with an image gallery, full description, price, and an "Add to Cart" button
- Loading skeletons while products are being fetched
Use Supabase Storage URLs for product images.
```
Add a persistent cart that works for both guests and logged-in users.
```plaintext wrap theme={null}
Add a shopping cart with the following behavior:
- Cart icon in the header showing item count
- Slide-out cart drawer that shows items, quantities, and subtotal
- Plus/minus buttons to update quantity, with a max of the product's inventory_count
- Remove item button
- Store the cart in localStorage for guest users
- When a user logs in, merge the localStorage cart with any existing cart in Supabase
- Cart page at /cart with a full summary and a "Proceed to Checkout" button
```
Test the cart with multiple products and edge cases: adding the same item twice, removing the last item, and refreshing the page to verify persistence.
Wire up Stripe Checkout so customers can pay securely.
```plaintext wrap theme={null}
Connect Stripe and implement checkout:
- When the user clicks "Proceed to Checkout," create a Stripe Checkout session with line items from the cart (product name, unit price, quantity, and product image)
- Include a success URL (/order-confirmation?session_id={CHECKOUT_SESSION_ID}) and a cancel URL (/cart)
- Add a Stripe webhook handler for checkout.session.completed that:
1. Creates an order in the orders table with status "paid"
2. Creates order_items for each product
3. Decrements inventory_count for each purchased product
- On the success page, fetch order details using the session_id and show a confirmation with order number, items purchased, and total
```
Make sure your Stripe webhook secret is stored as an environment variable, not hardcoded. Rocket handles this automatically when you connect Stripe through the integrations panel.
Give customers visibility into their past orders and current order status.
```plaintext wrap theme={null}
Add an order history page at /account/orders that:
- Requires authentication (redirect to login if not signed in)
- Shows a list of all orders for the logged-in customer, sorted by date
- Each order card shows: order number, date, status badge (paid, shipped, delivered), item count, and total amount
- Clicking an order opens a detail view with individual items, quantities, prices, and shipping address
- Add a Supabase real-time subscription so the status badge updates live when an order status changes
```
Send customers an email when their order is confirmed.
```plaintext wrap theme={null}
Connect Resend (or SendGrid). When the Stripe webhook confirms a successful payment, send an order confirmation email to the customer that includes:
- Order number and date
- List of items with name, quantity, and price
- Order total and shipping address
- A "View Order" button linking to /account/orders/[id]
- Brand header with the Luna & Stone logo
Use a clean, responsive HTML email template that looks good on mobile.
```
If you want to add shipping notification emails later, you can ask Rocket to send another email when the order status changes to "shipped."
Track the full purchase funnel so you can see where customers drop off.
```plaintext wrap theme={null}
Connect Google Analytics (GA4) and add e-commerce event tracking:
- view_item: when a customer opens a product detail page
- add_to_cart: when a customer adds a product to the cart
- begin_checkout: when the customer clicks "Proceed to Checkout"
- purchase: on the order confirmation page, with transaction_id, value, and items
Include UTM parameter tracking so I can measure which marketing channels drive sales.
```
Add final touches and ship your store.
```plaintext wrap theme={null}
Before deploying, make these improvements:
- Add SEO metadata (title, description, Open Graph image) to the homepage, catalog page, and each product page
- Add a favicon and branded loading state
- Make sure all pages are fully responsive on mobile
- Add an empty cart state with a "Continue Shopping" link
- Add a 404 page for products that do not exist
```
Use the **Launch** button in your Rocket project to deploy to the web. Rocket handles the Netlify build configuration automatically. Make sure all required environment variables are set in your project's integration settings before launching.
After deploying, connect a custom domain through Netlify and set up an SSL certificate. You can do this from the Netlify dashboard or ask Rocket to guide you through it.
## Customization ideas
Track stock levels and show "Out of Stock" badges when inventory runs out. Ask Rocket to add an admin page where you can update inventory counts and receive low-stock alerts.
```plaintext wrap theme={null}
Add inventory management. Show "Out of Stock" on product cards when inventory_count is 0 and disable the Add to Cart button. Create an admin page at /admin/inventory that lists all products with current stock levels and lets me update quantities. Send me an email when any product drops below 5 units.
```
Let customers apply promo codes at checkout for percentage or fixed-amount discounts.
```plaintext wrap theme={null}
Add a discount codes system. Create a discount_codes table in Supabase with fields for code, type (percentage or fixed), value, max_uses, current_uses, and expiry_date. Add a "Promo Code" input on the cart page that validates the code and shows the discounted total. Pass the discount to Stripe as a coupon on the checkout session.
```
Let customers leave ratings and reviews on products they have purchased.
```plaintext wrap theme={null}
Add product reviews. Create a reviews table with product_id, customer_id, rating (1-5), comment, and created_at. On the product detail page, show the average rating, total review count, and a list of reviews. Only allow customers who have purchased the product to leave a review. Add a star rating input component.
```
Let logged-in customers save products to a wishlist for later.
```plaintext wrap theme={null}
Add a wishlist feature. Create a wishlists table with customer_id and product_id. Add a heart icon on each product card that toggles the item in the wishlist. Create a /account/wishlist page showing all saved items with an "Add to Cart" button on each one. Require authentication to use the wishlist.
```
Build a back-office dashboard for managing products, orders, and customers.
```plaintext wrap theme={null}
Add an admin panel at /admin with role-based access (add an is_admin boolean to the customers table). Include:
- Dashboard with today's revenue, total orders, and top-selling products
- Product management: add, edit, delete products and upload images
- Order management: view all orders, update status (paid > shipped > delivered), and search by order number or customer email
- Customer list with order history per customer
```
## Troubleshooting
If items disappear from the cart after refreshing, the cart may not be saving to the browser's storage. Ask Rocket to fix it:
```plaintext wrap theme={null}
The shopping cart loses all items when I refresh the page. Make sure the cart state is saved to localStorage on every update and loaded back when the page mounts, so items persist across page refreshes and navigation.
```
If a customer pays but no order shows up in the app, the Stripe webhook may not be configured correctly. Make sure Stripe is connected in your project's **Integrations** panel, then ask Rocket to debug:
```plaintext wrap theme={null}
Customers are completing Stripe checkout but orders are not being created in Supabase. Debug the Stripe webhook handler for checkout.session.completed. Make sure it creates the order, saves order items, and decrements inventory. Add error logging so I can see what is failing.
```
If product images appear broken, the Supabase Storage bucket may not have public access enabled. Ask Rocket to check:
```plaintext wrap theme={null}
Product images are showing as broken on the store. Review the image URL format in the code and make sure it matches the Supabase Storage URL pattern. Fix any mismatches. Remind me to verify that the storage bucket has public read access in the Supabase dashboard.
```
If the amount charged in Stripe is different from what the cart shows, the prices may be calculated on the wrong side. Ask Rocket to fix it:
```plaintext wrap theme={null}
The Stripe checkout amount does not match the cart total. Make sure product prices are fetched from Supabase on the server side when creating the Stripe Checkout session, instead of using the prices from the client-side cart.
```
# Build an internal tool
Source: https://docs.rocket.new/learn/recipes/internal-tool
Build an internal dashboard or admin tool with Rocket.new.
A step-by-step recipe for building internal tools with Rocket - admin panels, dashboards, CRM interfaces, inventory managers, and other apps used by your team rather than customers.
Internal tools don't need to be pretty - they need to be functional, fast, and reliable. Focus on data management and workflows over visual polish.
## Before you start
Gather these before beginning:
* A clear description of who will use the tool and what they need to do
* The data source (Supabase, an external API, a CSV you'll import)
* The key workflows (what does a user do first, second, third?)
* Any access control requirements (who can see or edit what?)
## The recipe
Internal tools succeed when they solve a specific workflow problem. Be concrete about what the tool needs to do.
**Example requirements for a customer support dashboard:**
* View all support tickets in a sortable, filterable table
* Click a ticket to see full conversation history
* Change ticket status (open, in progress, resolved, closed)
* Assign tickets to team members
* See dashboard metrics: open tickets, average response time, tickets resolved today
* Admin view: manage team members and their permissions
Write your requirements down. You'll use them in your Build prompt.
Create a **Build task** and describe the tool based on your requirements.
```plaintext wrap theme={null}
Build an internal support dashboard. It needs: a data table showing all support tickets with columns for ID, customer name, subject, status, assignee, priority, and created date. The table should be sortable by any column and filterable by status and priority. Clicking a row opens a detail panel showing the full ticket with conversation history. Include a dashboard view with metrics cards: total open tickets, average response time, resolved today, unresolved > 24 hours. Add a sidebar navigation with Dashboard and Tickets sections. Connect to Supabase for the database. Use a clean, functional design - this is for internal use, so prioritize usability over aesthetics.
```
Rocket generates the full app. Preview it and check that the core data flow works: viewing, filtering, and updating records.
Internal tools still need auth - you don't want unauthorized access to sensitive data.
```plaintext wrap theme={null}
Add authentication with Supabase Auth. Only users with an @[yourcompany.com] email address can sign up. Add role-based access control: "admin" users can manage team members and change settings, "agent" users can view and manage tickets but not change team settings. Display the logged-in user's name and role in the sidebar header.
```
For internal tools, email domain restriction is often the simplest access control - only people with your company email can access the tool.
Wire the tool to real data.
If you're using Supabase (the default), your tables are already connected. Ask Rocket to set up the schema:
```plaintext wrap theme={null}
Create Supabase tables for this dashboard: a "tickets" table with columns for id, customer_name, customer_email, subject, description, status (enum: open, in_progress, resolved, closed), priority (enum: low, medium, high, urgent), assignee_id, created_at, updated_at. A "messages" table for ticket conversation history. A "team_members" table for user profiles. Enable row-level security so agents can only see tickets assigned to them, and admins can see all tickets.
```
If your data lives in an external system, connect via API:
```plaintext wrap theme={null}
Connect the dashboard to our API at [api-endpoint]. Fetch tickets from GET /api/tickets. Update ticket status via PUT /api/tickets/:id. Use the API key from environment variables. Handle pagination (the API returns 50 records per page). Add error handling for timeouts and auth failures.
```
For one-time data imports or tools that manage static datasets:
```plaintext wrap theme={null}
Add a CSV import feature. Users should be able to upload a CSV file, preview the data in a table, map columns to the correct fields, and import the records into Supabase. Show a progress bar during import and a summary of imported/skipped/errored records when complete.
```
Internal tools are valuable because they speed up workflows. Add the actions your team performs most.
```plaintext wrap theme={null}
Add these workflow features: bulk actions on the ticket table (select multiple tickets and change status, assign, or delete). A quick-reply feature on the ticket detail panel with canned responses (templates the agent can customize before sending). A notification system that shows a badge when new tickets are created. An activity log on each ticket showing all status changes, assignments, and messages with timestamps.
```
Internal tools don't need public-facing SEO or conversion optimization, but they still need reliable deployment.
1. Test in [staging](/build/launch-web/launch-your-site) with your team
2. Click **Launch** to deploy
3. Optionally [connect a custom domain](/build/launch-web/custom-domain) (e.g., support.yourcompany.com)
4. Share the URL and login credentials with your team
5. Set up [analytics](/build/measure/analytics) to track usage patterns
For internal tools, you might skip a custom domain entirely and use the Rocket-provided URL. Bookmark it and share it with the team - no domain configuration needed.
## Internal tool ideas
Customer relationship manager with contacts, deal pipeline, activity tracking, and email integration.
Stock tracking with categories, suppliers, reorder alerts, and barcode/SKU lookup.
Employee directory, PTO requests, onboarding checklists, and document management.
Business metrics dashboard pulling from multiple data sources with charts, exports, and scheduled reports.
## Tips for internal tools
* **Function over form.** Your team needs to get work done, not admire the UI. Prioritize data density, keyboard shortcuts, and fast workflows.
* **Start with the most painful workflow.** Build the tool around the task your team does most and likes least.
* **Add search and filters early.** Internal tools quickly accumulate data. Make it findable from day one.
* **Use real data during development.** Placeholder data hides real problems. Import a sample of production data for testing.
* **Get team feedback in staging.** Share the staging URL with the people who'll actually use the tool. Their feedback matters most.
## What's next?
Redesign an existing website from audit to deploy.
Lock down auth, API keys, and data access.
Explore everything Build can create.
Add Stripe billing to your internal tool.
# Build a lead generation site
Source: https://docs.rocket.new/learn/recipes/lead-gen
Build a lead generation landing page with Rocket.new - capture forms, email nurture sequences, CRM tracking, and analytics.
A high-converting lead generation site with a polished landing page, embedded lead capture forms, automated email nurture sequences, CRM tracking in Airtable, and analytics to measure every step of the funnel. Visitors land on the page, fill out a form, enter an email drip campaign, and get tracked as leads through your pipeline.
By the end of this recipe you will have a production-ready lead generation system that you can customize for any product, service, or offer.
## Tech stack
You do not need to understand these technologies. Rocket handles them automatically. This table is for reference.
| Service | Role |
| ------------------------ | ------------------------------------------------------------------- |
| **Next.js + TypeScript** | Frontend framework and API routes |
| **Typeform or Tally** | Lead capture forms with conditional logic |
| **Mailchimp or Brevo** | Email marketing, drip campaigns, and subscriber management |
| **Airtable** | Lightweight CRM for tracking leads through your pipeline |
| **Google Analytics** | Traffic analytics, conversion tracking, and campaign attribution |
| **Netlify** | Production deployment, hosting, and A/B testing with split branches |
## Architecture overview
Here is how the pieces connect:
1. A visitor arrives on the **landing page** from an ad, social post, or search result.
2. The visitor fills out a **lead capture form** (powered by Typeform or Tally) embedded on the page.
3. When the form is submitted, a webhook sends the lead data to an **API route** in Next.js.
4. The API route creates a new record in **Airtable** (your CRM) with the lead's name, email, source, and status.
5. The same API route adds the lead to a **Mailchimp or Brevo** audience and enrolls them in an automated **email nurture sequence**.
6. **Google Analytics** tracks the form submission as a conversion event, along with the traffic source and UTM parameters.
7. The entire site is **deployed to Netlify** with support for A/B testing different landing page variants.
## How long does it take?
| Phase | What you are building | Estimated time |
| ------------ | -------------------------- | ----------------- |
| Setup | Project, landing page | 5 minutes |
| Capture | Forms, email marketing | 5-10 minutes |
| Tracking | CRM, analytics | 5-10 minutes |
| Optimization | A/B testing | 5 minutes |
| Launch | Deploy | Under 5 minutes |
| **Total** | **Complete lead gen site** | **25-35 minutes** |
## Step-by-step build
Open [rocket.new](https://rocket.new) and create a new project. Give Rocket a detailed description of the landing page so it scaffolds a high-converting layout from the start.
```plaintext wrap theme={null}
Build a lead generation landing page called "GrowthKit" using Next.js and TypeScript. The page should have: a hero section with a bold headline, subheadline, and a call-to-action button that scrolls to the form, a social proof section with logos of companies or testimonials, a benefits section with 3-4 feature cards explaining the value proposition, a detailed "How it works" section with 3 steps, a testimonials carousel, a lead capture section with a form and a compelling offer (like a free guide or consultation), and a FAQ accordion. Use a modern, conversion-focused design with a bold color scheme (dark background hero, white content sections, bright CTA buttons). Make it fully responsive.
```
Landing pages live or die by their first impression. Be specific about the hero section, social proof, and CTA placement in your first prompt so Rocket nails the layout.
Refine each section of the landing page to maximize conversions. Focus on clear messaging, strong visuals, and a single call to action.
```plaintext wrap theme={null}
Improve the landing page sections:
- Hero: Add a gradient background, a large headline like "Grow your business with proven strategies", a subheadline explaining the offer, and a bright CTA button ("Get Your Free Guide"). Add a small trust badge below the button like "Join 5,000+ marketers".
- Social proof: Show a row of 5-6 grayscale company logos with the text "Trusted by teams at" above them.
- Benefits: Create 4 feature cards with icons, each explaining a key benefit. Use clear, outcome-focused copy.
- How it works: Show 3 numbered steps with icons explaining the process (1. Sign up, 2. Get the guide, 3. Implement and grow).
- Testimonials: Add a carousel with 3 testimonial cards, each with a quote, name, title, company, and headshot.
- FAQ: Add 5-6 common questions in an accordion component.
- Sticky CTA: Add a floating call-to-action button that appears when the user scrolls past the hero section.
```
Embed a lead capture form that collects visitor information and triggers your automation pipeline.
```plaintext wrap theme={null}
Add a lead capture form to the landing page:
- Embed a Typeform or Tally form in the lead capture section. The form should collect: first name, email address, company name (optional), and "What is your biggest challenge?" (dropdown with 4-5 options).
- Style the form to match the landing page design. If using Tally, use the embedded mode for a seamless look.
- Add a Typeform/Tally webhook that fires on form submission and sends the data to a Next.js API route at /api/leads.
- On successful submission, show a thank-you message with a link to download the free guide (or redirect to a thank-you page).
- Add a secondary form in the hero section that collects just the email address for quick signups, then redirects to the full form or thank-you page.
```
Tally offers unlimited forms on its free tier and supports webhooks. Typeform has a more polished form experience with conditional logic but limits submissions on the free plan.
Set up automated email sequences to nurture leads after they submit the form.
```plaintext wrap theme={null}
Connect Mailchimp (or Brevo) for email marketing:
- In the /api/leads API route, add the new lead to a Mailchimp audience (or Brevo contact list) using the API. Tag the lead with the source page and their selected challenge.
- Set up a 5-email welcome/nurture sequence in Mailchimp:
Email 1 (immediate): Welcome and deliver the free guide download link
Email 2 (day 2): Share a relevant case study or success story
Email 3 (day 4): Provide an actionable tip related to their challenge
Email 4 (day 7): Introduce your product or service with social proof
Email 5 (day 10): Final call to action with a limited-time offer or consultation booking link
- Add an unsubscribe link in every email to comply with email regulations.
```
Write all five emails before activating the sequence. Test the full flow with your own email address to check formatting, links, and timing between emails.
Use Airtable as a lightweight CRM to track leads through your sales pipeline.
```plaintext wrap theme={null}
Connect Airtable and set up lead tracking:
- Create an Airtable base called "Lead Pipeline" with a table called "Leads" containing these fields: Name (text), Email (email), Company (text), Challenge (single select), Source (text, from UTM parameters), Status (single select: New, Contacted, Qualified, Converted, Lost), Submitted At (date), Notes (long text), Email Sequence Status (single select: Not Started, In Progress, Completed)
- In the /api/leads API route, create a new Airtable record for every form submission with the lead's data and UTM source.
- Set the initial status to "New" for all incoming leads.
- Create Airtable views for each pipeline stage so you can quickly see which leads need follow-up.
```
Airtable's free tier supports up to 1,000 records per base, which is enough for early-stage lead generation. Upgrade when your volume grows.
Connect Google Analytics to measure traffic sources, form submissions, and overall conversion rates.
```plaintext wrap theme={null}
Connect Google Analytics (GA4) and add conversion tracking:
- Add the GA4 measurement script to the landing page
- Track these events:
page_view: automatic on page load
cta_click: when the user clicks any call-to-action button
form_start: when the user begins filling out the form
form_submit: when the form is successfully submitted (this is your primary conversion event)
thank_you_page_view: when the user reaches the thank-you page
- Set up the form_submit event as a conversion in the GA4 dashboard
- Add UTM parameter capture: read utm_source, utm_medium, and utm_campaign from the URL and pass them to the API route so they are stored in Airtable
- Create a funnel report in GA4: page_view > cta_click > form_start > form_submit to measure drop-off at each stage
```
Test different versions of the landing page to find the highest-converting variant.
```plaintext wrap theme={null}
Add A/B testing support:
- Create two variants of the hero section: Variant A with the current headline, and Variant B with an alternative headline and different CTA button color
- Use Netlify's split testing feature (branch-based A/B testing) to route 50% of traffic to each variant
- Track which variant each visitor sees by adding a custom dimension in Google Analytics (variant_id: "A" or "B")
- Include the variant ID in the form submission data so you can measure conversion rate per variant in Airtable
- After collecting enough data (at least 100 conversions per variant), pick the winner and make it the default
```
Only test one element at a time (headline, CTA color, form length) so you can attribute conversion differences to a specific change. Testing too many things at once makes it hard to draw conclusions.
Go to **Integrations** and connect Netlify, then deploy your landing page to the web.
Use the **Launch** button in your Rocket project to deploy to the web. Rocket handles the Netlify build configuration automatically. Make sure all required environment variables are set in your project's integration settings before launching.
After deploying, test the entire funnel end to end: visit the page from a link with UTM parameters, submit the form, verify the lead appears in Airtable, confirm the welcome email arrives, and check that the conversion event shows up in Google Analytics.
## Customization ideas
Once the base lead generation site is running, here are ways to extend it.
Add a chat widget that engages visitors, answers common questions, and qualifies leads before they fill out the form.
```plaintext wrap theme={null}
Add a chatbot widget in the bottom-right corner of the landing page. Use a simple decision-tree flow that asks the visitor: what they are looking for, their company size, and their timeline. Based on the answers, either direct them to the lead capture form (qualified) or show them a resource page (not ready yet). Log the chat responses to Airtable as a pre-qualification step.
```
Show real-time notifications when other people sign up to create urgency and social proof.
```plaintext wrap theme={null}
Add a small notification toast in the bottom-left corner that shows messages like "Sarah from New York just downloaded the guide" every 15-20 seconds. Pull recent signups from Airtable (first name and city only) to keep it authentic. Fade the notification in and out smoothly. Only show these notifications to visitors who have not submitted the form yet.
```
Capture visitors who are about to leave the page with a targeted popup offering an additional incentive.
```plaintext wrap theme={null}
Add an exit-intent popup that triggers when the user's cursor moves toward the browser's close button or address bar. The popup should have a different offer than the main page, like "Wait, grab our exclusive checklist before you go." Include a simple email-only form in the popup. Only show the popup once per visitor (track with localStorage). Do not show it to users who have already submitted the main form.
```
Replace the single landing page with a multi-step funnel that guides visitors through a series of pages before the final conversion.
```plaintext wrap theme={null}
Convert the landing page into a 3-step funnel:
Step 1: Landing page with the value proposition and a "Get Started" button (no form yet)
Step 2: A quiz or assessment page with 3-4 questions about the visitor's needs (using Typeform or Tally)
Step 3: Results page showing personalized recommendations based on their answers, with the lead capture form to unlock the full report
Track funnel progression in Google Analytics and measure drop-off between each step.
```
Let existing leads refer friends and track which referrals convert, creating a viral growth loop.
```plaintext wrap theme={null}
Add a referral system. After a lead submits the form, show them a unique referral link on the thank-you page. When someone visits the landing page through a referral link, track the referrer in the URL parameters. If the referred visitor converts, update both the new lead's record and the referrer's record in Airtable. Add a simple leaderboard or reward system (like "Refer 3 friends, get a free consultation") to incentivize sharing.
```
## Troubleshooting
If visitors submit the form but nothing shows up in Airtable or your email tool, the form webhook may not be connected to your app. Make sure the webhook is enabled in your Typeform or Tally form settings, then ask Rocket to debug:
```plaintext wrap theme={null}
Form submissions from Typeform (or Tally) are not reaching my app. Check the webhook handler at /api/leads and make sure it correctly receives the form data, creates a record in Airtable, and adds the lead to my Mailchimp (or Brevo) audience. Add error logging so I can see what is failing.
```
You can test by submitting the form yourself and checking whether the lead appears in Airtable.
If form submissions work but records do not show up in Airtable, the connection between your app and Airtable may need attention. Make sure Airtable is connected in your project's **Integrations** panel, then ask Rocket to check:
```plaintext wrap theme={null}
Form submissions are coming through but new leads are not appearing in my Airtable base. Review the Airtable API integration code and make sure the table name and field names match my Airtable setup. Add error handling so failed writes show a clear message.
```
If leads are not receiving your emails, the messages may be going to spam. This is usually a domain reputation issue. Ask Rocket to improve email deliverability:
```plaintext wrap theme={null}
My marketing emails are landing in spam folders. Review my email templates and remove any spam trigger words. Make sure the "from" address uses my verified domain and that the email content is clean and conversational.
```
If you are using a custom sending domain, check with your email provider (Mailchimp or Brevo) that your DNS records (SPF, DKIM) are set up correctly. Both services provide step-by-step guides for this.
# Build a SaaS app
Source: https://docs.rocket.new/learn/recipes/saas
Build a subscription-based SaaS product with auth, team workspaces, billing, and notifications using Rocket.new.
A project management SaaS where teams can create workspaces, organize tasks on Kanban boards, invite collaborators, and upgrade to a paid plan. The finished product includes user authentication, a free tier with limits, a Pro subscription via Stripe checkout, transactional email notifications, and one-click deployment to Netlify.
By the end of this recipe you will have a production-ready app that you can customize, rebrand, and launch as your own product.
## Tech stack
You do not need to understand these technologies. Rocket handles them automatically. This table is for reference.
| Service | Role |
| ------------------------ | ------------------------------------------------------ |
| **Next.js + TypeScript** | Frontend framework and API routes |
| **Supabase** | User authentication, PostgreSQL database, file storage |
| **Stripe** | Subscription billing (free and Pro plans) |
| **Resend** | Transactional emails (welcome, invites, receipts) |
| **Netlify** | Production deployment and hosting |
## Architecture overview
Here is how the pieces connect:
1. A visitor signs up using **Supabase Auth** (email/password or social login).
2. After signup, they land on a dashboard where they can create a **workspace** and start adding **tasks** (stored in Supabase).
3. The workspace owner can **invite team members** by email. Resend delivers the invitation.
4. When the team is ready to unlock higher limits, the owner opens the **pricing page** and completes a **Stripe Checkout** session to subscribe to the Pro plan.
5. Stripe webhooks update the subscription status in Supabase, and Resend sends a receipt email.
6. The entire app is **deployed to Netlify** with environment variables configured for each service.
## How long does it take?
| Phase | What you are building | Estimated time |
| ------------- | ------------------------ | ----------------- |
| Setup | Project, Supabase, auth | 5-10 minutes |
| Core features | Workspaces, tasks, teams | 10-15 minutes |
| Monetization | Stripe, pricing, billing | 5-10 minutes |
| Communication | Email notifications | 5 minutes |
| Launch | Deploy, go live | 5 minutes |
| **Total** | **Complete SaaS app** | **30-45 minutes** |
## Step-by-step build
Open [rocket.new](https://rocket.new) and create a new project. Give Rocket a detailed description of the app so it scaffolds the right pages, layout, and navigation from the start.
```plaintext wrap theme={null}
Build a project management SaaS called "Taskflow" using Next.js and TypeScript. Include these pages: landing page with hero and feature sections, pricing page with Free and Pro tiers, login page, signup page, dashboard with a sidebar, workspace settings page, and a Kanban task board. Use a clean, modern design with a blue and white color scheme. Add a responsive navbar with logo, navigation links, and login/signup buttons.
```
Be specific about the pages and layout you want in your first prompt. The more detail you give, the less back-and-forth you will need later.
Go to **Integrations** in your Rocket project and connect your Supabase account via OAuth. Create a new Supabase project (or select an existing one), then ask Rocket to set up the database schema.
```plaintext wrap theme={null}
Connect Supabase and create the following database tables:
1. "profiles" - id (uuid, references auth.users), display_name (text), avatar_url (text), created_at (timestamp)
2. "workspaces" - id (uuid), name (text), owner_id (uuid, references profiles), plan (text, default 'free'), created_at (timestamp)
3. "workspace_members" - id (uuid), workspace_id (uuid, references workspaces), user_id (uuid, references profiles), role (text, either 'owner', 'admin', or 'member'), invited_at (timestamp), joined_at (timestamp)
4. "tasks" - id (uuid), workspace_id (uuid, references workspaces), title (text), description (text), status (text, either 'todo', 'in_progress', or 'done'), assignee_id (uuid, references profiles), created_by (uuid, references profiles), position (integer), created_at (timestamp), updated_at (timestamp)
Add row-level security policies so users can only access data in workspaces they belong to. Create a trigger that automatically inserts a profile row when a new user signs up.
```
Rocket handles the Supabase connection through OAuth, so you never need to copy API keys manually. Your credentials are encrypted and stored securely.
Now wire up authentication so users can create accounts and sign in. This prompt connects Supabase Auth to the signup and login pages that Rocket already scaffolded.
```plaintext wrap theme={null}
Implement user authentication using Supabase Auth:
- On the signup page, add email/password registration. After successful signup, redirect to the dashboard and show a welcome message.
- On the login page, add email/password login with a "Remember me" checkbox. Redirect to the dashboard after login.
- Add a "Forgot password" link on the login page that sends a password reset email via Supabase.
- Add Google sign-in as a social login option on both pages.
- Protect the dashboard, workspace, and settings pages so only logged-in users can access them. Redirect unauthenticated visitors to the login page.
- Add a user menu in the top-right corner of the dashboard with the user's name, avatar, and a sign-out button.
```
After Rocket builds the auth flow, preview the app and create a test account. Check the Supabase dashboard to confirm the user appeared in the `auth.users` table and that the `profiles` trigger fired.
This is the core of the product. Users create a workspace, then manage tasks on a drag-and-drop Kanban board.
```plaintext wrap theme={null}
Build the workspace and task board features:
- After login, show a "My Workspaces" list on the dashboard. Include a "Create Workspace" button that opens a modal with a name field.
- When a user creates a workspace, automatically add them as the owner in the workspace_members table.
- Inside each workspace, show a Kanban board with three columns: To Do, In Progress, and Done.
- Users can create new tasks with a title and optional description. New tasks start in the "To Do" column.
- Support drag-and-drop to move tasks between columns. Save the new status and position to Supabase on drop.
- Each task card should show the title, assignee avatar, and a colored status badge.
- Clicking a task card opens a detail panel where users can edit the title, description, status, and assignee.
```
Let workspace owners invite collaborators by email. This step introduces the team collaboration flow.
```plaintext wrap theme={null}
Add team invitation functionality:
- In the workspace settings page, add a "Members" section that lists current members with their role (owner, admin, member).
- Add an "Invite Member" button that opens a modal with an email field and a role selector (admin or member).
- When the owner sends an invite, create a pending record in workspace_members with the invited email and role.
- If the invited person already has an account, show the workspace in their dashboard immediately. If not, they will see it after they sign up with that email address.
- The workspace owner can remove members or change their role from the members list.
- Limit the Free plan to 3 members per workspace. Show an upgrade prompt when the owner tries to invite a 4th member.
```
The email notification for invitations will be connected in Step 8 when we add Resend. For now, the invitation logic works through the database.
Go to **Integrations** and connect Stripe using your **test mode** API keys. Then ask Rocket to build the subscription backend.
```plaintext wrap theme={null}
Connect Stripe and set up subscription billing:
- Create two Stripe products: "Taskflow Free" (free, no Stripe subscription needed) and "Taskflow Pro" at $19/month.
- Add a webhook handler that listens for checkout.session.completed, customer.subscription.updated, and customer.subscription.deleted events.
- When a user completes checkout, update their workspace's plan column in Supabase from 'free' to 'pro'.
- When a subscription is canceled or expires, revert the plan to 'free'.
- Store the Stripe customer ID and subscription ID in a new "subscriptions" table linked to the workspace.
- Add a billing page inside workspace settings that shows the current plan, next billing date, and a "Manage Subscription" button that opens the Stripe Customer Portal.
```
Use Stripe test mode keys during development. The test card number `4242 4242 4242 4242` with any future expiration and any CVC will simulate a successful payment.
Build a public-facing pricing page that drives conversions and handles the checkout redirect.
```plaintext wrap theme={null}
Build the pricing page:
- Show two plan cards side by side: Free and Pro ($19/month).
- Free plan features: up to 3 members, 1 workspace, 50 tasks, basic Kanban board.
- Pro plan features: unlimited members, unlimited workspaces, unlimited tasks, priority support, advanced analytics (coming soon).
- Highlight the Pro plan as "Most Popular" with a colored border.
- Add a monthly/yearly toggle. Yearly pricing is $15/month billed annually ($180/year), showing a "Save 21%" badge.
- The "Get Started" button on the Free plan links to the signup page.
- The "Upgrade to Pro" button initiates a Stripe Checkout session. If the user is logged in, prefill their email. If not, redirect to signup first.
- After successful checkout, redirect to the dashboard with a success toast notification.
```
Go to **Integrations** and connect Resend by pasting your API key. Then set up transactional emails for key user actions.
```plaintext wrap theme={null}
Connect Resend and add email notifications:
- Send a welcome email when a new user signs up. Include the app name, a greeting with their name, and a "Go to Dashboard" button linking to the app.
- Send an invitation email when a workspace owner invites a new member. Include the workspace name, the inviter's name, their assigned role, and a "Join Workspace" button.
- Send a payment receipt email after a successful Stripe subscription. Include the plan name, amount, billing period, and a link to the billing page.
- Send a subscription cancellation confirmation email when a user cancels their Pro plan.
- Use a clean, minimal email template with the Taskflow logo, a white background, and blue accent buttons.
```
Resend provides a free tier of 100 emails per day, which is plenty for development and early launch. You can upgrade later as your user base grows.
Go to **Integrations** and connect Netlify, then deploy your app to the web.
Use the **Launch** button in your Rocket project to deploy to the web. Rocket handles the Netlify build configuration automatically. Make sure all required environment variables are set in your project's integration settings before launching.
After deploying, update your Supabase redirect URLs to include your Netlify domain. Go to your Supabase dashboard, navigate to **Authentication > URL Configuration**, and add `https://your-app.netlify.app` to the allowed redirect URLs.
Before sharing your app with real users, swap out all test credentials for production keys.
* Replace your Stripe **test** API keys with **live** keys in the project environment variables
* Recreate your Stripe products and prices in live mode (they do not carry over from test mode)
* Update the Stripe webhook endpoint in the Stripe Dashboard to point to your production URL
* Customize Supabase email templates with your app's branding and enable email confirmations to prevent spam signups
* Test the full flow on the production URL: sign up, create a workspace, add a task, invite a member, and complete a real Stripe checkout with a small amount
Double-check that your Stripe live webhook secret matches the one in your Netlify environment variables. Mismatched secrets are the most common cause of payment processing failures after launch.
## Customization ideas
Once the base product is running, here are ways to extend it.
Track user behavior to understand how people use your app. Instrument events like workspace created, task moved, member invited, and plan upgraded.
Use Mixpanel funnels to measure your signup-to-paid conversion rate.
```plaintext wrap theme={null}
Connect Mixpanel and add event tracking for: user_signed_up, workspace_created, task_created, task_moved, member_invited, plan_upgraded, and plan_canceled. Add a Mixpanel identify call after login so events are linked to the user profile.
```
Let users generate task descriptions, summarize project progress, or get smart suggestions for task assignments using OpenAI.
```plaintext wrap theme={null}
Connect OpenAI and add an "AI Assistant" button on the task board. When clicked, open a panel where users can: generate a task description from a short title, summarize all tasks in a workspace as a progress report, and get suggestions for which team member to assign a task to based on their current workload.
```
Expose a REST API so power users can automate task creation, query workspace data, or integrate with external tools like Zapier.
```plaintext wrap theme={null}
Create a public REST API with these endpoints:
- GET /api/v1/workspaces - list user's workspaces
- GET /api/v1/workspaces/:id/tasks - list tasks in a workspace
- POST /api/v1/workspaces/:id/tasks - create a new task
- PATCH /api/v1/tasks/:id - update a task
- DELETE /api/v1/tasks/:id - delete a task
Authenticate using Bearer tokens generated from the user settings page. Return JSON responses with proper error codes and pagination.
```
Build an internal dashboard for yourself to monitor signups, revenue, and usage metrics without leaving the app.
```plaintext wrap theme={null}
Create an admin dashboard at /admin that is only accessible to users with an "admin" role in the profiles table. Show: total users (with a signup chart over the last 30 days), total workspaces, active subscriptions and MRR, and a table of recent signups with email, signup date, and plan status.
```
Make the app work well on phones and tablets, or generate a standalone mobile app from your Rocket project.
```plaintext wrap theme={null}
Optimize the entire app for mobile devices. Make the sidebar collapsible with a hamburger menu, ensure the Kanban board scrolls horizontally on small screens, and make all modals full-screen on mobile. Add touch-friendly drag-and-drop for task cards.
```
## Troubleshooting
This usually means the Stripe webhook is not reaching your app. Make sure Stripe is connected in your project's **Integrations** panel, then ask Rocket to investigate:
```plaintext wrap theme={null}
Stripe payments are going through but the workspace plan is not updating to "pro" in Supabase. Debug the Stripe webhook handler and make sure it correctly listens for checkout.session.completed events and updates the workspace plan column.
```
Also confirm you are using the correct mode (test vs. live) in both Stripe and your project's environment variables.
After deploying, Supabase may still be configured to redirect to your development URL. Ask Rocket to update the auth settings:
```plaintext wrap theme={null}
After deploying, login redirects to localhost instead of my production URL. Update the Supabase auth configuration so the site URL and allowed redirect URLs point to my production Netlify domain.
```
You can also update this directly in your Supabase dashboard under **Authentication > URL Configuration**.
First, verify that Resend is connected in your project's **Integrations** panel. If it is connected but emails still are not arriving, ask Rocket to debug:
```plaintext wrap theme={null}
Emails are not being sent through Resend. Check the email sending logic and make sure the Resend API is being called correctly for welcome emails, invitations, and receipts. Add error handling so I can see if the API call is failing.
```
During development, Resend only delivers to the email address on your Resend account unless you have verified a custom sending domain.
If the app loads but shows no data, Supabase row-level security policies may be blocking access. Ask Rocket to fix it:
```plaintext wrap theme={null}
The task board and workspace list are empty even though I have created data. Check the Supabase row-level security policies on the workspaces, workspace_members, and tasks tables. Make sure logged-in users can read data for workspaces they belong to.
```
# Website redesign
Source: https://docs.rocket.new/learn/recipes/website-redesign
Complete website redesign recipe using Rocket.new Redesign.
A step-by-step recipe for redesigning an existing website with Rocket. This covers the full process from defining goals through auditing, planning, executing page by page, reviewing, and deploying.
This recipe uses Build's Redesign feature. Redesign takes an existing URL and transforms it - preserving content while reimagining the visual design. See [Redesign](/build/create/commands/redesign) for full details.
## Before you start
Gather these before beginning:
* The URL of the site you're redesigning
* A clear idea of what needs to change (visual style, layout, conversion elements, mobile experience)
* Any brand assets you want to keep (colors, fonts, logos)
* A list of the most important pages (start with these)
## The recipe
Be specific about what you're trying to achieve. "Make it look better" is a start, but the more precise your goals, the better the redesign.
Common goals:
* Modernize the visual design (dated typography, layout, color palette)
* Improve conversion rates (better CTAs, clearer value proposition, reduced friction)
* Improve mobile experience (responsive layout, touch-friendly navigation)
* Align with a new brand identity (new colors, fonts, tone)
* Improve page load performance (reduce bloat, optimize assets)
Write down your top 3 goals. You'll reference these in your prompts.
Use a **Solve task** to objectively assess the current site before changing anything.
```plaintext wrap theme={null}
Audit my website at [your-site.com]. Assess: visual design quality (typography, color, layout, imagery), user experience (navigation, information hierarchy, CTAs), mobile responsiveness, page load performance, and SEO fundamentals. Compare against 3 best-in-class examples in my industry ([industry]). What are the top 10 issues to fix, ranked by impact?
```
This gives you a prioritized punch list for the redesign, grounded in competitive context rather than personal taste.
Based on your goals and audit, decide:
* **Which pages to redesign first** - typically homepage, then key landing pages, then interior pages
* **What to keep vs. what to change** - preserve content structure and SEO equity; transform visual design
* **Design direction** - pick a reference or describe the aesthetic (minimal, bold, editorial, corporate)
You don't need a full design spec. A few clear sentences about the direction are enough for Rocket to work with.
Work through pages in priority order. Start each page as its own prompt within a **Build task** (Redesign).
**Homepage:**
```plaintext wrap theme={null}
Redesign the homepage at [your-site.com]. Goals: modernize the visual design, improve mobile experience, and make the primary CTA more prominent. Design direction: clean, contemporary, with generous whitespace. Use [font] for headings and [font] for body text. Primary color: [hex]. Keep all existing content sections but reimagine the layout.
```
**Pricing page:**
```plaintext wrap theme={null}
Redesign the pricing page at [your-site.com/pricing]. Simplify the layout into 3 clear tiers in a card format. Add a feature comparison table. Make the recommended tier visually prominent. Add an FAQ section to address purchase objections. Match the homepage design direction.
```
**About page:**
```plaintext wrap theme={null}
Redesign the about page at [your-site.com/about]. Add more visual storytelling - team photos, timeline of company milestones, and culture highlights. Keep the current text content but present it with better typography and layout. Add a "Join the team" CTA that links to careers.
```
After each page, preview in staging and iterate until you're satisfied before moving to the next page.
Once all priority pages are redesigned, review the full site holistically:
Visual consistency - fonts, colors, spacing, and component styles match across all pagesNavigation - all links work, menu is consistent, breadcrumbs are correctMobile experience - every page works on phone and tabletContent accuracy - all text is correct, no placeholder content remainsForms and CTAs - all forms submit, all buttons link to the right destinationsSEO preserved - run `/Generate SEO Report` and compare against pre-redesign baselinePerformance - run `/Generate Performance Report` and verify acceptable load times
Share the staging URL with stakeholders for final approval.
Launch the redesign:
1. Run the [pre-launch checklist](/build/launch-web/launch-your-site#pre-launch-checklist)
2. Click **Launch** to go live
3. Run [SEO optimization](/build/polish/seo) on the redesigned pages
4. Set up [analytics](/build/measure/analytics) to compare pre/post performance
5. Monitor for the first week and iterate as needed
Your previous version is saved in [version history](/build/launch-web/launch-your-site#version-history). If anything goes wrong, you can roll back to the pre-redesign version with one click.
## Common pitfalls
Work page by page. Each page gets better attention, and you maintain momentum. A homepage redesign you ship today is worth more than a full-site redesign that takes weeks.
Keep the same URL structure. Preserve existing title tags and meta descriptions unless they genuinely need improvement. Run an SEO report before and after to catch regressions.
A beautiful site that doesn't convert is a failed redesign. Always keep your CTA hierarchy visible, test forms, and make the user's next action obvious.
Check every page on mobile after redesigning. Desktop-first designs often break on small screens. If in doubt, design mobile-first and let it scale up.
## What's next?
Build a dashboard or admin panel.
Full workflow with Intelligence benchmarking.
Full guide to Rocket's redesign capability.
Test your redesign before going live.
# Template catalog
Source: https://docs.rocket.new/learn/templates/overview
Browse and remix production-ready Rocket.new templates for SaaS, e-commerce, dashboards, and more.
Templates are pre-built starting points for Build tasks. Instead of describing every detail from scratch, pick a template that's close to what you need, remix it, and customize from there. Every template is production-ready - working UI, navigation, responsive layouts, and realistic sample data.
## How templates work
Templates aren't static mockups - they're fully functional apps that you can modify with conversation. When you start from a template, you get a working foundation that you can reshape into exactly what you need.
Explore templates by category. Each template includes a preview so you can see what you're starting with.
Click any template to see a live preview. Interact with it - click buttons, navigate pages, fill forms - to make sure it's a good starting point.
Click **Remix** to create a new Build task based on the template. The full app is copied into your workspace, ready to modify.
Tell Rocket what to change. Swap the color scheme, add features, remove sections, change the content, connect integrations. Iterate until it's yours.
You can also share your own builds as remixable templates. See [Share with remix](/build/create/share-with-remix) for details.
## Template categories
Full-stack SaaS applications with authentication, dashboards, billing, and settings pages. Includes user management, subscription flows, and admin panels.
Online stores with product catalogs, shopping carts, checkout flows, and order management. Ready for Stripe payment integration.
Conversion-optimized landing pages with hero sections, feature grids, testimonials, pricing tables, and email capture forms. Multiple visual styles available.
Cross-platform mobile app templates built with Flutter. Includes tab navigation, onboarding flows, profile screens, and common mobile patterns.
Data dashboards with charts, metrics cards, data tables, and filtering. Designed for analytics, admin panels, and reporting interfaces.
Personal and agency portfolio sites with project galleries, about sections, testimonials, and contact forms. Multiple aesthetic styles from minimal to bold.
Admin panels, CRM interfaces, inventory managers, and other internal tools. Focused on data management with tables, forms, and role-based access.
## Tips for working with templates
* **Start with the closest match.** A template that's 70% right is faster to customize than building from scratch.
* **Change one thing at a time.** After remixing, make incremental changes so you can see exactly what each prompt does.
* **Swap content first, then design.** Replace placeholder text and images with your real content before tweaking visual details.
* **Add integrations after the structure is right.** Get the UI and flow finalized, then connect Supabase, Stripe, or external APIs.
* **Combine templates.** You can describe features from multiple templates and ask Rocket to merge ideas - "Take the pricing page from the SaaS template and the hero section from the landing page template."
## What's next?
Walk through building and deploying an app end-to-end.
Full guide to browsing, previewing, and remixing templates.
Turn your own builds into remixable templates.
Get ready-to-use prompts for customizing templates.
# Tips and tricks
Source: https://docs.rocket.new/learn/tips
Power-user patterns, common mistakes, and cross-task tips for getting the most out of Rocket.new.
These tips come from watching thousands of users get the most (and least) out of Rocket. Whether you're working with Solve, Build, or Intelligence, these patterns will help you move faster and avoid common pitfalls.
## General tips
Applicable to every task type in Rocket.
Vague prompts produce vague results. The more context you give Rocket, the more targeted the output.
**Instead of:**
```plaintext wrap theme={null}
Analyze the market.
```
**Try:**
```plaintext wrap theme={null}
Analyze the U.S. meal-kit delivery market for a startup targeting single professionals in urban areas. Focus on market size, top 5 competitors, pricing models, and underserved segments.
```
This applies to Solve, Build, and Intelligence equally. Specificity is the single biggest lever you have.
Every task in Rocket maintains context. If the first result isn't quite right, follow up in the same task rather than creating a new one. Follow-ups are faster because Rocket already understands what you're working on.
```plaintext wrap theme={null}
That's good, but dig deeper into the pricing comparison. Include a table showing per-seat costs at 10, 25, and 50 users for each competitor.
```
You'll accumulate tasks quickly. Give each one a descriptive name so you can find it later - especially within projects where multiple Solve and Build tasks coexist.
Good: "Q1 competitor pricing analysis" or "MVP dashboard v2"
Bad: "Research" or "My app"
If you're working on something with more than two or three tasks, put them in a [project](/getting-started/project/overview). Projects give your tasks shared context, keep files organized, and make it easy to pick up where you left off.
## Solve tips
Get better research outputs with sharper question framing.
The best Solve prompts are tied to a real decision. Instead of asking Rocket to "research CRM software," tell it what decision the research will inform.
**Instead of:**
```plaintext wrap theme={null}
Research CRM software.
```
**Try:**
```plaintext wrap theme={null}
We're choosing a CRM for a 20-person sales team selling B2B SaaS. Compare HubSpot, Salesforce, and Pipedrive on pricing, onboarding time, and integration with Slack and Gmail. Recommend the best fit and explain why.
```
Tell Rocket who will read the report and how they'll use it. This shapes the depth, tone, and structure of the output.
```plaintext wrap theme={null}
This report is for our CEO - keep it to a 2-page executive summary with a recommendation at the top and supporting data below.
```
Or:
```plaintext wrap theme={null}
This is for our product team. Include detailed feature comparisons and link to source material where possible.
```
For large research questions, run multiple Solve tasks in sequence. Start broad, then go deep on the areas that matter most.
1. **First task:** "Map the competitive landscape for online tutoring platforms in the U.S."
2. **Second task:** "Deep-dive into Wyzant and Varsity Tutors - compare their tutor acquisition strategies, pricing models, and retention rates."
3. **Third task:** "Based on the gaps identified, what positioning would work for a new entrant targeting STEM subjects for high schoolers?"
Rocket can structure output in many ways. If you want a comparison table, a SWOT analysis, a ranked list, or a pros/cons breakdown, say so explicitly.
```plaintext wrap theme={null}
Present the comparison as a table with competitors as rows and evaluation criteria as columns. Include a 1-5 rating for each cell with a brief justification.
```
## Build tips
Get cleaner apps and faster iteration cycles.
Start by telling Rocket the pages/screens, navigation flow, and data model. Then add features one by one. Apps with clear structure from the start are easier to iterate on.
**Good first prompt:**
```plaintext wrap theme={null}
Build a recipe app with these screens: Home (featured recipes), Search (with filters for cuisine and difficulty), Recipe Detail (ingredients, steps, nutrition), My Recipes (saved favorites), and Profile. Use a bottom tab navigation.
```
Then follow up:
```plaintext wrap theme={null}
Add a shopping list feature. Users should be able to tap "Add to list" on any recipe's ingredient list, and see a combined shopping list on a new tab.
```
Resist the urge to ask for five things at once. Small, focused prompts produce better results and are easier to test.
**Instead of:**
```plaintext wrap theme={null}
Add authentication, a payment system, a dashboard, email notifications, and an admin panel.
```
**Try:**
```plaintext wrap theme={null}
Add email/password authentication with a login page, signup page, and password reset flow.
```
Ship that, test it, then move to the next feature.
For cosmetic changes - colors, spacing, text, element order - use [Visual Edit](/build/editor/visual-edit) instead of chat. It's faster and more precise for targeted tweaks.
Save chat prompts for structural or logic changes where you need Rocket to write new code.
If you already have a website and want to modernize it, don't start from scratch. Start a Build task with the URL, and Rocket will use the existing site as a foundation. You keep the content and get a fresh design.
```plaintext wrap theme={null}
Redesign this website: https://example.com. Make it modern and minimal with better mobile responsiveness. Keep all existing content but improve the visual hierarchy.
```
[Templates](/build/overview) give you a tested structure to build on. Even if the template isn't exactly what you need, starting from one is faster than starting from a blank prompt - and the code structure tends to be cleaner.
Get your app's screens, navigation, and basic logic working before connecting Supabase, Stripe, or other services. This avoids debugging integration issues alongside layout problems.
## Intelligence tips
Configure the Intelligence wizard well and get useful signals from Intelligence.
The "Your context" step in the Intelligence wizard is the most important part of setup. Intelligence uses your company description to decide what signals matter and how to frame them.
**Weak:** "We make project management software."
**Strong:** "We build project management software for design agencies. Our differentiator is client-facing portals. We're expanding from freelancers into agency teams. I care most about pricing changes, new collaboration features, and any competitors pushing into the agency segment."
The more specific your context, the more relevant your daily briefs.
Adding 20 competitors upfront floods your brief with noise. Start with three to five direct competitors you actively compete with. You can add more competitors from the Intelligence dashboard at any time.
Each focused monitor is more useful than a broad list.
When Intelligence surfaces a significant change, don't just read the signal - use it as input for a Solve task. This turns a raw alert into strategic insight.
```plaintext wrap theme={null}
My competitor just dropped their enterprise pricing by 20%. Analyze what this likely means for their strategy and how we should respond.
```
After a few weeks, review which signal types are most useful.
* **Too many low-relevance alerts?** Switch from daily to weekly for certain competitors.
* **Missing important signals?** Add channels or increase frequency.
Manage everything from the Intelligence dashboard.
## Cross-task patterns
The real power of Rocket is using Solve, Build, and Intelligence together.
Use Solve to validate an idea before building it. This pattern saves you from building something nobody needs.
1. **Solve:** "Analyze the market for AI-powered resume builders. Who are the top players, what do users complain about, and where are the gaps?"
2. **Review** the report and identify your angle.
3. **Build:** "Build an AI resume builder that focuses on \[gap identified in research]. Target \[audience]. Include \[specific features that address user complaints]."
The Build task benefits from the clarity that Solve provided.
Run the Intelligence setup wizard once to set up monitoring, then use Solve to analyze significant signals when they arrive.
1. **Intelligence wizard:** Set up monitoring for three competitors' pricing pages and product changes.
2. **Intelligence** surfaces a signal: Competitor A launched a free tier.
3. **Solve:** "Competitor A just launched a free tier. Analyze the likely impact on our mid-market segment and recommend whether we should respond with a pricing change or a feature differentiation strategy."
Use Intelligence signals to trigger Build tasks that keep your product competitive.
1. **Intelligence** surfaces: Competitor B added AI-powered search.
2. **Solve:** Analyze what this means for your roadmap.
3. **Build:** "Add an AI-powered search feature to my app. Connect to OpenAI and search across all content types. Make it faster and more intuitive than a basic keyword search."
For new products, the full loop is the most powerful pattern:
1. **Solve** the market question: What should we build and why?
2. **Build** the product using those insights.
3. **Intelligence** - run the wizard once so Intelligence monitors your competitors as you grow.
Each capability feeds the next, and you stay informed at every stage.
## Common mistakes
Patterns to avoid across all task types.
**The mistake:** "Analyze the SaaS market" or "Build me an app" with no further detail.
**The fix:** Include who it's for, what decision it informs (Solve), what screens and features it needs (Build), or what specific changes to watch for (Intelligence). Rocket performs best with focused, well-scoped prompts.
**The mistake:** One massive prompt that requests authentication, payments, dashboards, admin panels, email notifications, and AI features all at the same time.
**The fix:** Build incrementally. Get the core screens and navigation right first, then add features one at a time. Test each addition before moving on.
**The mistake:** Creating a new task every time you want a different angle on the same topic.
**The fix:** Use follow-up messages in the same task. Rocket maintains full context, so follow-ups are faster, cheaper, and more coherent.
**The mistake:** Selecting every channel and adding every competitor you can think of during wizard setup.
**The fix:** Start with your three to five most direct competitors and the two or three channels most relevant to your strategy. Add more over time as you learn which signals are actually useful. The Intelligence dashboard makes it easy to add competitors and adjust channels at any time.
**The mistake:** Using Solve for ongoing monitoring (Solve answers one question and stops), or expecting Intelligence to produce research reports.
**The fix:** Use **Solve** for point-in-time research (questions with answers). Use **Intelligence** for continuous monitoring (watching for changes over time). Intelligence is a one-time workspace setup - run the wizard once and Intelligence handles the rest from the dashboard. If you're not sure, ask yourself: "Do I need an answer now, or do I need to watch for changes?"
**The mistake:** Connecting Supabase or Stripe before the app's core UI and flow are working.
**The fix:** Get the screens, navigation, and basic logic right first. Then connect external services once you're happy with the structure. This avoids debugging integration issues and layout problems simultaneously.
## What's next?
Deep-dive into research strategies and prompt patterns for Solve.
Detailed guidance on app creation workflows and iteration strategies.
Get the most out of your monitors and the Intelligence dashboard.
Haven't tried Rocket yet? Get your first result in under five minutes.
# Add payments to your app
Source: https://docs.rocket.new/learn/tutorials/adding-payments
Step-by-step Rocket.new guide to adding Stripe payments.
Stripe is the fastest way to accept payments in your Rocket app. This tutorial walks you through connecting Stripe, creating a pricing page, setting up checkout, handling webhooks, and testing the full payment flow.
You'll need a [Stripe account](https://stripe.com) to follow this tutorial. Free to create - no charges until you process real payments.
## What you'll set up
By the end of this tutorial, your app will have:
* A pricing page with plan options
* A Stripe Checkout flow for processing payments
* Webhook handling for payment events (successful charges, subscription changes)
* Test mode verification before going live
## Connect Stripe
Log into your [Stripe Dashboard](https://dashboard.stripe.com/apikeys) and copy your **publishable key** and **secret key**. Make sure you're in **test mode** (toggle in the top-right of the Stripe dashboard).
You'll have two pairs of keys:
* **Test keys** - for development and testing (start with `pk_test_` and `sk_test_`)
* **Live keys** - for real payments (start with `pk_live_` and `sk_live_`)
Ask Rocket to set up Stripe integration with your keys:
```plaintext wrap theme={null}
Set up Stripe integration. My publishable key is pk_test_xxxxx and my secret key is sk_test_xxxxx. Store the secret key as a server-side environment variable.
```
Rocket will store your secret key securely as an environment variable and configure the Stripe SDK in your app.
Never paste your **live** secret key directly into a prompt. Use test keys during development. Add live keys through Rocket's environment variable settings when you're ready to go live.
In your Stripe Dashboard, go to **Products** and create the plans you want to offer. For example:
* **Free** - \$0/month
* **Pro** - \$29/month
* **Enterprise** - \$99/month
Copy the **price ID** for each plan (starts with `price_`). You'll reference these when building your pricing page.
## Build a pricing page
Ask Rocket to create a pricing page that displays your plans and links to Stripe Checkout.
```plaintext wrap theme={null}
Create a pricing page with three plans: Free ($0/month), Pro ($29/month), and Enterprise ($99/month). The Pro plan should be highlighted as "Most Popular." Each plan should list 4-5 features and have a "Get Started" button that initiates Stripe Checkout for the corresponding plan. Use price IDs: price_free_xxx, price_pro_xxx, price_enterprise_xxx.
```
Rocket will generate a responsive pricing page with plan cards, feature lists, and checkout buttons.
## Set up Stripe Checkout
Stripe Checkout is a hosted payment page that handles card input, validation, and compliance for you. Ask Rocket to wire up the checkout flow:
```plaintext wrap theme={null}
Create a server-side API route that creates a Stripe Checkout session. When a user clicks a pricing plan's "Get Started" button, redirect them to Stripe Checkout for that plan. After successful payment, redirect to a /success page. After cancellation, redirect back to the pricing page.
```
The checkout flow works like this:
1. User clicks a plan on your pricing page
2. Your app creates a Stripe Checkout session on the server
3. User is redirected to Stripe's hosted payment page
4. After payment, user returns to your success page
Stripe Checkout handles PCI compliance, card validation, 3D Secure, and local payment methods automatically. You don't need to build a custom payment form.
## Handle webhooks
Webhooks let Stripe notify your app when payment events happen - a charge succeeds, a subscription renews, or a payment fails.
Ask Rocket to add a webhook handler:
```plaintext wrap theme={null}
Create a webhook endpoint at /api/webhooks/stripe that handles these Stripe events: checkout.session.completed (activate the user's subscription), invoice.payment_succeeded (renew access), and customer.subscription.deleted (revoke access). Verify the webhook signature using the Stripe webhook secret.
```
In the Stripe Dashboard, go to **Developers → Webhooks** and add an endpoint pointing to your app's webhook URL. Stripe will give you a **webhook signing secret** (starts with `whsec_`).
Add this secret as an environment variable in your Rocket app.
Select the events you want Stripe to send to your webhook:
* `checkout.session.completed` - a customer completed payment
* `invoice.payment_succeeded` - a subscription renewed
* `invoice.payment_failed` - a payment attempt failed
* `customer.subscription.deleted` - a subscription was cancelled
## Test your payment flow
Before going live, test everything end-to-end in Stripe's test mode.
Stripe provides test card numbers for different scenarios:
| Card number | Scenario |
| --------------------- | --------------------------------- |
| `4242 4242 4242 4242` | Successful payment |
| `4000 0000 0000 3220` | Requires 3D Secure authentication |
| `4000 0000 0000 9995` | Payment declined |
Use any future expiration date, any 3-digit CVC, and any billing zip code.
Walk through the complete payment path:
1. Go to your pricing page
2. Click a plan's checkout button
3. Complete payment with a test card
4. Verify you land on the success page
5. Check the Stripe Dashboard to confirm the payment appears
Use the [Stripe CLI](https://stripe.com/docs/stripe-cli) to forward webhook events to your staging environment for testing:
```plaintext wrap theme={null}
stripe listen --forward-to localhost:3000/api/webhooks/stripe
```
Trigger a test event and verify your webhook handler processes it correctly.
When everything works in test mode:
1. Switch your Stripe Dashboard to **live mode**
2. Replace test API keys with live keys in Rocket's environment variables
3. Update your webhook endpoint to use the live webhook secret
4. Click **Launch** to deploy your app to production
Double-check that your live secret key is stored as a server-side environment variable, not exposed in client-side code. Run the [security checklist](/learn/tutorials/security-checklist) before accepting real payments.
## What's next?
Ensure API keys and payment flows are locked down.
Test payment flows in staging before going live.
Launch your app with payments to a live URL.
Write better prompts for app features and integrations.
# Security checklist
Source: https://docs.rocket.new/learn/tutorials/security-checklist
Rocket.new security best practices - API keys, auth, RLS, and privacy.
Rocket generates production-grade code, but security is a shared responsibility. This guide covers the essential security practices you should follow before launching any app - especially apps that handle user data, payments, or sensitive information.
Never ship an app with API keys exposed in client-side code or authentication disabled on protected routes. Review this checklist before every production deployment.
## API key management
API keys grant access to services like Supabase, Stripe, and third-party APIs. Exposing them in your frontend code means anyone can see and misuse them.
Store all API keys in environment variables, never in source codeUse server-side API routes to call external services - never make API calls with secret keys from the browserUse separate API keys for development/staging and productionRotate API keys immediately if you suspect they've been exposedReview your codebase for hardcoded keys before publishing (search for strings starting with `sk_`, `key_`, or `secret`)
**Ask Rocket to help:**
```plaintext wrap theme={null}
Move all API keys to environment variables and make sure they're only accessed from server-side API routes.
```
Rocket stores environment variables securely and injects them at build time. They are never exposed in the client-side bundle.
## Authentication
If your app has user accounts, protected pages, or personalized content, you need authentication.
Enable authentication for any page that shows user-specific dataProtect all API routes that create, update, or delete dataImplement sign-up, log-in, and password reset flowsUse secure session management (Rocket + Supabase handle this by default)Add email verification for new accounts when possibleRedirect unauthenticated users to the login page instead of showing empty states
**Ask Rocket to help:**
```plaintext wrap theme={null}
Add authentication to my app using Supabase Auth. Protect the dashboard and settings pages so only logged-in users can access them. Add sign up, log in, and password reset pages.
```
## Row-level security (RLS)
If you're using Supabase, row-level security ensures users can only access their own data at the database level - even if there's a bug in your application code.
Enable RLS on every Supabase table that stores user dataCreate policies that restrict reads and writes to the authenticated user's own rowsTest policies by trying to access another user's data (you should get an empty result)Never use the Supabase `service_role` key in client-side code - it bypasses RLS entirely
**Ask Rocket to help:**
```plaintext wrap theme={null}
Enable row-level security on all Supabase tables. Add policies so users can only read and write their own data. Make sure the service_role key is only used in server-side API routes.
```
RLS is the last line of defense. Even if your API has a bug that sends the wrong query, RLS will prevent data leaks at the database level.
## Environment variables
Environment variables keep sensitive configuration out of your source code.
All secrets (API keys, database URLs, webhook secrets) are stored as environment variablesEnvironment variables are set in Rocket's deployment settings, not committed to codeClient-side environment variables (prefixed with `NEXT_PUBLIC_`) contain only non-sensitive valuesServer-side environment variables are only accessible from API routes and server components
Any environment variable prefixed with `NEXT_PUBLIC_` is visible to anyone using your app. Only use this prefix for values that are safe to expose publicly, like your Supabase project URL (not your secret key).
For step-by-step instructions on adding and managing environment variables in the editor, see [Environment variables](/build/editor/env-variables).
## HTTPS and transport security
Your app is served over HTTPS (Rocket enforces this automatically on all deployments)External API calls use HTTPS endpoints, not HTTPWebSocket connections use WSS (secure WebSocket), not WS
Rocket automatically provisions SSL certificates for all deployed apps, including custom domains. You don't need to configure HTTPS manually.
## Privacy considerations
Only collect user data you actually needDisplay a privacy policy that explains what data you collect and how it's usedAdd cookie consent notices if you use analytics or tracking (required in the EU)Provide a way for users to delete their account and dataDon't log sensitive information (passwords, full credit card numbers, personal identifiers) in server logs
**Ask Rocket to help:**
```plaintext wrap theme={null}
Add a privacy policy page to my app. Include a cookie consent banner. Add an account deletion option in user settings.
```
## Security audit prompt
Before each deployment, ask Rocket to run a security check on your app:
```plaintext wrap theme={null}
Review my app for security issues. Check for exposed API keys, missing authentication on protected routes, Supabase RLS status, and any client-side code that handles sensitive data.
```
This won't catch everything, but it's a fast way to surface common mistakes.
## What's next?
Connect Stripe and handle payments securely.
Test in staging before going live.
Accessibility, legal, and regulatory considerations.
Build and deploy your first app from scratch.
# Your first task
Source: https://docs.rocket.new/learn/tutorials/your-first-task
End-to-end Rocket.new guide from idea to deployed app - vibe solutioning 101.
This tutorial walks you through the entire Rocket workflow - from initial research to a live, deployed app. By the end, you'll have built something real and understand how Solve, Build, and Launch work together.
**Time:** 15–20 minutes
No coding experience required. If you can describe what you want in plain language, you can build with Rocket.
## What you'll do
1. Come up with an app idea
2. Research the space with Solve
3. Build the app with Build
4. Customize and iterate
5. Launch
Let's go.
Every great app starts with a problem worth solving. For this tutorial, we'll build a **customer feedback board** - a simple app where users can submit feature requests and upvote ideas.
You can follow along with this example or swap in your own idea. The process is the same regardless.
A few other ideas to consider:
* A personal portfolio site
* A simple booking tool for a service business
* A landing page for a new product
* A habit tracker mobile app
Before building, use Solve to understand the landscape. Create a new **Solve task** and ask a strategic question about your idea.
**Try this prompt:**
```plaintext wrap theme={null}
What are the most popular customer feedback tools (like Canny, UserVoice, Nolt)? Compare their features, pricing, and what users complain about. What gaps could a simple, free alternative fill?
```
Rocket will research across public sources and return a structured report with competitive analysis, feature comparisons, and recommendations.
Read the report and note what resonates. This gives you a clear picture of what to build and how to differentiate - before you write a single line of code.
This step is optional but powerful. Solve helps you make informed decisions about what to build and why. Skip it if you already have a clear vision.
Now create a **Build task** and describe your app. Be specific about the features you want based on your research.
**Try this prompt:**
```plaintext wrap theme={null}
Build a customer feedback board app. Users can submit feature requests with a title and description. Other users can upvote requests. Show a sorted list with the most-voted ideas at the top. Include a simple admin view where I can mark requests as "planned," "in progress," or "done." Use a clean, modern design with a blue and white color scheme.
```
Rocket will generate your full app - UI, navigation, logic, and all. This typically takes one to three minutes. Watch the preview panel as screens come together.
Once generation completes, your app appears in the live preview. Interact with it like a real user:
* Submit a test feature request
* Upvote an existing idea
* Switch to the admin view and change a status
* Navigate between pages
* Resize the preview to check mobile responsiveness
Take note of anything you'd like to change - colors, layout, wording, missing features.
Refine your app through conversation. Ask Rocket to make changes in natural language.
**Example iteration prompts:**
```plaintext wrap theme={null}
Add a search bar at the top so users can filter feature requests by keyword.
```
```plaintext wrap theme={null}
Change the color scheme to dark mode with a purple accent color.
```
```plaintext wrap theme={null}
Add a "submitted by" field to each request that shows the user's name.
```
You can also use [Visual edit](/build/editor/visual-edit) to click directly on elements and modify them, or open [Code view](/build/editor/code) to edit the source code.
Keep iterating until you're happy with the result. There's no limit to how many changes you can make.
When your app is ready, click **Launch** in the top-right corner to deploy your app to the web.
Your app will be available at a Rocket URL within seconds. From there you can:
* [Connect a custom domain](/build/launch-web/custom-domain) for a professional URL
* [SEO](/build/polish/seo) for search engine visibility
* [Set up analytics](/build/measure/analytics) to track how users interact with your app
Congratulations - you've gone from idea to deployed app using Rocket.
## Tips for a great first experience
* **Be specific in your prompts.** "Build a feedback board with upvoting and admin controls" gets better results than "build me an app."
* **Use Solve first.** Even a quick research task helps you articulate what you want more clearly.
* **Iterate in small steps.** Make one change at a time so you can see exactly what each prompt does.
* **Preview often.** Check the live preview after every change to catch issues early.
* **Don't aim for perfection on the first try.** Get the structure right first, then polish.
## What's next?
Lock down API keys, authentication, and data access.
Connect Stripe and start accepting payments.
Browse ready-to-use prompts for your next project.
Start your next app from a production-ready template.
# Competitive response
Source: https://docs.rocket.new/learn/workflows/competitive-response
React fast with Rocket.new: Intelligence, Solve, and Build.
This workflow helps you respond to competitive moves quickly. Intelligence detects the change, Solve analyzes the impact, and Build ships your response - all within the same platform.
## When to use this workflow
* A competitor launches a new feature, changes pricing, or updates their positioning
* You receive an Intelligence signal that requires a strategic response
* You need to move fast - research, decide, and build in the same day
## The workflow
Run the **Intelligence setup** wizard once to set up monitoring for your key competitors. Once approved, Intelligence automatically surfaces changes to your dashboard.
**In the wizard, for each competitor you add:**
* Provide the company name and website URL
* Select the signal categories that matter most to you (e.g., Pricing and packaging, Product updates)
* Set frequency (daily for fast-moving markets, weekly otherwise)
**Example signal:** Intelligence alerts you that Competitor A just launched a free tier and updated their pricing page to undercut your Pro plan.
When a signal arrives that needs a response, create a **Solve task** to understand the implications.
```plaintext wrap theme={null}
[Competitor A] just launched a free tier and restructured their pricing. Their new tiers are: Free ($0, limited to 3 projects), Pro ($19/month, was $29), and Enterprise (custom pricing). Analyze the impact on our business: How does this change the competitive landscape? Should we respond with pricing changes? What features differentiate us at each tier? What's the risk of not responding?
```
Review the analysis. Solve will give you a strategic assessment with options - adjust pricing, differentiate on features, target a different segment, or a combination.
**Follow-up:**
```plaintext wrap theme={null}
If we keep our current pricing but add a limited free tier, what features should the free tier include to be competitive without cannibalizing our Pro plan?
```
Based on the analysis, create a **Build task** (or iterate on your existing app) to ship your competitive response.
**Example - new pricing page:**
```plaintext wrap theme={null}
Update my pricing page. Add a new Free tier ($0/month, 3 projects, 1 user, community support). Keep the Pro tier at $29/month but add these features to justify the price gap: unlimited projects, priority support, custom branding, and advanced analytics. Add a comparison table that clearly shows the value of upgrading. Highlight the Pro tier as "Most Popular."
```
**Example - new feature to differentiate:**
```plaintext wrap theme={null}
Add a collaborative workspace feature to my app. Multiple users should be able to work on the same project with real-time updates. Include: a shared project view, comment threads on tasks, an activity feed showing team actions, and role-based permissions (admin, editor, viewer). This differentiates us from [Competitor A] who only supports single-user projects.
```
Test your changes in [staging](/build/launch-web/launch-your-site), verify everything works, and click **Launch** to deploy. Speed matters - competitive responses lose value the longer they take.
If something goes wrong, use [one-click rollback](/build/launch-web/launch-your-site#roll-back-a-release) to revert instantly.
## Example: responding to a pricing change
| Phase | Capability | What happens | Time |
| ------- | ------------ | ------------------------------------------------------------ | ------------- |
| Detect | Intelligence | Signal: Competitor drops prices and adds free tier | Automatic |
| Analyze | Solve | Impact assessment with strategic options | 5 minutes |
| Decide | - | Choose to add a free tier and differentiate on collaboration | - |
| Build | Build | New pricing page + collaborative features | 30–60 minutes |
| Launch | Build | Test in staging, click Launch to deploy | 10 minutes |
Total time from detection to live response: under two hours.
## Tips for competitive responses
* **Set up monitoring before you need it.** You can't respond to what you don't see. Run the Intelligence setup wizard now and it will already be watching when something changes.
* **Don't panic-respond.** Use Solve to analyze before you build. A quick, informed response beats a faster knee-jerk one.
* **Focus on differentiation over matching.** Copying a competitor's move puts you in a race to the bottom. Use Solve to find where you can win differently.
* **Keep rollback as a safety net.** Launch fast but know you can roll back in one click if something isn't right.
## What's next?
Benchmark and redesign your entire website.
Set up continuous competitor monitoring.
Learn how to run strategic analysis.
Test and deploy with confidence.
# Market entry
Source: https://docs.rocket.new/learn/workflows/market-entry
Enter a new market with Rocket.new: Intelligence, Solve, Build, and Launch.
This workflow guides you through entering a new market - from monitoring the landscape to deep research, building a market-specific product, and launching it. It chains all four Rocket capabilities into a structured expansion strategy.
## When to use this workflow
* You're expanding into a new geographic market or customer segment
* You're exploring an adjacent market for your existing product
* You want to validate market fit before committing full resources
* You need to understand local competitors, regulations, and customer expectations
## The workflow
Before committing to a new market, run the **Intelligence setup** wizard to set up ongoing monitoring of the landscape. Intelligence is a one-time workspace setup - run it once and it monitors continuously from that point.
**In the wizard, add competitors in the target market:**
Add the top three to five companies in your target category. Provide each company's name and website URL. Select channels that cover the signals that matter most: website for product and pricing moves, news for funding and partnerships, social for messaging shifts.
**Also track regulatory and industry changes:**
Intelligence monitors news and web sources automatically. In the "Your context" step, mention that you're evaluating a market entry so Intelligence can surface relevant regulatory or industry developments.
Let the signals accumulate for a few weeks. This builds your understanding of market dynamics, key players, and timing.
Once you have enough signals to form a hypothesis, use **Solve tasks** for deep analysis.
**Market sizing and opportunity:**
```plaintext wrap theme={null}
What is the market opportunity for [your product category] in [target market]? Include: total addressable market, current penetration rate, growth projections, key customer segments, and the competitive landscape. What are the top barriers to entry? What local factors (cultural, regulatory, infrastructure) should a new entrant understand?
```
**Go-to-market strategy:**
```plaintext wrap theme={null}
Recommend a go-to-market strategy for launching [your product] in [target market]. Consider: pricing strategy (should we match local competitors or price differently?), distribution channels, partnership opportunities, localization requirements (language, payment methods, design preferences), and the first 90 days of launch activities. What did successful entrants in similar categories do?
```
**Follow-up:**
```plaintext wrap theme={null}
Based on this analysis, what should the MVP look like for [target market]? What features are essential vs. what can wait? Should the product differ from our existing version?
```
These reports give you a data-driven entry plan. Share them with your team in a project workspace for alignment.
Create a **Build task** that incorporates your market research findings.
**Build a localized version:**
```plaintext wrap theme={null}
Build a version of [your product] tailored for [target market]. Key adaptations based on my research: [list localization needs - e.g., support for local currency, local payment methods, right-to-left text, specific compliance features]. Include a landing page that speaks to [target audience's specific pain points and language]. Keep the core feature set from our existing product but adjust the onboarding flow to match local expectations.
```
**Build a market-specific landing page:**
```plaintext wrap theme={null}
Build a landing page targeting [audience] in [market]. Address their specific pain points: [list from Solve research]. Include testimonials or case studies from similar customers (use placeholders). Price in [local currency]. Support [local language] if applicable. The design should feel familiar to [market] audiences - reference [competitor examples from Solve] for visual conventions.
```
Iterate until the product feels native to the target market, not like a copy of your main product.
Deploy your market-specific product and start learning from real users.
1. Test in [staging](/build/launch-web/launch-your-site) with local team members or early adopters
2. Click **Launch** to go live
3. Connect a market-appropriate [custom domain](/build/launch-web/custom-domain) (e.g., yourproduct.co.uk, yourproduct.jp)
4. Run [SEO optimization](/build/polish/seo) targeting market-specific keywords
5. Set up [analytics](/build/measure/analytics) to track market-specific metrics
**Continue monitoring with Intelligence:**
Intelligence is already running from your initial wizard setup. Add channels for user feedback sources - forums, social media, review sites - by managing your competitor list in the Intelligence dashboard. This surfaces how users in the new market respond to your product versus local competitors.
Use ongoing signals and analytics to drive rapid iteration. The first version rarely gets everything right - iterate weekly based on what you learn.
## Example: expanding a SaaS product into the European market
| Phase | Capability | Action | Timeline |
| -------- | -------------------- | ----------------------------------------------------------- | --------- |
| Monitor | Intelligence | Watch top 5 EU competitors and GDPR developments | Weeks 1–3 |
| Research | Solve | Market sizing, localization needs, GTM strategy | Week 4 |
| Build | Build | Localized app with EUR pricing, GDPR compliance, EU hosting | Weeks 5–6 |
| Launch | Build | Deploy with .eu domain, EU-focused SEO | Week 7 |
| Iterate | Intelligence + Build | Monitor user feedback, iterate on product weekly | Ongoing |
## Tips for market entry
* **Monitor before you commit.** A few weeks of Intelligence signals tell you more than assumptions. You might discover the market is smaller than expected - or bigger.
* **Localization isn't just translation.** Payment methods, design conventions, trust signals, and regulatory requirements all vary by market. Use Solve to surface these differences.
* **Launch an MVP, not a port.** Don't try to replicate your entire product for a new market. Launch with the features that matter most to local users and expand from there.
* **Keep monitoring after launch.** Your competitors will respond. Intelligence keeps you informed so you can adapt quickly.
## What's next?
Simpler workflow for launching a new product.
React to competitor moves in your new market.
Set up continuous market monitoring.
Deep-dive market research and analysis.
# Research to launch
Source: https://docs.rocket.new/learn/workflows/research-to-launch
Complete Rocket.new workflow: Solve, Build, and Launch.
This workflow chains Rocket's core capabilities into a single end-to-end process: research your market with Solve, build the product with Build, and deploy via Launch. It's the most common path for launching something new - from a SaaS product to a landing page to a mobile app.
## When to use this workflow
* You're starting a new product and want to make informed decisions before building
* You need market validation, competitive context, or strategic direction before committing
* You want a structured process from idea to live product
## The workflow
Start with a **Solve task** to understand the landscape before you build anything.
**Example scenario:** You want to launch a project management tool for freelancers.
```plaintext wrap theme={null}
What is the market for project management tools targeted at freelancers and solo consultants? Who are the top 5 competitors? What do freelancers complain about most with existing tools? What features would a simple, freelancer-focused tool need to compete? What pricing model works best for this audience?
```
Review the report. It might reveal that freelancers care most about simplicity, invoicing integration, and affordability - insights that shape what you build.
**Follow-up prompt:**
```plaintext wrap theme={null}
Based on this analysis, what should a v1 MVP include? Prioritize features by impact and feasibility. What can wait for v2?
```
Solve gives you a prioritized feature list and strategic direction - before you write a single line of code.
Create a **Build task** and translate your Solve findings into a product. Reference what you learned to write a focused prompt.
```plaintext wrap theme={null}
Build a project management app for freelancers. Based on my research, the v1 should include: a simple task board with drag-and-drop columns (To Do, In Progress, Done), a client management section with contact info and project history, a time tracker that associates hours with projects and clients, a basic invoice generator that pulls from tracked hours, and a dashboard showing active projects, upcoming deadlines, and hours this week. Use a clean, minimal design - freelancers want simplicity, not enterprise complexity. Include authentication and a settings page.
```
Rocket generates the full app. Preview it, test the flows, and iterate:
```plaintext wrap theme={null}
Add a calendar view that shows project deadlines and scheduled tasks. Make it toggleable between the board view and calendar view.
```
```plaintext wrap theme={null}
The invoice generator should allow the user to add their logo and business details, and export invoices as PDF.
```
Keep refining until the app matches your vision.
When your app is ready, click **Launch** in the top-right corner to deploy.
1. **Test in staging** - walk through every user flow in the [staging environment](/build/launch-web/launch-your-site)
2. **Run the pre-launch checklist** - content, functionality, design, SEO, and security
3. **Click Launch** - your app goes live instantly with a shareable URL
4. **Connect a custom domain** - set up your own domain for a professional presence
5. **Optimize** - run [SEO](/build/polish/seo) and [performance](/build/measure/performance) reports, then ask Rocket to implement improvements
Your product is live. Track how users interact with it using [analytics](/build/measure/analytics) and iterate based on real feedback.
## Example: launching a SaaS product
| Phase | Capability | Action | Output |
| -------- | ---------- | --------------------------------------------- | ----------------------------------------- |
| Research | Solve | Market sizing and competitive analysis | Structured report with feature priorities |
| Build | Build | Create the app based on research findings | Working full-stack SaaS product |
| Iterate | Build | Refine UI, add features, connect integrations | Polished, production-ready app |
| Deploy | Launch | Test in staging, launch, connect domain | Live product accessible to users |
| Optimize | Build | SEO, performance, analytics | Optimized, discoverable product |
## Tips for this workflow
* **Let Solve inform your Build prompt.** The more specific your research, the better your Build output. Copy key findings directly into your Build prompt.
* **Don't over-research.** A single Solve task with a follow-up is usually enough. Move to Build quickly and let real app interaction reveal what's missing.
* **Use staging for stakeholder feedback.** Share the staging URL with co-founders, advisors, or early users before publishing to production.
* **Launch early, iterate often.** A live app with one core feature beats a perfect app that never ships.
## What's next?
React to competitor moves with Intelligence → Solve → Build.
Hands-on tutorial walking through the full workflow.
Learn how Solve research tasks work.
Explore everything Build can create.
# Team product development
Source: https://docs.rocket.new/learn/workflows/team-product-development
Collaborative Rocket.new workflow: Projects with Solve, Build, and Launch.
This workflow uses Projects to coordinate team-based product development. Multiple team members contribute research, builds, and feedback in a shared workspace - from initial Solve research through Build iterations to deployment.
## When to use this workflow
* You're working with a team (co-founders, designers, developers, stakeholders)
* The project involves multiple phases that different people own
* You need a shared workspace where research, builds, and decisions live together
* Stakeholder feedback and approval is part of your process
## The workflow
Create a new **Project** in Rocket to serve as the shared workspace. A project holds all related tasks - Solve reports, Build outputs, Intelligence monitors, and conversations - in one place.
Name the project descriptively (e.g., "Q3 Customer Portal" or "Website Redesign 2025"). Invite team members who need access.
Everyone in the project can see all tasks, results, and conversations. Use this as your single source of truth for the initiative.
One or more team members kick off **Solve tasks** to build the strategic foundation.
**Product lead runs competitive research:**
```plaintext wrap theme={null}
Compare the top 5 customer portal solutions for B2B SaaS companies. What features do they offer? How do they handle billing management, support tickets, and usage analytics? What are the key gaps in the market?
```
**Designer runs design research:**
```plaintext wrap theme={null}
What are the best-designed customer portals and dashboards in B2B SaaS? Show me 5-10 examples with analysis of what makes their UX effective. What design patterns are emerging for customer self-service interfaces?
```
All reports land in the shared project. Team members can read each other's findings and align on direction before building.
The team creates **Build tasks** within the project. Different team members can own different parts:
**Developer builds the core app:**
```plaintext wrap theme={null}
Build a customer portal with: a dashboard showing subscription status, usage metrics, and billing history. A support ticket system where customers can create, track, and respond to tickets. An account settings page with team management and billing preferences. Use Supabase for auth and database. Based on our research, prioritize simplicity and clarity over feature density.
```
**Designer iterates on the visual design:**
```plaintext wrap theme={null}
Refine the design of the customer portal. Apply a professional, enterprise-friendly aesthetic: use [brand colors], clean typography, generous spacing. Add subtle animations to the dashboard metrics (count-up on load). Make the ticket status badges more visually distinct. Ensure the mobile experience is fully usable, not just responsive.
```
Team members can review each other's work through the staging URL and leave feedback in the project conversation.
Share the staging URL with the broader team and stakeholders for feedback.
* Product manager reviews feature completeness
* Designer checks visual consistency
* Developer tests edge cases and integrations
* Stakeholders provide business feedback
Collect feedback and iterate. Each team member can make changes within the Build task by chatting with Rocket.
```plaintext wrap theme={null}
Based on feedback: add a "Quick Actions" section to the dashboard with shortcuts for common tasks (view invoice, create ticket, upgrade plan). Move the usage chart to be the first thing users see. Add a "Last login" timestamp to the account page.
```
When the team agrees the product is ready:
1. Run through the [pre-launch checklist](/build/launch-web/launch-your-site#pre-launch-checklist) as a team
2. Product lead clicks **Launch** to deploy
3. Set up [analytics](/build/measure/analytics) to track engagement
4. Run [SEO](/build/polish/seo) and [performance](/build/measure/performance) optimization
5. Share the live URL with the team and celebrate
Post-launch, use the same project for ongoing iteration. New Solve tasks can research expansion opportunities, and new Build iterations can add features based on user feedback.
## Example: building a client dashboard
A three-person team (founder, designer, marketer) builds a client-facing dashboard for their consulting business.
| Phase | Team member | Task type | Action |
| -------- | ----------- | --------------- | -------------------------------------------------- |
| Research | Founder | Solve | Competitive analysis of client dashboards |
| Research | Marketer | Solve | What do consulting clients value most in a portal? |
| Build | Founder | Build | Core dashboard with project tracking and invoicing |
| Design | Designer | Build (iterate) | Visual polish, brand alignment, micro-interactions |
| Content | Marketer | Build (iterate) | Onboarding copy, help text, email templates |
| Review | All | - | Stakeholder review via staging URL |
| Launch | Founder | Build | Click Launch, connect domain, set up analytics |
## Tips for team product development
* **Start every project with research.** Even a single Solve task gives the team a shared foundation. It's cheaper than building the wrong thing.
* **Let different people own different tasks.** The designer iterates on visuals while the developer builds integrations. Parallel work in the same project.
* **Use the staging URL for reviews.** It's the fastest way to get feedback from people who aren't in Rocket.
* **Keep conversations in the project.** Don't discuss decisions in Slack and build in Rocket. The project should be the source of truth.
* **Launch incrementally.** Launch a v1 fast, then iterate based on real user feedback.
## What's next?
Expand into a new market with Intelligence → Solve → Build → Launch.
Streamlined solo workflow from research to deployment.
Learn how projects organize tasks and collaboration.
Manage environments and version history.
# Website overhaul
Source: https://docs.rocket.new/learn/workflows/website-overhaul
Full website refresh with Rocket.new: Intelligence, Build (Redesign), and Launch.
This workflow transforms an existing website from outdated to modern using Intelligence for benchmarking, Redesign for transformation, and Launch for deployment. It's ideal when your current site is functional but visually dated or underperforming.
## When to use this workflow
* Your website looks outdated compared to competitors
* Conversion rates have plateaued and you suspect design is the bottleneck
* You've rebranded and need the website to reflect the new identity
* A client has asked for a website refresh
## The workflow
Before redesigning, understand where you stand. Use a **Solve task** to benchmark your current site against competitors and best practices.
```plaintext wrap theme={null}
Analyze my website at [your-site.com] compared to [Competitor A], [Competitor B], and [Competitor C]. Compare: visual design quality, page load performance, mobile experience, SEO presence, and conversion elements (CTAs, social proof, trust signals). What are my site's biggest weaknesses? What do competitors do better? What are the top 5 changes that would have the most impact?
```
Then run the **Intelligence setup** wizard to start continuous monitoring of competitor design and content changes going forward. Intelligence will surface relevant updates to your dashboard automatically as part of your ongoing workspace monitoring.
This gives you a clear picture of what needs to change and keeps you informed about industry design trends.
Use **Redesign** to transform your site. Start with the highest-impact pages identified in your benchmark.
**Homepage redesign:**
```plaintext wrap theme={null}
Redesign my homepage at [your-site.com]. Based on my competitive analysis, I need: a more impactful hero section with a clearer value proposition, modern typography (switch from [current font] to a clean sans-serif), more whitespace and visual breathing room, stronger social proof placement (move testimonials above the fold), a more prominent primary CTA, and improved mobile layout. Keep the existing content structure but transform the visual design to feel contemporary and premium.
```
**Additional pages:**
```plaintext wrap theme={null}
Redesign the pricing page at [your-site.com/pricing]. Simplify the layout - the current page has too many options and feels cluttered. Use a clean 3-column card layout with the middle plan highlighted. Add a feature comparison table below the cards. Include a FAQ section addressing common purchase objections.
```
Iterate on each page until the design meets your standards. Use [visual edit](/build/editor/visual-edit) for fine-tuning specific elements.
Before deploying, review the full redesign holistically:
* Navigate through every page to check consistency
* Test on mobile devices (or mobile preview)
* Verify all links, forms, and interactive elements work
* Use the [SEO tools](/build/polish/seo) to ensure SEO isn't regressed
* Check [performance](/build/measure/performance) to verify load times
* Share the staging URL with stakeholders for feedback
Once approved, launch the redesign:
1. Run through the [pre-launch checklist](/build/launch-web/launch-your-site#pre-launch-checklist)
2. Click **Launch** to go live
3. Run [SEO](/build/polish/seo) to optimize the new pages
4. Set up [analytics](/build/measure/analytics) to track how the redesign affects engagement and conversions
5. Monitor performance in the first week and iterate if needed
If anything looks wrong post-launch, use [rollback](/build/launch-web/launch-your-site#roll-back-a-release) to revert to the previous version instantly.
## Example: agency website refresh
A design agency's website was built three years ago and looks dated compared to competitors. Here's how the workflow plays out:
| Phase | Capability | Action | Output |
| --------- | ----------------- | ------------------------------------------------------------- | --------------------------------------------------------------- |
| Benchmark | Solve | Analyze current site vs. 3 top agency competitors | Report identifying weak hero, dated typography, poor mobile nav |
| Monitor | Intelligence | Set up weekly monitoring of competitor design changes | Ongoing signals |
| Redesign | Build (Redesign) | Redesign homepage, portfolio, about, and contact pages | 4 redesigned pages with modern aesthetic |
| Polish | Build (iterate) | Fine-tune typography, add animations, optimize mobile | Polished, consistent design system |
| Deploy | Launch | Click Launch, connect domain, run SEO and performance reports | Live redesigned website |
| Measure | Build (analytics) | Track bounce rate, time on page, and conversion rate | Data to validate the redesign impact |
## Tips for website overhauls
* **Start with the homepage.** It sets the visual tone for every other page. Get it right first, then apply the same design language to interior pages.
* **Preserve SEO equity.** Keep the same URL structure where possible. Ask Rocket to maintain or improve existing meta tags.
* **Redesign page by page.** Don't try to redesign everything in one prompt. Work through pages individually for better quality.
* **Use the staging URL for approvals.** Share the staging environment with clients or stakeholders before going live.
* **Measure before and after.** Set up analytics before the redesign launches so you can compare performance metrics.
## What's next?
Collaborative workflow using Projects.
Full guide to Rocket's redesign capability.
Step-by-step recipe for website redesigns.
Optimize your redesigned site for search engines.
# Best practices
Source: https://docs.rocket.new/solve/best-practices
Frame sharper questions with Rocket.new Solve to get actionable, structured research reports.
Solve produces reports that match the quality of your question. Specific, well-scoped prompts return focused analysis you can act on. Vague prompts return broad, generic summaries.
This page covers question framing, follow-up patterns, and iteration strategies that get the most out of every Solve task.
## Writing good questions
Think of Solve as a research analyst. Give it context, name constraints, and define your expected output. Before research begins, Rocket may use [prompt intelligence](/getting-started/task/prompt-intelligence) to resolve ambiguity. You can also reference previous work through @-mentions or attach files and URLs for additional context.
### Weak prompts vs. strong prompts
| Prompt | Why it falls short |
| :------------------------------ | :---------------------------------------------------------------------- |
| "Tell me about the SaaS market" | No segment, geography, or specific question |
| "Who are our competitors?" | Solve has no context about who "we" refers to or what market you are in |
| "What should we build?" | No context about your product, users, or constraints |
| "Is this a good business idea?" | No specifics about the idea, market, or success criteria |
| "Help with pricing" | No product details, target market, or competitor benchmarks |
| Prompt | Why it works |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------- |
| "What is the TAM for AI-powered code review tools targeting mid-market engineering teams in North America? Include growth projections through 2027." | Specific market, segment, geography, and time frame |
| "Compare Linear, Jira, and Shortcut on features, pricing, target audience, and developer experience. Focus on teams of 10 to 50 engineers." | Named competitors, defined dimensions, target persona |
| "We have a B2B SaaS product at \$5M ARR with 80% YoY growth. What revenue multiples should we expect at Series B? Pull comparable recent rounds." | Specific metrics, clear ask, defined comparable set |
| "Should we price at $12, $18, or \$25 per user per month for an AI writing tool targeting content marketing teams? Use Jasper and Copy.ai as benchmarks." | Specific price points, named competitors, defined audience |
| "Prioritize these 5 features for a CRM targeting real estate agents using a RICE framework: automated follow-ups, MLS integration, AI lead scoring, mobile app, team dashboards." | Listed features, named framework, specific vertical |
### Five ways to sharpen your prompt
Tell Solve who you are and what stage you are at. "We are a seed-stage startup with 3 engineers targeting SMBs" produces very different recommendations than the same question without that context.
Useful things to include:
* Your company stage (pre-launch, seed, Series A, and so on)
* Your target customer (segment, size, industry)
* Relevant constraints (budget, timeline, team size)
* What you have already tried or decided
Instead of "analyze the competition," name the 3 to 5 competitors you care about. Instead of "research the market," name the specific category. Specificity turns a broad survey into a focused analysis.
**Instead of:** "What are the trends in AI?"
**Try:** "What are the top 3 trends in AI-powered B2B sales tools for 2025? Focus on products like Gong, Outreach, and Salesloft."
A market size estimate for a pitch deck needs different precision than one for internal planning. Tell Solve what the output is for and it will calibrate accordingly.
**Instead of:** "What is the market size for project management tools?"
**Try:** "I need a TAM, SAM, and SOM estimate for project management tools targeting remote-first companies, formatted for a Series A pitch deck."
If you want a SWOT analysis, say so. If you want a comparison table, ask for one. Explicit format requests prevent Solve from guessing your intent.
Useful format requests:
* "Create a feature comparison table"
* "Use a RICE scoring framework"
* "Structure this as a two-page investor memo"
* "Give me a pros and cons list for each option"
* "Present the bull case and bear case separately"
Without boundaries, Solve may go too broad or too narrow. State what to include and what to skip.
**Instead of:** "Analyze Stripe"
**Try:** "Analyze Stripe's pricing model and payment processing fees. Do not cover their banking or identity products."
## Follow-up patterns
Use follow-up messages to extract more value from the initial report. Three patterns work well: drill-down, challenge, and pivot.
| Pattern | When to use | Example sequence |
| :------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Drill-down** | You want more detail on one section of the report | **1.** "Map the competitive landscape for no-code database tools." **2.** "Tell me more about Airtable's enterprise strategy. What features do they gate behind enterprise pricing, and how does that compare to Notion?" **3.** "If I were building a no-code database for agencies, what 3 features would differentiate me from Airtable?" |
| **Challenge** | You want to stress-test the conclusions | **1.** "Build an investment thesis for vertical SaaS in healthcare." **2.** "What is the strongest bear case against this thesis? What would make this investment fail?" **3.** "Given those risks, how would you modify the thesis to account for regulatory headwinds?" |
| **Pivot** | An unexpected finding redirects your research | **1.** "What is the market size for AI tutoring tools for K-12 students?" **2.** The report reveals the fastest-growing segment is corporate training. **3.** "Pivot to the corporate training market. What does the AI-powered training market look like for companies with 500 or more employees?" |
Each pattern follows the same rhythm: start broad, react to findings, then narrow or redirect. You can [refine any report](/solve/results/refine) directly from the results page.
## Iteration strategies
Begin with a landscape question such as "What does the market look like?" then narrow to specifics. This gives you context before committing to a direction.
Ask factual questions first ("What pricing models do competitors use?") then ask decision questions ("Which model fits my constraints?"). Separating research from decisions produces better answers for both.
Run separate Solve tasks on different aspects of a problem: one for [market analysis](/solve/research/market-analysis), one for competitive research, one for pricing. Then ask a final task to synthesize: "Combine these findings into a go-to-market strategy." Tasks in the same project can reference each other with @-mentions.
Get the initial analysis yourself and form your own perspective before [sharing the report](/solve/results/share-and-export) with your team. This prevents the group from anchoring on whatever Solve said first.
## Combining Solve with other capabilities
Solve works well alongside Build and Intelligence.
| Combination | How it works |
| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Solve then Build** | Research a market or feature set with Solve, then use those findings to scope a [Build task](/build/overview). For example: "Build a pricing page based on the competitive analysis from my Solve task." |
| **Solve then Intelligence** | Use Solve to identify key competitors, then set up an [Intelligence task](/intelligence/quick-start) to monitor them continuously. |
| **Intelligence then Solve** | When Intelligence surfaces a significant change, such as a competitor launching a new feature, create a Solve task to analyze the implications. |
| **Solve then Solve** | Chain multiple tasks in a project: market analysis first, then competitive teardown, then pricing strategy. Each task can build on previous findings. |
All tasks within a project share the same context. You can @-mention a previous task to bring its findings into any new Solve task without re-entering data.
## Common mistakes
| Mistake | What to do instead |
| :------------------------------------------------ | :-------------------------------------------------------------------------------------- |
| Asking multiple unrelated questions in one prompt | Split into separate Solve tasks, each focused on one topic |
| Not providing enough context | Include your stage, audience, constraints, and what you already know |
| Taking the first result as final | Use follow-ups to challenge, refine, and deepen the analysis |
| Ignoring the methodology section | Read how Solve arrived at its conclusions so you can evaluate confidence |
| Using Solve when Intelligence is better | If you need ongoing monitoring, set up an Intelligence task instead of re-running Solve |
## What's next
Put these practices into action with a guided walkthrough.
Browse example prompts across nine research categories.
# Overview
Source: https://docs.rocket.new/solve/overview
Solve turns complex business questions into structured, evidence-backed reports. Market data, competitive analysis, and recommendations in one place.
Solve is Rocket's research engine. Before you build anything, Solve helps you validate ideas, size markets, run competitive analysis, and answer complex business questions.
Type a question in plain language and get back a structured, evidence-backed report built from live data. Start with the [quick start guide](/solve/quick-start) to run your first analysis.
## How Solve is different
Solve produces complete research deliverables, not links or summaries.
| | Search | Chatbot | **Solve** |
| :------------------ | :-------------------- | :--------------------------- | :----------------------------------------------------- |
| **What you get** | Links | A summary from training data | A structured, multi-source report |
| **Research effort** | You do the work | None, but shallow | Done for you, in depth |
| **Live data** | Yes, but unstructured | No | Yes, synthesized |
| **Output format** | Ten blue links | Paragraph answer | Executive summary, analysis, evidence, recommendations |
| **Follow-up** | New search | Some memory | Builds on full conversation and project context |
Tools like ChatGPT and Perplexity give you conversational answers. Solve gives you a structured, multi-source report with an executive summary, supporting evidence, and actionable recommendations.
Solve works best with specific, well-scoped questions. Vague prompts like "tell me about AI" produce broad results. See [question-framing tips](/solve/best-practices) for guidance.
## Solve compared to Intelligence
Rocket has two research capabilities that serve different purposes.
| | **Solve** | **Intelligence** |
| :--------------- | :------------------------------------------------------- | :---------------------------------------------------- |
| **When to use** | You have a specific question right now | You want ongoing awareness of changes |
| **How it works** | One-time research task that produces a structured report | Continuous monitoring that delivers signals over time |
| **Output** | A report with data, analysis, and recommendations | A dashboard of alerts, changes, and trends |
| **Example** | "What is Stripe's current pricing model?" | "Alert me when Stripe changes their pricing page" |
Solve answers a question once. [Intelligence](/intelligence/overview) watches for changes over time. The two work well together: a Solve report can scope what you monitor, and Intelligence signals can trigger new Solve questions.
## How Solve works
Every Solve task follows the same pipeline from question to finished report.
Type any business question in plain language from the Solve input. Pick a suggestion category (Strategy, Product, GTM, Sales, Competition, What to build) or write your own. Solve classifies it into one of nine intelligence types automatically.
For ambiguous prompts, Solve uses [prompt intelligence](/getting-started/task/prompt-intelligence) before starting. This sharpens scope and avoids wasted effort.
Solve defines the central research goal based on your question and any clarifying answers. This anchors every subsequent research stream.
Solve breaks the question into its component dimensions. Each dimension becomes an independent research query. You can watch these decomposed queries appear in chat as research begins.
Each query runs as a separate stream, powered by its own agent. Streams run simultaneously rather than in sequence. For each stream, the chat shows what the agent researched, which tools it used, what it found, and how it assessed the findings.
Findings from all streams merge into a structured [report](/solve/results/reports) with an executive summary, detailed analysis, supporting evidence, and recommendations. A **Final report** link appears in chat. Click it to open the report in the right panel.
You can enrich research before and during a task. Use @-mentions to pull findings from other tasks, or attach files and URLs as source material. After the report is delivered, Solve suggests follow-up questions so you can drill into specific findings without re-framing from scratch.
## What Solve covers
Solve handles any strategic business question, from tightly scoped lookups to multi-dimensional analyses.
Size markets, identify trends, and assess opportunities.
Compare features, analyze positioning, and run SWOT frameworks.
Benchmark pricing, model scenarios, and analyze willingness to pay.
Prioritize features, analyze user needs, and inform roadmaps.
Build business cases, run due diligence, and evaluate opportunities.
GTM strategy, brand positioning, technical deep-dives, career strategy, and more.
## Frequently asked questions
Solve returns structured reports with an executive summary, detailed analysis sections, supporting data, and recommendations. Reports use clear headings so you can scan for what matters. See [Reports](/solve/results/reports) for formatting details.
Yes. Share any report by sharing the task within your workspace. Team members with project access can view the full report and follow-up conversations. You can also export reports for use outside Rocket. See [Share and export](/solve/results/share-and-export) for details.
Solve tasks consume credits based on question complexity and research depth. Your available credits depend on your subscription plan. See [Pricing](/getting-started/pricing) and [Credits](/getting-started/credits) for plan details.
## What's next
Run your first analysis with a guided walkthrough.
Browse nine categories of questions Solve handles, with example prompts.
Set up continuous monitoring for competitors and markets.
# Quick start
Source: https://docs.rocket.new/solve/quick-start
Submit a business question and get a structured, evidence-backed research report in minutes.
Solve turns a plain-language business question into a structured research report. This walkthrough covers selecting Solve, submitting a question, watching the research pipeline, and reviewing the output.
You need a Rocket account to follow along. If you have not signed up yet, [create an account](/getting-started/create-an-account) first.
## Walkthrough
After logging in, the home screen presents three options: **Solve**, **Build**, and **Intelligence**. Select the **Solve** card to open the research interface.
A centered input box appears. Type a specific business question, or pick a suggestion category below the input to see pre-framed examples.
| Category | What it covers |
| :---------------- | :------------------------------------------------------------ |
| **Strategy** | Business strategy, market entry, growth planning |
| **Product** | Feature prioritization, roadmap decisions, product-market fit |
| **GTM** | Go-to-market strategy, sales motions, channel selection |
| **Sales** | Revenue optimization, deal cycles, conversion improvement |
| **Competition** | Competitive landscape, positioning, feature comparisons |
| **What to build** | Idea validation, technical feasibility, MVP scoping |
For this walkthrough, try:
```plaintext wrap theme={null}
What is the market size for AI-powered documentation tools? Include TAM, SAM, and SOM estimates with growth projections through 2027.
```
Press **Enter** or click **Send** to submit. For guidance on writing effective prompts, see [question framing best practices](/solve/best-practices).
Solve may use prompt intelligence before it begins research. These help narrow the scope and produce a more targeted report. Answer the questions and click **Submit** to continue.
Learn when Solve asks questions and how to write prompts that skip them.
Solve defines a research objective, breaks it into individual queries, then runs each as a parallel agent stream. You can watch progress in the chat as each stream completes.
For each stream the chat shows:
| Element | What it means |
| :-------------------------- | :------------------------------------------------------------ |
| **Positives and negatives** | Key findings that support or challenge the research direction |
| **Data** | Specific numbers, tables, and data points collected |
| **Tools used** | Sources and research tools the agents referenced |
| **Research performed** | What searches and analyses ran for this stream |
| **Assessment** | How the agent interpreted and weighted the findings |
Most reports finish in one to three minutes. Click **Notify me** in the banner to receive a browser notification when the report is ready.
Step away and get notified when your report is ready.
A **Final report** link appears in the chat once all streams complete. Click it to open the report in the right panel while the chat stays on the left.
Each refinement creates a new version, accessible from the version dropdown.
See the full breakdown of report sections and how to export them.
Solve tasks are conversational. After reviewing your report, ask a follow-up to drill deeper, challenge an assumption, request a different framework, or redirect the analysis entirely.
Edit, extend, and improve your report through conversation.
## Example output
Solve reports draw on publicly available data and AI analysis. Always validate critical business decisions with primary research and domain expertise.
The global market for AI-powered documentation tools is estimated at **\$4.2B** (TAM) in 2025. The serviceable addressable market is **\$1.8B**, focused on enterprise and mid-market segments. A new entrant can target roughly **\$120 to \$180M** (SOM) in the first three years. The market is growing at a **24% CAGR**, driven by enterprise AI adoption and automated knowledge management.
| Metric | Estimate | Methodology |
| :------ | :-------------- | :------------------------------------------------------------------------------------- |
| **TAM** | \$4.2B | Total global spend on documentation, knowledge management, and technical writing tools |
| **SAM** | \$1.8B | Enterprise and mid-market companies evaluating AI-augmented documentation |
| **SOM** | \$120 to \$180M | Achievable share for a differentiated new entrant in years 1 to 3 |
| Company | Focus | Est. Revenue | Funding |
| :--------------------- | :--------------------------- | :-------------------------------- | :------------ |
| Notion | All-in-one workspace with AI | \$250M+ ARR | \$343M raised |
| Confluence (Atlassian) | Enterprise wiki and docs | Part of \$3.5B+ Atlassian revenue | Public |
| GitBook | Developer documentation | \$15 to \$25M ARR | \$41M raised |
| Mintlify | Developer docs with AI | \$5 to \$10M ARR | \$22M raised |
| Document360 | Knowledge base platform | \$10 to \$20M ARR | \$12M raised |
Target mid-market (100 to 1,000 employees) where AI adoption is accelerating but incumbents are weakest.Differentiate on generation quality. Most current tools bolt AI onto existing workflows instead of designing AI-first experiences.Consider product-led growth. The documentation space rewards self-serve adoption with team expansion.Monitor Notion and Confluence roadmaps, as both are investing heavily in AI for 2025 to 2026.
## What's next
Learn how reports are organized and how to export them as HTML or PPT.
Improve report quality with proven question-framing techniques.
Compare competitors side by side with structured research.
# Competitive teardowns
Source: https://docs.rocket.new/solve/research/competitive-teardowns
Use Rocket.new Solve to compare features, run SWOT analysis, and map competitor positioning with structured research reports.
Solve produces structured competitive breakdowns covering features, positioning, strengths, and weaknesses. Instead of spending days auditing competitor websites manually, create a Solve task and get the analysis in minutes.
Pair your teardown with a [market analysis](/solve/research/market-analysis) to see both "how big" and "who's here" in one picture.
## What Solve covers in a teardown
| Analysis type | What you get | Best for |
| :----------------------- | :-------------------------------------------------------------------------- | :---------------------------------------------- |
| **Feature comparison** | Side by side feature matrices across competitors | Product planning, differentiation strategy |
| **Positioning analysis** | How each competitor positions themselves (messaging, audience, value props) | Marketing strategy, brand positioning |
| **SWOT analysis** | Strengths, weaknesses, opportunities, and threats for each competitor | Strategic planning, board presentations |
| **Pricing comparison** | Plan tiers, feature gating, and pricing model breakdown | Pricing decisions, packaging strategy |
| **User sentiment** | Common praise and complaints from review sites and forums | Product differentiation, feature prioritization |
## Example prompts
```plaintext wrap theme={null}
Compare Figma, Sketch, and Adobe XD on their core features: prototyping, collaboration, design systems, developer handoff, and plugin ecosystem. Create a feature matrix and identify where each tool is strongest and weakest.
```
```plaintext wrap theme={null}
Run a SWOT analysis on Shopify as an e-commerce platform for small businesses. Consider their recent AI features, international expansion, and competition from Amazon and newer players like Fourthwall.
```
```plaintext wrap theme={null}
How do Linear, Jira, and Shortcut position themselves differently? Analyze their homepage messaging, target personas, and key differentiators. Which positioning leaves the most room for a new entrant?
```
```plaintext wrap theme={null}
What are the top 5 complaints about HubSpot CRM from G2, Capterra, and Reddit? Group them by theme and estimate how many users each issue affects. What does this reveal about opportunities for a competing product?
```
```plaintext wrap theme={null}
Do a full competitive teardown of the email marketing space. Compare Mailchimp, ConvertKit, Beehiiv, and Resend on: features, pricing, target audience, strengths, and weaknesses. End with a gap analysis showing underserved needs.
```
## What results include
A competitive teardown report contains five sections. The gap analysis at the end connects findings to your strategic options.
| Report section | What it covers |
| :----------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------- |
| **Executive summary** | The competitive landscape at a glance: who is leading, where the gaps are, and the biggest takeaway for your strategy. |
| **Competitor profiles** | Brief overview of each competitor: what they do, who they target, approximate scale (revenue, users, funding), and core value proposition. |
| **Feature matrix** | Side by side comparison table showing which competitors offer which features. Solve marks gaps and relative strengths for easy scanning. |
| **SWOT or positioning framework** | Depending on your prompt, a structured SWOT analysis for each competitor or a positioning map showing differentiation. |
| **Gap analysis and recommendations** | Where the white space is: features nobody offers, audiences nobody serves, or positioning nobody owns. |
### Example feature matrix
Here is a condensed example of what a feature comparison looks like in your report:
| Feature | **Figma** | **Sketch** | **Adobe XD** |
| :---------------------- | :------------------------ | :----------------------------- | :----------------------- |
| Real-time collaboration | Full multi-user | Limited (via Sketch for Teams) | Basic co-editing |
| Browser-based | Yes | No (Mac only) | No (desktop app) |
| Prototyping | Built-in, interactive | Built-in, basic | Built-in, advanced |
| Design systems | Robust (shared libraries) | Symbols and shared styles | Limited |
| Developer handoff | Inspect mode + Dev Mode | Sketch Cloud inspect | Design specs |
| Plugin ecosystem | 2,000+ plugins | 700+ plugins | 300+ plugins |
| Pricing (per editor/mo) | \$15 | \$12 | Included in CC (\$55/mo) |
### Example SWOT output
* Market-leading real-time collaboration with no install required
* Strong network effects (designers bring their entire team onto the platform)
* Extensive plugin ecosystem created by the community
* Free tier that is genuinely usable for small teams
* Performance degrades with very large files (1,000+ frames)
* Limited offline capability (requires internet connection)
* Advanced prototyping still less powerful than dedicated tools
* Enterprise pricing is steep compared to alternatives
* AI-powered design generation is still nascent (first-mover advantage possible)
* Developer workflow integration (design to code) is a growing demand area
* Expansion into non-design use cases (whiteboards, docs) via FigJam
* Adobe's deep pockets and existing Creative Cloud user base
* Open-source alternatives like Penpot gaining traction
* Potential commoditization as AI makes design tools more accessible
## Tips for better teardowns
Do not ask Solve to "find my competitors." Name 3 to 5 specific competitors and ask for the comparison. You know your space better than any AI. Give it the right targets to analyze.
Tell Solve what matters: features, pricing, target audience, tech stack, go-to-market strategy, or user sentiment. Specifying dimensions keeps the analysis focused on what is actionable for you.
Ask for "a SWOT analysis," "a positioning map," or "a feature matrix." Named frameworks give Solve a clear structure to work with. The output is also easier to share with your team.
If the teardown reveals something unexpected, ask a follow up question to explore it. "Tell me more about why no one has solved X" often surfaces the most valuable insights. Use @-mentions to carry findings forward.
Run a [market analysis](/solve/research/market-analysis) first to understand the landscape, then do a competitive teardown within that context. The combination gives you both the size and the player map.
## What's next
Use competitive insights to inform your pricing model.
Turn competitive gaps into product roadmap priorities.
Export and share teardown results with your team.
# Investment analysis
Source: https://docs.rocket.new/solve/research/investment-analysis
Use Rocket.new Solve to build investment theses, run due diligence, and evaluate business cases with structured, evidence-backed reports.
Solve gives you structured investment analysis that goes beyond surface-level research. Whether you are an investor evaluating a deal, a founder preparing for fundraising, or a team building a business case, Solve builds theses, runs due diligence frameworks, and evaluates business models.
You can attach internal documents like financial models or pitch decks to give Solve additional context.
## Types of investment analysis
| Analysis type | What you get | Best for |
| :-------------------------------- | :------------------------------------------------------------------------------- | :---------------------------------------------- |
| **Investment thesis** | Structured argument for why a company or market is a good bet | Pitch decks, investor memos, portfolio strategy |
| **Due diligence** | Risk assessment, market validation, and competitive positioning analysis | Evaluating deals, acquisition targets |
| **Business case** | Revenue projections, cost analysis, and ROI framework for an initiative | Internal proposals, budget requests |
| **Market opportunity assessment** | Is this market big enough, growing fast enough, and accessible enough? | Go/no-go decisions, fund allocation |
| **Comparable analysis** | How similar companies were valued, what multiples apply, and relevant benchmarks | Valuation, fundraising strategy |
## Example prompts
```plaintext wrap theme={null}
Build an investment thesis for vertical SaaS companies targeting the construction industry. What's the market opportunity, what are the key tailwinds, who are the leading players (Procore, PlanGrid, Buildertrend), and what does a winner in this space look like?
```
```plaintext wrap theme={null}
Run a due diligence analysis on a Series B developer tools company with \$8M ARR, 120% net revenue retention, and 200 enterprise customers. What are the key risks? What should an investor look for in terms of market positioning, competitive threats, and growth sustainability?
```
```plaintext wrap theme={null}
Build a business case for launching a mobile app alongside our existing web product. We have 15,000 monthly active users on web, B2B SaaS, \$25/user/month average. Estimate the incremental revenue, development cost, and payback period. Include risks and assumptions.
```
```plaintext wrap theme={null}
Is the AI code review market a good investment opportunity? Assess the TAM, competitive dynamics, buyer readiness, and technology maturity. Who are the current players (CodeRabbit, Codacy, Snyk) and what's the likely market structure in 3 years?
```
```plaintext wrap theme={null}
What are the relevant valuation benchmarks for a B2B SaaS company with \$5M ARR growing 80% year-over-year in the HR tech space? Pull comparable public companies and recent private funding rounds. What revenue multiples are typical at Series A and Series B?
```
## Due diligence frameworks
Request specific frameworks by name. You can combine frameworks in a single prompt. For example: "Run a competitive moat analysis and unit economics evaluation for \[company description]." Solve structures the output with clearly labeled sections for each.
Evaluates the target market on size, growth rate, competitive intensity, buyer concentration, and barriers to entry. Produces a scorecard you can use to compare opportunities.
Assesses whether a company has a defensible position: network effects, switching costs, data advantages, brand, or economies of scale. Identifies which moats are real and which are aspirational.
Analyzes LTV/CAC ratios, payback periods, gross margins, and net revenue retention. Flags whether the economics support the growth plan.
Categorizes risks by likelihood and impact: market risk, execution risk, competitive risk, regulatory risk, and technology risk. Provides mitigation strategies for the highest priority risks.
Evaluates whether current growth rates are sustainable by examining market headroom, sales efficiency, product-market fit signals, and expansion revenue potential.
## What results include
An investment analysis report contains six sections. Start with the thesis statement to understand the core argument before reviewing supporting detail.
| Report section | What it covers |
| :------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
| **Thesis statement** | Clear, one paragraph summary of the investment opportunity: what the bet is, why it is compelling, and the key assumptions it rests on. |
| **Market analysis** | Size, growth rate, dynamics, and competitive landscape. Establishes whether the opportunity is big enough to matter. |
| **Competitive positioning** | Where the company (or hypothetical company) sits relative to alternatives: strengths, weaknesses, and defensibility. |
| **Financial analysis or projections** | Unit economics, revenue model analysis, comparable valuations, or ROI projections depending on what you asked for. |
| **Risk assessment** | Structured view of what could go wrong, categorized by type, rated by severity, with mitigation approaches where applicable. |
| **Recommendation** | Clear recommendation (invest/pass, build/do not build, or pursue/defer) with the reasoning summarized. |
## Tips for better investment analysis
Include specific data points about the company or deal in your prompt so Solve can start with the right scope.
If you are evaluating a specific company, include whatever data you have: ARR, growth rate, customer count, retention, funding stage. The more data Solve has, the more specific the analysis.
Are you looking for high growth? Capital efficiency? Market dominance? Telling Solve what matters to you shapes the evaluation criteria and recommendations.
Request "Give me the bull case and bear case for this investment." This forces a balanced analysis rather than a one-sided pitch, and surfaces risks you might overlook.
Ask Solve to compare two opportunities: "Should we invest in vertical SaaS for restaurants or for gyms?" Comparative analysis often produces sharper insights than evaluating a single option.
Every investment thesis rests on assumptions. After the initial report, ask: "What are the three most critical assumptions in this thesis, and what evidence supports or contradicts each one?"
Investment analysis from Solve is based on publicly available data and AI reasoning. It should inform your thinking, not replace professional financial due diligence. Validate with primary research, expert opinions, and domain specific knowledge before making investment decisions.
## What's next
Deepen your market understanding with dedicated sizing and trend analysis.
Get detailed competitive intelligence to support your thesis.
Export investment analysis for presentations and memos.
# Market analysis
Source: https://docs.rocket.new/solve/research/market-analysis
Use Rocket.new Solve to size markets, assess opportunities, and identify trends: structured research reports with TAM/SAM/SOM, not generic summaries.
Solve delivers structured market research you can act on: sizing, trends, and competitive context in one report. It runs multiple research streams in parallel so you are not waiting for one section to finish before the next begins.
Specify your segment, geography, and time frame. You can also attach internal documents to ground the analysis in your company's data.
## What you can analyze
| Analysis type | What you get | Good for |
| :------------------------- | :------------------------------------------- | :---------------------------------------------- |
| **Market sizing** | TAM, SAM, SOM estimates with methodology | Pitch decks, business plans, go/no-go decisions |
| **Trend identification** | Emerging patterns, growth drivers, headwinds | Strategic planning, product roadmaps |
| **Opportunity assessment** | White space analysis, underserved segments | New product ideas, market entry |
| **Industry landscape** | Key players, market share, ecosystem mapping | Competitive strategy, partnership decisions |
| **Regional analysis** | Geography specific market data and dynamics | International expansion, localization |
## Example prompts
The more specific your question, the more useful the output. Include your segment and geography so Solve can start without prompt intelligence needing to ask follow-up questions.
```plaintext wrap theme={null}
What is the total addressable market for AI-powered customer support tools in North America? Break it down by TAM, SAM, and SOM for a startup targeting mid-market B2B companies. Include growth projections through 2028.
```
```plaintext wrap theme={null}
What are the top 5 emerging trends in the fintech payments space for 2025 to 2026? For each trend, explain the driver, estimated impact on market size, and which companies are leading.
```
```plaintext wrap theme={null}
Identify underserved segments in the project management software market. Which verticals or company sizes are poorly served by existing tools like Asana, Monday, and ClickUp? What would a differentiated product look like?
```
```plaintext wrap theme={null}
Map the competitive landscape for no-code/low-code platforms. Categorize players by target audience (developers vs. business users), pricing tier, and primary use case. Include estimated revenue or funding where available.
```
```plaintext wrap theme={null}
Compare the e-commerce enablement market in Southeast Asia vs. Latin America. Which region has faster growth, lower competition, and better infrastructure for a new entrant?
```
## What results include
A typical market analysis report contains five sections.
| Report section | What it covers |
| :--------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Executive summary** | Market size, growth rate, and the single most important takeaway. |
| **Market sizing with methodology** | Quantitative estimates (TAM/SAM/SOM or total market value) with an explanation of how the numbers were derived. Solve shows its work so you can evaluate assumptions. |
| **Growth drivers and headwinds** | Forces pushing the market forward (technology shifts, regulation, buyer behavior) and risks or barriers that could slow it down. |
| **Competitive landscape** | Key players, their positioning, and approximate market share or funding. Shows how crowded the space is and where gaps exist. |
| **Actionable recommendations** | Specific next steps: segments to target, positioning strategies, or follow-up questions worth investigating. |
## Tips for better market analysis
Include your segment, geography, and time frame in every prompt. These three pieces of context help Solve start without extra questions from prompt intelligence and produce sharper output.
"Market size in 2025" gives you a snapshot. "Market size with projections through 2028" gives you a trajectory. Always include a time frame so the analysis matches your planning horizon.
Instead of "the SaaS market," specify "vertical SaaS for healthcare providers" or "B2B SaaS for companies with 50 to 500 employees." Segments produce sharper, more actionable results.
Ask for TAM/SAM/SOM, Porter's Five Forces, or a value chain analysis by name. Solve structures the output around the framework you request, making it easier to plug into your existing strategy work.
Global numbers are useful for big picture context, but regional data drives decisions. Specify your target geography ("North America," "DACH region," or "Tier 1 cities in India") for more relevant results.
After the initial report, ask: "Given this market data, what are the three most promising entry strategies for a seed stage startup?" Follow ups that connect data to decisions are where Solve shines.
Market sizing estimates are derived from public data and AI analysis. Use them as directional guidance, not as the sole basis for financial projections. Cross reference with industry reports and primary research for critical decisions.
## What's next
After sizing the market, analyze the competitors within it.
Use market data to inform your pricing model and positioning.
Export and share your market analysis with stakeholders.
# Pricing strategy
Source: https://docs.rocket.new/solve/research/pricing-strategy
Use Rocket.new Solve to benchmark competitor pricing, evaluate models, and analyze willingness to pay: structured pricing reports with data, not guesswork.
Pricing is one of the highest leverage decisions a company makes, and one of the least researched. Solve benchmarks competitors, evaluates pricing models, and analyzes willingness to pay dynamics before you commit to a number.
Combine pricing research with a [competitive teardown](/solve/research/competitive-teardowns) for the full picture of how your market prices similar products.
## Types of pricing analysis
| Analysis type | What you get | Best for |
| :------------------------------ | :----------------------------------------------------------------------------- | :----------------------------- |
| **Competitive pricing audit** | What competitors charge, how they package, and what is included at each tier | Setting your own price points |
| **Pricing model evaluation** | Pros and cons of different models (per-seat, usage-based, flat rate, freemium) | Choosing a pricing structure |
| **Willingness to pay analysis** | What customers in your segment typically pay for similar tools | Validating price sensitivity |
| **Packaging strategy** | How to bundle features across free, starter, pro, and enterprise tiers | Plan design and feature gating |
| **Price positioning** | Where to position relative to competitors (premium, mid-market, or value) | Go-to-market strategy |
## Example prompts
Use specific prompts so Solve can proceed without needing additional context from you.
```plaintext wrap theme={null}
Analyze the pricing of Notion, Coda, and Slite. For each, list their plan tiers, price per user, key features at each tier, and what's gated behind enterprise plans. Summarize who's cheapest, who's most expensive, and where the biggest pricing gaps exist.
```
```plaintext wrap theme={null}
I'm building a B2B API product for document processing. Compare the tradeoffs of usage-based pricing vs. tiered flat-rate pricing for this type of product. Include real examples of companies using each model and their success metrics.
```
```plaintext wrap theme={null}
What do mid-market companies (100 to 1,000 employees) typically pay for project management software per user per month? Include data points from Asana, Monday, Wrike, and ClickUp. What price range maximizes adoption without leaving money on the table?
```
```plaintext wrap theme={null}
Help me design pricing tiers for an AI writing assistant targeting content teams. I want a free tier, a pro tier, and a team tier. For each, recommend which features to include, price point, and the upgrade trigger that moves users to the next tier.
```
```plaintext wrap theme={null}
I'm launching a design tool that competes with Canva and Adobe Express. Should I position as premium (higher price, more features), mid-market, or value (undercut on price)? Analyze the tradeoffs of each positioning for a startup with limited brand recognition.
```
## What results include
A pricing strategy report contains four sections. The recommended approach at the end connects competitor data to your specific positioning.
| Report section | What it covers |
| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Market pricing overview** | How the market prices similar products: common price ranges, dominant pricing models, and recent trends (for example, the shift from per-seat to usage-based). |
| **Competitor pricing breakdown** | Detailed comparison table showing each competitor's tiers, pricing, and feature packaging. This is the data you need to position yourself. |
| **Model analysis** | Evaluation of which pricing model fits your product and market, with tradeoffs clearly stated for each option. |
| **Recommended approach** | Specific pricing recommendation with reasoning: suggested price points, tier structure, and the logic connecting your pricing to your market position. |
### Example competitor pricing table
| | **Free** | **Pro** | **Business** | **Enterprise** |
| :--------- | :------------------- | :----------- | :-------------- | :------------- |
| **Notion** | \$0 (limited blocks) | \$10/user/mo | \$18/user/mo | Custom |
| **Coda** | \$0 (limited rows) | \$10/user/mo | \$30/user/mo | Custom |
| **Slite** | \$0 (limited docs) | \$8/user/mo | \$12.50/user/mo | Custom |
Solve's pricing tables pull from publicly available data. For enterprise or negotiated pricing, the report notes where estimates are used versus confirmed public prices.
## Tips for better pricing analysis
"SMB," "mid-market," and "enterprise" mean different things in different industries. Specify company size (employees or revenue), industry, and geography so Solve can find relevant pricing benchmarks.
Give Solve a list of 3 to 5 direct competitors to benchmark against. This produces a focused comparison rather than a broad market survey.
If you have constraints ("we need a free tier for adoption" or "our CAC means we need \$50+ ARPU"), include them. Solve factors your constraints into the recommendation.
Follow up with questions like "Should we price at \$9, \$10, or \$12 per user?" or "What is the impact of annual vs. monthly billing?" Pricing psychology questions often surface insights that raw data does not.
After getting an initial recommendation, ask follow ups: "What if we move feature X from Pro to Business?" or "What would a usage-based version look like?" Solve can rapidly model different packaging scenarios.
Pricing analysis reflects publicly available data and market benchmarks. Willingness to pay estimates are directional. Validate with customer interviews and A/B testing before making final pricing decisions.
## What's next
Align your pricing tiers with your product roadmap.
Get deeper competitive intelligence to complement pricing data.
Export pricing analysis for stakeholder presentations.
# Product direction
Source: https://docs.rocket.new/solve/research/product-direction
Use Rocket.new Solve to prioritize features, validate ideas, and build research-backed roadmap input from structured product analysis.
Product decisions are hard because the data is scattered across user feedback, competitor moves, market trends, and team intuition. Solve pulls these together into structured analysis for prioritization, validation, and roadmap planning.
Share your backlog and constraints, then ask Solve to rank options using a framework. You can also attach internal documents like user research summaries or feature specs to give Solve additional context.
## What Solve can do for product direction
| Analysis type | What you get | Best for |
| :------------------------- | :--------------------------------------------------------------------- | :------------------------------------------ |
| **Feature prioritization** | Ranked list of features based on impact, effort, and market demand | Sprint planning, roadmap decisions |
| **User needs analysis** | Structured breakdown of what users want, grouped by persona or segment | Product discovery, validation |
| **Roadmap input** | Research-backed recommendations for what to build and in what order | Quarterly planning, strategy docs |
| **Build vs. buy analysis** | Tradeoffs of building in house vs. integrating a third party tool | Architecture decisions, resource allocation |
| **Feature gap analysis** | What competitors offer that you do not, and whether it matters | Competitive response, differentiation |
## Example prompts
```plaintext wrap theme={null}
I'm building a CRM for real estate agents. Here are 8 features on my backlog: automated follow-ups, MLS integration, AI lead scoring, mobile app, team dashboards, email campaigns, document signing, and client portal. Prioritize these using an impact vs. effort framework. Consider what real estate agents value most based on market research.
```
```plaintext wrap theme={null}
What are the top unmet needs of freelance designers when it comes to invoicing and payments? Analyze complaints about existing tools like FreshBooks, Wave, and HoneyBook. Group findings by theme and severity.
```
```plaintext wrap theme={null}
I run a B2B analytics dashboard product. We currently offer basic charts, CSV export, and team sharing. What features should we build next to move upmarket into mid-market accounts? Consider what tools like Looker, Metabase, and Amplitude offer that we don't.
```
```plaintext wrap theme={null}
Should we build our own authentication system or use Auth0/Clerk for a B2B SaaS product? We need SSO, role-based access, and MFA. Compare the tradeoffs: cost, time to implement, ongoing maintenance, and flexibility.
```
```plaintext wrap theme={null}
Compare our feature set (listed below) against Calendly. Identify gaps that matter most to our target audience of B2B sales teams: one-on-one scheduling, group events, round-robin routing, CRM integration (Salesforce, HubSpot), custom branding, and analytics.
```
## Prioritization frameworks Solve can use
Request a specific framework by name, or let Solve choose the most appropriate one based on your context. If you have already run a [competitive teardown](/solve/research/competitive-teardowns), reference those findings to strengthen the prioritization.
Plots features on a 2x2 grid of high/low impact and high/low effort. Quick wins (high impact, low effort) go first. Solve estimates impact based on market demand and competitive positioning, and effort based on typical engineering complexity.
Scores each feature on Reach, Impact, Confidence, and Effort. Produces a numeric score you can use to rank your backlog. Ask Solve to estimate each component and show the calculation.
Categorizes features as Must-have, Should-have, Could-have, and Won't-have. Useful for defining an MVP or a release scope. Solve maps features to categories based on competitive necessity and user expectations.
Classifies features as basic expectations, performance features, or delighters. Helps you understand which features prevent churn (basic), drive satisfaction (performance), and create differentiation (delight).
Similar to impact/effort but framed around customer value and technical complexity. Works well for B2B products where customer value ties to willingness to pay or retention metrics.
You do not have to pick a framework. If you ask "prioritize these features," Solve chooses the most appropriate one. Naming one gives you more control over the output format.
## What results include
A product direction report contains five sections. Review the context summary first to confirm Solve is working from the right assumptions.
| Report section | What it covers |
| :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| **Context and assumptions** | Summary of the product, market, and target user that Solve is working from. Review this to verify the analysis is grounded correctly. |
| **Prioritized recommendations** | Ranked list or framework-based output showing which features to build first and why. Each recommendation includes reasoning, not just ranking. |
| **Supporting evidence** | Data points from competitor analysis, user sentiment, and market trends that support the recommendations. This is what you show stakeholders. |
| **Risks and tradeoffs** | What you give up by prioritizing one direction over another. Solve flags dependencies, competitive risks, and resource implications. |
| **Suggested next steps** | Follow-up research, validation experiments, or decisions that come next. Connects the analysis to action. |
## Tips for better product direction analysis
Tell Solve what you have already built, your target audience, and your stage (pre-launch, early traction, scaling). Context prevents generic advice and produces recommendations that match your situation.
Include a list of features you are considering in the prompt. Solve works better when evaluating specific options rather than generating a list from scratch.
Include constraints that matter: "We have a team of 3 engineers," "We need to ship in 6 weeks," or "We cannot build anything that requires SOC 2 compliance yet." Constraints shape practical recommendations.
After getting a recommendation, follow up with: "What is the strongest argument against this prioritization?" Challenging the analysis surfaces risks you might have missed.
If you have already run a [market analysis](/solve/research/market-analysis) or competitive teardown, reference those findings. "Based on the competitive gaps we identified, which features should we prioritize?" builds on previous work. Use @-mentions to carry insights forward.
## What's next
Ground product decisions in market data and opportunity sizing.
Build the business case around your product direction.
Share prioritization analysis with your team and stakeholders.
# Use cases
Source: https://docs.rocket.new/solve/research/use-cases
Explore nine categories of Rocket.new Solve questions with ready-to-use prompts for strategy, market research, competitive intelligence, and more.
Solve handles any business question that requires research, analysis, or synthesis. The categories below show what works well, not a ceiling on what you can ask. Each example prompt is intentionally specific. Browse them, then adapt to your domain using [best practices](/solve/best-practices) for sharper results.
## What you can ask
Where should you grow next, and why?
Expansion decisions require simultaneous analysis across multiple options and evaluation criteria. Solve decomposes each vertical or geography into its own research stream and returns a comparative framework.
**Example prompts:**
```plaintext wrap theme={null}
We are a fintech infrastructure company with deep expertise in banking APIs. Evaluate expansion into insurance, healthcare payments, and government disbursements. For each: market size, regulatory complexity, technical reuse from our existing stack, go-to-market timeline, and partnership opportunities.
```
```plaintext wrap theme={null}
I run a D2C skincare brand profitable in India. Assess market entry into UAE, Indonesia, and UK. Cover regulatory requirements for cosmetics, logistics cost structures, digital marketing landscape, and competitor positioning in each market.
```
```plaintext wrap theme={null}
We are an EdTech platform focused on K-12 in the US. Should we expand into corporate L&D, higher education, or international K-12 first? Compare TAM, sales cycle length, product adaptation required, and channel economics.
```
Run a detailed market analysis for your target geography or vertical.
What is your competition doing, and how do you win?
Competitive intelligence requires pulling signals from pricing pages, review platforms, press releases, job postings, social sentiment, and analyst reports simultaneously.
**Example prompts:**
```plaintext wrap theme={null}
I am pitching Series A for an AI design tool. Show me exactly how Canva's pricing has changed over the last 3 years, their enterprise revenue mix, and the top 5 complaints from enterprise users on G2.
```
```plaintext wrap theme={null}
We compete with Datadog in observability. What has Datadog shipped in the last 6 months, where are their enterprise customers expressing frustration, and what gaps exist that we could position against?
```
```plaintext wrap theme={null}
Map the competitive landscape for AI code generation tools. Compare GitHub Copilot, Codeium, and Tabnine across pricing, enterprise adoption signals, developer sentiment, and technical differentiation. Where is the whitespace?
```
Run a full competitive teardown with feature matrices and SWOT analysis.
How do you sell more, sell faster, or sell to new segments?
GTM questions blend market data, customer behavior analysis, competitive benchmarking, and strategic synthesis. They require pattern recognition across many data points.
**Example prompts:**
```plaintext wrap theme={null}
We sell developer tools. Our PLG motion is strong but enterprise conversion is weak. Research how Figma, Notion, and Slack transitioned from PLG to enterprise sales. What org structures, pricing changes, and sales motions did they deploy? Give me a playbook.
```
```plaintext wrap theme={null}
I run a B2B SaaS company with \$5M ARR. Average deal cycle is 90 days. Research what top-performing companies in our revenue range do to compress sales cycles: pricing structures, proof-of-value frameworks, and procurement shortcuts.
```
```plaintext wrap theme={null}
Help me optimize pilot-to-production conversion. Map the top 10 stall reasons from G2 and Gartner reviews, then create tailored expansion playbooks for three customer archetypes: SAP-heavy enterprises, cloud-native companies, and regulated industries.
```
Analyze pricing models and packaging strategies for your product.
Should you invest in this, and what are you missing?
Due diligence requires breadth across many dimensions, depth in each, and rigorous evidence grounding. Every claim needs to trace to a source.
**Example prompts:**
```plaintext wrap theme={null}
I am considering investing in a Series B vertical SaaS company in construction tech. Research the construction technology market: growth rate, key players, recent funding rounds, regulatory tailwinds, and the biggest failure patterns in this vertical.
```
```plaintext wrap theme={null}
Prepare a competitive landscape update for my board meeting. What has Google done in AI search APIs in the last 90 days? Is Perplexity signaling an enterprise pivot? What is the AI agent infrastructure market size for 2026?
```
```plaintext wrap theme={null}
I am a PE firm evaluating acquisition of a mid-market cybersecurity company. Research the cybersecurity M&A landscape: recent comparable transactions, valuation multiples, integration patterns, and what acquirers typically get wrong.
```
Build investment theses and run due diligence frameworks.
Why do people behave the way they do in this market?
Behavioral research requires triangulating quantitative data (surveys, market reports) with qualitative signals (reviews, social media, forums). Solve covers different evidence types in parallel and synthesizes a unified behavioral model.
**Example prompts:**
```plaintext wrap theme={null}
Top 10 reasons people do not opt for home loans from co-operative banks in India.
```
```plaintext wrap theme={null}
Why are enterprise buyers in APAC slower to adopt cloud-native databases compared to North America? Research cultural, regulatory, infrastructure, and vendor-ecosystem factors.
```
```plaintext wrap theme={null}
Gen Z spending patterns on subscription services: what are they subscribing to, what are they canceling, and what triggers churn? Pull from recent survey data, analyst reports, and social sentiment.
```
Size the market and identify trends behind the behavior.
How should you present yourself or your company to the world?
Brand strategy requires understanding competitor positioning, audience perception, platform dynamics, and creative best practices simultaneously. The report needs to be both analytical and prescriptive.
**Example prompts:**
```plaintext wrap theme={null}
I am head of Marketing at a VC firm. Our website is dated. Research the best VC websites (Mayfield, Sequoia, Greylock, Atomico, Bond) and give me a brand strategy and website redesign recommendation that positions us as an AI-native VC.
```
```plaintext wrap theme={null}
I want to become a thought leader in AI governance. Research the current landscape: who is publishing, on which platforms, what formats work, what topics are saturated vs. underserved. Give me a differentiation strategy and 90-day content plan.
```
```plaintext wrap theme={null}
We are rebranding from a services company to a product company. Research how Accenture, Infosys, and Wipro have attempted product pivots: what worked, what failed, and how the market perceived the transitions. Give me lessons and a positioning framework.
```
Help me understand a complex domain deeply enough to make an architectural or operational decision.
Technical deep dives go beyond surface comparisons into real-world evidence: user experiences, failure case studies, and hidden cost structures. Solve pulls from diverse sources and synthesizes a decision framework. You can attach internal documents for added context.
**Example prompts:**
```plaintext wrap theme={null}
We are evaluating migration from a monolith to microservices. Research failure patterns of enterprise migrations at our scale (\$50M+ revenue, 200+ engineers). What went wrong at companies that failed? What did successful migrations have in common? Give me a risk framework.
```
```plaintext wrap theme={null}
Compare the total cost of ownership for running ML inference on AWS Sagemaker vs. GCP Vertex AI vs. self-hosted on-prem for our workload profile: 10M inferences per day, 500ms latency requirement, multi-region.
```
```plaintext wrap theme={null}
We are choosing between Snowflake, Databricks, and BigQuery for our data platform. Research beyond marketing claims: actual enterprise user experiences at scale, hidden costs, migration complexity, and vendor lock-in risk.
```
How do you build and launch a public initiative or campaign?
Public initiative design requires blending research (what exists, what works), strategy (how to position, how to execute), and communication (how to reach the audience) at once.
**Example prompts:**
```plaintext wrap theme={null}
I am launching a nonprofit focused on AI literacy in rural communities. Research existing initiatives, funding sources, partnership opportunities with state governments, and successful models from other countries.
```
```plaintext wrap theme={null}
Help me design a policy brief on open-source AI regulation for submission to a parliamentary committee. Research current global positions, industry arguments, academic perspectives, and draft an evidence-based recommendation framework.
```
```plaintext wrap theme={null}
I want to push the agenda of rebuilding India's government app layer. Give me a 3-month campaign strategy across X and LinkedIn, a list of government apps to reimagine, and a stakeholder map of who to engage first.
```
## What's next
Frame questions for sharper, more actionable results.
Get your first report in under 5 minutes.
Understand report structure, exporting, and sharing.
# Presentable report
Source: https://docs.rocket.new/solve/results/presentable-report
Generate publication-grade HTML documents and interactive slide decks from Rocket.new Solve reports: polished deliverables ready for stakeholders.
Solve transforms your research into publication-grade outputs you can share directly with stakeholders. Ask for a polished HTML document, an interactive presentation, or a PRD, and Rocket produces it in one step. All formats are versioned and inherit password protection from the share settings.
For the best results, [refine your report](/solve/results/refine) before generating the presentable output. The output reflects whatever version of the report exists at generation time.
## Steps
Complete all edits and follow-up questions before generating the presentable output. The generator uses the latest version of your report as its source.
Type one of these prompts (or something similar) in the chat:
* "Generate a polished HTML report"
* "Generate a PPT presentation"
* "Create a slide deck from this report"
* "Create a PRD from this research"
Rocket analyzes the report content and selects the most appropriate theme automatically. The output appears as a downloadable file in the Documents panel.
Open the file to preview it in the browser. If the output looks correct, [export or share it](/solve/results/share-and-export) from the Documents panel.
## Document output
The document format produces a paginated A4 layout suitable for printing or screen reading. Each document includes a cover page, table of contents, and professionally typeset pages.
Rocket selects the theme based on content type, but you can override it by specifying a theme in your prompt.
| Theme | Description |
| :------------ | :---------------------------------------------------------------------------------------------------------- |
| **Executive** | Clean, corporate layout with muted colors. Best for board presentations and investor updates. |
| **Technical** | Structured layout optimized for data-heavy reports. Emphasizes tables, code blocks, and diagrams. |
| **Academic** | Traditional academic formatting with citations and footnotes. Suits research papers and literature reviews. |
| **Minimal** | Sparse layout with generous white space. Works well for short summaries and internal memos. |
## Presentation output
The presentation format produces an interactive slide deck that runs in any browser. Navigation works with keyboard arrows, mouse clicks, and touch gestures. Each slide has a unique URL for deep linking.
Rocket chooses the layout for each slide based on the content it contains. Every deck starts with a hero title slide and uses section dividers to separate major topics.
| Theme | Description |
| :------------ | :----------------------------------------------------------------------------- |
| **Corporate** | Navy and white palette. Professional and understated. |
| **Dark** | Charcoal background with electric blue accents. Good for screen presentations. |
| **Gradient** | Bold gradient backgrounds. High visual impact for keynotes. |
| **Minimal** | Pure white background with black text. Maximum readability. |
| **Vibrant** | Teal and coral palette. Energetic and modern. |
## Export formats
All formats are versioned. Each generation creates a new version accessible from the Documents panel.
| Format | Output type | Use case |
| :-------------------- | :---------------------------- | :------------------------------------------------------- |
| **Document HTML** | Paginated HTML file | Share as a link or embed in internal tools. |
| **Presentation HTML** | Interactive slide deck | Present directly in the browser. |
| **PDF** | Static document | Print or distribute as a fixed-layout file. |
| **PPTX** | PowerPoint file | Edit further in PowerPoint or Google Slides. |
| **PRD** | Product requirements document | Hand off research findings as a structured product spec. |
## Tips
Tell Rocket what to include or exclude. For example: "Generate a polished HTML report, but skip the methodology section" or "Only include the executive summary and recommendations in the slide deck."
After generating, use the [share and export tools](/solve/results/share-and-export) to distribute the output. Shared links inherit password protection settings from your task.
## What's next
Share via link, export as PDF, or copy content to other tools.
Continue editing before generating a presentable version.
# Refine
Source: https://docs.rocket.new/solve/results/refine
Edit, extend, and improve Rocket.new Solve reports through conversation and smart suggestions.
You do not need to accept the first version of a report. After generation, type follow-up messages in the same task to change any part of the output.
Every edit creates a new version. Previous versions are viewable but you can only continue working from the latest one.
The edit assistant has access to all original research data, not just the visible report. It can also search the web, read [uploaded documents](/getting-started/project/context/file-uploads), and pull cross-task context from previous tasks. Only one edit session runs per task at a time.
Changes are surgical. Solve patches the relevant sections instead of regenerating the entire report. This preserves formatting and context in sections you did not modify.
## What you can do
| Action | Example prompt |
| :---------------------------- | :-------------------------------------------------------------------------------------------- |
| **Query the report** | "What were the top three competitors by revenue?" |
| **Modify a section** | "Rewrite the pricing section to compare annual plans only." |
| **Add new information** | "I just uploaded Q4 earnings. Integrate those numbers." |
| **Think out loud** | "I'm not sure this recommendation fits our budget. What would change if we cut scope by 40%?" |
| **Correct errors** | "The Acme Corp revenue figure is wrong. It should be \$42M, not \$38M." |
| **Repurpose for an audience** | "Rewrite the executive summary for a board presentation." |
| **Apply changes** | "Update the report with all the changes we discussed." |
## Iteration patterns
Ask Solve to adjust tone, depth, or focus for a specific audience. For example: "Make this more technical for the engineering team" or "Simplify the financial analysis for a non-finance audience." The structure stays the same while the language shifts.
Upload a new file or paste data directly into the chat. Solve integrates it into the existing report, and the new version shows what changed.
This is useful when you receive updated numbers or find a missing data source after the initial report.
Reference findings from previous Solve tasks using @-mentions. For example: "Compare this with the competitor analysis from last week." Solve pulls cross-task context to connect insights across separate research tasks.
Transform the same research into multiple output formats. A single report can become a board memo, a technical brief, and a customer-facing summary through separate follow-up requests.
## Smart follow-up suggestions
After each report generation or edit, Rocket displays 3 to 5 suggestion chips below the report. These suggest logical next actions based on the report content, your previous actions, and available Rocket capabilities.
Each chip falls into one of two behavior types. **In-task** suggestions execute immediately within the current conversation. **Redirect** suggestions navigate you to another part of the platform where the action makes more sense.
| Category | Purpose | Behavior |
| :--------------------------- | :------------------------------------------------------------------ | :------- |
| **Solve** | Go deeper into a specific finding or open question | In-task |
| **Transform** | Convert the report into a different format (document, presentation) | In-task |
| **Challenge** | Stress-test assumptions, find counterarguments, identify risks | In-task |
| **Strategic action** | Derive concrete next steps from the findings | In-task |
| **Competitive intelligence** | Set up ongoing monitoring for competitors or markets | Redirect |
| **Build** | Create an artifact (model, framework, plan) from the findings | In-task |
| **Promote to KB** | Extract reusable knowledge into your workspace knowledge base | Redirect |
Suggestions adapt to context. A pricing report generates different chips than a competitive teardown. The same report generates different chips after the first edit versus the third.
You can ignore the suggestions and type your own follow-up instead. The suggestions reset after each interaction, reflecting the latest state of the report.
## What's next
Generate a polished HTML page or slide deck from your refined report.
Share via link, export as PDF, or copy content to other tools.
Learn how reports are structured and how to navigate them.
# Reports
Source: https://docs.rocket.new/solve/results/reports
Understand how Rocket.new Solve reports are structured and how to work with them after they generate.
Solve delivers a structured report after every research task. A **Final report** link appears in the chat once research completes. Select it to open the report in the right-side panel while the chat stays on the left.
Solve reports draw on publicly available data and AI analysis. Always validate critical findings with primary research before using them in investor presentations, financial models, or major business decisions.
## Interface layout
The Solve workspace uses a split-panel design once a report is ready.
| Panel | What it shows |
| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
| **Left panel (chat)** | Your conversation history, research streams, and follow-up messages. The Final report link and versioned document links appear here. |
| **Right panel (report)** | The rendered report with headings, tables, and recommendations. Stays visible while you continue chatting on the left. |
You can collapse the report panel to return to full-width chat, or expand it to full screen for focused reading.
## Report structure
Every Solve report follows a consistent five-part structure, regardless of question type.
| Section | What it contains |
| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Executive summary** | Key findings in two to four sentences. Start here for a quick answer or to decide whether to read further. |
| **Detailed analysis** | The core of the report. Content varies by question type: market analyses include sizing tables, competitive teardowns include feature matrices, investment analyses include risk assessments. |
| **Supporting data** | Tables, comparisons, and data points backing up the analysis. Solve shows its work, including where numbers come from and what assumptions were made. |
| **Recommendations** | Actionable next steps based on the analysis. Specific rather than generic. |
| **Sources and methodology** | Where the data came from and how the analysis was structured. Use this to evaluate confidence before relying on findings for high-stakes decisions. |
## Toolbar
The report toolbar sits at the top of the report panel.
| Button | What it does |
| :------------------- | :------------------------------------------------------------------------------------------------------------------------ |
| **Version dropdown** | Shows the current version (e.g. V 1.0, Latest). Switch between all saved versions. Each edit cycle creates a new version. |
| **Share** | Generates a public link so anyone can view the report without a Rocket account. |
| **Full screen** | Expands the report to fill the screen. |
| **Documents** | Lists every report and file Rocket generated in this task. |
| **Attachments** | Lists all files you uploaded in this task. |
Invite team members, assign roles, and collaborate on reports together.
## Report types
Different question types produce different report structures.
| Question type | Key sections | Typical length |
| :------------------------------------------------------------- | :---------------------------------------------- | :------------------- |
| [Market analysis](/solve/research/market-analysis) | Market sizing, growth drivers, landscape | 800 to 1,500 words |
| [Competitive teardowns](/solve/research/competitive-teardowns) | Feature matrix, SWOT, gap analysis | 1,000 to 2,000 words |
| [Pricing strategy](/solve/research/pricing-strategy) | Pricing tables, model analysis, recommendations | 600 to 1,200 words |
| [Product direction](/solve/research/product-direction) | Prioritization framework, evidence, tradeoffs | 800 to 1,500 words |
| [Investment analysis](/solve/research/investment-analysis) | Thesis, financials, risk matrix, recommendation | 1,000 to 2,000 words |
## What's next
Query, modify, and extend reports through conversation.
Generate a polished HTML page or PPT deck in one message.
Share via link, export as PDF, or copy content to other tools.
# Share and export
Source: https://docs.rocket.new/solve/results/share-and-export
Share Rocket.new Solve reports via links, export as PDF or PPTX, and distribute structured research to your workspace and stakeholders.
Every Solve report can be shared outside of Rocket. Share a link for browser viewing, export as PDF or PPTX for offline distribution, or push to your workspace for team access. [Presentable reports](/solve/results/presentable-report) can be shared the same way as standard reports.
## Share via link
Open the report you want to share from the Documents panel or the **Final report** link in the chat.
Select the **Create link** button in the report toolbar. Rocket generates a unique URL for this report.
Enable password protection on the share dialog to restrict access. Recipients must enter the password before viewing. The password setting carries over to all versions of this report, including presentable outputs.
Copy the URL with a single click using the clipboard button and send it to your recipients. Anyone with the link (and password, if set) can view the report in their browser without a Rocket account.
## Unpublish a shared link
To revoke access, open the share dialog and select **Unpublish**. The link stops working immediately. Recipients who try the URL see an unavailable message. You can re-publish later to generate a new active link.
The share link is tied to the report, not a single version. Recipients always see the latest version. If you generate a new version through edits or presentable report generation, the link updates automatically.
## Update link settings
After publishing a link, you can change its settings at any time. Open the share dialog to toggle password protection on or off, then select **Update** to apply. The link stays active with the new settings. Recipients who already have the URL do not need a new link.
## Export
Export any report as a static file for offline use, printing, or editing in another tool.
Open the report and select **Export** from the toolbar menu. Choose the format that fits your use case: PDF for a fixed-layout file you can attach to emails or archive, or PPTX for a PowerPoint file you can edit or present in your own slide tool.
## Workspace sharing
Push a report to your Rocket workspace so team members can access it from the shared documents area.
Open the report and select **Share to workspace** from the toolbar. The report appears in the team's shared document list. Workspace members can open, read, and reference the report in their own Solve tasks.
## Copy content
Select text in the report and use your standard copy shortcut to copy individual sections. To copy everything, select **Copy all** from the toolbar. Paste into Google Docs, Notion, Confluence, or any rich text editor.
## Use in other tasks
Reference a shared report in a new Solve task by mentioning it in your prompt. For example: "Using the competitive analysis from last week, compare pricing models for the EU market." Solve pulls context from the referenced report to inform the new research.
## What's next
Generate a polished HTML document or slide deck before sharing.
Learn how reports are structured and how to navigate them.
Edit and improve your report before distributing it.