How to Use the WebScrapingAPI MCP in Vercel AI SDK

Q: Can I use WebScrapingAPI to pull product data and display it using Vercel AI SDK?

Absolutely. Use scrapeecommerceproduct to fetch structured JSON containing price, title, and reviews. Since this is an SDK client, you'll see that data stream directly into your React frontend.

Q: Is WebScrapingAPI compatible with headless rendering when using Vercel AI SDK?

Yes, you can use scrapejsrendered to capture full rendered states. The result stream will contain the resulting HTML payload once the headless browser completes its work.

Stream real-time web data into your UI using the Vercel AI SDK.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers - Free for Subscribers

Connect WebScrapingAPI MCP to Vercel AI SDK

Create your Vinkius account to connect WebScrapingAPI to Vercel AI SDK and route execution through our secure gateway. The platform manages server hosting, runtime updates, and security layers. Configuration requires no manual server provisioning.

GDPR Free for Subscribers

Setup WebScrapingAPI with Vercel AI SDK

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Real-Time Product Data Display with MCP Server

Need to show a user product details as they are found? Use `scrape_ecommerce_product` to pull price, title, and reviews from major retail sites. The data streams directly into the UI, letting your users see it appear live instead of hitting a spinner. This capability is perfect for building checkout experiences or comparison tools where latency matters. Your agent doesn't wait for the full scrape; it pushes the structured JSON data as soon as `scrape_ecommerce_product` returns usable records.

Dynamic Search Result Streaming

When you need to find information quickly, don't rely on static search results. Run `search_google_serp` to get structured data from Google in real time. This lets your agent process and stream the top results immediately as they come back. We also offer `search_bing_serp`. By streaming SERP data through the MCP Server, you can build interactive search interfaces that feel instant and responsive across different frontends.

Custom Web Scraping in Streams

The general scraping tool, `custom_api_scrape`, lets your agent scrape using specific parameters like country or session details. You can configure the scrape to target niche data points and stream those results instantly. If you need higher anonymity for a critical step, use `scrape_via_residential_proxy`. The MCP Server handles the proxy rotation, ensuring that even complex scrapes appear live in your user's browser without hitting rate limits.

Setup guide

Set up WebScrapingAPI MCP in Vercel AI SDK

Prerequisites

Node.js 18+ and a TypeScript project
ai + @modelcontextprotocol/sdk packages
Active Vinkius subscription with a valid endpoint token

1

Install dependencies

Run npm install ai @modelcontextprotocol/sdk plus your preferred model provider (e.g. @ai-sdk/openai).
2

Create the Streamable HTTP transport

Use StreamableHTTPClientTransport with your Vinkius endpoint URL. Replace [YOUR_TOKEN_HERE] with your token from cloud.vinkius.com.
3

Discover and use tools

Call mcpClient.tools() to auto-discover all WebScrapingAPI tools. Pass them directly to generateText() or streamText() — no manual schema definitions needed.
4

Works with any model provider

Swap openai("gpt-4o") for any AI SDK provider — Anthropic, Google, Mistral. The MCP tools work identically across all supported models.

index.ts

import { experimental_createMCPClient as createMCPClient } from "ai";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

const transport = new StreamableHTTPClientTransport(
  new URL("https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp")
);

const mcpClient = await createMCPClient({ transport });
const tools = await mcpClient.tools();

const { text } = await generateText({
  model: openai("gpt-4o"),
  tools,
  prompt: "List recent WebScrapingAPI transactions",
});

console.log(text);
await mcpClient.close();

Get your connection token →

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by WebScrapingAPI. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Connect WebScrapingAPI now

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about WebScrapingAPI MCP in Vercel AI SDK

The MCP Server facilitates streaming by pushing results directly into your Next.js or Svelte component as they become available. You don't get a single large chunk of JSON; you get a continuous stream that updates the UI in real time.

Absolutely. Use `scrape_ecommerce_product` to fetch structured JSON containing price, title, and reviews. Since this is an SDK client, you'll see that data stream directly into your React frontend.

The MCP Server handles the failure and streams an error message back through the connection. Your client can listen for that specific stream event and display a helpful 'Could not find results' message instead of crashing the UI.

Yes, you can use `scrape_js_rendered` to capture full rendered states. The result stream will contain the resulting HTML payload once the headless browser completes its work.

This server primarily handles public web content, including raw HTML, structured search results (SERP), and e-commerce product metadata. It doesn't interact with private user accounts or databases.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python

Google ADK sdk-python

Pydantic AI sdk-python

Vercel AI SDK sdk-typescript