Kernel Browser Automation Starter

KERNEL next.js template

one page that creates a KERNEL cloud browser, lets a gpt-5.4 agent write and run playwright against it, and keeps the browser and the generated code side by side.

what this shows

• creating a browser session with the KERNEL sdk, and streaming the live view into the page
• an AI SDK agent (ToolLoopAgent on gpt-5.4) whose only tool is playwright execution
• the agent writing playwright, running it in the browser vm, and returning a value to the model
• every step streamed into a sidebar with the code, the execution time, the return value, and failures

quick start

1
bun install
2
cp .env.example .env.local   # add KERNEL_API_KEY and OPENAI_API_KEY
3
bun dev

open http://localhost:3000, create a browser, and describe a task.

the three calls

the whole browser layer is three methods on the KERNEL client. the template calls them from route handlers.

1
// app/api/create-browser/route.ts
2
const browser = await kernel.browsers.create({ stealth: true, headless: false });
3
browser.browser_live_view_url; // stream this into an iframe
4
browser.cdp_ws_url; // or attach your own playwright client
5
browser.session_id;
6

7
// lib/playwright-tool.ts — what the model calls, one call per step
8
await kernel.browsers.playwright.execute(sessionId, { code, timeout_sec });
9

10
// app/api/delete-browser/route.ts
11
await kernel.browsers.deleteByID(sessionId);

playwright.execute runs the code in the same vm as the browser, with page, context, browser, and webmcp in scope, and returns whatever the code returns. that return value is what the model sees, so return the data the task asks for.

code map

1
app/
2
├── api/
3
│   ├── agent/route.ts          # ToolLoopAgent + streaming ui message response
4
│   ├── create-browser/route.ts # browser session, live view url, spin-up time
5
│   └── delete-browser/route.ts # closes the session
6
├── page.tsx                    # hero, split view, footer
7
├── layout.tsx                  # fonts and metadata
8
└── globals.css                 # KERNEL design tokens
9
components/
10
├── AgentStepsSidebar.tsx       # streamed steps, task composer
11
├── BrowserPanel.tsx            # live view, session details
12
├── HowItWorks.tsx              # the three calls with this session's numbers
13
├── Header.tsx
14
├── ai-elements/                # code block and stack trace, styled to the design system
15
└── ui/                         # shadcn/ui primitives
16
lib/
17
├── constants.ts                # shared agent step-count limit
18
├── deploy-url.ts                # deploy-with-vercel clone url
19
├── playwright-tool.ts          # the playwright_execute tool
20
├── shiki.ts                    # syntax highlighting
21
└── types.ts                    # shared types

how the streaming works

/api/agent builds a ToolLoopAgent and returns toUIMessageStreamResponse(), so tool calls and results reach the browser as they happen. the sidebar renders the tool-playwright_execute parts from useChat, which is where the per-step status, code, and return value come from. you see the run while it runs.

environment

deploy

push to github and import the repo at vercel.com/new, or use the deploy button above. install the KERNEL integration to have KERNEL_API_KEY set for you, then add OPENAI_API_KEY yourself.

[!WARNING] /api/agent accepts any sessionId and runs whatever playwright the model writes against it, with no auth or rate limiting. a public deploy runs on your keys for anyone who finds the url - add access control before sharing a deployed link.

links

• KERNEL docs
• playwright execution
• vercel ai sdk