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

# Quickstart

We recommend using the automatic setup to explore Makeswift in a fresh Next.js app. If you have an existing Next.js app, you can use the [manual installation](/developer/app-router/installation) guide.

## Requirements

You will need the following:

* [Node.js 18.17](https://nodejs.org/en) or a later version.
* macOS, Windows (including WSL), and Linux are supported.
* Familiarity with [Next.js](https://nextjs.org/docs).

You don't need an existing Makeswift account to get started with this guide.

## Automatic setup

<Steps>
  <Step title="Initialize the app">
    Perform the following CLI command.

    ```bash theme={null}
    npx makeswift@latest init
    ```

    After you confirm, the CLI will create a new Next.js app in a directory with the project's name.

    The CLI then opens a new page in your browser where you will continue integrating your app.
  </Step>

  <Step title="Connect the Next.js app to a Makeswift site">
    The browser will prompt you to select a Makeswift site to connect to your local Next.js app. You may need to login or sign up, but the browser will redirect you to this page.

    <Accordion title="Select an existing site or create a new one.">
      <Frame>
        <img src="https://mintcdn.com/makeswift-docs-branch/GN6xGqTKZirKpl9f/images/select-site.png?fit=max&auto=format&n=GN6xGqTKZirKpl9f&q=85&s=b26f584d3fb7afeff48a262eba3f6711" alt="Screenshot of select site to integrate" width="1440" height="1080" data-path="images/select-site.png" />
      </Frame>
    </Accordion>

    <Accordion title="Pick a template (optional).">
      <Frame>
        <img src="https://mintcdn.com/makeswift-docs-branch/GN6xGqTKZirKpl9f/images/select-template.png?fit=max&auto=format&n=GN6xGqTKZirKpl9f&q=85&s=2ae8e99eaccd6055b2aee5b097f49368" alt="Screenshot of template picker" width="1440" height="1080" data-path="images/select-template.png" />
      </Frame>
    </Accordion>

    <Accordion title="Check CLI while site is being linked.">
      <Frame>
        <img src="https://mintcdn.com/makeswift-docs-branch/fRxgR_QtAp5JjKON/images/integrating.png?fit=max&auto=format&n=fRxgR_QtAp5JjKON&q=85&s=ea59432053bb02e38513720c4d237066" alt="Screenshot of linking page" width="1440" height="1080" data-path="images/integrating.png" />
      </Frame>

      During this step, the Makeswift site API Key is stored as an environment variable inside your local `.env.local` file.
    </Accordion>

    <Warning>
      Make sure to check your console during the linking process. If the CLI fails to install dependencies you may need to install them manually.
    </Warning>
  </Step>

  <Step title="Start building">
    The browser redirects you to the Makeswift Visual Builder once the integration is complete. If you skipped the template option, make sure to create a page.

    <Accordion title="How do I create a page?">
      <Frame>
        <img src="https://mintcdn.com/makeswift-docs-branch/5j4n8t-Gz_nd6Yf4/images/add-page.png?fit=max&auto=format&n=5j4n8t-Gz_nd6Yf4&q=85&s=deb597c51e23cc0ebc8289de58a03039" alt="Screenshot of add page" width="1024" height="640" data-path="images/add-page.png" />
      </Frame>
    </Accordion>

    You should find some new custom components in the toolbar.

    <Frame>
      <img src="https://mintcdn.com/makeswift-docs-branch/GN6xGqTKZirKpl9f/images/registered-components.png?fit=max&auto=format&n=GN6xGqTKZirKpl9f&q=85&s=6914241ee6679e5ea3fba64a481614d8" alt="Screenshot of custom components in toolbar" width="1024" height="640" data-path="images/registered-components.png" />
    </Frame>

    These components will be located in the `components` folder of your Next.js app. You can explore the files ending with `.makeswift.ts` to learn more about [registering components](/developer/reference/runtime/register-component).

    To learn how to use Makeswift builder, see the [Help Center](https://help.makeswift.com/) articles.
  </Step>
</Steps>