Add Code Mode with Browser REPL and WebMCP cookbook

[dprevoznik]

Summary

Adds a Common Patterns cookbook, Code Mode with Browser REPL and WebMCP, at /browsers/code-mode-webmcp. It shows how any agent harness can run fully in code mode. The model's only browser-control tool is the Browser REPL. From code, it calls the page's WebMCP tools (webmcp.listTools() / webmcp.invokeTool()) when one fits, and uses the REPL's browser helpers for everything else.

The page has two parts:

• Adding the pattern to any harness. This part is independent of any framework. It covers:
  • the browser REPL tool: the Kernel MCP browser_repl tool, or your own wrapper around kernel.browsers.repl()
  • WebMCP from inside the REPL
  • a browser lifecycle that always ends, whether the harness or the agent owns it
  • a per-call time limit that fits your longest cell, with no retries
  • returning errors and screenshots as tool results
  • instructions that ask for programs instead of single actions
• Example: AI SDK with the Kernel MCP server. An AI SDK ToolLoopAgent running gpt-6-luna at medium reasoning.
  • Its tools come from mcp.onkernel.com through @ai-sdk/mcp.
  • activeTools allows exactly two tools: manage_browsers for the agent's own session, and browser_repl for everything else.
  • The agent creates and deletes its own browser. The script deletes the session by name as a fallback if the run ends early.
  • Every REPL call gets 150 seconds, the MCP tool's maximum.
  • The task: on bikesandbacon.com, which registers WebMCP tools, find the 3 newest articles and summarize each one.

Other changes:

• Adds the page to the Common Patterns nav.
• Adds a cookbook card with a new code-mode.png image, which passes cookbook_card.py check.
• Links the new page from the Browser REPL page.
• Shortens the Playwright computer-use fallback page's sidebar title to "Playwright with Computer Use Fallback".

The example is TypeScript-only because AI SDK is TypeScript-only.

Testing

Ran the example end to end against production across a number of runs, including once from a fresh install following the page's Setup steps. It completed the task every time.

🤖 Generated with Claude Code

---

Note

Low Risk
Documentation and navigation only; no product code or runtime behavior changes.

Overview
Adds a Common Patterns cookbook at /browsers/code-mode-webmcp that documents code mode for browser agents: one browser_repl tool, WebMCP via webmcp.listTools() / webmcp.invokeTool() inside REPL cells, and REPL helpers for everything else.

The page includes a runnable AI SDK ToolLoopAgent example (Kernel MCP, activeTools limited to manage_browsers + browser_repl, 150s REPL timeout, session cleanup) and framework-agnostic guidance on lifecycle, timeouts, no retries, and “write programs not single actions.”

Docs wiring: new entry in docs.json Common Patterns, cookbook card on cookbooks.mdx, cross-link from Browser REPL multi-step use case, and a shorter sidebarTitle on the Playwright computer-use fallback page.

^{Reviewed by Cursor Bugbot for commit 51a3e31. Bugbot is set up for automated code reviews on this repo. Configure here.}

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
Kernel	🟢 Ready	View Preview	Sep 29, 2026, 4:45 PM

💡 Tip: Enable Automations to automatically generate PRs for you.

[cursor]

Risk: Very Low. Approving.

The diff is documentation for the Mintlify site only:

• New cookbook page browsers/code-mode-browser-repl.mdx (fenced TypeScript and Python examples, including a sample system prompt). Those samples are rendered as docs; this repo does not load them as model instructions or run them.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and a single Common Patterns nav entry in docs.json.
• A static card image, images/cookbooks/code-mode.png.

No application logic, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file, and the main ruleset has require_code_owner_review off. Blast radius is the published docs page and its nav entry.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after ad78ac3 (Rebuild code mode cookbook on AI SDK ToolLoopAgent). Risk did not increase, so the existing approval stays. Not approving again.

The new commit only rewrites browsers/code-mode-browser-repl.mdx. Against main, the PR is still documentation and navigation:

• New cookbook page with a fenced TypeScript example (including a sample INSTRUCTIONS string). This Mintlify repo renders that page; it does not load the file as model instructions or execute the sample.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and one Common Patterns nav entry in docs.json.
• A static PNG, images/cookbooks/code-mode.png.

No application logic, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file. Blast radius is the published docs page and its nav entry.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after e183c60 (Rename cookbook to Entering Code Mode with Browser REPL). Risk did not increase, so the existing approval stays. Not approving again.

That commit only renames the page title, the cookbook card title, and the cross-link text. Against main, the PR is still Mintlify documentation and navigation:

• New cookbook page browsers/code-mode-browser-repl.mdx. The INSTRUCTIONS string is inside a fenced TypeScript sample on a docs page (frontmatter plus a docs.json nav entry). This repo does not load that file as model instructions or execute the sample.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and one Common Patterns nav entry in docs.json.
• A static PNG, images/cookbooks/code-mode.png.

No application logic, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file, and the main ruleset has require_code_owner_review off. Blast radius is the published docs page and its nav entry.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after 862cdc7 (Use Kernel MCP browser_repl in the code mode cookbook). Risk did not increase, so the existing approval stays. Not approving again.

That commit only rewrites browsers/code-mode-browser-repl.mdx. The sample now connects an AI SDK ToolLoopAgent to the Kernel MCP server and limits browser control to browser_repl. The agent instructions string is still inside a fenced TypeScript sample on a Mintlify docs page. This repo renders that page; it does not load the file as model instructions or execute the sample.

