{"id":9904,"date":"2025-08-19T06:00:00","date_gmt":"2025-08-19T13:00:00","guid":{"rendered":"https:\/\/clarity.microsoft.com\/blog\/?p=9904"},"modified":"2025-08-20T08:40:31","modified_gmt":"2025-08-20T15:40:31","slug":"why-vibe-coders-should-integrate-clarity","status":"publish","type":"post","link":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/","title":{"rendered":"Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)"},"content":{"rendered":"\n<p>When you\u2019re vibe coding, speed is everything. You want to build something fast, ship it, and learn what actually works \u2014 all without getting bogged down in setup or complicated tooling.&nbsp;&nbsp;<\/p>\n\n\n\n<p>But building fast doesn\u2019t mean flying blind. Without clear insights into how people actually use your project, you risk wasting time on guesses instead of making data-driven decisions.&nbsp;&nbsp;<\/p>\n\n\n\n<p>That\u2019s where Microsoft Clarity comes in: a free, lightweight behavioral analytics tool that gives you real user behavior feedback \u2014 fast. In this post, we\u2019ll break down why Clarity is a perfect fit for vibe coding and show you how to add it to your project in minutes.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Vibe Coding?&nbsp;<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.geeksforgeeks.org\/techtips\/what-is-vibe-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">Vibe coding<\/a> is a development approach centered on using AI to build projects with speed, creativity, and minimal upfront commitment. It\u2019s about rapidly transforming an idea into a live, functioning prototype or product that you can test, observe, and refine.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Whether you\u2019re using platforms like <a href=\"https:\/\/lovable.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">Lovable<\/a>, <a href=\"https:\/\/replit.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">Replit<\/a>, <a href=\"https:\/\/bolt.new\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">bolt.new<\/a>, <a href=\"https:\/\/v0.app\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">Vercel\u2019s v0<\/a>, <a href=\"https:\/\/github.com\/features\/spark\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">Github Spark<\/a>, or <a href=\"https:\/\/www.orchids.app\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">Orchids<\/a>, the core principle remains consistent: <strong>build fast, launch fast, and iterate fast<\/strong>.&nbsp;<\/p>\n\n\n\n<p>This approach embraces experimentation and responsiveness, allowing developers to validate concepts early by directly observing user interactions instead of relying on assumptions or delayed feedback.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Behavioral Analytics Matter for Vibe Coding (and How Microsoft Clarity Helps)&nbsp;<\/h2>\n\n\n\n<p>You might already track basic metrics like pageviews or clicks, but those numbers only tell part of the story. They don\u2019t show how users move through your project or where they get stuck. Behavioral analytics fills in those gaps by revealing real user interactions \u2014 what catches attention, what frustrates, and what\u2019s being ignored. For vibe coding, where speed and iteration are everything, having this level of insight lets you fix the right problems without wasting time on guesswork.&nbsp;<\/p>\n\n\n\n<p>Clarity tracks clicks, rage clicks (those angry repeated clicks when something\u2019s broken), scroll depth, and dead clicks (clicks that go nowhere). And you can watch session recordings or check heatmaps to see what\u2019s actually happening.&nbsp;<\/p>\n\n\n\n<p>By integrating Clarity, you gain access to:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click and scroll heatmaps&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Session recordings that replay real user journeys&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identification of frustrating user interactions such as rage and dead clicks&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An intuitive dashboard with easy-to-understand reports&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Clarity to Your Vibe Coding Project in Two Simple Steps&nbsp;<\/h2>\n\n\n\n<p>Setting up Clarity in your vibe-coded app is about as fast and painless as it gets in the world of analytics.&nbsp;<\/p>\n\n\n\n<p>You can create an account and your first project in one minute. And because it\u2019s free, you don\u2019t have to spend time entering your credit card, renewing after a free trial, or fitting within a specific usage tier.&nbsp;<\/p>\n\n\n\n<p>Once you have your project ID, adding the tracking takes seconds, so you can go from zero to seeing user behavior without ever slowing down your build\u2013launch\u2013iterate flow.&nbsp;<\/p>\n\n\n\n<p>To get started:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a project in Microsoft Clarity:&nbsp;<\/h3>\n\n\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li>Visit <a href=\"https:\/\/clarity.microsoft.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Read more about Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\">clarity.microsoft.com<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul start=\"2\" class=\"wp-block-list\">\n<li>Sign up or log in, then create a new project.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul start=\"3\" class=\"wp-block-list\">\n<li>Copy the generated Project ID (Settings &gt; Overview).&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"528\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/Revisied-Code-Vibing-Blog-png.png\" alt=\"\" class=\"wp-image-9926\" style=\"width:806px;height:auto\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/Revisied-Code-Vibing-Blog-png.png 768w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/Revisied-Code-Vibing-Blog-png-300x206.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Add Clarity to your vibe coding environment:&nbsp;<\/h3>\n\n\n\n<p>In your platform\u2019s code or command interface, simply run:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add Microsoft Clarity with project ID &#91;your-project-id]&nbsp;<\/code><\/pre>\n\n\n\n<p>This single command injects the necessary tracking script into your project automatically.&nbsp;<\/p>\n\n\n\n<p>The exact syntax may vary slightly depending on your chosen vibe coding platform, but most support simple plugin or script additions via commands or minimal code edits.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Does Integration Look Like in Practice?&nbsp;<\/h2>\n\n\n\n<p>Here\u2019s how adding Microsoft Clarity looks in some popular vibe coding platforms:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lovable<\/h3>\n\n\n\n<p>Adding Clarity involves a single prompt in the platform\u2019s interface, enabling tracking without manual script management.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"936\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-3.png\" alt=\"Setting up Microsoft Clarity in Lovable\" class=\"wp-image-9907\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-3.png 739w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-3-237x300.png 237w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bolt<\/h3>\n\n\n\n<p>Clarity installs instantly using command-line instructions tailored for Bolt\u2019s environment.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"936\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-2.png\" alt=\"Setting up Microsoft Clarity in Bolt\" class=\"wp-image-9906\" style=\"width:759px;height:auto\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-2.png 868w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-2-278x300.png 278w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-2-768x828.png 768w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Vercel v0<\/h3>\n\n\n\n<p>Integration is seamless via configuration files or prompt commands, requiring no manual script copy-pasting.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"736\" src=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-4-e1755544075875.png\" alt=\"Setting up Microsoft Clarity in V0\" class=\"wp-image-9908\" srcset=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-4-e1755544075875.png 580w, https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/image-4-e1755544075875-236x300.png 236w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Replit<\/h3>\n\n\n\n<p>Prompting the tool to add Microsoft Clarity with a project ID will automatically inject the script.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Verifying Your Clarity Setup&nbsp;<\/h2>\n\n\n\n<p>Once you\u2019ve added Clarity, you can confirm it\u2019s working by:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visiting your live site and interacting with it naturally.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Returning to the Clarity dashboard within minutes.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Observing session recordings, heatmaps, click maps, and scroll reports populate in near real-time.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>This immediate feedback loop helps you start gathering meaningful data without delay.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Insights with Clarity Copilot&nbsp;<\/h2>\n\n\n\n<p>If you prefer not to manually analyze heatmaps and recordings, Clarity Copilot can help. The AI-powered assistant to aggregate and summarize data, highlighting:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Common user behaviors and flows.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Frequent pain points and usability obstacles.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Emerging trends and opportunities for improvement.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>With support for summarizing up to 250 session recordings at once, Copilot equips vibe coders with fast, clear feedback \u2014 ideal for quick iterations without digging through data manually.&nbsp;<\/p>\n\n\n\n<p>These insights enable quicker debugging, improved user experiences, and accelerated validation cycles\u2014all crucial for vibe coding workflows.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts&nbsp;<\/h2>\n\n\n\n<p>Vibe coding is about rapid experimentation and continuous learning. Integrating Microsoft Clarity into your projects lets you access real user data instantly, cutting through guesswork and subjective feedback.&nbsp;<\/p>\n\n\n\n<p>Whether you\u2019re launching on Lovable, Replit, Vercel v0, or any other vibe coding platform, adding Clarity is a simple, no-cost step that dramatically improves your ability to understand users and iterate effectively.&nbsp;<\/p>\n\n\n\n<p>Take two minutes to add Microsoft Clarity to your next project \u2014 it\u2019s a game changer for fast, data-informed development.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.<\/p>\n","protected":false},"author":2,"featured_media":9913,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2],"tags":[157],"class_list":["post-9904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","tag-vibe-coding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Microsoft Clarity to Your Vibe Coding Projects - Understand your customers | Microsoft Clarity Blog<\/title>\n<meta name=\"description\" content=\"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Microsoft Clarity to Your Vibe Coding Projects - Understand your customers | Microsoft Clarity Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/\" \/>\n<meta property=\"og:site_name\" content=\"Understand your customers | Microsoft Clarity Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-19T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:40:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"953\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Clarity Staff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Clarity Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/\",\"url\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/\",\"name\":\"Add Microsoft Clarity to Your Vibe Coding Projects - Understand your customers | Microsoft Clarity Blog\",\"isPartOf\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png\",\"datePublished\":\"2025-08-19T13:00:00+00:00\",\"dateModified\":\"2025-08-20T15:40:31+00:00\",\"author\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea\"},\"description\":\"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.\",\"breadcrumb\":{\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#primaryimage\",\"url\":\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png\",\"contentUrl\":\"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png\",\"width\":1920,\"height\":953,\"caption\":\"fox sliding on snowbanks, text: real user behavior fast\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/clarity.microsoft.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#website\",\"url\":\"https:\/\/clarity.microsoft.com\/blog\/\",\"name\":\"Understand your customers | Microsoft Clarity Blog\",\"description\":\"Find articles, best practices, and solutions to improve user experience\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/clarity.microsoft.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea\",\"name\":\"Clarity Staff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g\",\"caption\":\"Clarity Staff\"},\"url\":\"https:\/\/clarity.microsoft.com\/blog\/author\/v-joeperez\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Microsoft Clarity to Your Vibe Coding Projects - Understand your customers | Microsoft Clarity Blog","description":"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/","og_locale":"en_US","og_type":"article","og_title":"Add Microsoft Clarity to Your Vibe Coding Projects - Understand your customers | Microsoft Clarity Blog","og_description":"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.","og_url":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/","og_site_name":"Understand your customers | Microsoft Clarity Blog","article_published_time":"2025-08-19T13:00:00+00:00","article_modified_time":"2025-08-20T15:40:31+00:00","og_image":[{"width":1920,"height":953,"url":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png","type":"image\/png"}],"author":"Clarity Staff","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Clarity Staff","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/","url":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/","name":"Add Microsoft Clarity to Your Vibe Coding Projects - Understand your customers | Microsoft Clarity Blog","isPartOf":{"@id":"https:\/\/clarity.microsoft.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#primaryimage"},"image":{"@id":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#primaryimage"},"thumbnailUrl":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png","datePublished":"2025-08-19T13:00:00+00:00","dateModified":"2025-08-20T15:40:31+00:00","author":{"@id":"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea"},"description":"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.","breadcrumb":{"@id":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#primaryimage","url":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png","contentUrl":"https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png","width":1920,"height":953,"caption":"fox sliding on snowbanks, text: real user behavior fast"},{"@type":"BreadcrumbList","@id":"https:\/\/clarity.microsoft.com\/blog\/why-vibe-coders-should-integrate-clarity\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/clarity.microsoft.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Why Vibe Coders Should Integrate Microsoft Clarity Into Their Projects (and How to Do It in Seconds)"}]},{"@type":"WebSite","@id":"https:\/\/clarity.microsoft.com\/blog\/#website","url":"https:\/\/clarity.microsoft.com\/blog\/","name":"Understand your customers | Microsoft Clarity Blog","description":"Find articles, best practices, and solutions to improve user experience","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/clarity.microsoft.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/87dfd6775651e096c0d822a5f142d1ea","name":"Clarity Staff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/clarity.microsoft.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2085586b36c36f0e9b0bc6eaf48fba31582534be948ed0b85dda577eb3bf07c?s=96&d=mm&r=g","caption":"Clarity Staff"},"url":"https:\/\/clarity.microsoft.com\/blog\/author\/v-joeperez\/"}]}},"spectra_custom_meta":{"_edit_lock":["1755704937:29"],"_edit_last":["29"],"_yoast_wpseo_primary_category":["2"],"_yoast_wpseo_content_score":["90"],"_yoast_wpseo_estimated-reading-time-minutes":["5"],"_yoast_wpseo_title":["Add Microsoft Clarity to Your Vibe Coding Projects %%page%% %%sep%% %%sitename%%"],"_thumbnail_id":["9913"],"_uag_page_assets":["a:9:{s:3:\"css\";s:21896:\".wp-block-uagb-advanced-heading h1,.wp-block-uagb-advanced-heading h2,.wp-block-uagb-advanced-heading h3,.wp-block-uagb-advanced-heading h4,.wp-block-uagb-advanced-heading h5,.wp-block-uagb-advanced-heading h6,.wp-block-uagb-advanced-heading p,.wp-block-uagb-advanced-heading div{word-break:break-word}.wp-block-uagb-advanced-heading .uagb-heading-text{margin:0}.wp-block-uagb-advanced-heading .uagb-desc-text{margin:0}.wp-block-uagb-advanced-heading .uagb-separator{font-size:0;border-top-style:solid;display:inline-block;margin:0 0 10px 0}.wp-block-uagb-advanced-heading .uagb-highlight{color:#f78a0c;border:0;transition:all 0.3s ease}.uag-highlight-toolbar{border-left:0;border-top:0;border-bottom:0;border-radius:0;border-right-color:#1e1e1e}.uag-highlight-toolbar .components-button{border-radius:0;outline:none}.uag-highlight-toolbar .components-button.is-primary{color:#fff}\n.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a:hover{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007 .uagb-heading-text{font-size: 20px;}.uagb-buttons__outer-wrap .uagb-buttons__wrap{display:inline-flex;width:100%}.uagb-buttons__outer-wrap.uagb-btn__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__small-btn .uagb-buttons-repeater.ast-outline-button{padding:5px 10px}.uagb-buttons__outer-wrap.uagb-btn__medium-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__medium-btn .uagb-buttons-repeater.ast-outline-button{padding:12px 24px}.uagb-buttons__outer-wrap.uagb-btn__large-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__large-btn .uagb-buttons-repeater.ast-outline-button{padding:20px 30px}.uagb-buttons__outer-wrap.uagb-btn__extralarge-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn__extralarge-btn .uagb-buttons-repeater.ast-outline-button{padding:30px 65px}@media (max-width: 976px){.uagb-buttons__outer-wrap.uagb-btn-tablet__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__small-btn .uagb-buttons-repeater.ast-outline-button{padding:5px 10px}.uagb-buttons__outer-wrap.uagb-btn-tablet__medium-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__medium-btn .uagb-buttons-repeater.ast-outline-button{padding:12px 24px}.uagb-buttons__outer-wrap.uagb-btn-tablet__large-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__large-btn .uagb-buttons-repeater.ast-outline-button{padding:20px 30px}.uagb-buttons__outer-wrap.uagb-btn-tablet__extralarge-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-tablet__extralarge-btn .uagb-buttons-repeater.ast-outline-button{padding:30px 65px}}@media (max-width: 767px){.uagb-buttons__outer-wrap.uagb-btn-mobile__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__small-btn .uagb-buttons-repeater.ast-outline-button{padding:5px 10px}.uagb-buttons__outer-wrap.uagb-btn-mobile__medium-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__medium-btn .uagb-buttons-repeater.ast-outline-button{padding:12px 24px}.uagb-buttons__outer-wrap.uagb-btn-mobile__large-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__large-btn .uagb-buttons-repeater.ast-outline-button{padding:20px 30px}.uagb-buttons__outer-wrap.uagb-btn-mobile__extralarge-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline),.uagb-buttons__outer-wrap.uagb-btn-mobile__extralarge-btn .uagb-buttons-repeater.ast-outline-button{padding:30px 65px}}\n.uagb-buttons__outer-wrap .uagb-buttons-repeater{display:flex;justify-content:center;align-items:center;transition:box-shadow 0.2s ease}.uagb-buttons__outer-wrap .uagb-buttons-repeater a.uagb-button__link{display:flex;justify-content:center}.uagb-buttons__outer-wrap .uagb-buttons-repeater .uagb-button__icon{font-size:inherit;display:flex;align-items:center}.uagb-buttons__outer-wrap .uagb-buttons-repeater .uagb-button__icon svg{fill:currentColor;width:inherit;height:inherit}\n.uagb-block-0c7e50ad.wp-block-uagb-buttons.uagb-buttons__outer-wrap .uagb-buttons__wrap {gap: 10px;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: right;align-items: center;}.uagb-block-0c7e50ad .uagb-buttons-repeater:not(.wp-block-button__link){font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.ast-outline-button{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-uagb-buttons-child .uagb-buttons-repeater{background: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-ce399d64 .wp-block-button__link{background: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-ce399d64 .wp-block-button__link:hover{background: #eff6fc;}.wp-block-uagb-buttons .uagb-block-ce399d64 .wp-block-button__link:focus{background: #eff6fc;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__wrapper .uagb-buttons-repeater{color: #004578;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link:hover{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #0078d4;border-style: solid;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link:focus{border-color: #333;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #0078d4;border-style: solid;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__link{color: #004578;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__icon > svg{width: 15px;height: 15px;fill: #004578;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__icon-position-after{margin-left: 8px;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater .uagb-button__icon-position-before{margin-right: 8px;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-button__link{text-transform: normal;text-decoration: none;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper .uagb-buttons-repeater{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link:hover{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:focus{border-color: #333;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater:hover{border-color: #333;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__link{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon > svg{width: 15px;height: 15px;fill: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-after{margin-left: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-before{margin-right: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__link{text-transform: normal;text-decoration: none;}@media only screen and (max-width: 976px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}@media only screen and (max-width: 767px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-ce399d64.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-ce399d64 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #0078d4;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}.uagb-block-0c7e50ad.wp-block-uagb-buttons.uagb-buttons__outer-wrap .uagb-buttons__wrap {gap: 10px;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap{width: 100%;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button {width: 100%;}.uagb-block-0c7e50ad .uagb-buttons-repeater:not(.wp-block-button__link){font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.uagb-block-0c7e50ad .uagb-button__wrapper .uagb-buttons-repeater.ast-outline-button{font-size: 14px;padding-top: 7px;padding-bottom: 7px;padding-left: 16px;padding-right: 16px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper .uagb-buttons-repeater{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__wrapper  .uagb-buttons-repeater.wp-block-button__link:hover{box-shadow: 0px 0px 0 #00000026;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:hover{border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link:focus{border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-color: #106ebe;border-style: solid;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater:hover{border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__link{color: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon > svg{width: 15px;height: 15px;fill: var(--ast-global-color-4);}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-after{margin-left: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater .uagb-button__icon-position-before{margin-right: 8px;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-button__link{text-transform: normal;text-decoration: none;}@media only screen and (max-width: 976px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}@media only screen and (max-width: 767px) {.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: left;align-items: center;}.uagb-block-0c7e50ad.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link{background: linear-gradient(280deg,rgb(0,120,212) 0%,rgb(150,146,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:hover{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .wp-block-button__link:focus{background: linear-gradient(280deg,rgb(16,110,190) 0%,rgb(121,116,255) 100%);;background-clip: padding-box;}.wp-block-uagb-buttons .uagb-block-9730a9e0.wp-block-button.is-style-outline .uagb-button__wrapper .wp-block-button__link.uagb-buttons-repeater{border-style: solid;border-color: #106ebe;}.wp-block-uagb-buttons .uagb-block-9730a9e0 .uagb-buttons-repeater.wp-block-button__link{border-style: solid;border-color: #106ebe;}}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007 .uagb-heading-text{font-size: 20px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading a:hover{color: #000000;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-24f4d007 .uagb-heading-text{font-size: 20px;}@media only screen and (max-width: 976px) {.wp-block-uagb-advanced-heading.uagb-block-24f4d007.wp-block-uagb-advanced-heading {text-align: left;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}}\";s:2:\"js\";s:359:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'load', function() {\n\tUAGBButtonChild.init( '.uagb-block-ce399d64' );\n});\nwindow.addEventListener( 'load', function() {\n\tUAGBButtonChild.init( '.uagb-block-9730a9e0' );\n});\nwindow.addEventListener( 'load', function() {\n\tUAGBButtonChild.init( '.uagb-block-9730a9e0' );\n});\n });\";s:18:\"current_block_list\";a:16:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:9:\"core\/list\";i:3;s:14:\"core\/list-item\";i:4;s:10:\"core\/image\";i:5;s:9:\"core\/code\";i:6;s:11:\"core\/search\";i:7;s:10:\"core\/group\";i:8;s:17:\"core\/latest-posts\";i:9;s:20:\"core\/latest-comments\";i:10;s:13:\"core\/archives\";i:11;s:15:\"core\/categories\";i:12;s:21:\"uagb\/advanced-heading\";i:13;s:12:\"uagb\/buttons\";i:14;s:18:\"uagb\/buttons-child\";i:15;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776216187\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-9904.css"],"_uag_js_file_name":["uag-js-9904.js"]},"uagb_featured_image_src":{"full":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png",1920,953,false],"thumbnail":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1-150x150.png",150,150,true],"medium":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1-300x149.png",300,149,true],"medium_large":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1-768x381.png",768,381,true],"large":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1-1024x508.png",1024,508,true],"1536x1536":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1-1536x762.png",1536,762,true],"2048x2048":["https:\/\/clarity.microsoft.com\/blog\/wp-content\/uploads\/2025\/08\/WordpressBlogHero-1920x953-VibeCoding-1.png",1920,953,false]},"uagb_author_info":{"display_name":"Clarity Staff","author_link":"https:\/\/clarity.microsoft.com\/blog\/author\/v-joeperez\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to quickly integrate Microsoft Clarity into your vibe coding projects for fast, actionable user insights and better iteration.","_links":{"self":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/9904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=9904"}],"version-history":[{"count":13,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/9904\/revisions"}],"predecessor-version":[{"id":9927,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/9904\/revisions\/9927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/media\/9913"}],"wp:attachment":[{"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=9904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=9904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clarity.microsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=9904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}