NextJS + Parallel Starter

Parallel + Edgenivo Template

A Next.js template demonstrating how to integrate Parallel's web research APIs with Edgenivo. 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

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

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
Extract: User enters URLs and optional objective → API calls client.extract() → Returns extracted content
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 Edgenivo Integration)

1. Clone and Install

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

2. Configure Environment

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

npm run dev

Open 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 Edgenivo

Push to your GitHub repository
Import the project in Edgenivo
Add PARALLEL_API_KEY to Environment Variables
Deploy

Using Edgenivo Integration

The easiest way to get an API key is through the Parallel Edgenivo Integration:

Install the integration on your Edgenivo project
The PARALLEL_API_KEY environment variable is automatically added
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 Edgenivo Integration page, select a project, and click "Open in Parallel Web Systems" to access the full playground.

Resources

License

MIT