feat(vercel-puppeteer): migrate form API to Stagehand v3

examples/integrations/vercel/vercel-puppeteer/app/api/form/route.ts

@@ -1,54 +1,42 @@
 import { NextResponse } from "next/server";
 import Browserbase from "@browserbasehq/sdk";
-import { Stagehand, ObserveResult, LogLine } from "@browserbasehq/stagehand";
+import { Stagehand, type Action } from "@browserbasehq/stagehand";
+import type { Page as PlaywrightPage } from "playwright-core";
 
-// API route handler for GET requests
 export async function GET() {
   try {
     const url = "https://file.1040.com/estimate/";
-
-    if (!url) {
-      return NextResponse.json({ error: "URL is required" }, { status: 400 });
-    }
 
-    // Create a Browserbase instance
     const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });
 
-    // Create a session
     const session = await bb.sessions.create({
       projectId: process.env.BROWSERBASE_PROJECT_ID!,
       browserSettings: {
         viewport: { width: 1920, height: 1080 },
       },
     });
 
-    // Initialize Stagehand
     const stagehand = new Stagehand({
       env: "BROWSERBASE",
-      modelName: "claude-3-5-sonnet-20240620",
+      apiKey: process.env.BROWSERBASE_API_KEY!,
+      projectId: process.env.BROWSERBASE_PROJECT_ID!,
+      model: "anthropic/claude-sonnet-4-6",
       browserbaseSessionID: session.id,
-      logger: (logLine: LogLine) => {
-        console.log(`[${logLine.category}] ${logLine.message}`);
-      },
     });
     await stagehand.init();
 
-    // Block manifest worker to prevent PWA installation popup if needed
-    await stagehand.page.route("**/manifest.json", (route) => route.abort());
+    const page = stagehand.context.pages()[0] as unknown as PlaywrightPage;
 
-    // Go to the provided URL and wait for it to load
-    await stagehand.page.goto(url, {
+    await page.route("**/manifest.json", (route) => route.abort());
+
+    await page.goto(url, {
       waitUntil: "domcontentloaded",
     });
 
-    // Observe the form fields with suggested actions
-    const observed = await stagehand.page.observe({
-      instruction:
-        "fill all the form fields in the page with mock data. In the description include the field name",
-      returnAction: true,
-    });
+    const observed = await stagehand.observe(
+      "fill all the form fields in the page with mock data. In the description include the field name"
+    );
 
-    // Create a mapping of keywords in the form fields to standardize field names
     const mapping = (description: string): string | null => {
       const keywords: { [key: string]: string[] } = {
         age: ["old", "age"],
@@ -74,7 +62,6 @@ export async function GET() {
       return null;
     };
 
-    // Sample data for form filling
     const userInputs: { [key: string]: string } = {
       age: "26",
       dependentsUnder17: "1",
@@ -91,40 +78,33 @@ export async function GET() {
       zip: "12345",
     };
 
-    // Map observed fields to user inputs
-    const updatedFields = observed.map((candidate: ObserveResult) => {
+    const updatedFields = observed.map((candidate: Action) => {
       const key = mapping(candidate.description);
       if (key && userInputs[key]) {
         candidate.arguments = [userInputs[key]];
       }
       return candidate;
     });
 
-    // Fill all the form fields with the mapped candidates
     for (const candidate of updatedFields) {
-      await stagehand.page.act(candidate);
+      await stagehand.act(candidate);
     }
 
-    // Return the results
     console.log(updatedFields);
 
-    // Close the browser
     await stagehand.close();
 
-    // Return the url and the fields that were filled
     return NextResponse.json({
       url: url,
-      fields: updatedFields.map((field) => ({
+      fields: updatedFields.map((field: Action) => ({
         name: field.description,
         value: field.arguments?.[0] || null,
       })),
       count: updatedFields.length,
     });
   } catch (error) {
-    // Log the error to console
     console.error("Form filling error:", error);
 
-    // Return error response with message and error details
     return NextResponse.json(
       {
         message: "Failed to fill form",

examples/integrations/vercel/vercel-puppeteer/app/api/screenshot/route.ts

@@ -39,7 +39,7 @@ export async function GET(req: Request) {
     headers.set("Content-Length", screenshot.byteLength.toString());
 
     // Return screenshot as binary response
-    return new NextResponse(screenshot, { status: 200, headers });
+    return new NextResponse(Buffer.from(screenshot), { status: 200, headers });
   } catch (error) {
     console.error("Screenshot generation error:", error);
     return NextResponse.json(