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

# Builder messages

> Troubleshoot common error messages shown in the Makeswift builder

## Wrong API key

> You are not using the correct API key

### What this message means

It seems like you are using a wrong API key in the Makeswift client or API handler.

### Possible ways to fix this

Check that the correct API key is passed to both the Makeswift client and API handler.
If you're using an environment variable for the Makeswift API key, make sure it's set properly.
Our installation guide explains how to set that up:

* [App Router installation guide](/developer/docs/get-started/installation/app-router)
* [Pages Router installation guide](/developer/docs/get-started/installation/pages-router)

---

## Page is not editable

> There are no available elements to edit or the page is not integrated with Makeswift

### What this message means

The page you are trying to edit is not editable in Makeswift. This can happen for a number of reasons:

* the page is not integrated with Makeswift
* your Next.js app is unable to communicate with the builder due to misconfiguration
* there was an error fetching data from the builder

### Possible ways to fix this

To make your page editable in Makeswift, please refer to our [Quickstart](/developer/docs/get-started/quickstart) guide.

If you see this message while trying to install Makeswift for your existing site, please make sure you have completed
all the necessary steps in the Installation guide:

* [App Router installation guide](/developer/docs/get-started/installation/app-router)
* [Pages Router installation guide](/developer/docs/get-started/installation/pages-router)

---

## Manifest unreachable

> The host manifest is unreachable

### What this message means

Makeswift uses a host manifest to fetch metadata about your site. This metadata is used by the builder to determine
what URL to use to route pages, what version of the runtime is running in the host, and what features are available
in the host. If the host manifest is unreachable, the pages in the builder will not load properly.

### Possible ways to fix this

Here is a list of things to check to make sure the host manifest is reachable:

#### Check that your Next.js app is running

Makeswift can only fetch the host manifest if your Next.js app is running. Make sure your Next.js app is running.

#### Check that the host URL is correct in the Makeswift host settings

If your Next.js app is running, check that the host URL including the host
name and port are correct in the Makeswift host settings. Update the host URL
if necessary.

#### Show me how

#### Check that your API key is passed to the Makeswift API handler

Makeswift fetches the manifest from an API handler in your Next.js app.
If you're using an environment variable for the Makeswift API key, make sure it's set properly.
Our installation guide explains how to set that up:

* [App Router installation guide](/developer/docs/get-started/installation/app-router)
* [Pages Router installation guide](/developer/docs/get-started/installation/pages-router)

#### Check that the Makeswift API handler is set up

Makeswift fetches the manifest from an API handler in your Next.js app. Make sure the API handler is set up correctly.
See the `Add the Makeswift API handler` step of the installation guide for how to set it up:

* [App Router installation guide](/developer/docs/get-started/installation/app-router)
* [Pages Router installation guide](/developer/docs/get-started/installation/pages-router)

---

## Connection init timeout

> Your page did not connect to the builder in time.

Editing a page in the Makeswift Visual Builder requires your page to establish a
connection with the builder. This message means that your page did not
initialize this connection in time.

### Possible ways to fix this

#### Runtime `v0.24` and later

In `v0.24` and later, the connection is automatically initiated by the
`ReactRuntimeProvider`. Make sure you have correctly rendered the
`ReactRuntimeProvider` and are passing a correct value for the `previewMode` (in
v0.24) or `siteVersion` (in `v0.25`+) prop. For more details, see our
installation guides:

* [App Router installation guide](/developer/docs/get-started/installation/app-router)
* [Pages Router installation guide](/developer/docs/get-started/installation/pages-router)

#### Runtime `v0.23` and earlier

For `v0.23` and earlier, the connection is initiated by the `DraftModeScript` or
`PreviewModeScript` components for App Router and Pages Router, respectively.
This message indicates that these components are likely missing from your page.

**App Router**

Make sure you have added the `DraftModeScript` component to the `<head>` of your
page by rendering it in the root layout.

**`src/app/layout.tsx`**

```diff src/app/layout.tsx
import { draftMode } from "next/headers";
+ import { DraftModeScript } from "@makeswift/runtime/next/server";
import { MakeswiftProvider } from "@/makeswift/provider";
import "@/makeswift/components";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
+       <DraftModeScript />
      </head>
      <body>
        <MakeswiftProvider previewMode={(await draftMode()).isEnabled}>
          {children}
        </MakeswiftProvider>
      </body>
    </html>
  );
}
```

**Pages Router**

Make sure you have added the `PreviewModeScript` component to the `<Head>` of the
page by extending the custom document.

**`src/pages/_document.tsx`**

```diff src/pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
+ import { PreviewModeScript } from "@makeswift/runtime/next";
import { Document } from "@makeswift/runtime/next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
+         <PreviewModeScript isPreview={this.props.__NEXT_DATA__.isPreview} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```