-
Notifications
You must be signed in to change notification settings - Fork 10
Add Cookbooks page #537
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Add Cookbooks page #537
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| --- | ||
| title: "cookbooks" | ||
| description: "end-to-end recipes to teach agents to use the internet" | ||
| mode: "wide" | ||
| --- | ||
|
|
||
| Every cookbook is self-contained: clone it, set your secrets, run. Use them as 1-click starts for your agents or as templates for your own automations. | ||
|
|
||
| import { CookbookSearch } from '/snippets/cookbook-search.jsx'; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Very cool addition, tysm! |
||
|
|
||
| <CookbookSearch /> | ||
|
|
||
| <Columns className="responsive-columns" cols={3}> | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove features section per canvas notes |
||
| <Card title="Proxies" img="/images/cookbooks/proxies.png" href="https://github.com/kernel/cookbooks/tree/main/features/proxies"> | ||
| <div className="cookbook-tag">feature</div> | ||
| Route browser traffic through Kernel's proxy options. | ||
| </Card> | ||
| <Card title="Profiles" img="/images/cookbooks/profiles.png" href="https://github.com/kernel/cookbooks/tree/main/features/profiles"> | ||
| <div className="cookbook-tag">feature</div> | ||
| Persist browser session state and reuse it across runs. | ||
| </Card> | ||
| <Card title="Replays" img="/images/cookbooks/replays.png" href="https://github.com/kernel/cookbooks/tree/main/features/replays"> | ||
| <div className="cookbook-tag">feature</div> | ||
| Record browser sessions and download them as mp4. | ||
| </Card> | ||
| <Card title="File I/O" img="/images/cookbooks/file-io.png" href="https://github.com/kernel/cookbooks/tree/main/features/file-io"> | ||
| <div className="cookbook-tag">feature</div> | ||
| Downloads, uploads, and browser filesystem access. | ||
| </Card> | ||
| <Card title="Ad Blocker" img="/images/cookbooks/ad-blocker.png" href="https://github.com/kernel/cookbooks/tree/main/features/ad-blocker"> | ||
| <div className="cookbook-tag">feature</div> | ||
| Run ad blocker extensions in Kernel browsers. | ||
| </Card> | ||
| <Card title="Chrome Policies" img="/images/cookbooks/chrome-policies.png" href="https://github.com/kernel/cookbooks/tree/main/features/chrome-policies"> | ||
| <div className="cookbook-tag">feature</div> | ||
| Apply Chromium Enterprise Policies to browser sessions. | ||
| </Card> | ||
| <Card title="Modal Web Scraper" img="/images/cookbooks/modal-web-scraper.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/modal-web-scraper"> | ||
| <div className="cookbook-tag">integration</div> | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove this "integration" subheader |
||
| Scrape JS-rendered pages behind a login, on Modal with a Kernel headful browser. | ||
| </Card> | ||
| <Card title="Modal PR QA Agent" img="/images/cookbooks/modal-pr-qa-agent.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/modal-pr-qa-agent"> | ||
| <div className="cookbook-tag">integration</div> | ||
| QA your PR previews with Claude computer use on Modal, recorded with Replays. | ||
| </Card> | ||
| <Card title="Claude Managed Agents" img="/images/cookbooks/claude-managed-agents.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/claude-managed-agents"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Run parallel computer-use agent swarms, with API keys secured via Vaults. | ||
| </Card> | ||
| <Card title="Claude Computer Use Loop" img="/images/cookbooks/claude-computer-use-loop.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/claude-computer-use-loop"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Minimal implementation of Anthropic's computer use loop. | ||
| </Card> | ||
| <Card title="AI SDK Agent" img="/images/cookbooks/ai-sdk-agent.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/ai-sdk-agent"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Natural language browser automation with the Vercel AI SDK and Kernel's Playwright execution API. | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's try to get this in the default desktop presentation in under 3 lines: |
||
| </Card> | ||
| <Card title="Stagehand Google CUA Agent" img="/images/cookbooks/stagehand-google-cua-agent.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/stagehand-google-cua-agent"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Computer use agent with Google's Gemini 2.5 and Stagehand. | ||
| </Card> | ||
| <Card title="Browser Use Model" img="/images/cookbooks/browser-use-model.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/browser-use-model"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Run the Browser Use bu-1.0 model on Kernel browser infrastructure. | ||
| </Card> | ||
| <Card title="Mastra Web Task Assistant" img="/images/cookbooks/mastra-web-task-assistant.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/mastra-web-task-assistant"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Human-in-the-loop web task assistant with memory, built on Mastra. | ||
| </Card> | ||
| <Card title="Vibium" img="/images/cookbooks/vibium.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/vibium"> | ||
| <div className="cookbook-tag">integration</div> | ||
| Vibium browser automation over WebDriver BiDi. | ||
| </Card> | ||
| <Card title="Tinker RL" img="/images/cookbooks/tinker-rl.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/tinker-rl"> | ||
| <div className="cookbook-tag">integration</div> | ||
| RL training for computer use agents, using Tinker. | ||
| </Card> | ||
| </Columns> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Ad Blocker" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/features/ad-blocker" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "AI SDK Agent" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/ai-sdk-agent" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Browser Use Model" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/browser-use-model" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Chrome Policies" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/features/chrome-policies" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Claude Computer Use Loop" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/claude-computer-use-loop" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Claude Managed Agents" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/claude-managed-agents" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "File I/O" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/features/file-io" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Mastra Web Task Assistant" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/mastra-web-task-assistant" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Modal PR QA Agent" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/modal-pr-qa-agent" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Modal Web Scraper" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/modal-web-scraper" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Profiles" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/features/profiles" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Proxies" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/features/proxies" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Replays" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/features/replays" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Stagehand Google CUA Agent" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/stagehand-google-cua-agent" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Tinker RL" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/tinker-rl" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| --- | ||
| title: "Vibium" | ||
| url: "https://github.com/kernel/cookbooks/tree/main/integrations/vibium" | ||
| --- |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -290,6 +290,38 @@ | |
| "tab": "API Reference", | ||
| "openapi": "https://api.onkernel.com/spec.json" | ||
| }, | ||
| { | ||
| "tab": "Cookbooks", | ||
| "pages": [ | ||
| "cookbooks", | ||
| { | ||
| "group": "Features", | ||
| "pages": [ | ||
| "cookbooks/proxies", | ||
| "cookbooks/profiles", | ||
| "cookbooks/replays", | ||
| "cookbooks/file-io", | ||
| "cookbooks/ad-blocker", | ||
| "cookbooks/chrome-policies" | ||
| ] | ||
| }, | ||
| { | ||
| "group": "Integrations", | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Naming this "integrations" is confusing imo because we have guides called "Integrations" --> https://www.kernel.sh/docs/integrations/overview . What should this be called, "Examples?" "Samples?" "Reference Implementations?" |
||
| "pages": [ | ||
| "cookbooks/modal-web-scraper", | ||
| "cookbooks/modal-pr-qa-agent", | ||
| "cookbooks/claude-managed-agents", | ||
| "cookbooks/claude-computer-use-loop", | ||
| "cookbooks/ai-sdk-agent", | ||
| "cookbooks/stagehand-google-cua-agent", | ||
| "cookbooks/browser-use-model", | ||
| "cookbooks/mastra-web-task-assistant", | ||
| "cookbooks/vibium", | ||
| "cookbooks/tinker-rl" | ||
| ] | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "tab": "CLI", | ||
| "groups": [ | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| const { useState, useCallback } = React; | ||
|
|
||
| export const CookbookSearch = () => { | ||
| const [matches, setMatches] = useState(null); | ||
|
|
||
| const getCards = () => { | ||
| const anchors = Array.from( | ||
| document.querySelectorAll('a[href^="https://github.com/kernel/cookbooks/tree/main/"]') | ||
| ).filter((a) => !a.closest('nav') && !a.closest('aside')); | ||
| const cards = anchors.map((a) => a.closest('.card') || a); | ||
| return Array.from(new Set(cards)); | ||
| }; | ||
|
|
||
| const handleInput = useCallback((e) => { | ||
| const q = e.target.value.trim().toLowerCase(); | ||
| const cards = getCards(); | ||
| let count = 0; | ||
| cards.forEach((card) => { | ||
| const hit = q === '' || card.textContent.toLowerCase().includes(q); | ||
| card.style.display = hit ? '' : 'none'; | ||
| if (hit) count++; | ||
| }); | ||
| setMatches(q === '' ? null : count); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div style={{ margin: '1.5rem 0 0.5rem' }}> | ||
| <input | ||
| type="search" | ||
| placeholder="search cookbooks..." | ||
| onInput={handleInput} | ||
| aria-label="Search cookbooks" | ||
| style={{ | ||
| width: '100%', | ||
| padding: '0.625rem 0.875rem', | ||
| fontSize: '0.9375rem', | ||
| fontFamily: 'inherit', | ||
| border: '1px solid rgba(128, 128, 128, 0.35)', | ||
| borderRadius: '0.5rem', | ||
| background: 'transparent', | ||
| outline: 'none', | ||
| }} | ||
| /> | ||
| {matches === 0 && ( | ||
| <p style={{ marginTop: '1rem', opacity: 0.7 }}> | ||
| no cookbooks match your search. | ||
| </p> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -308,3 +308,20 @@ html.dark .callout[class*="yellow"] svg { | |
| html.dark #navigation-items img[src*="/images/integration-icons/"] { | ||
| filter: invert(1); | ||
| } | ||
|
|
||
| /* cookbooks: sidebar entries under /cookbooks/ are external GitHub links (url frontmatter), | ||
| so hide pagination that would point at them */ | ||
| #pagination a[href^="/cookbooks/"] { | ||
| display: none; | ||
| } | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Pagination hide misses production URLsMedium Severity The pagination hide rule matches only hrefs that start with Reviewed by Cursor Bugbot for commit 10dcac3. Configure here. |
||
|
|
||
| /* cookbooks card category label */ | ||
| .cookbook-tag { | ||
| display: block; | ||
| font-size: 0.6875rem; | ||
| font-weight: 600; | ||
| letter-spacing: 0.06em; | ||
| text-transform: uppercase; | ||
| opacity: 0.55; | ||
| margin-bottom: 0.375rem; | ||
| } | ||


There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.