--- title: How to build a browser agent that works behind a login description: Build a browser agent with eve, Vercel Connect, and Kernel managed auth that signs a user in through a human-in-the-loop handoff and completes tasks behind a login without exposing credentials. url: /kb/guide/build-a-browser-agent canonical_url: "https://vercel.com/kb/guide/build-a-browser-agent" published: 2026-08-11 last_updated: 2026-08-11 authors: Danny Prevoznik, Ben Sabic related: - /docs/agent-resources/vercel-plugin - /docs/cli - /docs/connect install_vercel_plugin: npx plugins add vercel/vercel-plugin --- Browser agents stall the moment a task moves behind a login. Reasoning and tool calls can drive a public page, but a dashboard, an account, or a signed-in feed needs a real user session. This guide combines eve, Vercel Connect, and KERNEL so your agent can sign a user in through a human-in-the-loop handoff and keep that session fresh. The agent then drives the signed-in browser to finish the work as that user. No shared API key touches the app, and the model never handles raw credentials. ## Quick start with an AI coding agent If you're working with an AI coding agent like Claude Code or Cursor, use this prompt to have it build the agent for you: ### Agent prompt ```txt Build an eve agent that drives a Kernel cloud browser, with browser access brokered per-user through Vercel Connect (no KERNEL_API_KEY in the app or env). Mount Kernel's MCP toolset with @onkernel/eve-extension, use Kernel managed auth for a human-in-the-loop hosted login that saves a reusable profile, and expose the agent as a local TUI in dev and a Slack bot in production. Base it on the eve-connect-kernel cookbook: https://github.com/kernel/eve-connect-kernel ``` The [Vercel Plugin](https://vercel.com/docs/agent-resources/vercel-plugin) turns your AI coding agent (e.g., OpenAI Codex, Claude Code, or Cursor) into a Vercel expert. It adds skills, slash commands, and current knowledge of the tools you’ll use, including Vercel Connect and AI Gateway. The plugin is optional; it isn't required to use eve or to follow this guide. ```bash npx plugins add vercel/vercel-plugin ``` ## Overview In this guide, you'll learn how to: - Scaffold an eve agent and add KERNEL's browser toolset - Broker per-user browser access through Vercel Connect, so no `KERNEL_API_KEY` touches your app, environment, or the model - Sign a user into a target site through KERNEL managed auth with durable human-in-the-loop approval - Save that session to a reusable profile that re-authenticates on its own - Run tasks in the signed-in browser and watch through a live URL - Run the agent locally as a TUI, then deploy it as a Slack bot ## Prerequisites Before you begin, make sure you have: - Node.js 24 or newer - A [Vercel account](https://vercel.com/signup). - A [KERNEL account](https://www.kernel.sh/). For local development, you also need Node.js 24+, pnpm, and the [Vercel CLI](https://vercel.com/docs/cli). ## How it works KERNEL and Vercel pair on two independent axes. The model routes through the Vercel AI Gateway, which a linked project authenticates via an OIDC token. Internet access via a KERNEL browser is routed through Vercel Connect, which issues a per-user token to the KERNEL MCP server. The two are decoupled on purpose, so you can swap the model, the gateway, or the auth broker without touching the others. | System | Role | What it provides | | -------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | eve | The agent | Runs the browse loop, decides the next action, and pauses on `ask_question` when a step needs approval. It discovers KERNEL's tools at runtime, so it ships no browser code of its own. Channels render the same agent as a local TUI in development and a Slack bot in production. | | Vercel Connect | The access broker | Mints a per-user token to KERNEL, so no `KERNEL_API_KEY` touches your app, environment, or the model. Each user authorizes KERNEL once and then acts as themselves, so access is scoped per person rather than shared across the app. | | KERNEL | The browser primitive | Cloud browsers for agents, exposed as an MCP server with session management, Playwright execution, human-like computer controls, and session replays. Managed auth adds a hosted login flow that signs a user in, including MFA and SSO, and keeps the session fresh. | At runtime, the agent runs this loop: 1. **Add and consent**. eve adds KERNEL's toolset through a Connect connector uid rather than a key. The first time a user drives the browser, eve surfaces a one-time Connect consent prompt. The user approves once, and the grant is cached across threads and sessions. 2. **Sign in through a hosted login**. When a task needs authentication, eve starts KERNEL's hosted login flow and posts the user a URL. It pauses on `ask_question` until the user signs in and clears MFA or SSO. Credentials go to the site, never to the agent or into a page the model is driving. 3. **Save the session to a profile**. KERNEL saves the authenticated session to a named, durable profile and creates a managed auth connection that reauthenticates automatically. 4. **Drive the signed-in browser**. eve opens a browser already signed in on that profile and works the task end to end. It reads the page, takes the single next action, re-reads, and repeats. 5. **Report back**. eve returns the outcome plus a live-view URL, so the user can inspect the session or take over. The human-in-the-loop moment is step 2. The person signs in through KERNEL's hosted flow rather than pasting credentials into the chat, and `ask_question` pauses the turn until they answer, with no polling or guessing. Access is granted twice, and both grants are explicit and scoped: | Grant | Who approves it | What it authorizes | How long it lasts | | --------------- | ----------------------- | ------------------------------------------ | ------------------------------------------------------------------------ | | Connect consent | The user, once per app | The app to use KERNEL as that user | Cached across threads and sessions | | Hosted login | The user, once per site | The agent to act as the user on one domain | Persists through a managed auth profile that re-authenticates on its own | Neither grant is a shared key, and neither hands the agent raw credentials. Both persist, so the agent keeps working without asking again. That combination makes it safe to point an agent at a site behind a login on a real user's behalf. This guide builds on the [eve-connect-kernel cookbook](https://github.com/kernel/eve-connect-kernel), which contains the agent, its TUI and Slack channels, and the connector scripts used below. You'll clone it, wire it to your Vercel and KERNEL accounts, then run it. ## Steps ### 1\. Clone the cookbook and install dependencies ```bash git clone https://github.com/kernel/eve-connect-kernel cd eve-connect-kernel npm install ``` Everything the agent does lives in the `agent/` directory: ```text agent/ agent.ts # model (routed through the Vercel AI Gateway) instructions.md # how to act on the open web with KERNEL skills/kernel-auth.md # the managed auth hosted login flow, step by step extensions/kernel.ts # mounts @onkernel/eve-extension via Connect channels/eve.ts # local TUI channel, locked to loopback channels/slack.ts # Slack channel with the sign-in handoff button ``` ### 2\. Link the project to Vercel Linking connects this directory to a Vercel project. The connectors you create in the next steps attach to that project, and linking also authenticates the default model route for you via AI Gateway, so there's no model key to set: ```bash vercel link ``` ### 3\. Create the KERNEL connector This provisions the `kernel/kernel-mcp` connector that the extension mount points at. `kernel` is KERNEL's entry in Vercel's connector registry, so Vercel fills in the MCP URL and branding. Run it once: ```bash npm run connect:kernel ``` ### 4\. Review how the browser toolset is mounted The cookbook already mounts KERNEL's toolset in `agent/extensions/kernel.ts`, and it takes one line. The `connect` option carries a connector uid instead of a key, so the browser connection authenticates through Connect and no `KERNEL_API_KEY` lives anywhere: ```typescript import kernel from "@onkernel/eve-extension"; export default kernel({ connect: "kernel/kernel-mcp" }); ``` Once added, the browser tools surface as `kernel__browser__`. eve discovers them at runtime, so the agent ships no browser code of its own. The toolset gives you two execution styles within a single session: | Tool | Use it when | | ------------------------- | --------------------------------------------------------------------------- | | `execute_playwright_code` | You know the selector and want a precise, deterministic step | | `computer_action` | The page resists selectors and a visual, coordinate-based move works better | KERNEL's toolset also manages the session itself: - `manage_browsers`: session lifecycle and the live-view URL - `manage_profiles` and `manage_auth_connections`: login state - `manage_proxies`: proxy configuration - `manage_replays`: session replays You can enable more KERNEL features, including pre-configured browser pools, browser curl, and in-VM process execution. ### 5\. Run the agent locally ```bash npm run dev ``` This opens the interactive TUI. The local channel it runs on only accepts connections from your own machine, so nothing is exposed to the network during development. The first browser action triggers the one-time Vercel Connect consent prompt in the terminal. Approve it once, and you won't see it again. ### 6\. Deploy as a Slack bot In production, the agent streams progress into a Slack thread and renders the sign-in handoff as a native button. Slack needs a public URL, so this path is deploy-only. ```bash npm run connect:slack npm run deploy ``` `connect:slack` creates the `slack/eve-connect-kernel` connector already wired into `agent/channels/slack.ts`, then points its webhook at eve's `/eve/v1/slack` route. Connect provisions the Slack app, bot token, scopes, and webhook verification, so no Slack secret touches your environment. Invite the bot with `/invite @your-app` and send it a message. It streams progress, drops the sign-in button when it needs you, and finishes the task on its own with a live-view link so you can watch or take over. ## Two workflows to try ### Set up managed auth ```plaintext log me into github.com ``` eve opens KERNEL's hosted login flow, hands you the link, and waits while you sign in and clear MFA. It then saves the session to a reusable profile that reauthenticates automatically. Under the hood, eve: 1. Checks for an existing authenticated connection for the domain, and reuses it. 2. Picks a profile, creates a managed auth connection for the profile and domain, and starts a hosted login, which returns a `hosted_url` and a `live_view_url`. 3. Hands you the `hosted_url`, then pauses until you reply that you've signed in and cleared MFA or SSO. It never asks you to paste a password or code into the chat, which is exactly what the hosted flow avoids. 4. Confirms the connection reads `AUTHENTICATED` and saves the profile. The profile is a named, durable bundle of cookies and login state that your sign-in produces. The managed auth connection keeps a profile and domain logged in by re-authenticating on a health-check interval, so the grant carries across runs instead of asking you to re-approve every time. ### Drive an authenticated task ```plaintext using my github profile, go to github.com/explore and tell me 3 things it's showing based on my interests ``` eve starts the session on the saved profile, so it begins logged in, then runs the browse loop and reports back with the outcome and a live-view URL. The browser session is shared between you and the agent, so either of you can take control at any point. Every session exposes a live URL that a human can watch, and eve re-reads the page after a takeover before continuing. ## Troubleshooting | Symptom | Likely cause | Fix | | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | The Connect consent prompt never appears, or the first browser action fails | The KERNEL connector isn't provisioned, or the project isn't linked | Run `npm run connect:kernel` and `npx vercel link`, then retry the first browser action | | The managed auth connection never reads `AUTHENTICATED` | The hosted login wasn't completed, or MFA or SSO wasn't cleared | Reopen the `hosted_url`, finish signing in including any MFA or SSO step, then reply so the agent re-checks the connection status | | The agent starts a task but isn't signed in | The task didn't reference the profile the login was saved to, or a different (empty) profile was used | Name the profile from the managed auth step in the task (for example, "using my github profile"), and confirm the connection for that profile and domain reads `AUTHENTICATED` | | The Slack bot doesn't respond to @mentions | The bot isn't in the channel, or the deploy that registered the Slack webhook hasn't finished | Run `npm run connect:slack` and `npm run deploy`, then invite the bot with `/invite @your-app` | | Connectors work locally but fail after deploy | The project isn't linked, or the connectors were never attached to it. The deployed app reads the linked project's environment, and `.env.local` never ships | Run `npx vercel link`, then `npm run connect:kernel` and `npm run connect:slack`. Connectors attach to the project and persist, so this is one-time setup rather than per-deploy work | ## Next steps - [Vercel Connect](https://vercel.com/docs/connect): the access broker that mints per-user tokens - [@onkernel/eve-extension](https://www.npmjs.com/package/@onkernel/eve-extension): the one-line mount that gives an eve agent KERNEL's browser toolset - [eve-connect-kernel cookbook](https://github.com/kernel/eve-connect-kernel): this guide’s reference implementation - [KERNEL managed auth docs](https://www.kernel.sh/docs/auth/overview): the canonical reference for profiles, connections, and hosted login - [KERNEL documentation](https://www.kernel.sh/docs): cloud browsers, sessions, and the full MCP toolset