ScreenshotAPI MCP Server for Vercel AI SDKGive Vercel AI SDK instant access to 12 tools to Capture Clean Screenshot No Ads, Capture Dark Mode Screenshot, Capture Delayed Screenshot, and more
The Vercel AI SDK is the TypeScript toolkit for building AI-powered applications. Connect ScreenshotAPI through Vinkius and every tool is available as a typed function. ready for React Server Components, API routes, or any Node.js backend.
Ask AI about this App Connector for Vercel AI SDK
The ScreenshotAPI app connector for Vercel AI SDK is a standout in the Industry Titans category — giving your AI agent 12 tools to work with, ready to go from day one.
Vinkius delivers Streamable HTTP and SSE to any MCP client
import { createMCPClient } from "@ai-sdk/mcp";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
async function main() {
const mcpClient = await createMCPClient({
transport: {
type: "http",
// Your Vinkius token. get it at cloud.vinkius.com
url: "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp",
},
});
try {
const tools = await mcpClient.tools();
const { text } = await generateText({
model: openai("gpt-4o"),
tools,
prompt: "Using ScreenshotAPI, list all available capabilities.",
});
console.log(text);
} finally {
await mcpClient.close();
}
}
main();
* Every MCP server runs on Vinkius-managed infrastructure inside AWS - a purpose-built runtime with per-request V8 isolates, Ed25519 signed audit chains, and sub-40ms cold starts optimized for native MCP execution. See our infrastructure
About ScreenshotAPI MCP Server
Connect your ScreenshotAPI.net account to any AI agent and take full control of your website rendering and visual orchestration through natural conversation. ScreenshotAPI provides a high-performance API for capturing pixel-perfect screenshots, generating PDFs, and simulating various devices directly from your chat interface.
The Vercel AI SDK gives every ScreenshotAPI tool full TypeScript type inference, IDE autocomplete, and compile-time error checking. Connect 12 tools through Vinkius and stream results progressively to React, Svelte, or Vue components. works on Edge Functions, Cloudflare Workers, and any Node.js runtime.
What you can do
- Visual Orchestration — Capture high-quality screenshots of any URL with support for lazy-loading and dynamic content programmatically.
- Full-Page & PDF Intelligence — Generate comprehensive full-page captures or professional PDF documents from web pages directly from the AI interface.
- Mobile & Device Emulation — Simulate specific devices (e.g., iPhone, Android) and viewports to monitor responsive designs via natural language.
- Stealth & Ad-Block Control — Automatically block ads and cookie banners to ensure clean visual results without manual intervention.
- Operational Monitoring — Track system health and manage rendering options like dark mode and custom CSS injection using simple AI commands.
The ScreenshotAPI MCP Server exposes 12 tools through the Vinkius. Connect it to Vercel AI SDK in under two minutes — no API keys to rotate, no infrastructure to provision, no vendor lock-in. Your configuration, your data, your control.
All 12 ScreenshotAPI tools available for Vercel AI SDK
When Vercel AI SDK connects to ScreenshotAPI through Vinkius, your AI agent gets direct access to every tool listed below — spanning screenshotapi, website-screenshot, pdf-generation, and more. Every call is secured with network, filesystem, subprocess, and code evaluation entitlements inside a sandboxed runtime. Beyond a simple connection, you get a full AI Gateway with real-time visibility into agent activity, enterprise governance, and optimized token usage.
Capture screenshot without ads or cookies
Capture screenshot in dark mode
Useful for lazy-loading elements. Capture screenshot after a delay
Capture the entire length of a webpage
Capture a screenshot using a mobile viewport
Force a fresh screenshot bypass cache
Capture a screenshot of a specific CSS element
Capture screenshot in WebP format
Returns a hosted image link. Capture a standard screenshot of a URL
net service. Verify Screenshot API status
Save a webpage as a PDF file
Get account API usage information
Connect ScreenshotAPI to Vercel AI SDK via MCP
Follow these steps to wire ScreenshotAPI into Vercel AI SDK. The entire setup takes under two minutes — your credentials stay safe behind the Vinkius.
Install dependencies
npm install @ai-sdk/mcp ai @ai-sdk/openaiReplace the token
[YOUR_TOKEN_HERE] with your Vinkius tokenRun the script
agent.ts and run with npx tsx agent.tsExplore tools
Why Use Vercel AI SDK with the ScreenshotAPI MCP Server
Vercel AI SDK provides unique advantages when paired with ScreenshotAPI through the Model Context Protocol.
TypeScript-first: every MCP tool gets full type inference, IDE autocomplete, and compile-time error checking out of the box
Framework-agnostic core works with Next.js, Nuxt, SvelteKit, or any Node.js runtime. same ScreenshotAPI integration everywhere
Built-in streaming UI primitives let you display ScreenshotAPI tool results progressively in React, Svelte, or Vue components
Edge-compatible: the AI SDK runs on Vercel Edge Functions, Cloudflare Workers, and other edge runtimes for minimal latency
ScreenshotAPI + Vercel AI SDK Use Cases
Practical scenarios where Vercel AI SDK combined with the ScreenshotAPI MCP Server delivers measurable value.
AI-powered web apps: build dashboards that query ScreenshotAPI in real-time and stream results to the UI with zero loading states
API backends: create serverless endpoints that orchestrate ScreenshotAPI tools and return structured JSON responses to any frontend
Chatbots with tool use: embed ScreenshotAPI capabilities into conversational interfaces with streaming responses and tool call visibility
Internal tools: build admin panels where team members interact with ScreenshotAPI through natural language queries
Example Prompts for ScreenshotAPI in Vercel AI SDK
Ready-to-use prompts you can give your Vercel AI SDK agent to start working with ScreenshotAPI immediately.
"Take a clean mobile screenshot of the Apple homepage (https://www.apple.com) without any cookie banners or ads."
"Capture a full-length screenshot of the Stripe pricing page (https://stripe.com/pricing) to check their new tier layout."
"Generate a professional PDF export of the latest Y Combinator blog post at https://blog.ycombinator.com/yc-top-companies-2024."
Troubleshooting ScreenshotAPI MCP Server with Vercel AI SDK
Common issues when connecting ScreenshotAPI to Vercel AI SDK through the Vinkius, and how to resolve them.
createMCPClient is not a function
npm install @ai-sdk/mcpScreenshotAPI + Vercel AI SDK FAQ
Common questions about integrating ScreenshotAPI MCP Server with Vercel AI SDK.
How does the Vercel AI SDK connect to MCP servers?
createMCPClient from @ai-sdk/mcp and pass the server URL. The SDK discovers all tools and provides typed TypeScript interfaces for each one.Can I use MCP tools in Edge Functions?
Does it support streaming tool results?
useChat and streamText that handle tool calls and display results progressively in the UI.