Stagehand + Next.js Quickstart

🤘 Welcome to Stagehand Next.js!

Hey! This is a Next.js project built with Stagehand.

You can build your own web agent using: npx create-browser-app!

Setting the Stage

Stagehand is an SDK for automating browsers. It's built directly on top of CDP and provides a higher-level API for better debugging and AI fail-safes.

Curtain Call

Get ready for a show-stopping development experience. Just run:

1
pnpm install && pnpm dev

What's Next?

Add your API keys

This project defaults to using OpenAI, so it's going to throw a fit if you don't have an OpenAI API key.

To use Anthropic (or other LLMs), you'll need to edit stagehand.config.ts to use the appropriate API key.

You'll also want to set your Browserbase API key and project ID to run this project in the cloud.

1
cp .example.env .env # Add your API keys to .env

Custom .cursorrules

We have custom .cursorrules for this project. It'll help quite a bit with writing Stagehand easily.

Run on Browserbase

To run on Browserbase, add your API keys to .env and change env: "LOCAL" to env: "BROWSERBASE" in stagehand.config.ts.

Use Anthropic Claude 4.5 Sonnet

1. Add your API key to .env
2. Change modelName: "gpt-4o" to modelName: "claude-sonnet-4-5" in stagehand.config.ts
3. Change modelClientOptions: { apiKey: process.env.OPENAI_API_KEY } to modelClientOptions: { apiKey: process.env.ANTHROPIC_API_KEY } in stagehand.config.ts