> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/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 20.19](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/cdz9WIAi676OTSsF/images/select-site.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=d3dbadf6cd24a4c8db28a0fd912ab462" 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/cdz9WIAi676OTSsF/images/select-template.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=83abb205ad398fe7105e406a2cbf261e" 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/AOijlpVp0npNQ8wB/images/integrating.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=7c5f9f755ff69ae6f1a8c90116481293" 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/G15o5Myy8rXEUbA7/images/add-page.png?fit=max&auto=format&n=G15o5Myy8rXEUbA7&q=85&s=6ff12bce6726b9ba59a85d2647305b8c" 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/ttFYL1GC4O0eQWyS/images/registered-components.png?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=040ec15168ff684aaf2edf8418660896" 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>