Safe Browser

Build a local browser-agent demo where the generated runtime agent has exactly one browser capability: safe_browser. The tool owns the Playwright/CDP session, enables Fetch interception for all requests, and fails any request whose host is not allowlisted.

This skill is a builder guide. The skill itself is not the runtime boundary; the generated Claude Agent SDK app is.

When to Use

• The user asks for a browser agent that must stay on an allowlisted site.
• The user wants to demonstrate prompt-injection or link-following containment.
• The user asks to build a scraper or browser workflow with domain policy.
• The user asks for a Claude Agent SDK example first. Keep OpenAI Agents SDK variants out unless requested.

Default Approach

Use the Claude Agent SDK local template:

cp -R skills/safe-browser/templates/claude-agent-sdk /tmp/safe-browser-demo
cd /tmp/safe-browser-demo
npm install
cp ~/Developer/scratchpad/.env .env 2>/dev/null || true
node hn-scraper-demo.mjs

To watch the local browser instead of running headless:

SAFE_BROWSER_HEADLESS=false node hn-scraper-demo.mjs

If Chromium is missing:

npx playwright install chromium

Runtime Shape

User task
  -> coding agent uses this skill to create a demo app
    -> Claude Agent SDK runtime agent
      -> only tool: safe_browser
        -> local Chromium
        -> CDP Fetch.enable({ urlPattern: "*" })
        -> allowlist decision
          -> Fetch.continueRequest for allowed hosts
          -> Fetch.failRequest for blocked hosts

Tool Design Rules

Expose constrained actions, not raw CDP:

• goto: navigate to an absolute URL through Page.navigate.
• extract_front_page: return structured data for the Hacker News front page.
• extract_comments: return structured data for a Hacker News comments page.
• current_url: report the current page URL.
• audit_log: return CDP allow/block decisions.