ScreenLab SDK

Prerequisites

Step 1 — Create API Credentials

After your plan is active, generate a publishable key from your profile:

https://buildvr.ai/profile/api-credentials

Add Allowed Domains

The SDK validates requests against a list of domains you pre-register. You must add every origin that will load the SDK — including local development hosts.

Type each domain into the input field separated by commas:

localhost:3000, localhost:5173, 127.0.0.1:3000, yourdomain.app

Save Your Publishable Key

Once the domain list is saved, copy the generated key. You will pass it as clientId when initialising the SDK. Keep it in a client-safe location — it is a publishable key designed for front-end use, but never commit it to a public repository without environment variable protection.

Step 2 — Install the Package

Install the latest stable release from npm:

npm install @buildvr/screenlab-sdk

yarn add @buildvr/screenlab-sdk

pnpm add @buildvr/screenlab-sdk

Full changelog and release notes: npmjs.com/package/@buildvr/screenlab-sdk

Step 3 — Integrate into Your App

The SDK exposes two exports: a default ScreenLab object for initialisation and a ScreenLabPanel React component that renders the full interactive panel.

import { useEffect, useState } from "react";
import ScreenLab from "@buildvr/screenlab-sdk";
import { ScreenLabPanel } from "@buildvr/screenlab-sdk/panel";
import "@buildvr/screenlab-sdk/panel/style.css";

export default function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    ScreenLab.init({ clientId: "YOUR_CLIENT_ID" })
      .then(() => setReady(true))
      .catch((err) => console.error("ScreenLab init failed:", err));
  }, []);

  if (!ready) return <div>Loading…</div>;

  return <ScreenLabPanel />;
}

Using Environment Variables

Store your key in a .env file and reference it at build-time. Never commit .env files that contain secrets to version control.

NEXT_PUBLIC_SCREENLAB_CLIENT_ID=pk_live_xxxxxxxxxxxx

VITE_SCREENLAB_CLIENT_ID=pk_live_xxxxxxxxxxxx

// Next.js
ScreenLab.init({ clientId: process.env.NEXT_PUBLIC_SCREENLAB_CLIENT_ID })

// Vite
ScreenLab.init({ clientId: import.meta.env.VITE_SCREENLAB_CLIENT_ID })

How It Works

1. ScreenLab.init() validates your publishable key against the domain allowlist you configured. Requests from un-listed origins are rejected before any UI renders.
2. ScreenLabPanel mounts a self-contained React component that loads the full ScreenLab experience — screen types, video preview, and configuration controls — inside your app.
3. The SDK communicates with BuildVR servers on your behalf; no additional backend code is required.

Domain Configuration — Common Issues

"localhost:3000"       ✓   (React dev server)
"localhost:5173"       ✓   (Vite dev server)
"127.0.0.1:3000"       ✓   (explicit loopback)
"app.yourdomain.com"   ✓   (production subdomain)

"http://localhost:3000"  ✗   (no protocol prefix)
"localhost"              ✗   (missing port)

Next Steps