Kernel + Vercel Template

A Next.js template demonstrating how to run browser automations in Vercel serverless functions, powered by Kernel.

Overview

This template shows how to:

• Create cloud browsers with live view using the Kernel SDK
• Connect automation frameworks to Kernel browsers via CDP
• Run browser automations in Next.js API routes
• Display live browser view and automation results in a modern Next.js UI

Tech Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Browser Automation: Kernel SDK + Playwright
• Package Manager: Bun
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 18+
• Bun (package manager)
• Bun (package manager)
• A Kernel account and API key
• Vercel account (optional, for deployment)

Installation

1. Clone the repository:

   1
   git clone <your-repo-url>
   2
   cd nextjs-kernel-template

2. Install dependencies:

   1
   bun install

3. Set up Kernel:

   Get your Kernel API key from one of these sources:

   • Option 1 (Recommended): Install the Kernel integration from the Vercel Marketplace
   • Option 2: Get your API key from https://dashboard.onkernel.com

4. Configure environment variables:

   Create a .env file:

   1
   touch .env.local

   Add your Kernel API key:

   1
   KERNEL_API_KEY=your_api_key_here

5. Run the development server:

   1
   bun dev
   2
   bun dev

6. Open http://localhost:3000 in your browser

How It Works

1. Browser Creation: Click "Create Browser" to provision a headful Kernel browser with live view capabilities
2. Live View: See your browser running in real-time through the embedded live view iframe
3. Automation: Enter any URL and click "Run Automation" to navigate to it using Playwright over CDP
4. Results: View execution metrics and page information returned from your automation

Code Structure

1
app/
2
├── api/
3
│   ├── create-browser/
4
│   │   └── route.ts          # Creates a headful Kernel browser
5
│   └── run-automation/
6
│       └── route.ts          # Connects via CDP and runs automation
7
├── page.tsx                  # Main UI with live view and controls
8
├── layout.tsx                # Root layout
9
└── globals.css               # Global styles
10

11
components/
12
└── ui/                       # shadcn/ui components
13
    ├── button.tsx
14
    ├── card.tsx
15
    └── input.tsx
16

17
lib/
18
└── utils.ts                  # Utility functions

Key Code Example

Step 1: Create Browser (app/api/create-browser/route.ts)

1
import { Kernel } from "@onkernel/sdk";
2

3
// Initialize Kernel client
4
const kernel = new Kernel({ apiKey: process.env.KERNEL_API_KEY });
5

6
// Create a headful browser with live view
7
const browser = await kernel.browsers.create({
8
  stealth: true,
9
  headless: false,
10
});
11

12
// Return browser details to client
13
return {
14
  sessionId: browser.session_id,
15
  liveViewUrl: browser.browser_live_view_url,
16
  cdpWsUrl: browser.cdp_ws_url,
17
};

Step 2: Run Automation (app/api/run-automation/route.ts)

1
import { chromium } from "playwright-core";
2

3
// Connect Playwright to the Kernel browser via CDP
4
const browser = await chromium.connectOverCDP(cdpWsUrl);
5

6
// Get the default context and page
7
const context = browser.contexts()[0];
8
const page = context.pages()[0] || (await context.newPage());
9

10
// Navigate and extract data
11
await page.goto(url, { waitUntil: "domcontentloaded" });
12
const title = await page.title();
13

14
// Close Playwright connection (browser continues running)
15
await browser.close();
16

17
return { title, url };

Deployment

Deploy to Vercel

1. Push to GitHub

2. Connect to Vercel:

   • Go to vercel.com
   • Import your GitHub repository
   • Add your KERNEL_API_KEY environment variable
   • Deploy!

3. Using Vercel Marketplace Integration:

   • Install Kernel from Vercel Marketplace
   • The integration will automatically add the API key to your project
   • Deploy your project

Environment Variables

Make sure to add this environment variable in your Vercel project settings:

• KERNEL_API_KEY - Your Kernel API key

Learn More

• Kernel Documentation
• Kernel API Reference
• Next.js Documentation

Built with Kernel and Vercel