Parallel + Vercel Template

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 in localStorage, 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]/status and /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/search calls client.beta.search() → returns ranked results.
• Extract: enter URLs and an optional objective → /api/extract calls client.beta.extract() → returns extracted content.
• Tasks: enter a research task → /api/tasks calls client.taskRun.create() → then /api/tasks/[runId]/events streams 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.