Skip to content
111 changes: 108 additions & 3 deletions integrations/vercel.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,109 @@
---
title: "Vercel"
url: "https://github.com/onkernel/vercel-template"
---
title: "Vercel Marketplace"
description: "Integrate Kernel through the Vercel Marketplace"
---

## Integrate Kernel through the Vercel Marketplace

The Vercel Marketplace allows Vercel users to install and configure third-party services, like Kernel, directly from the Vercel dashboard. Kernel offers an [official integration](https://vercel.com/marketplace/kernel) that Vercel users can install to integrate Kernel cloud browsers into their Vercel projects.

### Installing the Kernel Integration

{/* <Tip>
Deploy an example Next.js application and install the Kernel integration with our [template](https://github.com/onkernel/vercel-template).
</Tip> */}

1. Navigate to the [Kernel integration](https://vercel.com/marketplace/kernel) in the Vercel Marketplace.
2. Click **Install** to add Kernel to your Vercel team.
3. Select your pricing plan.
4. Provide a name for your Kernel installation (this is not used for billing or anything else).
5. Click **Create**.

Vercel will automatically provision a Kernel User account, Organization, and API key for you. Vercel calls the provisioned account, Organization, and API key a **Resource**.

Each Vercel team has an associated Kernel Organization. Kernel will automatically provision a new User account for you, or link to an existing Kernel User account if an account is found with the same email address. An equivalent role in Kernel is assigned to the user based on their Vercel team role. Roles and Vercel team membership are automatically synced to Kernel.

### Connecting to your Vercel projects

Once you've installed Kernel, you will need to connect it to one of your Vercel projects. Generally, a Kernel Organization should be connected to a single Vercel project.

Connecting to a project will automatically sync your Kernel API key to your Vercel project's environment variables. The following environment variable will be automatically synced to all environments:

- `KERNEL_API_KEY`

<Tip>
Running `vercel env pull` in your project will automatically sync the development environment variables locally.
</Tip>

### Configuring your Kernel integration

Most of your Kernel integration configuration will be done through the Kernel Dashboard. To access the Dashboard after installing the Kernel integration, navigate to your installation details page and click the **Open in Kernel** button.

### Using Kernel in your application

Once your Kernel API key is synced to your Vercel project, you can use it in your application. Here's a quick example:

<CodeGroup>
```typescript TypeScript
import { Kernel } from '@onkernel/sdk';
import { chromium } from 'playwright';

const kernel = new Kernel({ apiKey: process.env.KERNEL_API_KEY });

// Create a Kernel browser
const kernelBrowser = await kernel.browsers.create();

// Connect over CDP with Playwright
const browser = await chromium.connectOverCDP(kernelBrowser.cdp_ws_url);

try {
const context = browser.contexts()[0];
const page = context.pages()[0];
await page.goto('https://example.com');
const title = await page.title();
console.log('Page title:', title);
} finally {
await browser.close();
await kernel.browsers.deleteByID(kernelBrowser.session_id);
}
```

```python Python
from kernel import AsyncKernel
from playwright.async_api import async_playwright

kernel = AsyncKernel(api_key=os.environ.get("KERNEL_API_KEY"))

# Create a Kernel browser
kernel_browser = await kernel.browsers.create()

# Connect over CDP with Playwright
playwright = await async_playwright().start()
browser = await playwright.chromium.connect_over_cdp(kernel_browser.cdp_ws_url)

try:
context = browser.contexts[0]
page = context.pages[0]
await page.goto("https://example.com")
title = await page.title()
print(f"Page title: {title}")
finally:
await browser.close()
await kernel.browsers.delete_by_id(kernel_browser.session_id)
```
</CodeGroup>

For more examples and features like profiles, stealth mode, and live view, check out the [Browsers documentation](/browsers/create-a-browser).

### Pricing

The pricing for plans purchased through the Vercel Marketplace is the same as the pricing when purchased directly through Kernel. For more information on Kernel's pricing and available plans, see the [Pricing page](https://onkernel.com/#pricing).

Billing and usage data are reported hourly to Vercel and can be viewed directly in the Vercel Dashboard. Billing plan management can be done through both the Vercel Dashboard and the Kernel Dashboard.

### Limitations

The following limitations apply when using Kernel through the Vercel Marketplace:

- Vercel-managed Organizations cannot be deleted from the Kernel Dashboard, they can only be deleted by uninstalling the Kernel integration in Vercel.
- Existing Kernel Organizations cannot be moved to be managed by the Kernel Vercel Integration.