How to Use the ProcessOn MCP in Vercel AI SDK
Build React apps that stream ProcessOn diagram metadata and export files live using the Vercel AI SDK.
Works with every AI agent you already use
…and any MCP-compatible client
Connect ProcessOn MCP to Vercel AI SDK
Create your Vinkius account to connect ProcessOn to Vercel AI SDK — we handle the hosting, security, and runtime updates so you don't have to. No server setup required.
Gemini
Key Capabilities
Stream ProcessOn folder trees with this MCP Server
Your users don't want to stare at a blank loading screen while your app fetches file lists. This MCP Server lets your AI client fetch folder structures using `get_folder_content` and `list_folders` to render them on screen as they arrive. You feed these tools directly into `streamText` to build dynamic sidebars. The data flows over a single connection, meaning your React components render the files instantly without waiting for complete JSON payloads to resolve.
Generate and export diagrams on the edge
Let your users trigger exports without spinning up heavy server-side processes. The AI client calls `create_file` to initialize a new canvas and `export_file` to grab the final asset directly from the edge. Because the Vercel AI SDK runs anywhere, you can deploy these operations in lightweight Edge Functions. The system returns the generated assets directly to your frontend components for immediate download.
Track file collaborators in real-time
Keep your team workspaces in sync by letting your agent inspect who has access to specific files. It uses `list_collaborators` to grab the active user list and `get_file` to check the current status of any diagram. This means your UI can display active editors right alongside the streaming chat response. You don't need to write custom polling logic because the SDK handles the tool execution loop natively.
Set up ProcessOn MCP in Vercel AI SDK
Prerequisites
- Node.js 18+ and a TypeScript project
-
ai+@modelcontextprotocol/sdkpackages - Active Vinkius subscription with a valid endpoint token
- 1
Install dependencies
Run
npm install ai @modelcontextprotocol/sdkplus your preferred model provider (e.g.@ai-sdk/openai). - 2
Create the Streamable HTTP transport
Use
StreamableHTTPClientTransportwith 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 ProcessOn tools. Pass them directly togenerateText()orstreamText()— 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.
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 ProcessOn transactions",
});
console.log(text);
await mcpClient.close();Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by ProcessOn. 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.
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 ProcessOn MCP in Vercel AI SDK
Use it with your favorite AI tools
Connect this server to Cursor, Claude, VS Code, and more.
Start using the ProcessOn MCP today
We host it, we monitor it, we maintain it. You just paste one token.