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 [blocked] 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 [blocked].

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 [blocked]
3. Change modelClientOptions: { apiKey: process.env.OPENAI_API_KEY } to modelClientOptions: { apiKey: process.env.ANTHROPIC_API_KEY } in stagehand.config.ts [blocked]