vercel-example — Next.js 启动器模板

SHA-256: 088c1672f310730ab4b1ccee2f5b6e24ffdd27e0a92f3ba0217cb6aa3077108a

2026-10-14T08:40:10.471Z

<p align="center">
  <img src="static/images/kernel_wordmark.svg" alt="Kernel Logo" width="55%">
</p>

<p align="center">
  <img alt="GitHub License" src="https://img.shields.io/github/license/onkernel/vercel-template">
  <a href="https://discord.gg/FBrveQRcud"><img src="https://img.shields.io/discord/1342243238748225556?logo=discord&logoColor=white&color=7289DA" alt="Discord"></a>
  <a href="https://x.com/onkernel"><img src="https://img.shields.io/twitter/follow/onkernel" alt="Follow @onkernel"></a>
</p>

# Kernel Vercel Example

A chatbot template with browser automation capabilities. Uses [Next.js](https://nextjs.org/), [Vercel AI SDK](https://ai-sdk.dev), [Assistant-UI](https://github.com/assistant-ui/assistant-ui), and [Kernel](https://www.onkernel.com).

<p align="center">
  <img src="https://github.com/user-attachments/assets/c7b212a6-8872-4c82-8f1d-92c9021eb393" alt="kernel-vercel-template">
</p>

## Getting Started

1. Sign up for a [Kernel account](https://dashboard.onkernel.com/sign-up) and create an API key.

2. Clone the repository:
```bash
git clone https://github.com/onkernel/vercel-template.git
cd vercel-template
```

3. Download the Kernel CLI:
```bash
brew install onkernel/tap/kernel
```

4. Add your Kernel API key and Anthropic API key to the `.env` file in the `packages/agent` and `packages/web` directories.

```bash
cd packages/agent && cp .env.example .env
cd ../web && cp .env.example .env

# In .env
KERNEL_API_KEY=your-api-key
ANTHROPIC_API_KEY=your-api-key
```

5. Deploy the agent to Kernel:

```bash
pnpm run deploy:agent
```

6. Run the development server for the web app:

```bash
pnpm run dev:web
```

You can now access the web app at `http://localhost:3000`

## Deploying to Vercel

You can deploy the web app on Vercel. Make sure you've also deployed the AI web agent on Kernel as described in the Getting Started section.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonkernel%2Fvercel-template%2Ftree%2Fmain%2Fpackages%2Fweb&env=KERNEL_API_KEY&env=ANTHROPIC_API_KEY&envDescription=API%20keys%20needed%20for%20the%20application.&envLink=https%3A%2F%2Fdashboard.onkernel.com%2Fsign-up&project-name=web-agent-app)

Vercel Functions have [limits](https://vercel.com/docs/functions/configuring-functions/duration) on how long they can run. Configure the app's [here](https://github.com/onkernel/vercel-template/blob/56656ccd6f6d5de084f29974d03ea4f88c35cf84/packages/web/app/api/chat/route.ts#L11). Long-running tasks may time out depending on your Vercel settings.

## Project Layout

```bash
kernel-vercel-template/
├── packages/
│   ├── agent/ # Kernel browser agent
│   ├── web/ # Next.js web app
```

### `packages/agent`

The agent is deployed as an [action](https://docs.onkernel.com/info/concepts#action) in your Kernel app. The action runs our [Claude Computer Use Playwright SDK](https://github.com/onkernel/cu-playwright-ts) to control the browser.

You can tail the logs of the action by running `pnpm run logs` in the `packages/agent` directory.

### `packages/web`

The web app is responsible for the UI. It uses [Next.js](https://nextjs.org/), Vercel [AI SDK](https://ai-sdk.dev), and [Assistant-UI](https://github.com/assistant-ui/assistant-ui) to build the chat interface. The chatbot is deployed as a [route](packages/web/app/api/chat/route.ts) in the web app and uses the `browserAgentTool` to control the browser. You can extend this to build a custom chatbot with your own tools.

## What's Kernel?

Kernel provides hosted browsers on-demand for browser automations and web agents. You can connect to the browser using Chrome DevTools-based browser frameworks (Playwright, Puppeteer).

### What You Can Do With Kernel

- Run automated browser-based workflows
- Develop and test AI agents that use browsers
- Build custom tools that require controlled browser environments

## Support

For issues, questions, or feedback, please [open an issue](https://github.com/onkernel/vercel-template/issues) on this repository. You can also join our [Discord](https://discord.gg/FBrveQRcud).

## License

See the [LICENSE](./LICENSE) file for details.

## Colophon

The background wallpaper was generated by AI.

Made with ❤️ by the [Kernel team](https://www.onkernel.com).