How to Use the Cockpit (Self-hosted Headless CMS API) MCP in Vercel AI SDK

Q: How does the Vercel AI SDK process image requests from this MCP Server?

The SDK catches the tool call for getassetimage, executes it against the Vinkius-hosted endpoint, and returns the thumbnail URL. Your UI then renders the image immediately using standard React hooks.

Stream real-time Cockpit (Self-hosted Headless CMS API) updates straight to your Next.js frontend 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 Cockpit (Self-hosted Headless CMS API) MCP to Vercel AI SDK

Create your Vinkius account to connect Cockpit (Self-hosted Headless CMS API) 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 Cockpit (Self-hosted Headless CMS API) with Vercel AI SDK

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Live content rendering with Vercel AI SDK

The `list_content_items` and `get_content_item` tools fetch Cockpit CMS data directly inside your React component stream. Instead of waiting for a full API response to finish, your Vercel AI SDK application renders raw JSON or structured layout blocks as they trickle in from the self-hosted server. You can instantly render markdown, body text, or metadata blocks without blocking the main thread. By passing these tools directly to `streamText`, your user gets immediate visual feedback while the CMS fields load.

Live UI asset generation

This MCP Server exposes `get_asset_image` and `get_asset` to feed media files directly into your Edge Functions. If an agent needs to show a thumbnail, it requests the resized image parameters on the fly and feeds the URL straight to your frontend image component. Because Vercel AI SDK handles tool calls natively, you don't write custom API routes for image transformations. The agent determines the exact dimensions needed and pulls the binary metadata from your self-hosted Cockpit instance.

Instant routing and menu builds

The `list_routes` and `get_menu` tools let your frontend agent build navigation structures on the fly. When a user asks for a specific page, the agent queries the sitemap structure and updates your app's layout before the stream finishes. You pass these navigation tools into `generateText` to build dynamic sidebars or header links. It reads the raw slug data from Cockpit, processes the hierarchy, and pushes the clean JSON straight into your React state.

Setup guide

Set up Cockpit (Self-hosted Headless CMS API) 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 Cockpit (Self-hosted Headless CMS API) 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 Cockpit (Self-hosted Headless CMS API) 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 Cockpit CMS. 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 Cockpit (Self-hosted Headless CMS API) 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 Cockpit (Self-hosted Headless CMS API) MCP in Vercel AI SDK

You configure the credentials using the authProvider block in your createMCPClient setup. This keeps your self-hosted CMS API keys secure on the server side while streaming responses to the frontend.

Yes, the MCP client is fully compatible with Edge runtimes. It uses standard HTTP transports to fetch content via list_content_items without node-specific dependencies.

The SDK catches the tool call for get_asset_image, executes it against the Vinkius-hosted endpoint, and returns the thumbnail URL. Your UI then renders the image immediately using standard React hooks.

The stream catches the error from the MCP execution block and returns a clean fallback. You can handle the error state gracefully in your frontend code without breaking the entire stream.

Your raw database queries, asset files, and localization strings are processed inside isolated, ephemeral V8 sandboxes. Vinkius never stores your Cockpit API tokens or content payloads; they are only used to execute the requested actions and then destroyed.

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