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/

Features

Architecture

1
┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
2
│   React UI      │────▶│  Next.js API    │────▶│  Parallel API   │
3
│   Components    │     │  Routes         │     │  (parallel-web) │
4
└─────────────────┘     └─────────────────┘     └─────────────────┘
5
        │                       │
6
        │ sessionStorage        │ SDK calls
7
        │ localStorage          │
8
        ▼                       ▼
9
┌─────────────────┐     ┌─────────────────┐
10
│  SearchDemo     │     │  /api/search    │  → client.beta.search()
11
│  ExtractDemo    │     │  /api/extract   │  → client.beta.extract()
12
│  TasksDemo      │     │  /api/tasks     │  → client.taskRun.create()
13
└─────────────────┘     │  /api/tasks/[id]/status  │  → client.taskRun.retrieve()
14
                        │  /api/tasks/[id]/events  │  → client.beta.taskRun.events()
15
                        └─────────────────┘

How It Works

1. Search: User enters a search objective and optional queries → API calls client.beta.search() → Returns ranked results with excerpts
2. Extract: User enters URLs and optional objective → API calls client.beta.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 (via Vercel Integration)

1. Clone and Install

1
cd typescript-recipes/parallel-vercel-template
2
npm install

2. Configure Environment

1
cp .env.example .env.local

Edit .env.local with your Parallel API key:

1
PARALLEL_API_KEY=your-api-key-here

3. Run the Development Server

1
npm run dev

Open http://localhost:3000 to see the demo.

Project Structure

1
parallel-vercel-template/
2
├── app/
3
│   ├── api/
4
│   │   ├── search/route.ts        # Search API endpoint
5
│   │   ├── extract/route.ts       # Extract API endpoint
6
│   │   └── tasks/
7
│   │       ├── route.ts           # Create task endpoint
8
│   │       └── [runId]/
9
│   │           ├── status/route.ts  # Task status polling
10
│   │           └── events/route.ts  # SSE event streaming
11
│   ├── components/
12
│   │   ├── SearchDemo.tsx         # Search UI with mode toggle
13
│   │   ├── ExtractDemo.tsx        # Extract UI
14
│   │   └── TasksDemo.tsx          # Tasks UI with SSE streaming
15
│   ├── page.tsx                   # Main page with tabs
16
│   ├── layout.tsx                 # App layout
17
│   └── globals.css                # Tailwind styles
18
├── .env.example                   # Environment template
19
├── package.json
20
└── README.md

Deploying to Vercel

1. Push to your GitHub repository
2. Import the project in Vercel
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:

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, select a project, and click "Open in Parallel Web Systems" to access the full playground.

Resources

• Parallel Documentation
• Search API Reference
• Extract API Reference
• Tasks API Reference
• SSE Streaming Guide
• Pricing
• parallel-web npm package
• Vercel Integration

License

MIT