Cdp layer

.gitignore

@@ -7,7 +7,7 @@ yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 tmp
-debug
+/debug
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

README.md

@@ -136,7 +136,7 @@ await page.aiAction("click the login button");
 **Best for**: Complex workflows requiring multiple steps and visual context
 
 **Advantages**:
-- 🖼️ **Visual Understanding** - Uses screenshots with element overlays
+- 🖼️ **Visual Understanding** - Can use screenshots with element overlays
 - 🎭 **Complex Tasks** - Handles multi-step workflows automatically
 - 🧠 **Context-Aware** - Better at understanding page layout and relationships
 - 🔄 **Adaptive** - Can adjust strategy based on page state
@@ -370,6 +370,16 @@ const agent = new HyperAgent({
 });
 ```
 
+## CDP First
+
+HyperAgent speaks Chrome DevTools Protocol natively. Element lookup, scrolling, typing, frame management, and screenshots all go through CDP so every action has exact coordinates, execution contexts, and browser events. This allows for more custom commands and deep iframe tracking.
+
+HyperAgent integrates seamlessly with Playwright, so you can still use familiar commands, while the actions take full advantage of native CDP protocol with fast locators and advanced iframe tracking.
+
+Keep in mind that CDP is still experimental, and stability is not guaranteed. If you’d like the agent to use Playwright’s native locators/actions instead, set `cdpActions: false` when you create the agent and it will fall back automatically.
+
+The CDP layer is still evolving—expect rapid polish (and the occasional sharp edge). If you hit something quirky you can toggle CDP off for that workflow and drop us a bug report.
+
 ## Contributing
 
 We welcome contributions to Hyperagent! Here's how you can help:

examples/output-to-schema/output-to-schema.ts

@@ -40,7 +40,18 @@ async function runEval() {
       provider: "openai",
       model: "gpt-4o",
     },
-    debug: true,
+    // llm: {
+    //   provider: "anthropic",
+    //   model: "claude-sonnet-4-0",
+    // },
+    // debug: true,
+    browserProvider: "Hyperbrowser",
+    cdpActions: true,
+    debugOptions: {
+      cdpSessions: true,
+      traceWait: true,
+      profileDomCapture: true,
+    },
   });
 
   await sleep(1000);
@@ -60,6 +71,8 @@ async function runEval() {
       releaseYear: z.number().describe("The year the movie was released"),
       rating: z.string().describe("The IMDb rating of the movie"),
     }),
+    useDomCache: true,
+    // enableVisualMode: true,
   });
   await agent.closeAgent();
   console.log(chalk.green.bold("\nResult:"));

package.json

@@ -37,7 +37,7 @@
     "ai"
   ],
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.68.0",
+    "@anthropic-ai/sdk": "^0.69.0",
     "@google/genai": "^1.28.0",
     "@hyperbrowser/sdk": "^0.46.0",
     "@inquirer/prompts": "^7.4.1",

scripts/gasPrice.ts

@@ -25,6 +25,12 @@ async function runWorkflow() {
         model: "claude-sonnet-4-0",
       },
       debug: true,
+      cdpActions: true,
+      debugOptions: {
+        cdpSessions: true,
+        traceWait: true,
+        profileDomCapture: true,
+      },
     });
 
     // Get the page instance
@@ -64,18 +70,18 @@ async function runWorkflow() {
     await page.aiAction(`click the Gas button`);
 
     // Scroll: Scrolled down 300 pixels
-    await page.aiAction(`Scroll down 300 pixels`);
+    await page.aiAction(`Scroll down to bottom`);
 
     // Scroll: Scrolled down 500 pixels
-    await page.aiAction(`Scroll down 500 pixels`);
+    await page.aiAction(`Scroll down to bottom`);
 
     // Scroll: Scrolled down 800 pixels
-    await page.aiAction(`Scroll down 800 pixels`);
+    await page.aiAction(`Scroll down to bottom`);
 
     // Step 11: Extract data
-    console.log(
-      `Extracting: Extract all gas stations shown in the results list with their names, addresses, and regular gas prices per gallon`
-    );
+    // console.log(
+    //   `Extracting: Extract all gas stations shown in the results list with their names, addresses, and regular gas prices per gallon`
+    // );
     // const extractedData11 = await page.extract({
     //   instruction: `Extract all gas stations shown in the results list with their names, addresses, and regular gas prices per gallon`,
     //   schema: z.object({