> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# From an idea

> Describe an app in plain language and Rocket.new generates the UI, routes, and logic - ideal for turning a rough concept into a working prototype.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

<Divider />

## What you can build

<CardGroup cols={2}>
  <Card title="SaaS product" icon="credit-card">
    Subscription-based apps with dashboards, user accounts, and billing.
  </Card>

  <Card title="E-commerce store" icon="store">
    Product catalogs, shopping carts, and checkout flows.
  </Card>

  <Card title="AI-powered app" icon="robot">
    Chat interfaces, content generators, and smart search tools.
  </Card>

  <Card title="Dashboard or internal tool" icon="chart-mixed">
    Data dashboards, admin panels, and CRM systems.
  </Card>

  <Card title="Landing page or website" icon="globe">
    Marketing sites, portfolios, blogs, and landing pages.
  </Card>

  <Card title="Mobile app" icon="mobile">
    Native mobile apps for iOS and Android with Flutter.
  </Card>
</CardGroup>

<Divider />

## How it works

When you submit a prompt, Rocket scores it for clarity before starting work.

* **Clear prompt.** Rocket starts building immediately.
* **Vague prompt.** Rocket asks a short set of targeted questions first, then starts once it has enough to go on.

The framework is assigned automatically based on your platform. You cannot change the framework after the task is created.

### Default frameworks

| Platform | Framework |
| :- | :- |
| Web | Next.js |
| Mobile | Flutter |

<Divider />

## Detailed walkthrough

