improve examples

Author: maticzav

examples/.env.example

@@ -0,0 +1,5 @@
+# Browser Use API Key
+BROWSER_USE_API_KEY=""
+
+# Webhook Verification Secret key
+SECRET_KEY=""

examples/demo.ts

@@ -1,7 +1,10 @@
 #!/usr/bin/env -S npm run tsn -T
 
 import { BrowserUse } from 'browser-use-sdk';
-import { spinner } from './utils';
+
+import { env, spinner } from './utils';
+
+env();
 
 // gets API Key from environment variable BROWSER_USE_API_KEY
 const browseruse = new BrowserUse();

examples/stream-zod.ts

@@ -3,6 +3,10 @@
 import { BrowserUse } from 'browser-use-sdk';
 import z from 'zod';
 
+import { env } from './utils';
+
+env();
+
 const HackerNewsResponse = z.object({
   title: z.string(),
   url: z.string(),

examples/stream.ts

@@ -2,6 +2,10 @@
 
 import { BrowserUse } from 'browser-use-sdk';
 
+import { env } from './utils';
+
+env();
+
 async function main() {
   // gets API Key from environment variable BROWSER_USE_API_KEY
   const browseruse = new BrowserUse();

examples/utils.ts

@@ -1,3 +1,5 @@
+import dotenv from '@dotenvx/dotenvx';
+
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 
 /**
@@ -26,3 +28,7 @@ export function spinner(renderText: () => string): () => void {
     }
   };
 }
+
+export function env() {
+  dotenv.config({ path: [__dirname + '/.env', '.env'] });
+}

examples/webhook.ts

@@ -7,12 +7,16 @@ import {
 } from 'browser-use-sdk/lib/webhooks';
 import { createServer, IncomingMessage, type Server, type ServerResponse } from 'http';
 
+import { env } from './utils';
+
+env();
+
 const PORT = 3000;
-const WAIT_FOR_TASK_FINISH_TIMEOUT = 30_000;
+const WAIT_FOR_TASK_FINISH_TIMEOUT = 60_000;
 
 // Environment ---------------------------------------------------------------
 
-const WEBHOOK_SECRET = process.env['WEBHOOK_SECRET'];
+const SECRET_KEY = process.env['SECRET_KEY'];
 
 // API -----------------------------------------------------------------------
 
@@ -24,8 +28,8 @@ const browseruse = new BrowserUse();
 const whServerRef: { current: Server | null } = { current: null };
 
 async function main() {
-  if (!WEBHOOK_SECRET) {
-    console.error('WEBHOOK_SECRET is not set');
+  if (!SECRET_KEY) {
+    console.error('SECRET_KEY is not set');
     process.exit(1);
   }
 
@@ -58,7 +62,7 @@ async function main() {
               timestamp,
             },
             {
-              secret: WEBHOOK_SECRET,
+              secret: SECRET_KEY,
             },
           );
 
@@ -67,7 +71,7 @@ async function main() {
             console.log(body);
             console.log(signature, 'signature');
             console.log(timestamp, 'timestamp');
-            console.log(WEBHOOK_SECRET, 'WEBHOOK_SECRET');
+            console.log(SECRET_KEY, 'SECRET_KEY');
 
             res.writeHead(401, { 'Content-Type': 'application/json' });
             res.end(JSON.stringify({ error: 'Invalid signature' }));

examples/zod.ts

@@ -2,7 +2,10 @@
 
 import { BrowserUse } from 'browser-use-sdk';
 import { z } from 'zod';
-import { spinner } from './utils';
+
+import { env, spinner } from './utils';
+
+env();
 
 // gets API Key from environment variable BROWSER_USE_API_KEY
 const browseruse = new BrowserUse();

package.json

@@ -23,6 +23,7 @@
     "format": "./scripts/format",
     "prepare": "if ./scripts/utils/check-is-in-git-install.sh; then ./scripts/build && ./scripts/utils/git-swap.sh; fi",
     "tsn": "ts-node -r tsconfig-paths/register",
+    "cli": "ts-node -r tsconfig-paths/register --cwd $PWD ./src/lib/bin/cli.ts",
     "lint": "./scripts/lint",
     "fix": "./scripts/format"
   },

src/lib/bin/auth.ts

@@ -2,32 +2,62 @@ import * as dotenv from '@dotenvx/dotenvx';
 
 import { BrowserUse } from '../../';
 
-const ENV_VAR_KEY = 'BROWSER_USE_API_KEY';
+const API_KEY_ENV_VAR_KEY = 'BROWSER_USE_API_KEY';
 
 /**
  * Creates a new BrowserUse client with the API key from the environment variable.
  */
 export function createBrowserUseClient() {
   let apiKey: string | null = null;
 
-  if (process.env[ENV_VAR_KEY]) {
-    apiKey = process.env[ENV_VAR_KEY];
+  if (process.env[API_KEY_ENV_VAR_KEY]) {
+    apiKey = process.env[API_KEY_ENV_VAR_KEY];
   }
 
   if (apiKey == null) {
     const env = dotenv.config({ path: '.env' });
 
-    const envApiKey = env.parsed?.[ENV_VAR_KEY];
+    const envApiKey = env.parsed?.[API_KEY_ENV_VAR_KEY];
 
     if (envApiKey) {
       apiKey = envApiKey;
     }
   }
 
   if (apiKey == null) {
-    console.error(`Missing BROWSER_USE_API_KEY environment variable!`);
+    console.error(`Missing ${API_KEY_ENV_VAR_KEY} environment variable!`);
     process.exit(1);
   }
 
   return new BrowserUse({ apiKey });
 }
+
+const SECRET_ENV_VAR_KEY = 'SECRET_KEY';
+
+/**
+ * Loads the Browser Use webhook secret from the environment variable.
+ */
+export function getBrowserUseWebhookSecret() {
+  let secret: string | null = null;
+
+  if (process.env[SECRET_ENV_VAR_KEY]) {
+    secret = process.env[SECRET_ENV_VAR_KEY];
+  }
+
+  if (secret == null) {
+    const env = dotenv.config({ path: '.env' });
+
+    const envSecret = env.parsed?.[SECRET_ENV_VAR_KEY];
+
+    if (envSecret) {
+      secret = envSecret;
+    }
+  }
+
+  if (secret == null) {
+    console.error(`Missing ${SECRET_ENV_VAR_KEY} environment variable!`);
+    process.exit(1);
+  }
+
+  return secret;
+}

src/lib/bin/commands/listen.ts

@@ -2,7 +2,7 @@ import { Command } from 'commander';
 
 import { BrowserUse } from '../../../';
 import { createWebhookSignature, Webhook } from '../../webhooks';
-import { createBrowserUseClient } from '../auth';
+import { createBrowserUseClient, getBrowserUseWebhookSecret } from '../auth';
 
 // NOTE: We perform task list refresh to get all running tasks and then
 const tickRef: {
@@ -13,22 +13,14 @@ const tickRef: {
 export const listen = new Command('listen')
   .description(`Open a local webhook to receive Cloud API updates from the CLI on your local machine.`)
   .option('-d, --dev <endpoint>', 'The endpoint to forward updates to.')
-  .option('--secret <secret>', 'The secret to use for webhook signature verification.')
   .action(async (options) => {
-    //
-
-    const { secret } = options;
-
-    if (secret == null) {
-      console.error('Missing --secret option');
-      process.exit(1);
-    }
-
-    //
     // Auth
+
     const client = createBrowserUseClient();
+    const secret = getBrowserUseWebhookSecret();
 
     // Proxy
+
     const { dev: localTargetEndpoint } = options;
 
     if (typeof localTargetEndpoint !== 'string') {