Notte Research Agent

A Next.js template that spins up 5 parallel browser sessions on Notte, scrapes structured data from each source, and synthesizes the results into a final summary using Claude Sonnet 4.5.

Watch AI agents browse the web in real-time across Google News, Hacker News, YouTube, Wikipedia, and DuckDuckGo, with live CDP viewers embedded in the page.

Features

• 5 parallel browsers via the Notte SDK, with sequential fallback for low-tier plans
• Structured extraction with Zod schemas using session.scrape({ response_format })
• Live CDP viewers embedded as iframes per source
• SSE streaming of findings as they arrive
• AI synthesis of all findings into a final summary via @ai-sdk/anthropic

Getting started

1. Install

npm install

2. Set environment variables

Copy .env.example to .env.local and fill in the values:

cp .env.example .env.local

Two variables are required:

• NOTTE_API_KEY - get one at console.notte.cc
• ANTHROPIC_API_KEY - get one at console.anthropic.com

3. Run

npm run dev

Open http://localhost:3000 and submit a query.

Notte plan requirements

Running all 5 sources in parallel requires a Notte plan with at least 5 concurrent browser sessions. On free-tier accounts the template automatically falls back to sequential mode (one source at a time). Upgrade your plan at console.notte.cc for the parallel experience.

Architecture

app/
├── api/research/route.ts        SSE pipeline: 5 Notte sessions, scrape per source, synthesize
├── context/ResearchContext.tsx  Client-side SSE consumer + research state
├── components/                  UI (search bar, live grid, session card, finding card, ...)
├── lib/embed-url.ts             Helper that builds the iframe-safe Notte CDP viewer URL
├── page.tsx                     Landing page with search + example queries
└── results/page.tsx             Live research view with iframe grid + findings + summary

The route boots 5 Notte sessions via client.Session().start(), calls session.execute({ type: "goto", url }) to navigate, and uses session.scrape({ response_format: zodSchema }) for structured extraction. The session.viewer_url from each session is rendered in an iframe via the CDP inspector for the live view.

Tech stack

• Next.js 16 (App Router, Turbopack)
• Tailwind CSS v4
• Notte SDK for browser sessions + structured scraping
• @ai-sdk/anthropic for the final synthesis (Claude Sonnet 4.5)
• Zod for response schemas

Credits

Adapted from Browserbase's Stagehand Research Agent template. The functional design (5 parallel sessions, per-source extraction, SSE streaming, AI synthesis) is theirs; this fork rebuilds it on top of Notte primitives.

License

MIT - see LICENSE.