How to Use the Dribbble MCP in Vercel AI SDK

Stream your Dribbble portfolio updates directly into your React UI with the 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 Dribbble MCP to Vercel AI SDK

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

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Live shot management for AI SDK

Push your latest designs to your portfolio without leaving your code editor. Use `create_shot` to upload assets and `update_shot` to tweak metadata in real-time. Your users see the results instantly. The AI SDK streams these tool outputs directly to the browser, bypassing boring loading states.

Organize creative work via AI SDK

Group your designs into cohesive sets using `create_project`. It keeps your portfolio clean and easy to navigate for anyone browsing your work. Need to reorder or rename? Call `update_project` to keep everything current. You maintain total control over your project architecture from your own app logic.

Handle attachments with AI SDK

Attach supporting files to your shots using `create_attachment`. It adds depth to your posts so you can show more than just the final pixel. If you need to clean up old files, `delete_attachment` removes them cleanly. You keep your portfolio history tidy and focused.

Setup guide

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

Install the necessary packages and point your client to the Vinkius endpoint URL. Once initialized, the tools appear as functions you can invoke in your streamText calls.

You need to manage your own request pacing within your application logic. The server passes raw API responses, so monitor your status codes to avoid getting throttled.

Yes. Vinkius keeps your session ephemeral and isolated. We don't store your credentials; you pass your token directly to the MCP client instance.

The tool returns an error object that you can catch in your code. You can then trigger a UI notification or retry the action based on the error type.

The current tools focus on live shots and projects. You can manage existing uploads, but specific draft-only workflows are not part of this toolset.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python