> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# 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/docs/get-started/installation/app-router) 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

#### Initialize the app

Perform the following CLI command.

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

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

#### Select an existing site or create a new one.

![Screenshot of select site to integrate](/_fern-img/8177275707a7a2334a00fbd642ff0b59e8754d5a4e8050a1ebd693cadb252ba6.webp)

#### Pick a template (optional).

![Screenshot of template picker](/_fern-img/9c7e9b9cbd34eb4975ce162e05cd61b710c91da79abddd349f3be572f5ddde13.webp)

#### Check CLI while site is being linked.

![Screenshot of linking page](/_fern-img/9b741ae0532e18ffe1f27da27baf297010ece4da30297fd9fd54c0817898b3c1.webp)

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

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

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

#### How do I create a page?

![Screenshot of add page](/_fern-img/7b4cf6fb29786be2317ef28c68cb8684990adcaa8415d74cd924003bbaa7ba06.webp)

You should find some new custom components in the toolbar.

![Screenshot of custom components in toolbar](/_fern-img/35dd7320d8945c809544c77579a3913709d38d8508abf1359d1e504a43afaea6.webp)

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/docs/reference/reactruntime/register-component).

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