How to Use the Cardly MCP in Vercel AI SDK

Build React and Next.js apps that stream physical Cardly greeting card orders in real-time using Vercel AI SDK and this MCP Server.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers - Free for Subscribers

Connect Cardly MCP to Vercel AI SDK

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

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Stream Cardly Previews to Vercel AI SDK

Generating a physical greeting card preview usually forces users to stare at a loading spinner. Hooking this MCP Server into your Next.js frontend lets you stream the actual rendering process directly to the browser. Call `preview_greeting_card` inside your route. The agent grabs the requested design and message, then streams the generated preview URL right back to your React component while the user watches.

Browse Artwork Live

Fetching static greeting card catalogs feels slow. When a user asks your chat interface for a specific design theme, you need instant results appearing on the screen. Triggering `list_card_artwork` pulls the available designs immediately. You can pipe those design IDs straight into `get_artwork_details` to render thumbnail images and artist info into your Svelte or Vue frontend without delay.

Dispatch Orders from the UI

Moving from digital chat to physical mail usually requires writing custom polling logic. Doing this through a standard MCP Server integration removes that friction entirely. Pass `place_greeting_card_order` to the streamText function. The agent handles the shipping details, fires off the real-world order, and updates your UI with the confirmation state the second Cardly processes the request.

Setup guide

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

Install @ai-sdk/mcp and the core ai package. Initialize it using createMCPClient with your Vinkius HTTP transport URL, then pass the tools into streamText.

Yes. The SDK handles the tool execution in the background and streams the resulting image URLs from the server directly into your React or Vue components.

Vinkius manages the underlying API keys. You only need to provide your single endpoint token in the transport configuration when setting up the client.

Always call mcpClient.close() when your route finishes executing. Leaving the connection open in Edge Functions will cause memory leaks and timeout errors.

The MCP Server processes physical mailing addresses and recipient emails only when executing shipping requests. Vinkius runs the connection inside an ephemeral V8 Isolate Sandbox, destroying the memory state immediately after the card order completes.

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