How to Use the Microsoft Clarity MCP in Vercel AI SDK

Q: How do I fetch Microsoft Clarity recordings within the Vercel AI SDK?

You instantiate the client and call the getrecording tool by passing the specific session ID. The Vercel AI SDK handles the stream, allowing you to display the video playback or metadata immediately in your React component.

Q: Can the Vercel AI SDK automatically trigger Microsoft Clarity insights?

Yes, you can define an agent that checks getliveinsights on a schedule. If the data shows a spike in errors, the agent can alert you or even suggest UI fixes based on the returned behavior metrics.

Q: Is it possible to render Microsoft Clarity heatmaps in the Vercel AI SDK?

You retrieve the image or data link using getheatmap and pass that result into your frontend. The SDK keeps the connection open, ensuring the data is ready for your user to view as soon as the tool responds.

Stream live user behavioral data directly into your React interfaces using the Microsoft Clarity MCP Server and 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 Microsoft Clarity MCP to Vercel AI SDK

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

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Real-time session analysis in your UI

Feed behavioral data directly into your frontend components. When your AI client needs user context, it triggers `get_recording` to pull specific session logs that stream into your application state without the usual loading delays. Your users see the results of their own navigation patterns rendered in real-time. By connecting the MCP Server to your edge functions, you ensure that UX diagnostics appear instantly as the AI processes the raw interaction data.

Visualizing interaction friction

Identify broken UI elements by querying `list_dead_clicks` and `list_rage_clicks` directly from your application logic. These metrics highlight exactly where users struggle to interact with your site, giving your AI client clear targets for layout improvements. Pass these results into your generation pipeline to build adaptive interfaces. Instead of manually inspecting logs, you let the agent parse the `get_heatmap` data to report on high-traffic areas that currently fail to convert.

Automated dashboard reporting

Query your site performance metrics on demand using `get_dashboard`. This gives your AI client the ability to summarize site-wide trends for your team without requiring a separate login to a third-party analytics portal. Use `list_top_pages` to isolate the most visited sections of your app. Your agent then correlates this with `get_scroll_depth` to provide a clear picture of user engagement across your most important content blocks.

Setup guide

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

You instantiate the client and call the `get_recording` tool by passing the specific session ID. The Vercel AI SDK handles the stream, allowing you to display the video playback or metadata immediately in your React component.

Yes, you can define an agent that checks `get_live_insights` on a schedule. If the data shows a spike in errors, the agent can alert you or even suggest UI fixes based on the returned behavior metrics.

You retrieve the image or data link using `get_heatmap` and pass that result into your frontend. The SDK keeps the connection open, ensuring the data is ready for your user to view as soon as the tool responds.

The MCP Server only communicates when your agent requests data. Since it runs as a separate service, your main application remains fast and responsive.

The server only touches session-level interactions like clicks and scrolls. It never sees personal info, and all communication happens over a secure, authenticated channel between your client and the API.

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