diff --git a/docs.json b/docs.json index 2fad98c..c0385d1 100644 --- a/docs.json +++ b/docs.json @@ -83,6 +83,7 @@ "pages": [ "integrations/browser-use", "integrations/magnitude", + "integrations/stagehand", "integrations/valtown", "integrations/vercel" ] diff --git a/integrations/stagehand.mdx b/integrations/stagehand.mdx new file mode 100644 index 0000000..f85896e --- /dev/null +++ b/integrations/stagehand.mdx @@ -0,0 +1,103 @@ +--- +title: "Stagehand" +--- + +[Stagehand](https://github.com/browserbase/stagehand) is an open source AI browser automation framework. It lets developers choose what to write in code vs. natural language. By integrating with Kernel, you can run Stagehand automations with cloud-hosted browsers. + +## Adding Kernel to existing Stagehand implementations + +If you already have a Stagehand implementation, you can easily switch to using Kernel's cloud browsers by updating your browser configuration. + +### 1. Install the Kernel SDK + +```bash +npm install @onkernel/sdk +``` + +### 2. Initialize Kernel and create a browser + +Import the libraries and create a cloud browser session: + +```typescript +import { Stagehand } from "@browserbasehq/stagehand"; +import Kernel from '@onkernel/sdk'; +import { z } from "zod"; + +const client = new Kernel({ + apiKey: process.env.KERNEL_API_KEY +}); + +const kernelBrowser = await client.browsers.create({ stealth: true }); + +console.log("Live view url: ", kernelBrowser.browser_live_view_url); +``` + +### 3. Update your browser configuration + +Replace your existing browser setup to use Kernel's CDP URL: + +```typescript +const stagehand = new Stagehand({ + env: 'LOCAL', + verbose: 1, + domSettleTimeoutMs: 30_000, + modelName: 'openai/gpt-4.1', + modelClientOptions: { + apiKey: process.env.OPENAI_API_KEY + }, + localBrowserLaunchOptions: { + cdpUrl: kernelBrowser.cdp_ws_url + } +}); + +await stagehand.init(); +``` + +### 4. Use your Stagehand automation + +Use Stagehand's page methods with the Kernel-powered browser: + +```typescript +const page = stagehand.page; +await page.goto("https://onkernel.com"); +await page.act("Click on Blog in the navbar"); +await page.act("Click on the newest blog post"); +const output = await page.extract({ + instruction: "Extract a summary of the blog post", + schema: z.object({ summary: z.string() }) +}); + +console.log("Newest blog post summary: ", output.summary); + +await stagehand.close(); + +// Clean up the Kernel Browser Session +await client.browsers.deleteByID(kernelBrowser.session_id); +``` + +## Quick setup with our Stagehand example app + +Alternatively, you can use our Kernel app template that includes a pre-configured Stagehand integration: + +```bash +npx @onkernel/create-kernel-app my-stagehand-app +``` + +Choose `TypeScript` as the programming language and then select `Stagehand` as the template. + +Then follow the [Quickstart guide](/quickstart/) to deploy and run your Stagehand automation on Kernel's infrastructure. + +## Benefits of using Kernel with Stagehand + +- **No local browser management**: Run automations without installing or maintaining browsers locally +- **Scalability**: Launch multiple browser sessions in parallel +- **Stealth mode**: Built-in anti-detection features for web scraping +- **Session persistence**: Maintain browser state across automation runs +- **Live view**: Debug your automations with real-time browser viewing + +## Next steps + +- Check out [live view](/browsers/live-view) for debugging your automations +- Learn about [stealth mode](/browsers/stealth) for avoiding detection +- Learn how to properly [terminate browser sessions](/browsers/termination) +- Learn how to [deploy](/apps/deploy) your Stagehand app to Kernel \ No newline at end of file