---
title: "Stagehand + Next.js Quickstart"
description: "Stagehand extends the power of Playwright, allowing you to reliably automate browsers in natural language. "
url: "https://vercel.com/templates/next.js/stagehand-next-js-quickstart"
links:
  repository: "https://github.com/browserbase/stagehand-nextjs-quickstart"
  demo: "https://stagehand-nextjs-quickstart.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Stagehand+%2B+Next.js+Quickstart&demo-description=Stagehand+extends+the+power+of+Playwright%2C+allowing+you+to+reliably+automate+browsers+in+natural+language.+&demo-url=https%3A%2F%2Fstagehand-nextjs-quickstart.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5DnEUXPfaCjzS5uVtjzQYl%2F59219bae23dfd0eef25e276a701d8ae7%2Fthumbnail.png&project-name=Stagehand+%2B+Next.js+Quickstart&repository-name=stagehand-next-js-quickstart&repository-url=https%3A%2F%2Fgithub.com%2Fbrowserbase%2Fstagehand-nextjs-quickstart&from=templates&skippable-integrations=1"
---

# Stagehand + Next.js Quickstart

Stagehand extends the power of Playwright, allowing you to reliably automate browsers in natural language.

# 🤘 Welcome to Stagehand Next.js!

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbrowserbase%2Fstagehand-nextjs-quickstart&env=BROWSERBASE_API_KEY,BROWSERBASE_PROJECT_ID&envDescription=Browserbase%20credentials%20for%20browser%20sessions%20and%20Model%20Gateway&project-name=stagehand-nextjs&repository-name=stagehand-nextjs)

Hey! This is a Next.js project built with [Stagehand](https://github.com/browserbase/stagehand).

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

## Setting the Stage

Stagehand is an SDK for automating browsers. This quickstart uses Stagehand 4.1.0, with browser creation through `browserbase.launch()` or `localBrowser.launch()` and AI operations through `Stagehand.create()`.

## Curtain Call

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

```bash
pnpm install && pnpm dev
```

## What's Next?

### Add your API keys

This project uses Browserbase Model Gateway. Set `BROWSERBASE_API_KEY` and `BROWSERBASE_PROJECT_ID`; no separate OpenAI key is required.

```bash
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 set `browserConfig.env` to `"BROWSERBASE"` in [stagehand.config.ts](https://github.com/browserbase/stagehand-nextjs-quickstart/tree/main/stagehand.config.ts).

### Choose a model

By default, Model Gateway chooses the model. To select one explicitly, add a `model` object with a supported provider-prefixed `modelName` to `stagehand.config.ts`. Model Gateway uses your Browserbase API key.

### Live demo lifecycle

The `/api/stagehand` POST route streams the session ID and debugger URL to the page while the demo runs. It creates the browser with the Stagehand v4 extension, uses Zod v4 schemas and the `data` returned by `extract()` and `observe()`, and closes both Stagehand and the browser when finished or when a run fails.

### Validation

Run `pnpm typecheck`, `pnpm lint`, `pnpm test`, and `pnpm build`. The regression tests mock Browserbase and cover locator fallback, failed actions, session streaming, and browser cleanup, including client disconnection. 

The demo navigates to `https://docs.stagehand.dev/` to extract and follow its quickstart link.

## Related Templates

### [Bot Detection with Botd](https://vercel.com/templates/next.js/bot-protection-botd)

Botd is a browser library for bot detection. In this template we'll be using it alongside botd-integrations for bot detection at the edge.

### [AgentGPT - AI Agents with Langchain & OpenAI](https://vercel.com/templates/next.js/agent-gpt)

Assemble, configure, and deploy autonomous AI Agents in your browser, using Langchain, OpenAI, AutoGPT and T3 Stack.

### [Chatbot UI](https://vercel.com/templates/next.js/chatbot-ui)

A ChatGPT clone for running locally in your browser.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.