https://github.com/onkernel/vercel-template
Starter template for Next.js, AI SDK, & Kernel
https://github.com/onkernel/vercel-template
browser-automation nextjs template vercel
Last synced: 7 months ago
JSON representation
Starter template for Next.js, AI SDK, & Kernel
- Host: GitHub
- URL: https://github.com/onkernel/vercel-template
- Owner: onkernel
- License: mit
- Created: 2025-07-15T03:59:30.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-07-21T01:27:43.000Z (7 months ago)
- Last Synced: 2025-07-21T02:30:30.030Z (7 months ago)
- Topics: browser-automation, nextjs, template, vercel
- Language: TypeScript
- Homepage: https://www.onkernel.com
- Size: 288 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Kernel Vercel Template
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).
## 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.
[](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).