vana-com · maciejwitowski · Feb 21, 2026
diff --git a/README.md b/README.md
@@ -39,31 +39,64 @@ git clone https://github.com/vana-com/vana-connect.git
 cd vana-connect/examples/nextjs-starter
 cp .env.local.example .env.local
 ```
+
 Use the pre-registered dev key in .env.local. Note that this private key is ONLY for testing and works only with a testing Vana environment.
+
 ```
 VANA_PRIVATE_KEY=0x3c05ac1a00546bc0b1b8d3a11fb908409005fac3f26d25f70711e4f632e720d3
 APP_URL=http://localhost:3001
 ```
+
 Install and run
+
 ```
 pnpm install
 pnpm dev
 ```
 
 Note that while testing this example app, you should have a development version of the [DataConnect app](https://github.com/vana-com/data-connect?tab=readme-ov-file#development).
 
-There is one caveat in development: the deep-link for DataConnect app doesn't open the dev version of the app. 
+There is one caveat in development: the deep-link for DataConnect app doesn't open the dev version of the app.
 This means that when testing your app from the end user perspective, once you see this screen:
 <img width="627" height="560" alt="Screenshot 2026-02-21 at 15 02 58" src="https://github.com/user-attachments/assets/477ae78f-d84d-4178-a1e9-48abedf36946" />
 
-Instead of clicking the "Launch DataConnect" button, you should right-click on it and copy its address. The address will be something like `vana://connect?sessionId`. 
+Instead of clicking the "Launch DataConnect" button, you should right-click on it and copy its address. The address will be something like `vana://connect?sessionId=...`.
 
 Then, in your dev version of DataConnect (likely built from the `main` branch) you will see a place to copy the link in the right-bottom corner of the app:
 
 <img width="348" height="258" alt="Screenshot 2026-02-21 at 15 09 18" src="https://github.com/user-attachments/assets/9f9d7a14-c92e-4185-bdc2-a2d93282c748" />
 
 ---
 
+## Switching to Production
+
+The starter and SDK default to the **dev** environment for local development. When you're ready to go live:
+
+1. **Install the SDK from npm.** The starter uses `"workspace:*"` to link the local SDK source. For production, switch to the published package in `package.json`:
+
+   ```diff
+   -"@opendatalabs/connect": "workspace:*"
+   +"@opendatalabs/connect": "^0.6.0"
+   ```
+
+   Then run `pnpm install`.
+
+2. **Set the environment variable** in `.env.local`:
+
+   ```
+   NEXT_PUBLIC_VANA_ENV=prod
+   ```
+
+   This switches the SDK to use the production session relay (`session-relay.vana.org`) and `account.vana.org`.
+
+3. **Use the release build of Data Connect.** Dev sessions work with a locally-running Data Connect, but production sessions are handled by the release version of the [Data Connect desktop app](https://vana.org). Users will need this installed to complete the connect flow.
+
+4. **Register your app** at [account.vana.org/build](https://account.vana.org/build). Your `VANA_PRIVATE_KEY` must correspond to an address registered on the production Vana Gateway (the pre-registered dev key won't work).
+
+5. **Deploy your app** so that `APP_URL` points to a publicly-reachable URL. The Data Connect app fetches your `/manifest.json` to verify your identity — this won't work with `localhost` in production.
+
+---
+
 ## Manual integration
 
 If you prefer to integrate the SDK into an existing project, follow the steps below.

diff --git a/examples/nextjs-starter/.env.local.example b/examples/nextjs-starter/.env.local.example
@@ -1,3 +1,4 @@
 VANA_PRIVATE_KEY=0x...              # Builder key, must be registered on-chain
 APP_URL=http://localhost:3001       # Public URL of your deployed app
 VANA_SCOPES=chatgpt.conversations   # Comma-separated scopes
+NEXT_PUBLIC_VANA_ENV=dev            # "dev" or "prod"
diff --git a/examples/nextjs-starter/README.md b/examples/nextjs-starter/README.md
@@ -7,7 +7,9 @@ Minimal Next.js app demonstrating the Vana Connect flow. Shows the server-side S
 - A builder address registered on-chain via the Vana Gateway
 - A running Personal Server with `VANA_MASTER_KEY_SIGNATURE` set
 
-## Setup
+## Setup (Development)
+
+The starter defaults to the **dev** environment, which uses the dev session relay and `account-dev.vana.org`. This lets you iterate locally without affecting production.
 
 ```bash
 cp .env.local.example .env.local
@@ -18,13 +20,18 @@ pnpm dev   # Opens on http://localhost:3001
 
 ## Environment Variables
 
-| Variable           | Required | Description                             |
-| ------------------ | -------- | --------------------------------------- |
-| `VANA_PRIVATE_KEY` | Yes      | Builder private key registered on-chain |
-| `APP_URL`          | Yes      | Public URL of your deployed app         |
+| Variable               | Required | Description                             |
+| ---------------------- | -------- | --------------------------------------- |
+| `VANA_PRIVATE_KEY`     | Yes      | Builder private key registered on-chain |
+| `APP_URL`              | Yes      | Public URL of your deployed app         |
+| `NEXT_PUBLIC_VANA_ENV` | No       | `dev` or `prod` (defaults to `prod`)    |
 
 > Scopes are configured in `src/config.ts`. Edit the `SCOPES` array to change which user data your app requests.
 
+## Switching to Production
+
+See [Switching to Production](../../README.md#switching-to-production) in the main README.
+
 ## Web App Manifest
 
 The app serves a W3C Web App Manifest at `/manifest.json` containing a signed `vana` block. The Desktop App uses this to verify the builder's identity. The manifest is generated dynamically using `signVanaManifest()` from the SDK, which signs the vana block fields with EIP-191 using your `VANA_PRIVATE_KEY`.

diff --git a/examples/nextjs-starter/src/components/ConnectFlow.tsx b/examples/nextjs-starter/src/components/ConnectFlow.tsx
@@ -6,7 +6,13 @@
 
 import { useEffect, useRef } from "react";
 import { useVanaData } from "@opendatalabs/connect/react";
-import type { ConnectionStatus } from "@opendatalabs/connect/core";
+import type {
+  ConnectionStatus,
+  VanaEnvironment,
+} from "@opendatalabs/connect/core";
+
+const VANA_ENV = (process.env.NEXT_PUBLIC_VANA_ENV ??
+  "prod") as VanaEnvironment;
 
 const STATUS_DISPLAY: Record<
   ConnectionStatus,
@@ -39,7 +45,7 @@ export default function ConnectFlow() {
     initConnect,
     fetchData,
     isLoading,
-  } = useVanaData();
+  } = useVanaData({ environment: VANA_ENV });
 
   const initRef = useRef(false);
   useEffect(() => {

diff --git a/examples/nextjs-starter/src/config.ts b/examples/nextjs-starter/src/config.ts
@@ -1,10 +1,15 @@
 import { createVanaConfig } from "@opendatalabs/connect/server";
+import type { VanaEnvironment } from "@opendatalabs/connect/core";
 
 // Scopes define what user data your app requests.
 const SCOPES = ["chatgpt.conversations"];
 
+export const VANA_ENV = (process.env.NEXT_PUBLIC_VANA_ENV ??
+  "prod") as VanaEnvironment;
+
 export const config = createVanaConfig({
   privateKey: process.env.VANA_PRIVATE_KEY as `0x${string}`,
   scopes: SCOPES,
   appUrl: process.env.APP_URL!,
+  environment: VANA_ENV,
 });