Add Cookbooks page

changelog.mdx

@@ -225,7 +225,7 @@ For API library updates, see the [Node SDK](https://github.com/onkernel/kernel-n
 <Update label="June 12" tags={["Product", "Docs"]}>
 ## Product updates
 
-- Released the [Kernel × Claude Managed Agents cookbook](https://github.com/kernel/claude-managed-agents-kernel), a public recipe for running parallel computer-use agent swarms with [Claude Managed Agents](/integrations/claude/claude-managed-agents) on Kernel cloud browsers, with API keys secured via Vaults.
+- Released the [Kernel × Claude Managed Agents cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/claude-managed-agents), a public recipe for running parallel computer-use agent swarms with [Claude Managed Agents](/integrations/claude/claude-managed-agents) on Kernel cloud browsers, with API keys secured via Vaults.
 - Shipped a `kernel-browser-harness` [skill](https://github.com/kernel/skills) for setting up Kernel browser sessions inside Claude Code with persistent session IDs across calls.
 - Extended `kernel browsers acquire` in the [CLI](https://github.com/kernel/cli) with `name` and `tags` parameters, so pooled browsers can be labeled at acquisition time alongside `browsers create`.
 - Made browser [telemetry](/browsers/telemetry) categories opt-in. The `--telemetry` flag (and `telemetry` request config) now records only the categories you list; enabling telemetry without specifying categories ships a small default set instead of every category.

cookbooks.mdx

@@ -0,0 +1,62 @@
+---
+title: "cookbooks"
+description: "end-to-end recipes to teach agents to use the internet"
+mode: "wide"
+---
+
+Self-contained cookbooks to clone and run. Use as 1-click starts for your agents or as templates for your own build.
+
+import { CookbookSearch } from '/snippets/cookbook-search.jsx';
+
+<CookbookSearch />
+
+<Columns className="responsive-columns" cols={3}>
+  <Card title="Agentic Payments" img="/images/cookbooks/payments.png" href="/browsers/enable-payments-in-browser-agent">
+    <div className="cookbook-tag">common patterns</div>
+    Enable Payments in a Browser Agent
+  </Card>
+  <Card title="AI SDK Agent" img="/images/cookbooks/vercel.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/ai-sdk-agent">
+    <div className="cookbook-tag">harnesses & models</div>
+    Browser automation with the Vercel AI SDK and Kernel's Playwright execution API.
+  </Card>
+  <Card title="Tinker RL" img="/images/cookbooks/tinker.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/tinker-rl">
+    <div className="cookbook-tag">harnesses & models</div>
+    RL training for computer use agents, using Tinker.
+  </Card>
+  <Card title="Mastra Web Task Assistant" img="/images/cookbooks/mastra.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/mastra-web-task-assistant">
+    <div className="cookbook-tag">harnesses & models</div>
+    Human-in-the-loop web task assistant with memory, built on Mastra.
+  </Card>
+  <Card title="Claude Managed Agents" img="/images/cookbooks/claude.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/claude-managed-agents">
+    <div className="cookbook-tag">harnesses & models</div>
+    Run parallel computer-use agent swarms, with API keys secured via Vaults.
+  </Card>
+  <Card title="Modal PR QA Agent" img="/images/cookbooks/modal.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/modal-pr-qa-agent">
+    <div className="cookbook-tag">harnesses & models</div>
+    QA your PR previews with Claude computer use on Modal, recorded with Replays.
+  </Card>
+  <Card title="Browser Use Model" img="/images/cookbooks/browser-use.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/browser-use-model">
+    <div className="cookbook-tag">harnesses & models</div>
+    Run the Browser Use bu-1.0 model on Kernel browser infrastructure.
+  </Card>
+  <Card title="Playwright & Computer Use" img="/images/cookbooks/playwright.png" href="/browsers/playwright-computer-use-fallback">
+    <div className="cookbook-tag">common patterns</div>
+    Using Playwright with Computer Use Fallback
+  </Card>
+  <Card title="Stagehand Google CUA Agent" img="/images/cookbooks/stagehand.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/stagehand-google-cua-agent">
+    <div className="cookbook-tag">harnesses & models</div>
+    Computer use agent with Google's Gemini 2.5 and Stagehand.
+  </Card>
+  <Card title="Vibium" img="/images/cookbooks/vibium.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/vibium">
+    <div className="cookbook-tag">harnesses & models</div>
+    Vibium browser automation over WebDriver BiDi.
+  </Card>
+  <Card title="Claude Computer Use Loop" img="/images/cookbooks/claude.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/claude-computer-use-loop">
+    <div className="cookbook-tag">harnesses & models</div>
+    Minimal implementation of Anthropic's computer use loop.
+  </Card>
+  <Card title="Modal Web Scraper" img="/images/cookbooks/modal.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/modal-web-scraper">
+    <div className="cookbook-tag">harnesses & models</div>
+    Scrape JS-rendered pages behind a login, on Modal with a Kernel headful browser.
+  </Card>
+</Columns>

cookbooks/ai-sdk-agent.mdx

@@ -0,0 +1,4 @@
+---
+title: "AI SDK Agent"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/ai-sdk-agent"
+---

cookbooks/browser-use-model.mdx

@@ -0,0 +1,4 @@
+---
+title: "Browser Use Model"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/browser-use-model"
+---

cookbooks/claude-computer-use-loop.mdx

@@ -0,0 +1,4 @@
+---
+title: "Claude Computer Use Loop"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/claude-computer-use-loop"
+---

cookbooks/claude-managed-agents.mdx

@@ -0,0 +1,4 @@
+---
+title: "Claude Managed Agents"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/claude-managed-agents"
+---

cookbooks/mastra-web-task-assistant.mdx

@@ -0,0 +1,4 @@
+---
+title: "Mastra Web Task Assistant"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/mastra-web-task-assistant"
+---

cookbooks/modal-pr-qa-agent.mdx

@@ -0,0 +1,4 @@
+---
+title: "Modal PR QA Agent"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/modal-pr-qa-agent"
+---

cookbooks/modal-web-scraper.mdx

@@ -0,0 +1,4 @@
+---
+title: "Modal Web Scraper"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/modal-web-scraper"
+---

cookbooks/stagehand-google-cua-agent.mdx

@@ -0,0 +1,4 @@
+---
+title: "Stagehand Google CUA Agent"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/stagehand-google-cua-agent"
+---

cookbooks/tinker-rl.mdx

@@ -0,0 +1,4 @@
+---
+title: "Tinker RL"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/tinker-rl"
+---

cookbooks/vibium.mdx

@@ -0,0 +1,4 @@
+---
+title: "Vibium"
+url: "https://github.com/kernel/cookbooks/tree/main/integrations/vibium"
+---

docs.json

@@ -137,9 +137,7 @@
                   "browsers/curl",
                   "browsers/ssh",
                   "browsers/computer-controls",
-                  "browsers/playwright-execution",
-                  "browsers/playwright-computer-use-fallback",
-                  "browsers/enable-payments-in-browser-agent"
+                  "browsers/playwright-execution"
                 ]
               },
               {
@@ -308,6 +306,34 @@
         "tab": "API Reference",
         "openapi": "https://api.onkernel.com/spec.json"
       },
+      {
+        "tab": "Cookbooks",
+        "pages": [
+          "cookbooks",
+          {
+            "group": "Common Patterns",
+            "pages": [
+              "browsers/playwright-computer-use-fallback",
+              "browsers/enable-payments-in-browser-agent"
+            ]
+          },
+          {
+            "group": "Harnesses & Models",
+            "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": [

integrations/browser-use.mdx

@@ -5,6 +5,10 @@ icon: "/images/integration-icons/browser-use-logo-transparent.svg"
 
 [Browser Use](https://github.com/browser-use/browser-use) is the AI browser agent that empowers anyone to automate repetitive online tasks, no code required. By integrating with Kernel, you can run Browser Use Agents and automations with cloud-hosted browsers.
 
+<Tip>
+A complete, runnable example that drives the Browser Use bu-1.0 model on Kernel browsers lives in the [Browser Use + Kernel cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/browser-use-model).
+</Tip>
+
 ## Adding Kernel to existing Browser Use implementations
 
 If you already have a Browser Use implementation, you can easily switch to using Kernel's cloud browsers by updating your Browser definition.

integrations/claude/claude-managed-agents.mdx

@@ -58,7 +58,7 @@ The example code below is TypeScript. The same API is exposed through the Anthro
 ## Quickstart
 
 <Tip>
-The complete, runnable version of this quickstart lives in the [Claude Managed Agents + Kernel cookbook](https://github.com/kernel/claude-managed-agents-kernel), alongside more recipes for parallel computer-use agent swarms.
+The complete, runnable version of this quickstart lives in the [Claude Managed Agents + Kernel cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/claude-managed-agents), alongside more recipes for parallel computer-use agent swarms.
 </Tip>
 
 <Steps>

integrations/computer-use/anthropic.mdx

@@ -6,6 +6,10 @@ title: "Anthropic"
 
 By integrating Computer Use with Kernel, you can run these AI-powered browser automations on cloud-hosted infrastructure, eliminating the need for local browser management and enabling scalable, reliable AI agents.
 
+<Tip>
+A minimal, runnable implementation of Anthropic's computer use loop lives in the [Claude computer use loop cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/claude-computer-use-loop).
+</Tip>
+
 ## Quick setup with Computer Use
 
 Get started with Computer Use and Kernel using our pre-configured app template:

integrations/stagehand.mdx

@@ -9,6 +9,10 @@ icon: "/images/integration-icons/stagehand-logo-transparent.svg"
 This guide covers both Stagehand SDK v4 and v3. v4 runs as a Chrome extension alongside the browser rather than driving it purely over CDP, so a remote Kernel browser needs the extension loaded into it — the version tabs below show each setup. To move between versions, see the [Stagehand migration guide](https://docs.stagehand.dev). The CLI template uses v4.
 </Note>
 
+<Tip>
+A complete, runnable computer use agent built with Stagehand and Google's Gemini 2.5 lives in the [Stagehand + Kernel cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/stagehand-google-cua-agent).
+</Tip>
+
 ## Quick start with the Stagehand template
 
 The fastest way to run Stagehand on Kernel is our app template, which comes pre-wired for v4:

integrations/vercel/ai-sdk.mdx

@@ -9,6 +9,10 @@ The `@onkernel/ai-sdk` package provides Vercel AI SDK-compatible tools for brows
 
 With this tool, AI agents can execute Playwright code on Kernel's remote browsers, enabling powerful browser automation capabilities in your AI-powered applications.
 
+<Tip>
+A complete, runnable agent built on this tool lives in the [AI SDK + Kernel cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/ai-sdk-agent).
+</Tip>
+
 ## Installation
 
 Install the package along with its peer dependencies:

integrations/vibium.mdx

@@ -5,6 +5,10 @@ icon: "/images/integration-icons/vibium.svg"
 
 [Vibium](https://github.com/VibiumDev/vibium) is a brand-new browser automation framework for AI agents that is built on WebDriver BiDi, a W3C standard. As of [v26.3.9](https://github.com/VibiumDev/vibium/releases/tag/v26.3.9), any agent can now use Vibium to connect to Kernel cloud browsers to navigate pages, fill forms, click buttons, and take screenshots. We're really excited to keep working with Jason Huggins and to keep supporting open web standards.
 
+<Tip>
+A complete, runnable version of this integration lives in the [Vibium + Kernel cookbook](https://github.com/kernel/cookbooks/tree/main/integrations/vibium).
+</Tip>
+
 ## Adding Kernel to existing Vibium implementations
 
 If you already have a Vibium implementation, you can switch to using Kernel's cloud browsers by creating a Kernel browser session and connecting Vibium to the returned `webdriver_ws_url`.

snippets/cookbook-search.jsx

@@ -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>
+  );
+};

style.css

@@ -312,3 +312,23 @@ 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;
+}
+
+/* cookbooks card category label — matches the site eyebrow/type setup in the reference */
+.cookbook-tag {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: -0.015em;
+  opacity: 0.72;
+  margin-bottom: 0.5rem;
+}
+
+html.dark .cookbook-tag {
+  color: rgba(237, 238, 240, 0.7);
+}