Kernel Vercel Template

A chatbot template with browser automation capabilities. Uses Next.js, Vercel AI SDK, Assistant-UI, and Kernel.

Getting Started

1. Sign up for a Kernel account and create an API key.

2. Clone the repository:

git clone https://github.com/onkernel/vercel-template.git
cd vercel-template

3. Download the Kernel CLI:

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.

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:

pnpm run deploy:agent

6. Run the development server for the web app:

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.

Vercel Functions have limits on how long they can run. Configure the app's here. Long-running tasks may time out depending on your Vercel settings.

Project Layout

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

packages/agent

The agent is deployed as an action in your Kernel app. The action runs our Claude Computer Use Playwright SDK 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, Vercel AI SDK, and Assistant-UI to build the chat interface. The chatbot is deployed as a route 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 on this repository. You can also join our Discord.

License

See the LICENSE file for details.

Colophon

The background wallpaper was generated by AI.

Made with ❤️ by the Kernel team.