diff --git a/README.md b/README.md index 9fa97f17..89017795 100644 --- a/README.md +++ b/README.md @@ -39,12 +39,16 @@ 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 @@ -52,11 +56,11 @@ 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: Screenshot 2026-02-21 at 15 02 58 -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: @@ -64,6 +68,35 @@ Then, in your dev version of DataConnect (likely built from the `main` branch) y --- +## 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 index 9596a00f..98d9c7c1 100644 --- 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 index 57572782..717dde38 100644 --- 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 index 004e260b..7b9c0952 100644 --- 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 index 4073d463..9220605c 100644 --- 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, });