How to Use the Easelly MCP in Vercel AI SDK

Build real-time data visualizations in your React apps with Easelly and 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 Easelly MCP to Vercel AI SDK

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

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Stream infographic creation into your UI

Your React components can trigger `create_infographic` to start a new design process. You get the structure back immediately so your frontend can render the layout without waiting for a backend round-trip. This makes your UI feel responsive while the agent handles the heavy lifting. The data flows directly into your state management layer for instant updates.

Generate PDFs on-the-fly for your users

Call `generate_pdf` directly from your Edge Functions when a user hits a download button. It takes the current `update_infographic` state and compiles a document ready for export. Your app handles the stream, so the user sees progress indicators instead of a frozen screen. It's a clean way to handle document generation in modern web apps.

Sync visual data with your state

Use `generate_json` to pull the raw structure of any design. You can map these objects to your own React components to create custom views of the data. It keeps your visual logic synced with the Easelly platform. You aren't just displaying a static image; you're building an interactive dashboard.

Setup guide

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

You install the MCP client package and point it at the server URL. From there, you pass the available tools into the streamText function of the Vercel AI SDK.

Yes. Because the MCP server supports streaming responses, the Vercel AI SDK can pipe the tool output directly to your frontend components.

It does. You can define parameter schemas in your agent configuration to ensure the data sent to `update_infographic` matches your expected format.

Catch the errors in your agent logic just like any other API call. The server returns standard status codes that your application can parse immediately.

Your design data stays on the platform. The server only transmits the structure and rendered files needed to complete your specific request.

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