Automate Vision-Based Web Scraping with n8n, Gemini & ScrapingBee

Opening Problem Statement

Meet Sarah, an e-commerce analyst at a growing retail company. Every week, Sarah spends several tedious hours manually gathering product details like prices, brands, and promotions from dozens of competitor websites. This manual data collection leads to costly delays, frequent errors, and frustration with inconsistent formatting. Plus, sometimes websites change their layout, breaking her scraping scripts and forcing manual intervention. Sarah wishes there was an intelligent, flexible way to automate this tedious data gathering — a solution that handles both traditional HTML scraping and also understands visual aspects like promotions displayed on web pages.

This is where our Vision-Based AI Agent Scraper with Google Sheets, ScrapingBee, and Gemini workflow shines. It combines powerful AI capable of analyzing webpage screenshots with structured parsing and Google Sheets integration, automating Sarah’s tedious e-commerce competitor data collection efficiently and reliably.

What This Automation Does

In simple terms, when Sarah triggers this workflow, here is what happens:

• The workflow reads a list of URLs from Google Sheets where competitor product pages are listed.
• For each URL, it uses ScrapingBee to capture a full-page screenshot and feed it to Google Gemini’s vision-based AI model for data extraction.
• If the AI cannot accurately extract all product information from the screenshot (e.g., text unclear or incomplete), it automatically falls back to retrieving and parsing the HTML content using ScrapingBee.
• The extracted data (product titles, prices, brands, promotions) is parsed into a structured JSON format using the Structured Output Parser node.
• The JSON data array is split into individual entries and each product’s details are appended as rows in the Google Sheets “Results” sheet for easy viewing and analysis.
• This run can be triggered manually or adapted to other triggers, enabling flexible scheduling or event-based automation.

This specialized vision-plus-HTML approach saves Sarah hours per week, eliminates manual copy-paste errors, and provides an adaptable scraping system that is more resilient to webpage layout changes.

Prerequisites ⚙️

• 📧 Google Sheets account (with service account credentials for API access)
• 🔌 ScrapingBee API key (to capture screenshots and retrieve HTML content)
• 🔑 Google Gemini (PaLM) API credentials for the Gemini-1.5-Pro model
• ⏱️ An n8n account or self-hosted instance where you can run workflows

Optionally, for self-hosting your n8n instance, consider providers like Hostinger.

Step-by-Step Guide to Build the Vision-Based AI Agent Scraper

Step 1: Trigger setup — Manual start

Open n8n, click + New Workflow. Add the Manual Trigger node named “When clicking ‘Test workflow’”.

This node allows you to manually start the workflow, perfect for testing and controlled runs. You can replace this later with other triggers like time-based or webhook.

You should see a node named “When clicking ‘Test workflow’” with no parameters needed.

Step 2: Fetch the list of URLs from Google Sheets

Add a Google Sheets node named “Google Sheets – Get list of URLs”.

Configure it with your Google Sheets document ID and select the sheet that contains the list of URLs. Use service account authentication.

Set the mode to read all rows (gid=0 default sheet). Your Sheet should have a “url” column with URLs to scrape.

After this, running the workflow will fetch an array of URLs.

Common mistake: Forgetting to give the service account read access to your Sheets file.

Step 3: Format fields for downstream nodes

Add a Set node called “Set fields”.

Under “Assignments,” assign the ‘url’ field as {{$json.url}}, so each URL is passed down correctly.

This prepares data for the ScrapingBee HTTP requests.

Step 4: Capture full-page screenshots with ScrapingBee

Add an HTTP Request node named “ScrapingBee – Get page screenshot”.

Set the request method to GET and URL to https://app.scrapingbee.com/api/v1.

Add query parameters:

• api_key: Your ScrapingBee API key
• url: {{$json.url}} from previous node
• screenshot_full_page: true to capture the entire page

In headers, add a User-Agent string like Mozilla/5.0 (Windows NT 10.0; Win64; x64)... for authenticity.

This node returns a binary image of the webpage screenshot.

Common pitfall: Forgetting to set screenshot_full_page to true resulting in partial screenshots.

Step 5: Configure Vision-based AI Agent node

Add the Vision-based Scraping Agent (AI Agent) node.

Configure the node with the system prompt specifying data fields to extract: product title, price, brand, promotions.

It uses the screenshot image as input and tries to extract all data visually.

Configure it to fallback to an HTML scraping subworkflow if data is incomplete.

This node uses the Google Gemini Chat Model with the gemini-1.5-pro-latest model.

Step 6: The fallback to HTML scraping

The AI Agent only calls the HTML-Scraping Tool node if visual extraction fails.

