Kernel + Vercel Template

Next.js + Kernel template for running AI-powered browser automations with natural language on Vercel.

Overview

This template shows how to:

• Create serverless browsers with live view using the Kernel SDK
• Describe browser tasks in natural language
• Use an AI agent to execute browser automation code via AI SDK tools 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
• AI: Vercel AI SDK with OpenAI GPT-5.1
• Browser Automation: Kernel SDK + Kernel AI SDK (@onkernel/ai-sdk)
• Package Manager: Bun
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 18+
• Bun (package manager)
• A Kernel account and API key
• An OpenAI 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 API keys:

   1
   KERNEL_API_KEY=your_kernel_api_key_here
   2
   OPENAI_API_KEY=your_openai_api_key_here

5. Run the development server:

   1
   bun dev

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

How It Works

1. Create Browser: Click "Create Browser" to provision a serverless Kernel browser with live view capabilities
2. Describe Your Task: Enter what you want the browser to do in natural language (e.g., "Go to Hacker News and get the top article title")
3. Watch AI Execute: The AI agent interprets your task and uses Kernel's AI SDK-compatible browser automation tool to execute it in real-time
4. View Results: See the agent's response, step count, and click "View Steps" to inspect the generated code and execution details

Code Structure

1
app/
2
├── api/
3
│   ├── agent/
4
│   │   └── route.ts          # AI agent endpoint with browser automation tool
5
│   ├── create-browser/
6
│   │   └── route.ts          # Creates a serverless Kernel browser
7
│   └── delete-browser/
8
│       └── route.ts          # Closes browser session
9
├── page.tsx                  # Main UI with live view and controls
10
├── layout.tsx                # Root layout
11
└── globals.css               # Global styles
12

13
components/
14
├── Header.tsx                # App header with branding
15
├── StepsOverlay.tsx          # Modal showing agent execution steps
16
└── ui/                       # shadcn/ui components
17
    ├── button.tsx
18
    ├── card.tsx
19
    ├── textarea.tsx
20
    └── ...
21

22
lib/
23
└── 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 serverless 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 AI Agent (app/api/agent/route.ts)

1
import { openai } from "@ai-sdk/openai";
2
import { playwrightExecuteTool } from "@onkernel/ai-sdk";
3
import { Kernel } from "@onkernel/sdk";
4
import { Experimental_Agent as Agent, stepCountIs } from "ai";
5

6
// Initialize Kernel instance
7
const kernel = new Kernel({ apiKey: process.env.KERNEL_API_KEY });
8

9
// Initialize the AI agent with GPT-5.1 and Kernel's AI SDK-compatible browser automation tool
10
const agent = new Agent({
11
  model: openai("gpt-5.1"),
12
  tools: {
13
    playwright_execute: playwrightExecuteTool({
14
      client: kernel,
15
      sessionId: sessionId,
16
    }),
17
  },
18
  stopWhen: stepCountIs(20),
19
  system: `You are a browser automation expert with access to a Playwright execution tool...`,
20
});
21

22
// Execute the agent with the user's task
23
const { text, steps } = await agent.generate({
24
  prompt: task, // e.g., "Go to news.ycombinator.com and get the first article title"
25
});

Deployment

Deploy to Vercel

1. Push to GitHub

2. Connect to Vercel:

   • Go to vercel.com
   • Import your GitHub repository
   • Add your environment variables (KERNEL_API_KEY and OPENAI_API_KEY)
   • Deploy!

3. Using Vercel Marketplace Integration:

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

Environment Variables

Make sure to add these environment variables in your Vercel project settings:

• KERNEL_API_KEY - Your Kernel API key
• OPENAI_API_KEY - Your OpenAI API key

Learn More

• Kernel Documentation
• Kernel AI SDK
• Vercel AI SDK Documentation
• Next.js Documentation

Built with Kernel, Vercel AI SDK, and Vercel