# Quickstart

> Register one exact-origin Site, install the SDK, and open the live interface.

Documentation index: https://appnotes.dev/docs/llms.txt

The connected setup has two required parts: AppNotes must know the web origin, and that web app must load the connected SDK.

1. **Register the web app**

   In AppNotes, choose **Add Site** and enter a name, exact origin, and starting URL. An agent can do the same operation through the API.
2. **Install the connected SDK**

   Add the AppNotes package to the registered web app and configure the returned Site ID.
3. **Open the Site from AppNotes**

   AppNotes creates a short-lived launch credential and opens the real web app. The SDK consumes the credential from the URL fragment, removes it before its first request, and keeps it in the browser session.
4. **Place a note**

   Choose **Leave a note**, then select an element. Shift-click up to seven additional elements when one note applies to several elements.

   AppNotes prepares an image of the selected area while you write. Review the preview, then choose **Add note**. Choose **Remove image** if you do not want to include it. An unavailable image does not prevent you from saving the comment.

> **Registration is not installation**
>
> Registering a Site creates the server-side identity and exact-origin boundary. Installing the SDK places the feedback interface in the web app. Connected AppNotes needs both.

## Local mode is shorter

Local mode does not require registration, an account, or a backend:

```ts
import { createAppNotes } from "@plannotator/appnotes";

const appNotes = createAppNotes({ mode: "local" });
await appNotes.mount();
```

## Connected mode

Use the Site ID returned by registration:

```ts
import { createAppNotes } from "@plannotator/appnotes";

const appNotes = createAppNotes({
  mode: "connected",
  siteId: "ansite_01K00000000000000000000000",
});

await appNotes.mount();
```

Downloading the JavaScript never activates AppNotes by itself. The mode must be explicit. Connected mode also stays dormant until it receives a valid launch or browser session.

Next: [install the SDK](/docs/install-sdk), [review shared comments and images](/docs/connected-mode), or [let an agent register the Site](/docs/agents).