---
title: "NextJS + Parallel Starter"
description: "A Next.js template demonstrating how to integrate Parallel's web research APIs with Vercel. This template provides a complete demo applicati"
url: "https://vercel.com/templates/next.js/next-js-parallel-starter"
links:
  repository: "https://github.com/parallel-web/parallel-cookbook/tree/main/typescript-recipes/parallel-vercel-template"
  demo: "https://parallel-vercel-template-cookbook.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=NextJS+%2B+Parallel+Starter&demo-description=A+Next.js+template+demonstrating+how+to+integrate+Parallel%27s+web+research+APIs+with+Vercel.+This+template+provides+a+complete+demo+applicati&demo-url=https%3A%2F%2Fparallel-vercel-template-cookbook.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aLhwYulnxciAuCohHY7Xr%2F3f43808ff38a601ecf9155286b69d395%2Fvercel_cookbook_picture.png&project-name=NextJS+%2B+Parallel+Starter&repository-name=next-js-parallel-starter&repository-url=https%3A%2F%2Fgithub.com%2Fparallel-web%2Fparallel-cookbook%2Ftree%2Fmain%2Ftypescript-recipes%2Fparallel-vercel-template&from=templates&skippable-integrations=1&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22other%22%2C%22productSlug%22%3A%22parallel%22%2C%22integrationSlug%22%3A%22parallel%22%7D%5D&root-directories=List+of+directory+paths+for+the+directories+to+clone+into+projects&project-names=Comma+separated+list+of+project+names%2Cto+match+the+root-directories"
---

# NextJS + Parallel Starter

A Next.js template demonstrating how to integrate Parallel's web research APIs with Vercel. This template provides a complete demo applicati

# Parallel + Vercel Template

A Next.js template demonstrating how to integrate Parallel's web research APIs with Vercel. This template provides a complete demo application showcasing the Search, Extract, and Tasks APIs with real-time SSE streaming.

View the demo at:
[https://parallel-vercel-template-cookbook.vercel.app/](https://parallel-vercel-template-cookbook.vercel.app/)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fparallel-web%2Fparallel-cookbook%2Ftree%2Fmain%2Ftypescript-recipes%2Fparallel-vercel-template&project-name=parallel-vercel-template&repository-name=parallel-vercel-template&demo-title=Parallel%20Vercel%20Demo&demo-description=Explore%20Parallel's%20Search%2C%20Extract%2C%20and%20Tasks%20APIs%20with%20this%20interactive%20demo.&demo-url=https%3A%2F%2Fparallel-cookbook-parallel-ai.vercel.app&demo-image=https%3A%2F%2Fassets.parallel.ai%2Fcookbook%2Fvercel_cookbook_picture.png&integration-ids=oac_qjiYAM8BTtX0UDS6HEPY97nU)

## Features

| Feature                 | Description                                                                     |
| ----------------------- | ------------------------------------------------------------------------------- |
| **Search API**          | Natural language web search with mode selection (one-shot vs agentic)           |
| **Extract API**         | Content extraction from URLs with objective-focused filtering                   |
| **Tasks API**           | Deep research tasks with real-time SSE event streaming                          |
| **Session Persistence** | Search/Extract results persist in sessionStorage, Tasks persist in localStorage |
| **Status Recovery**     | Automatically checks and updates pending task statuses on page reload           |

## Architecture

```
┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   React UI      │────▶│  Next.js API    │────▶│  Parallel API   │
│   Components    │     │  Routes         │     │  (parallel-web) │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │
        │ sessionStorage        │ SDK calls
        │ localStorage          │
        ▼                       ▼
┌─────────────────┐     ┌─────────────────┐
│  SearchDemo     │     │  /api/search    │  → client.search()
│  ExtractDemo    │     │  /api/extract   │  → client.extract()
│  TasksDemo      │     │  /api/tasks     │  → client.taskRun.create()
└─────────────────┘     │  /api/tasks/[id]/status  │  → client.taskRun.retrieve()
                        │  /api/tasks/[id]/events  │  → client.taskRun.events()
                        └─────────────────┘
```

### How It Works

1. **Search**: User enters a search objective and optional queries → API calls `client.search()` → Returns ranked results with excerpts. The route uses the objective as a query when queries are omitted, with a choice of `basic` or `advanced` search
2. **Extract**: User enters URLs and optional objective → API calls `client.extract()` → Returns extracted content
3. **Tasks**: User enters a research task → API calls `client.taskRun.create()` → SSE stream delivers real-time progress → Final output displayed on completion

## Quick Start

### Prerequisites

- Node.js 18+
- A [Parallel API key](https://vercel.com/marketplace/parallel) (via Vercel Integration)

### 1. Clone and Install

```bash
cd typescript-recipes/parallel-vercel-template
npm install
```

### 2. Configure Environment

```bash
cp .env.example .env.local
```

Edit `.env.local` with your Parallel API key:

```
PARALLEL_API_KEY=your-api-key-here
```

### 3. Run the Development Server

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see the demo.

## Project Structure

```
parallel-vercel-template/
├── app/
│   ├── api/
│   │   ├── search/route.ts        # Search API endpoint
│   │   ├── extract/route.ts       # Extract API endpoint
│   │   └── tasks/
│   │       ├── route.ts           # Create task endpoint
│   │       └── [runId]/
│   │           ├── status/route.ts  # Task status polling
│   │           └── events/route.ts  # SSE event streaming
│   ├── components/
│   │   ├── SearchDemo.tsx         # Search UI with mode toggle
│   │   ├── ExtractDemo.tsx        # Extract UI
│   │   └── TasksDemo.tsx          # Tasks UI with SSE streaming
│   ├── page.tsx                   # Main page with tabs
│   ├── layout.tsx                 # App layout
│   └── globals.css                # Tailwind styles
├── .env.example                   # Environment template
├── package.json
└── README.md
```

## Deploying to Vercel

1. Push to your GitHub repository
2. Import the project in [Vercel](https://vercel.com/new)
3. Add `PARALLEL_API_KEY` to Environment Variables
4. Deploy

### Using Vercel Integration

The easiest way to get an API key is through the [Parallel Vercel Integration](https://vercel.com/marketplace/parallel):

1. Install the integration on your Vercel project
2. The `PARALLEL_API_KEY` environment variable is automatically added
3. Access the Parallel playground by clicking "Open in Parallel Web Systems"

## Exploring More APIs

Want to try the **Monitor** or **FindAll** APIs?

Go to your [Vercel Integration page](https://vercel.com/marketplace/parallel), select a project, and click **"Open in Parallel Web Systems"** to access the full playground.

## Resources

- [Parallel Documentation](https://docs.parallel.ai)
- [Search API Reference](https://docs.parallel.ai/api-reference/search/search)
- [Extract API Reference](https://docs.parallel.ai/api-reference/extract/extract)
- [Tasks API Reference](https://docs.parallel.ai/api-reference/tasks-v1/create-task-run)
- [SSE Streaming Guide](https://docs.parallel.ai/task-api/task-sse)
- [Pricing](https://docs.parallel.ai/resources/pricing)
- [parallel-web npm package](https://www.npmjs.com/package/parallel-web)
- [Vercel Integration](https://vercel.com/marketplace/parallel)

## License

MIT

---

## 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.