Microsoft Clarity MCP Server for Vercel AI SDKGive Vercel AI SDK instant access to 13 tools to Check Clarity Status, Get Dashboard, Get Heatmap, and more
The Vercel AI SDK is the TypeScript toolkit for building AI-powered applications. Connect Microsoft Clarity through Vinkius and every tool is available as a typed function. ready for React Server Components, API routes, or any Node.js backend.
Ask AI about this App Connector for Vercel AI SDK
The Microsoft Clarity app connector for Vercel AI SDK is a standout in the Industry Titans category — giving your AI agent 13 tools to work with, ready to go from day one.
Vinkius delivers Streamable HTTP and SSE to any MCP client
import { createMCPClient } from "@ai-sdk/mcp";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
async function main() {
const mcpClient = await createMCPClient({
transport: {
type: "http",
// Your Vinkius token. get it at cloud.vinkius.com
url: "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp",
},
});
try {
const tools = await mcpClient.tools();
const { text } = await generateText({
model: openai("gpt-4o"),
tools,
prompt: "Using Microsoft Clarity, list all available capabilities.",
});
console.log(text);
} finally {
await mcpClient.close();
}
}
main();
* Every MCP server runs on Vinkius-managed infrastructure inside AWS - a purpose-built runtime with per-request V8 isolates, Ed25519 signed audit chains, and sub-40ms cold starts optimized for native MCP execution. See our infrastructure
About Microsoft Clarity MCP Server
Connect your Microsoft Clarity account to any AI agent and unlock behavioral analytics insights through natural conversation.
The Vercel AI SDK gives every Microsoft Clarity tool full TypeScript type inference, IDE autocomplete, and compile-time error checking. Connect 13 tools through Vinkius and stream results progressively to React, Svelte, or Vue components. works on Edge Functions, Cloudflare Workers, and any Node.js runtime.
What you can do
- Project Management — List all tracked websites and inspect individual project configurations and data retention settings
- Live Insights — Retrieve real-time active users, page views, and engagement metrics for any project
- Dashboard Analytics — Access aggregate metrics including sessions, pages per session, engagement scores, and bounce rates
- Heatmap Analysis — Browse page heatmaps showing click, scroll, and attention patterns, and inspect detailed interaction data
- Session Recordings — List session recordings with duration and pages visited, and inspect individual session timelines
- UX Friction Detection — Identify dead clicks (elements that don't respond) and rage clicks (repeated frustrated clicking) to locate broken UI elements
- Content Visibility — Analyze scroll depth data to understand how far users scroll and where content engagement drops off
- Page Ranking — View top-performing pages ranked by session count and engagement metrics
The Microsoft Clarity MCP Server exposes 13 tools through the Vinkius. Connect it to Vercel AI SDK in under two minutes — no API keys to rotate, no infrastructure to provision, no vendor lock-in. Your configuration, your data, your control.
All 13 Microsoft Clarity tools available for Vercel AI SDK
When Vercel AI SDK connects to Microsoft Clarity through Vinkius, your AI agent gets direct access to every tool listed below — spanning behavioral-analytics, heatmaps, session-recording, and more. Every call is secured with network, filesystem, subprocess, and code evaluation entitlements inside a sandboxed runtime. Beyond a simple connection, you get a full AI Gateway with real-time visibility into agent activity, enterprise governance, and optimized token usage.
Verify connectivity
Get dashboard metrics
Get heatmap data
Get live insights
Get project details
Get recording details
Get scroll depth
List dead clicks
List heatmaps
List projects
List rage clicks
List recordings
List top pages
Connect Microsoft Clarity to Vercel AI SDK via MCP
Follow these steps to wire Microsoft Clarity into Vercel AI SDK. The entire setup takes under two minutes — your credentials stay safe behind the Vinkius.
Install dependencies
npm install @ai-sdk/mcp ai @ai-sdk/openaiReplace the token
[YOUR_TOKEN_HERE] with your Vinkius tokenRun the script
agent.ts and run with npx tsx agent.tsExplore tools
Why Use Vercel AI SDK with the Microsoft Clarity MCP Server
Vercel AI SDK provides unique advantages when paired with Microsoft Clarity through the Model Context Protocol.
TypeScript-first: every MCP tool gets full type inference, IDE autocomplete, and compile-time error checking out of the box
Framework-agnostic core works with Next.js, Nuxt, SvelteKit, or any Node.js runtime. same Microsoft Clarity integration everywhere
Built-in streaming UI primitives let you display Microsoft Clarity tool results progressively in React, Svelte, or Vue components
Edge-compatible: the AI SDK runs on Vercel Edge Functions, Cloudflare Workers, and other edge runtimes for minimal latency
Microsoft Clarity + Vercel AI SDK Use Cases
Practical scenarios where Vercel AI SDK combined with the Microsoft Clarity MCP Server delivers measurable value.
AI-powered web apps: build dashboards that query Microsoft Clarity in real-time and stream results to the UI with zero loading states
API backends: create serverless endpoints that orchestrate Microsoft Clarity tools and return structured JSON responses to any frontend
Chatbots with tool use: embed Microsoft Clarity capabilities into conversational interfaces with streaming responses and tool call visibility
Internal tools: build admin panels where team members interact with Microsoft Clarity through natural language queries
Example Prompts for Microsoft Clarity in Vercel AI SDK
Ready-to-use prompts you can give your Vercel AI SDK agent to start working with Microsoft Clarity immediately.
"Show me all rage clicks and dead clicks on our checkout page this week."
"What are the top 5 most visited pages and how far do users scroll on the homepage?"
"How many active users are on the site right now and what pages are they viewing?"
Troubleshooting Microsoft Clarity MCP Server with Vercel AI SDK
Common issues when connecting Microsoft Clarity to Vercel AI SDK through the Vinkius, and how to resolve them.
createMCPClient is not a function
npm install @ai-sdk/mcpMicrosoft Clarity + Vercel AI SDK FAQ
Common questions about integrating Microsoft Clarity MCP Server with Vercel AI SDK.
How does the Vercel AI SDK connect to MCP servers?
createMCPClient from @ai-sdk/mcp and pass the server URL. The SDK discovers all tools and provides typed TypeScript interfaces for each one.Can I use MCP tools in Edge Functions?
Does it support streaming tool results?
useChat and streamText that handle tool calls and display results progressively in the UI.