The Parallel + Vercel Template is a Next.js boilerplate that shows how to build a full-stack app around Parallel's web research APIs (Search, Extract, and Tasks) with real-time SSE streaming, deployable to Vercel in one click.
What is the Parallel + Vercel Template?
The Parallel + Vercel Template is a TypeScript project from the parallel-cookbook repository that integrates Parallel's web research APIs with a Next.js App Router application. It takes user inputs like search objectives, URLs, and research tasks, and produces ranked search results, extracted content, and live-streamed task progress via Server-Sent Events (SSE). The template runs on Vercel's serverless platform and uses the official parallel-web npm package for SDK calls.
Key Features
- Search API demo — natural language web search with a mode toggle for one-shot vs agentic search; returns ranked results with excerpts.
- Extract API demo — extracts content from given URLs with objective-focused filtering.
- Tasks API demo — runs deep research tasks and streams progress/events over SSE in real time.
- Session persistence — search and extract results are stored in
sessionStorage, task runs inlocalStorage, so state survives page reloads. - Status recovery — on reload, the app checks pending task runs and updates their status automatically from the Parallel API.
- Complete Next.js App Router structure — typed API routes (
/api/search,/api/extract,/api/tasks, and/api/tasks/[runId]/statusand/events), React components for each demo, and a tabbed main page. - Tailwind CSS styling — the UI is styled with Tailwind (
globals.css).
Who is it for?
- Next.js developers who want to integrate Parallel's web research APIs into their apps without starting from scratch.
- AI application builders who need search/extraction/research capabilities and want a reference implementation for SSE streaming and API routing.
- Vercel users who want to use the Parallel Vercel Integration and see how environment variables and the playground work.
What can you do with it?
- Build a research assistant — use the Tasks API to kick off deep research jobs and watch progress stream in over SSE.
- Add semantic search to your app — call the Search API from a backend route to get ranked results with excerpts.
- Automate content extraction — feed URLs to the Extract API and receive filtered, objective-focused content.
- Learn best practices — study how to structure Next.js API routes, manage streaming responses, and persist state across reloads.
How does the template work?
- Search: enter a search objective and optional queries →
/api/searchcallsclient.beta.search()→ returns ranked results. - Extract: enter URLs and an optional objective →
/api/extractcallsclient.beta.extract()→ returns extracted content. - Tasks: enter a research task →
/api/taskscallsclient.taskRun.create()→ then/api/tasks/[runId]/eventsstreams progress via SSE until completion.
Pricing
The template is open-source under the MIT license. The Parallel API itself requires an API key, which you can get through the Parallel Vercel Integration or their website; usage-based pricing details are on Parallel's pricing page.
FAQ
Do I need a Parallel API key?
Yes, the app needs a PARALLEL_API_KEY environment variable. The easiest way to get one is to install the Parallel Vercel Integration, which adds it automatically.
Can I use this template locally?
Yes, clone the repo, run npm install, copy .env.example to .env.local, add your API key, and run npm run dev. Node.js 18+ is required.
What APIs are demonstrated?
Search, Extract, and Tasks. Search and Extract are called individually; Tasks uses SSE for live progress. There are also Monitor and FindAll APIs mentioned in the docs.
How are results persisted?
Search and Extract results are saved in sessionStorage; task runs in localStorage. On page load, pending task statuses are automatically re-checked.
Does it support streaming?
Yes, the Tasks demo uses Server-Sent Events (SSE) to stream real-time events from Parallel's API.
