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

> Import a Next.js TypeScript repo from GitHub and continue building with Rocket.new AI.

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 />

<Info>
  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**.
</Info>

<Divider />

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

<Note>
  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.
</Note>

<Divider />

## Import a repository

<Steps>
  <Step title="Go to Rocket">
    Visit [rocket.new](https://rocket.new), sign in, and click the **Build** tab below the input.
  </Step>

  <Step title="Open the GitHub import option">
    Click the **+** button at the lower left of the input box and select **Clone from GitHub**.

    <Frame caption="Click + then select Clone from GitHub">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/-yEl0B9S0cPv2W9c/images/build-docs/create/from-github/web-browser/clone-from-github-light.webp?fit=max&auto=format&n=-yEl0B9S0cPv2W9c&q=85&s=770d0df616fc5be9e50db3d839448247" alt="Rocket homepage with the + menu open, highlighting the Clone from GitHub option." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/create/from-github/web-browser/clone-from-github-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/-yEl0B9S0cPv2W9c/images/build-docs/create/from-github/web-browser/clone-from-github-dark.webp?fit=max&auto=format&n=-yEl0B9S0cPv2W9c&q=85&s=9b2e572278c7ce6703438bf6ecbe6216" alt="Rocket homepage with the + menu open, highlighting the Clone from GitHub option." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/create/from-github/web-browser/clone-from-github-dark.webp" />
    </Frame>

    <Card title="Connect GitHub first" icon="github" href="/build/connectors/github/overview" horizontal arrow="true">
      If you have not connected GitHub yet, Rocket will prompt you to authorize. Follow the connector setup guide for details.
    </Card>
  </Step>

  <Step title="Pick a repository">
    A dialog opens listing your GitHub repositories. Select the Next.js TypeScript task you want to import and click **Submit**.

    <Frame caption="Select a repository to clone">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/-yEl0B9S0cPv2W9c/images/build-docs/create/from-github/web-browser/select-repository-light.webp?fit=max&auto=format&n=-yEl0B9S0cPv2W9c&q=85&s=96a6727ee35ea86060b044e31681737e" alt="GitHub repository selection dialog with a dropdown to pick a repository and branch." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/create/from-github/web-browser/select-repository-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/-yEl0B9S0cPv2W9c/images/build-docs/create/from-github/web-browser/select-repository-dark.webp?fit=max&auto=format&n=-yEl0B9S0cPv2W9c&q=85&s=bf0c257a0541fa63df81c22bc1aa68c1" alt="GitHub repository selection dialog with a dropdown to pick a repository and branch." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/create/from-github/web-browser/select-repository-dark.webp" />
    </Frame>
  </Step>

  <Step title="Wait for setup">
    Rocket validates the repository, clones it, installs dependencies, and generates a live preview. This may take a moment depending on task size.
  </Step>

  <Step title="Start building">
    Once the preview is ready, use the chat to iterate on your imported task just like any other Build task.
  </Step>
</Steps>

<Divider />

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

<Info>
  Environment variable values from your `.env` file are imported automatically. Review them under [Environment variables](/build/editor/env-variables) after importing.
</Info>

<Divider />

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

<Card icon="arrows-rotate" href="/build/connectors/github/code-sync" horizontal arrow="true">
  Learn how two-way GitHub sync works for Next.js TypeScript projects.
</Card>

<Divider />

## Disconnect from GitHub

GitHub is connected at the workspace level. Disconnecting removes the GitHub link for your entire Rocket account.

<Card title="Disconnect a service" icon="plug" href="/getting-started/workspace/connectors#disconnect-a-service" horizontal arrow="true">
  Disconnect or switch accounts from workspace Settings.
</Card>

Your task files in Rocket remain intact after disconnecting. To reconnect, go through the same steps and authorize a GitHub account.

<Divider />

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

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="GitHub sync" icon="arrows-rotate" href="/build/connectors/github/code-sync">
    Push and pull changes between Rocket and GitHub.
  </Card>

  <Card title="Environment variables" icon="key" href="/build/editor/env-variables">
    Review and manage your environment variables after importing from GitHub.
  </Card>

  <Card title="The chat" icon="message" href="/build/editor/chat">
    Iterate on your imported project using natural language.
  </Card>

  <Card title="Code tab" icon="code" href="/build/editor/code">
    Browse and edit your project files directly.
  </Card>
</CardGroup>