How to Use the Urlbox MCP in Vercel AI SDK

Stream visual data streams directly into your UI using 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 Urlbox MCP to Vercel AI SDK

Create your Vinkius account to connect Urlbox 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 Urlbox with Vercel AI SDK

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Capture basic URL screenshots.

The `take_screenshot` tool grabs a standard PNG image of the given URL. This is useful for quick visual checks when you don't need high resolution or specific viewport sizes. You can easily call this from your client code, and the result streams right into your React component. The user sees the image appear live, without waiting on a loading spinner.

Generate reports via PDF.

When you run `generate_pdf`, the system takes the content from a URL and spits out a complete PDF file. This makes it simple to generate official-looking audit documents directly in your user interface. It handles the whole rendering process, letting you pass the resulting data stream back up through your Vercel AI SDK client.

Pull basic page metadata.

The `get_metadata` tool pulls core information about a URL before any visual capture happens. This lets your agent decide if it needs to proceed with a screenshot or just pass the data along. You call this method, and the structured results stream back instantly, giving you context that helps guide the rest of your application's logic.

Setup guide

Set up Urlbox 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 Urlbox 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 Urlbox 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 Urlbox. 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 Urlbox 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 Urlbox MCP in Vercel AI SDK

The MCP Server streams tool results directly into your UI layer. This means when you call a function like `take_screenshot` from the Vercel AI SDK, the user sees the data appearing in real-time as it arrives.

Yup. You can absolutely stream a complete PDF generation process using `generate_pdf`. Your agent calls the tool, and the resulting file data flows back through your client's streaming mechanism.

Urlbox lets you perform several types of audits. You can get full-page views, mobile viewport shots, or basic screenshots, all streamed directly to your frontend via the Vercel AI SDK.

It supports multi-step operations. For instance, you can first call `get_metadata` and then use that result to decide whether or not to run a full screenshot capture.

This MCP Server handles web content, specifically the URLs provided for rendering. It processes visual and textual metadata derived from those external web pages.

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