Can I use this recipe in production?

Yes. Every recipe is production-tested with error handling, logging, and deployment guidance.

Which LLM providers are supported?

Recipes support OpenAI, Anthropic Claude, Google Gemini, and open-source models via a unified interface.

How do I customize these recipes?

Each recipe includes a configuration section. Override model selection, API keys, and parameters without changing core logic.

Playwright Browser Agent: AI Recipe

What You Get

-Headless browser control with Playwright
-AI-guided navigation and decision making
-Data extraction pipeline
-Screenshot and PDF capture
-Multi-page workflow automation

Step by Step

1. Set up Playwright and browser management

Install Playwright with browser binaries. Create a browser pool that manages multiple contexts. Configure stealth options: randomized viewports, human-like mouse movements, and realistic user agents.

2. Build the task planner

Create an LLM-based planner that takes a natural language task and breaks it into browser steps. Each step has: action type (navigate, click, type, extract, screenshot), selector or URL, and expected outcome.

3. Implement the execution engine

Build a step executor that runs each plan step in Playwright. Include: smart wait strategies (networkidle, selector visibility), error recovery (retry with alternative selector), and timeout handling (30s per step default).

4. Add data extraction

Implement structured data extraction. Support: table extraction, list scraping, text content by selector, attribute extraction, and full page screenshots. Return results as JSON.

5. Handle anti-bot measures

Add CAPTCHA detection (look for known CAPTCHA iframes/text), skip or alert on detection. Handle login popups, cookie consent banners, and infinite scroll pages.

6. Build the web UI

Create a simple interface: URL input, task description textarea, run button, and results display. Show live logs of each step. Allow downloading results as JSON or CSV.

7. Add session management

Persist browser sessions to avoid re-login. Store cookies and local storage between runs. Add a session timeout of 15 minutes of inactivity.

Stack

PlaywrightOpenAI OpenAI / ClaudeNode.js/TypeScriptBrowser context management

Build This

Copy this prompt and paste it into Claude Code, OpenCode, Codex, or Cursor to build this recipe.

Build a browser automation agent using Playwright and an LLM planner. ROLE: You are an AI browser agent that converts natural language tasks into browser actions, executes them safely, and returns structured data. CONSTRAINTS: - Maximum 20 browser actions per task to prevent infinite loops - Each step has a 30-second timeout; after 3 failures on the same step, skip and log - Never execute login forms, payment pages, or destructive actions without explicit user confirmation - Use stealth mode: randomized viewports, human-like delays between actions (500-2000ms) - All extracted data must be validated before returning (no empty/null fields) TOOL CALLING: - Use function calling for all browser operations: navigate(url), click(selector), type(selector, text), extract(selector, attribute?), screenshot(selector?), scroll(direction), wait_for(selector, timeout?) - Define each tool with JSON Schema parameters and return types - On tool failure: retry once with an alternative selector (e.g., fallback to text match if CSS fails) STRUCTURED OUTPUT: - Task plan must return JSON: { steps: [{ action: string, selector?: string, url?: string, text?: string, wait_after?: number }], estimated_duration: string } - Extraction results must return JSON: { data: Record<string, any>[], metadata: { page_url: string, extracted_at: string, row_count: number } } - Error report must return JSON: { step_failed: number, error_type: string, screenshot_path?: string, suggestion: string } CHAIN OF THOUGHT: - Before executing: analyze the page structure, identify the most reliable selectors, plan fallback strategies - After each action: verify the page state changed as expected (URL changed, element appeared, text changed) - On extraction: validate data types, check for missing fields, deduplicate results FEW-SHOT EXAMPLES: Task: 'Extract top 5 AI startups from YC batch' Plan: [ { action: 'navigate', url: 'https://www.ycombinator.com/companies?batch=W2025&industry=AI' }, { action: 'wait_for', selector: '.company-name', timeout: 10000 }, { action: 'extract', selector: '.company-name', attribute: 'textContent', limit: 5 }, { action: 'extract', selector: '.company-description', attribute: 'textContent', limit: 5 } ] Expected output: { data: [{ name: 'Company1', description: '...' }, ...], metadata: { row_count: 5 } } Task: 'Find pricing for a SaaS product' Plan: [ { action: 'navigate', url: 'https://example.com' }, { action: 'click', selector: 'text=Pricing' }, { action: 'extract', selector: '.pricing-tier', attribute: 'textContent' } ] EVALUATION CRITERIA: - Plan accuracy: does the plan achieve the stated goal in minimal steps? - Extraction completeness: percentage of requested fields successfully extracted - Error recovery: did the agent handle unexpected page states gracefully? - Data quality: no empty fields, correct data types, no duplicates The system should: 1) Accept a natural language task description via API or web UI, 2) Generate a step-by-step execution plan using the LLM, 3) Execute each step via Playwright with smart waits and error recovery, 4) Extract structured data from pages, 5) Handle CAPTCHAs and anti-bot measures (skip and alert), 6) Return results as JSON with metadata and optional CSV export, 7) Provide a web UI for task input, live execution logs, and result download.

Common Failure Modes

!Sites with aggressive bot detection
!Dynamic content that requires JavaScript
!Session timeouts on long workflows
!CAPTCHA blocks

Implementation Notes

Use stealth Playwright configuration. Run in headless mode but keep screenshots for debugging. Set reasonable timeouts per step.

Related skill: playwright lead research

Ship playwright browser agent in production with 4M Labs

4M Labs designs and ships applied AI systems -- connected to your tools, secured for your team, deployed with monitoring.

Connected to your tools and data sources
Secured for your team with proper access controls
Deployed with monitoring and error handling
Documented for handoff and future maintenance

Work With 4M Labs

Frequently Asked Questions

Can I use this recipe in production?: Yes. Every recipe is production-tested with error handling, logging, and deployment guidance.
Which LLM providers are supported?: Recipes support OpenAI, Anthropic Claude, Google Gemini, and open-source models via a unified interface.
How do I customize these recipes?: Each recipe includes a configuration section. Override model selection, API keys, and parameters without changing core logic.