Stagehand Research Agent

Demo | Browserbase | Stagehand

An AI-powered research agent that runs 5 parallel browser sessions to search the web in real-time. Watch AI agents browse Google, Wikipedia, YouTube, Hacker News, and Google News simultaneously, then synthesize findings into a comprehensive summary.

Deploy

Deploy this template to Vercel with one click. The Vercel Marketplace will automatically prompt you to set up Browserbase.

Features

• Parallel Browser Sessions: 5 browsers run simultaneously, each researching a different source
• Live Browser Views: Watch AI agents navigate the web in real-time
• Multi-Source Research: Searches Google, Wikipedia, YouTube, Hacker News, and Google News
• AI-Powered Extraction: Uses Claude to intelligently extract relevant information from pages
• Smart Synthesis: Combines findings into a structured, comprehensive summary
• Real-time Streaming: Server-Sent Events deliver results as they're discovered

Tech Stack

Frontend

• Framework: Next.js 15 with React 19 and TypeScript
• Styling: Tailwind CSS 4
• Markdown: ReactMarkdown for rendering summaries

Backend

• AI Model: Claude Sonnet via Vercel AI Gateway
• Browser Automation: Stagehand + Browserbase
• Streaming: Server-Sent Events (SSE)
• Runtime: Next.js API Routes with 300s max duration

Infrastructure

• Browser Infrastructure: Browserbase cloud browsers
• AI Gateway: Vercel AI Gateway
• Deployment: Vercel

Prerequisites

• Node.js 18.x or later
• npm, yarn, pnpm, or bun
• Browserbase account and API key
• Vercel AI Gateway API key

Getting Started

1. Clone the repository

1
git clone https://github.com/browserbase/browserbase-nextjs-template
2
cd research-agent-template

2. Install dependencies

1
npm install
2
# or
3
pnpm install

3. Configure environment variables

1
cp .env.example .env.local

Edit .env.local with your API keys:

1
# Vercel AI Gateway API Key
2
# Get yours at: https://vercel.com/docs/ai-gateway
3
AI_GATEWAY_API_KEY=your_ai_gateway_key
4

5
# Browserbase (for cloud browser sessions)
6
# Get yours at: https://browserbase.com
7
BROWSERBASE_PROJECT_ID=your_project_id
8
BROWSERBASE_API_KEY=your_api_key

4. Start the development server

1
npm run dev

5. Open your browser

Navigate to http://localhost:3000

Environment Variables

Usage

1. Enter a Query: Type any research question or select from example queries:

   • "What is quantum computing?"
   • "Latest developments in AI"
   • "How does blockchain work?"

2. Watch the Research: See 5 browser windows researching in parallel, each exploring a different source

3. Get Results: Receive findings from each source as they complete, followed by an AI-synthesized summary

How It Works

1. Session Creation: Creates 5 parallel Stagehand sessions on Browserbase
2. Parallel Research: Each session navigates to a different source (Google, Wikipedia, etc.)
3. AI Extraction: Claude extracts relevant information from each page using structured schemas
4. Real-time Streaming: Findings stream to the frontend as SSE events
5. Synthesis: Claude combines all findings into a formatted summary

Available Scripts

1
# Development server
2
npm run dev
3

4
# Production build
5
npm run build
6

7
# Start production server
8
npm run start
9

10
# Lint code
11
npm run lint

Project Structure

1
├── app/
2
│   ├── api/
3
│   │   └── research/
4
│   │       └── route.ts      # Research API with parallel Stagehand sessions
5
│   ├── components/           # React components
6
│   ├── context/              # Research context provider
7
│   ├── results/              # Results page
8
│   ├── page.tsx              # Home page
9
│   └── layout.tsx            # Root layout
10
├── public/                   # Static assets
11
└── .env.example              # Environment variables template

License

MIT

Acknowledgments

• Browserbase - Cloud browser infrastructure
• Stagehand - AI-powered browser automation
• Vercel - Hosting and AI Gateway
• Anthropic - Claude AI model