Against main, the PR is still documentation and navigation:

• New cookbook page browsers/code-mode-browser-repl.mdx.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and one Common Patterns nav entry in docs.json.
• A static PNG, images/cookbooks/code-mode.png.

No application logic, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file, and the main ruleset has require_code_owner_review off. Blast radius is the published docs page and its nav entry.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after 149700f (Frame code mode cookbook around any agent harness). Risk did not increase, so the existing approval stays. Not approving again.

That commit only rewrites prose in browsers/code-mode-browser-repl.mdx and the card blurb in cookbooks.mdx. The page is now framed as applying to any tool-calling harness, with the same AI SDK sample. The fenced TypeScript example, including the agent instructions string, is unchanged. This repo renders the page as Mintlify docs; it does not load the file as model instructions or run the sample.

Against main, the PR is still documentation and navigation:

• New cookbook page browsers/code-mode-browser-repl.mdx.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and one Common Patterns nav entry in docs.json.
• A static PNG, images/cookbooks/code-mode.png.

No application logic, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file. Blast radius is the published docs page and its nav entry.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after 0b23cae (Add WebMCP-first step and disable reporting tools in code mode cookbook). Risk did not increase, so the existing approval stays. Not approving again.

That commit only edits browsers/code-mode-browser-repl.mdx. It adds WebMCP cookbook prose and updates the fenced TypeScript sample: DISABLED_TOOLS also drops get_more_tools and submit_feedback, and the sample instructions string now describes webmcp plus browser_repl. Those strings sit inside a code fence on a Mintlify page registered in docs.json. This repo renders the page; it does not load the file as model instructions or run the sample.

Against main, the PR is still documentation and navigation:

• New cookbook page browsers/code-mode-browser-repl.mdx.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and one Common Patterns nav entry in docs.json.
• A static PNG, images/cookbooks/code-mode.png.

No application logic, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file, and the main ruleset has require_code_owner_review off. Blast radius is the published docs page and its nav entry.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 0b23cae. Configure here.}

[cursor]

Risk: Very Low. Re-checked after a1c1dd0 (Let the agent own the browser lifecycle through Kernel MCP). Risk did not increase, so the existing approval stays. Not approving again.

That commit only edits browsers/code-mode-browser-repl.mdx. The fenced TypeScript sample now has the agent create and delete its browser through Kernel MCP (manage_browsers, manage_replays), with a harness finally that deletes a leftover session by name. The agent instructions string inside that sample is documentation, not a prompt this repo loads.

Against main, the PR is still Mintlify documentation and navigation:

• New cookbook page browsers/code-mode-browser-repl.mdx
• One cross-link sentence in browsers/repl.mdx
• A cookbook card in cookbooks.mdx
• One Common Patterns nav entry in docs.json
• A cookbook card image

No application code, auth, infrastructure, or shared runtime paths changed. No CODEOWNERS file applies.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after 464e61b (Rename cookbook to Code Mode with WebMCP Structured Tools). Risk did not increase, so the existing approval stays. Not approving again.

That commit only renames documentation labels:

• browsers/webmcp-code-mode-fallback.mdx — page title is now "Code Mode with WebMCP Structured Tools", and sidebarTitle is removed.
• cookbooks.mdx — matching card title.
• browsers/repl.mdx — the cross-link text uses the new title. The URL is unchanged.

The fenced TypeScript sample, including the agent INSTRUCTIONS string, is unchanged. Against main, the PR is still Mintlify documentation and navigation only: a new cookbook page, a cookbook card, one nav entry in docs.json, a one-sentence cross-link, a sidebar title on the Playwright cookbook, and a cookbook image. Those pages are rendered docs. This repo does not load them as model instructions or run the sample. No application logic, auth, infrastructure, or shared runtime code changed.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[cursor]

Risk: Very Low. Re-checked after ae3858b (Move cookbook to /browsers/code-mode-webmcp), following 63b90ce and 0931531. Risk did not increase, so the existing approval stays. Not approving again.

Those three commits only rename the cookbook and its URL:

• browsers/webmcp-code-mode-fallback.mdx is renamed to browsers/code-mode-webmcp.mdx. The page title is now "Code Mode with Browser REPL and WebMCP", with sidebarTitle: "Code Mode with WebMCP". The fenced sample's example filename is code-mode-webmcp.ts. The agent INSTRUCTIONS string is unchanged.
• browsers/repl.mdx, cookbooks.mdx, and docs.json update the title and path to match.

Against main, the diff is still Mintlify documentation and navigation:

• New cookbook page browsers/code-mode-webmcp.mdx. The INSTRUCTIONS string sits inside a fenced TypeScript sample. docs.json only adds the page to the Common Patterns nav. This repo renders the page; it does not load the file as model instructions or run the sample.
• One sidebarTitle line in browsers/playwright-computer-use-fallback.mdx.
• One cross-link sentence in browsers/repl.mdx.
• A cookbook card in cookbooks.mdx and a static card image, images/cookbooks/code-mode.png.

No application code, auth, permissions, infrastructure, CI, or schema changes. No CODEOWNERS file. Blast radius is the published docs pages and their nav entries.

  

_{Sent by Cursor Automation: Assign PR reviewers}

[AnnaXWang]

made some changes for clarity and getting into the code quicker!