How to Use the Urlbox MCP in Vercel AI SDK

Q: How does Urlbox integrate with Vercel AI SDK?

You call mcpClient.tools() and pass the available tools from Urlbox to your streaming function. Because it's designed for Edge Functions, data streams directly into your React components as soon as it arrives.

Q: Can I use Urlbox with Vercel AI SDK in a complex pipeline?

Absolutely. You can chain calls: first call getaccountinfo to validate the user, and then stream that data using another tool result. The streaming nature is key here.

Q: How do I manage webhooks when connecting Urlbox to Vercel AI SDK?

You first list existing hooks with listwebhooks, then you set up a new one. The renderasync tool sends the final output data directly to that webhook endpoint.

Stream data directly into your UI with 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

Get real-time web captures and renders.

Start by calling `capture_pdf` or `capture_png`. You send a URL, and the MCP Server sends back the resulting PDF file or PNG screenshot data in the stream. This lets your user see the captured image appear live on screen, avoiding any loading spinner. It’s perfect for building client-facing tools where users need instant feedback. Use `render_selector` to grab content from a specific element on a page and push that raw text into your AI generation flow, all streamed out.

Check system status and usage data.

You can check the health of the service by calling `get_render_status`. This tells you if an asynchronous job is complete or still running. For billing, use `get_credit_usage` to fetch current consumption stats right when your agent needs it. Don't forget about setup management. You'll need to check available proxies using `list_proxies` before your workflow runs. This keeps the data flow accurate and reliable.

Handle complex, multi-step web content processing.

Use the async rendering tools like `render_async`. When you kick off a job, the results don't block your UI; instead, they get sent to a webhook. This keeps your Next.js page snappy while the heavy lifting happens in the background. Need to render raw HTML? The `render_html` tool handles that too. You pass it clean code, and you get back the rendered output ready for display. It’s all designed for streaming results into a modern frontend.

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

You call `mcpClient.tools()` and pass the available tools from Urlbox to your streaming function. Because it's designed for Edge Functions, data streams directly into your React components as soon as it arrives.

Absolutely. You can chain calls: first call `get_account_info` to validate the user, and then stream that data using another tool result. The streaming nature is key here.

This server primarily touches URL content (text/images) and account profile information, which you handle via `get_account_info`. The results are streamed as text or image buffers to your client.

Yes. For heavy loads, you should use the asynchronous tools like `render_async`. This prevents timeouts and lets your UI remain responsive while the captures happen.

You first list existing hooks with `list_webhooks`, then you set up a new one. The `render_async` tool sends the final output data directly to that webhook endpoint.

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