Skip to content

Commit e637220

Browse files
masnwilliamsgithub-actions[bot]juecd
authored
Mason/vercel marketplace docs (#87)
* docs(vercel): update marketplace integration guide * docs(vercel): update pricing text and remove support * docs: update code samples from OpenAPI * docs: update code samples from OpenAPI * docs(vercel): clarify integration instructions and terms * Add the blurb calling out individual browser frameworks to Vercel Marketplace guide --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Catherine Jue <[email protected]>
1 parent 4a91136 commit e637220

File tree

1 file changed

+115
-3
lines changed

1 file changed

+115
-3
lines changed

integrations/vercel.mdx

Lines changed: 115 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,116 @@
11
---
2-
title: "Vercel"
3-
url: "https://github.com/onkernel/vercel-template"
4-
---
2+
title: "Vercel Marketplace"
3+
description: "Integrate Kernel through the Vercel Marketplace"
4+
---
5+
6+
## Integrate Kernel through the Vercel Marketplace
7+
8+
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.
9+
10+
Kernel works out of the box with every major agent and automation framework, including **Browser Use**, **Stagehand**, **Playwright**, **Puppeteer**, or **Computer Use** via **OpenAI**, **Anthropic**, and **Gemini**.
11+
12+
### Installing the Kernel Integration
13+
14+
{/* <Tip>
15+
Deploy an example Next.js application and install the Kernel integration with our [template](https://github.com/onkernel/vercel-template).
16+
</Tip> */}
17+
18+
1. Navigate to the [Kernel integration](https://vercel.com/marketplace/kernel) in the Vercel Marketplace.
19+
2. Click **Install** to add Kernel to your Vercel team.
20+
3. Select your pricing plan.
21+
4. Provide a name for your Kernel installation (this is not used for billing or anything else).
22+
5. Click **Create**.
23+
24+
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**.
25+
26+
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.
27+
28+
### Connecting to your Vercel projects
29+
30+
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.
31+
32+
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:
33+
34+
- `KERNEL_API_KEY`
35+
36+
<Tip>
37+
Running `vercel env pull` in your project will automatically sync the development environment variables locally.
38+
</Tip>
39+
40+
### Configuring your Kernel integration
41+
42+
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.
43+
44+
### Using Kernel in your application
45+
46+
Once your Kernel API key is synced to your Vercel project, you can use it in your application. Here's a quick example:
47+
48+
<CodeGroup>
49+
```typescript TypeScript
50+
import { Kernel } from '@onkernel/sdk';
51+
import { chromium } from 'playwright';
52+
53+
const kernel = new Kernel({ apiKey: process.env.KERNEL_API_KEY });
54+
55+
// Create a Kernel browser
56+
const kernelBrowser = await kernel.browsers.create();
57+
58+
// Connect over CDP with Playwright
59+
const browser = await chromium.connectOverCDP(kernelBrowser.cdp_ws_url);
60+
61+
try {
62+
const context = browser.contexts()[0];
63+
const page = context.pages()[0];
64+
await page.goto('https://example.com');
65+
const title = await page.title();
66+
console.log('Page title:', title);
67+
} finally {
68+
await browser.close();
69+
await kernel.browsers.deleteByID(kernelBrowser.session_id);
70+
}
71+
```
72+
73+
```python Python
74+
from kernel import AsyncKernel
75+
from playwright.async_api import async_playwright
76+
77+
kernel = AsyncKernel(api_key=os.environ.get("KERNEL_API_KEY"))
78+
79+
# Create a Kernel browser
80+
kernel_browser = await kernel.browsers.create()
81+
82+
# Connect over CDP with Playwright
83+
playwright = await async_playwright().start()
84+
browser = await playwright.chromium.connect_over_cdp(kernel_browser.cdp_ws_url)
85+
86+
try:
87+
context = browser.contexts[0]
88+
page = context.pages[0]
89+
await page.goto("https://example.com")
90+
title = await page.title()
91+
print(f"Page title: {title}")
92+
finally:
93+
await browser.close()
94+
await kernel.browsers.delete_by_id(kernel_browser.session_id)
95+
```
96+
</CodeGroup>
97+
98+
For more examples and features like profiles, stealth mode, and live view, check out the [Browsers documentation](/browsers/create-a-browser).
99+
100+
<Info>
101+
Check out our [integration guides](/integrations/overview) to learn how to use Vercel + Kernel with your preferred browser automation framework.
102+
</Info>
103+
104+
105+
### Pricing
106+
107+
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).
108+
109+
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.
110+
111+
### Limitations
112+
113+
The following limitations apply when using Kernel through the Vercel Marketplace:
114+
115+
- Vercel-managed Organizations cannot be deleted from the Kernel Dashboard. They can only be deleted by uninstalling the Kernel integration in Vercel.
116+
- Existing Kernel Organizations cannot be moved to be managed by the Kernel Vercel Integration.

0 commit comments

Comments
 (0)