temp

examples/wikipedia.ts

@@ -0,0 +1,58 @@
+import { Stagehand } from "../lib";
+import { z } from "zod";
+
+type RandomArticle = {
+  id: number;
+  ns: number;
+  title: string;
+};
+
+async function getRandomArticle() {
+  const response = await fetch(
+    "https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=1&format=json",
+  );
+  const data = await response.json();
+  return {
+    ...(data.query.random[0] satisfies RandomArticle),
+    link: `https://en.wikipedia.org/wiki/${data.query.random[0].title.replace(/ /g, "_")}`,
+  };
+}
+
+async function example() {
+  console.log(" Navigating to Wikipedia...");
+  //   const src = await getRandomArticle();
+  //   const dest = await getRandomArticle();
+
+  const src = {
+    title: "Isiah Thomas",
+    link: "https://en.wikipedia.org/wiki/Isiah_Thomas",
+  };
+
+  const dest = {
+    title: "LeBron James",
+    link: "https://en.wikipedia.org/wiki/LeBron_James",
+  };
+
+  console.log(src, dest);
+  const stagehand = new Stagehand({
+    env: "LOCAL",
+    verbose: 1,
+    debugDom: true,
+    domSettleTimeoutMs: 100,
+  });
+
+  await stagehand.init();
+  await stagehand.page.goto(src.link);
+  await stagehand.act({
+    action: `You are a helpful assistant that can navigate Wikipedia. 
+	You need to navigate from this article to the destination article in the least number of clicks. 
+	The destination article is ${dest.title}. 
+	Click the link to the destination article.
+	If the destination article is not found, click the link that will get you closer to the destination article.
+	Stop when you have reached the destination article.
+	`,
+  });
+}
+(async () => {
+  await example();
+})();

lib/dom/debug.ts

@@ -1,5 +1,3 @@
-import { calculateViewportHeight } from "./utils";
-
 export async function debugDom() {
   window.chunkNumber = 0;
 
@@ -10,7 +8,6 @@ export async function debugDom() {
   const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
 
   drawChunk(selectorMap);
-  setupChunkNav();
 }
 
 function multiSelectorMapToSelectorMap(
@@ -67,7 +64,6 @@ function drawChunk(selectorMap: Record<number, string>) {
 
 async function cleanupDebug() {
   cleanupMarkers();
-  cleanupNav();
 }
 
 function cleanupMarkers() {
@@ -77,74 +73,5 @@ function cleanupMarkers() {
   });
 }
 
-function cleanupNav() {
-  const stagehandNavElements = document.querySelectorAll(".stagehand-nav");
-  stagehandNavElements.forEach((element) => {
-    element.remove();
-  });
-}
-
-function setupChunkNav() {
-  const viewportHeight = calculateViewportHeight();
-  const documentHeight = document.documentElement.scrollHeight;
-  const totalChunks = Math.ceil(documentHeight / viewportHeight);
-
-  if (window.chunkNumber > 0) {
-    const prevChunkButton = document.createElement("button");
-    prevChunkButton.className = "stagehand-nav";
-
-    prevChunkButton.textContent = "Previous";
-    prevChunkButton.style.marginLeft = "50px";
-    prevChunkButton.style.position = "fixed";
-    prevChunkButton.style.bottom = "10px";
-    prevChunkButton.style.left = "50%";
-    prevChunkButton.style.transform = "translateX(-50%)";
-    prevChunkButton.style.zIndex = "1000000000";
-    prevChunkButton.onclick = async () => {
-      cleanupMarkers();
-      cleanupNav();
-      window.chunkNumber -= 1;
-      window.scrollTo(0, window.chunkNumber * viewportHeight);
-      await window.waitForDomSettle();
-      const { selectorMap: multiSelectorMap } = await window.processElements(
-        window.chunkNumber,
-      );
-
-      const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
-
-      drawChunk(selectorMap);
-      setupChunkNav();
-    };
-    document.body.appendChild(prevChunkButton);
-  }
-  if (totalChunks > window.chunkNumber) {
-    const nextChunkButton = document.createElement("button");
-    nextChunkButton.className = "stagehand-nav";
-    nextChunkButton.textContent = "Next";
-    nextChunkButton.style.marginRight = "50px";
-    nextChunkButton.style.position = "fixed";
-    nextChunkButton.style.bottom = "10px";
-    nextChunkButton.style.right = "50%";
-    nextChunkButton.style.transform = "translateX(50%)";
-    nextChunkButton.style.zIndex = "1000000000";
-    nextChunkButton.onclick = async () => {
-      cleanupMarkers();
-      cleanupNav();
-      window.chunkNumber += 1;
-      window.scrollTo(0, window.chunkNumber * viewportHeight);
-      await window.waitForDomSettle();
-
-      const { selectorMap: multiSelectorMap } = await window.processElements(
-        window.chunkNumber,
-      );
-      const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
-      drawChunk(selectorMap);
-      setupChunkNav();
-    };
-
-    document.body.appendChild(nextChunkButton);
-  }
-}
-
 window.debugDom = debugDom;
 window.cleanupDebug = cleanupDebug;

lib/index.ts

@@ -17,7 +17,7 @@
   ExtractResult,
   InitFromPageOptions,
   InitFromPageResult,
   InitOptions,
   InitResult,
   ObserveOptions,
   ObserveResult,
@@ -370,15 +370,9 @@
     this.browserbaseResumeSessionID = browserbaseResumeSessionID;
   }
 
-  async init(
-    /** @deprecated Use constructor options instead */
-    initOptions?: InitOptions,
+  static async init(
+    constructorParams?: ConstructorParams,
   ): Promise<InitResult> {
-    if (initOptions) {
-      console.warn(
-        "Passing parameters to init() is deprecated and will be removed in the next major version. Use constructor options instead.",
-      );
-    }
     const { context, debugUrl, sessionUrl, contextPath, sessionId } =
       await getBrowser(
         this.apiKey,

package.json

@@ -7,6 +7,7 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "2048": "npm run build-dom-scripts && tsx examples/2048.ts",
+    "wikipedia": "npm run build-dom-scripts && tsx examples/wikipedia.ts",
     "example": "npm run build-dom-scripts && tsx examples/example.ts",
     "debug-url": "npm run build-dom-scripts && tsx examples/debugUrl.ts",
     "format": "prettier --write .",

types/act.ts

@@ -1,5 +1,6 @@
 import { Buffer } from "buffer";
 import { LLMClient } from "../lib/llm/LLMClient";
+import { LogLine } from "./log";
 
 export interface ActParams {
   action: string;
@@ -8,7 +9,7 @@ export interface ActParams {
   llmClient: LLMClient;
   screenshot?: Buffer;
   retries?: number;
-  logger: (message: { category?: string; message: string }) => void;
+  logger: (logLine: LogLine) => void;
   requestId: string;
   variables?: Record<string, string>;
 }

types/inference.ts

@@ -1,6 +1,7 @@
 import { Buffer } from "buffer";
 import { LLMClient } from "../lib/llm/LLMClient";
 import { LLMProvider } from "../lib/llm/LLMProvider";
+import { LogLine } from "./log";
 
 export interface VerifyActCompletionParams {
   goal: string;
@@ -9,6 +10,6 @@ export interface VerifyActCompletionParams {
   llmClient: LLMClient;
   screenshot?: Buffer;
   domElements?: string;
-  logger: (message: { category?: string; message: string }) => void;
+  logger: (message: LogLine) => void;
   requestId: string;
 }