<Tabs>
  <Tab title="Web Browser">
    ### Before you begin

    <Info>
      **You will need:**

      * A [rocket.new](https://rocket.new) account, signed in.
    </Info>

    <Steps>
      <Step title="Go to Rocket">
        Visit **[rocket.new](https://rocket.new)** and sign in. On the homepage, click **Build** to start a new Build task.

        <Frame caption="Rocket homepage">
          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/Cw1M34iuTAasIUNm/images/build-docs/create/from-an-idea/web-browser/homepage-light.webp?fit=max&auto=format&n=Cw1M34iuTAasIUNm&q=85&s=8b7278202043606ad878e87d59a2ff12" alt="Rocket homepage with Build option selected to start a new Build task." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/create/from-an-idea/web-browser/homepage-light.webp" />

          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/Cw1M34iuTAasIUNm/images/build-docs/create/from-an-idea/web-browser/homepage-dark.webp?fit=max&auto=format&n=Cw1M34iuTAasIUNm&q=85&s=a8b6daaaa983912ca74cea0cc782b10b" alt="Rocket homepage with Build option selected to start a new Build task." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/create/from-an-idea/web-browser/homepage-dark.webp" />
        </Frame>
      </Step>

      <Step title="Type your idea">
        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.

        <Frame caption="Select a prompt or type your own">
          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/Cw1M34iuTAasIUNm/images/build-docs/create/from-an-idea/web-browser/select-prompt-light.webp?fit=max&auto=format&n=Cw1M34iuTAasIUNm&q=85&s=dc6826933350095353dde7e15478fe20" alt="Build category tabs with example prompt suggestions. A suggestion is highlighted and auto-fills into the input." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/create/from-an-idea/web-browser/select-prompt-light.webp" />

          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/Cw1M34iuTAasIUNm/images/build-docs/create/from-an-idea/web-browser/select-prompt-dark.webp?fit=max&auto=format&n=Cw1M34iuTAasIUNm&q=85&s=e1f483e1f03926a7481c7cd8906f33ce" alt="Build category tabs with example prompt suggestions. A suggestion is highlighted and auto-fills into the input." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/create/from-an-idea/web-browser/select-prompt-dark.webp" />
        </Frame>
      </Step>

      <Step title="Send your prompt">
        Once your prompt is in the input field, click the **send** button or press Enter.

        <Frame caption="Send the prompt">
          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/Cw1M34iuTAasIUNm/images/build-docs/create/from-an-idea/web-browser/send-prompt-light.webp?fit=max&auto=format&n=Cw1M34iuTAasIUNm&q=85&s=781e494b0b8617420aa358c63a402f04" alt="Prompt filled in the input box with the send button highlighted." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/create/from-an-idea/web-browser/send-prompt-light.webp" />

          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/Cw1M34iuTAasIUNm/images/build-docs/create/from-an-idea/web-browser/send-prompt-dark.webp?fit=max&auto=format&n=Cw1M34iuTAasIUNm&q=85&s=c66cf67789826c4c651dddcd55bc30a0" alt="Prompt filled in the input box with the send button highlighted." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/create/from-an-idea/web-browser/send-prompt-dark.webp" />
        </Frame>
      </Step>

      <Step title="Answer prompt intelligence (if prompted)">
        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.

        <Card horizontal title="Prompt intelligence" icon="brain" href="/getting-started/task/prompt-intelligence">
          How Rocket decides when to ask questions and what to do with your answers.
        </Card>
      </Step>

      <Step title="Watch Rocket build">
        Rocket starts building immediately and shows progress in the chat. You will see each screen being generated with its status as it completes.

        <Note>
          If generation fails, click **Retry**. If it keeps failing, simplify your prompt and start a new build.
        </Note>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Mobile App">
    ### Before you begin

    <Info>
      **You will need:**

      * The Rocket app (iPhone or iPad) installed and signed in.
    </Info>

    <Steps>
      <Step title="Open the Rocket app">
        Open the **Rocket** app on your iPhone or iPad and make sure you are signed in.

        <Frame caption="Mobile app home screen">
          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/pLntWJzZ3SjUx1lc/images/build-docs/create/from-an-idea/mobile-app/mobile-home-screen-in-rocket-app.webp?fit=max&auto=format&n=pLntWJzZ3SjUx1lc&q=85&s=756541c660afb41957712d570a82ea1d" alt="Mobile app home screen with the idea input field ready to receive a prompt." className="theme-mobile-image" width="422" height="908" data-path="images/build-docs/create/from-an-idea/mobile-app/mobile-home-screen-in-rocket-app.webp" />
        </Frame>
      </Step>

      <Step title="Describe what you want to build">
        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.*

        <Frame caption="Enter idea on mobile">
          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/pLntWJzZ3SjUx1lc/images/build-docs/create/from-an-idea/mobile-app/idea-chat-prompt-in-rocket-app.webp?fit=max&auto=format&n=pLntWJzZ3SjUx1lc&q=85&s=b9e4b07e85e80040418431a74de123f6" alt="Mobile chat field where you enter your app idea for Rocket to build from." className="theme-mobile-image" width="422" height="908" data-path="images/build-docs/create/from-an-idea/mobile-app/idea-chat-prompt-in-rocket-app.webp" />
        </Frame>
      </Step>

      <Step title="Answer prompt intelligence (if prompted)">
        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.

        <Card horizontal title="Prompt intelligence" icon="brain" href="/getting-started/task/prompt-intelligence">
          How Rocket decides when to ask questions and what to do with your answers.
        </Card>
      </Step>

      <Step title="Watch Rocket build">
        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.

        <Frame caption="Build progress on mobile">
          <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/pLntWJzZ3SjUx1lc/images/build-docs/create/from-an-idea/mobile-app/generating-screens-in-rocket-app.webp?fit=max&auto=format&n=pLntWJzZ3SjUx1lc&q=85&s=cc288d6838bf106a37ee27b27211dd28" alt="Inline build progress in the mobile app showing current file and action." className="theme-mobile-image" width="422" height="908" data-path="images/build-docs/create/from-an-idea/mobile-app/generating-screens-in-rocket-app.webp" />
        </Frame>

        <Note>
          If generation fails, tap **Retry**. If it keeps failing, simplify your prompt and start a new build.
        </Note>
      </Step>
    </Steps>
  </Tab>
</Tabs>

<Divider />

## 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.` |

<Divider />

## 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.

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Iterate with chat" icon="messages" href="/build/editor/chat">
    Refine your app using natural language. Change colors, add features, and fix bugs through conversation.
  </Card>

  <Card title="Visual edit" icon="paintbrush" href="/build/editor/visual-edit">
    Click any element to change text, colors, layout, and spacing directly.
  </Card>

  <Card title="Connectors" icon="puzzle-piece" href="/build/connectors/overview">
    Add payments, databases, AI, email, and more with a single prompt.
  </Card>

  <Card title="Launch your app" icon="desktop" href="/build/launch-web/launch-your-site">
    Publish to the web with one click and connect a custom domain.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.