The HTML-Scraping Tool is a subworkflow that:

• Uses a Set fields – from AI agent query node to accept URL from the AI Agent
• Calls ScrapingBee HTTP node with that URL to get the HTML (GET request to ScrapingBee)
• Converts this HTML content to Markdown in the HTML to Markdown node for token efficiency
• Then feeds this Markdown back to the AI Agent for parsing

This ensures maximal data extraction accuracy by combining vision and HTML analysis.

Step 7: Parse AI Agent output with Structured Output Parser

This node formats the AI results into structured JSON following a defined schema:

[{
  "product_title": "The title of the product",
  "product_price": "The price of the product",
  "product_brand": "The brand of the product",
  "promo": "true or false",
  "promo_percentage": "NUM %"
}]

This JSON structure corresponds to columns in Google Sheets for easy output.

Step 8: Split the JSON array to individual rows

Add a Split Out node.

This node takes the JSON array and splits it into individual items that can be input as separate rows into Google Sheets.

Step 9: Append results to Google Sheets

Finally, add a Google Sheets – Create Rows node.

Configure it to append data into the “Results” sheet of your Google Sheets document.

Map the extracted fields (product_title, product_price, product_brand, promo, promo_percentage) to respective columns.

After running the workflow, you’ll see all extracted products neatly added to your sheet.

Customizations ✏️

• Adjust extracted fields: In the Structured Output Parser node, change the JSON schema to capture additional data points like product ratings or stock availability.
• Trigger Options: Replace the manual trigger with a cron node for scheduled scraping or a webhook to trigger scraping on demand.
• Partial Screenshot Focus: In the ScrapingBee – Get page screenshot node, modify parameters to capture only specific page sections for focused data extraction.
• Model Choice: Swap the Google Gemini Chat Model to another supported multimodal model if Gemini APIs become unavailable or for cost considerations.
• Sheet Structure: Change the Google Sheets output fields or add transformations in the Google Sheets – Create Rows to match your internal database schema.

Troubleshooting 🔧

• Problem: “No data extracted or empty output from AI Agent”
  • Cause: Screenshot was incomplete or low quality; AI could not recognize content.
  • Solution: Verify the ScrapingBee screenshot_full_page parameter is true and User-Agent header is correctly set.
• Problem: “Google Sheets append rows fails”
  • Cause: Mismatched column names in Sheets or insufficient permissions.
  • Solution: Ensure column headers in the “Results” sheet exactly match the mapped fields in the node. Confirm service account has write access.
• Problem: “HTML scraping fallback is not triggered”
  • Cause: AI Agent is not properly configured to call the HTML-based tool.
  • Solution: Check the AI Agent’s system prompt and tool configuration to confirm fallback usage is enabled.

Pre-Production Checklist ✅

• Verify Google Sheets contains valid URLs to scrape.
• Confirm ScrapingBee API key is active and has quota for screenshots & HTML requests.
• Test AI Agent node separately with sample screenshots to verify output accuracy.
• Confirm Google Sheets service account permissions for reading URLs and writing results.
• Run full test workflow with debug logs enabled to track step-by-step data flow.

Deployment Guide

Activate your workflow by setting the trigger from Manual to a scheduled Cron node or webhook for automated scraping.

Monitor the workflow logs in n8n for errors and data accuracy post-deployment.

Periodically audit the scraping results to adjust prompts or parsing if website changes occur.

FAQs

• Q: Can I use another scraping API instead of ScrapingBee?

  A: Yes, as long as the API can provide full-page screenshots and HTML access. Be sure to update the HTTP Request nodes accordingly.

• Q: Does using Google Gemini consume a lot of API credits?

  A: The gemini-1.5-pro model is powerful but can be costly. Monitor usage and optimize by limiting calls or using cheaper fallback models.

• Q: Is my data secure in this workflow?

  A: All data is processed within your n8n instance and APIs. Use encrypted credentials and secure access to your Google Sheets for protection.

• Q: Will it work for non e-commerce sites?

  A: Yes, but you will need to modify the AI agent’s prompts and the output parser schema to suit your data extraction requirements.

Conclusion

By building this Vision-Based AI Agent Scraper using n8n with Google Sheets, ScrapingBee, and Google Gemini, you’ve created a cutting-edge automation that extracts structured data smartly from webpages using both visual and HTML data sources.

This workflow saves countless hours compared to manual scraping, improves data accuracy and reliability, and offers a powerful template adaptable to many industries beyond e-commerce.

Next, consider extending this automation by integrating notifications when new deals appear, or feeding the scraped data into dashboards for real-time market analysis.

You’re now equipped to automate complex web scraping with AI-powered vision and parsing—happy automating!