1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>VoiceDOM â Fast UI Handoff for AI Coding Agents</title> 7 <meta name="description" content="Click any UI element, speak your change, and get instant transcription plus structured context for Cursor, Codex, Claude Code, and more."> 8 <link rel="canonical" href="https://voicedom.dev/"> 9 <link rel="icon" type="image/png" href="/favicon.png"> 10 <meta name="robots" content="index, follow"> 11 <meta name="theme-color" content="#d57724"> 12 13 <!-- Open Graph --> 14 <meta property="og:type" content="website"> 15 <meta property="og:url" content="https://voicedom.dev/"> 16 <meta property="og:site_name" content="VoiceDOM"> 17 <meta property="og:title" content="VoiceDOM â Fast UI Handoff for AI Coding Agents"> 18 <meta property="og:description" content="Click any UI element, speak your change, and get instant transcription plus structured context for Cursor, Codex, Claude Code, and more."> 19 <meta property="og:image" content="https://voicedom.dev/og-image.png"> 20 21 <!-- Twitter Card --> 22 <meta name="twitter:card" content="summary_large_image"> 23 <meta name="twitter:title" content="VoiceDOM â Fast UI Handoff for AI Coding Agents"> 24 <meta name="twitter:description" content="Click any UI element, speak your change, and get instant transcription plus structured context for Cursor, Codex, Claude Code, and more."> 25 <meta name="twitter:image" content="https://voicedom.dev/og-image.png"> 26 27
27<script id="datafast-queue"> 28 window.datafast = window.datafast || function() { 29 window.datafast.q = window.datafast.q || []; 30 window.datafast.q.push(arguments); 31 }; 32 </script>
32 33
33<script defer data-website-id="dfid_RcuYswbVjFBkQSli0ctaK" data-domain="voicedom.dev" src="https://datafa.st/js/script.js"></script>
33 34 <link rel="preconnect" href="https://fonts.googleapis.com"> 35 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 36 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet"> 37
37<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
37 38 <style type="text/tailwindcss"> 39 @theme { 40 --font-sans: "Sora", ui-sans-serif, system-ui, sans-serif; 41 --font-mono: "JetBrains Mono", ui-monospace, monospace; 42 --color-brand: oklch(0.68 0.17 45); 43 --color-brand-dark: oklch(0.58 0.17 45); 44 --color-surface: oklch(0.97 0.004 280); 45 --color-ink: oklch(0.22 0.01 280); 46 --color-muted: oklch(0.48 0.01 280); 47 } 48 49 html { scroll-behavior: smooth; } 50 51 body { 52 font-family: var(--font-sans); 53 color: var(--color-ink); 54 background: var(--color-surface); 55 } 56 57 .btn-primary { 58 @apply inline-flex items-center justify-center gap-2 rounded-full bg-[var(--color-brand)] px-6 py-3.5 text-base font-semibold text-white shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] transition hover:bg-[var(--color-brand-dark)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-brand)]; 59 } 60 61 .btn-secondary { 62 @apply inline-flex items-center justify-center gap-2 rounded-full border border-black/10 bg-white px-6 py-3.5 text-base font-semibold text-[var(--color-ink)] shadow-sm transition hover:bg-zinc-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-400; 63 } 64 65 .section-pad { @apply py-16 md:py-24; } 66 67 details summary { @apply cursor-pointer list-none; } 68 details summary::-webkit-details-marker { display: none; } 69 70 #demo-modal:not(.is-open) { display: none; } 71 #demo-modal.is-open { display: flex; } 72 73 .hiw-mock { 74 @apply relative overflow-hidden rounded-xl border border-black/6 bg-zinc-100/70; 75 } 76 77 .hiw-mock .sel-class { color: oklch(0.52 0.14 285); } 78 .hiw-mock .sel-tag { color: oklch(0.48 0.12 155); } 79 80 @keyframes hiw-dot-pulse { 81 0%, 100% { opacity: 0.35; transform: scaleY(0.55); } 82 50% { opacity: 1; transform: scaleY(1); } 83 } 84 85 .hiw-wave span { 86 animation: hiw-dot-pulse 1.2s ease-in-out infinite; 87 } 88 .hiw-wave span:nth-child(2) { animation-delay: 0.1s; } 89 .hiw-wave span:nth-child(3) { animation-delay: 0.2s; } 90 .hiw-wave span:nth-child(4) { animation-delay: 0.3s; } 91 .hiw-wave span:nth-child(5) { animation-delay: 0.4s; } 92 .hiw-wave span:nth-child(6) { animation-delay: 0.5s; } 93 .hiw-wave span:nth-child(7) { animation-delay: 0.6s; } 94 .hiw-wave span:nth-child(8) { animation-delay: 0.7s; } 95 .hiw-wave span:nth-child(9) { animation-delay: 0.8s; } 96 .hiw-wave span:nth-child(10) { animation-delay: 0.9s; } 97 98 .provider-mock-item.is-active { 99 @apply border-[var(--color-brand)]/40 bg-orange-50/80 ring-1 ring-[var(--color-brand)]/20; 100 } 101 </style> 102</head> 103<body class="antialiased text-[15px] leading-relaxed"> 104 105 <!-- Sticky header --> 106 <header class="sticky top-0 z-50 border-b border-black/5 bg-[var(--color-surface)]/90 backdrop-blur-md"> 107 <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-3"> 108 <a href="/" class="flex items-center gap-2"> 109 <img src="voice-DOM-logo.png" alt="VoiceDOM" class="h-7 w-auto"> 110 </a> 111 <nav class="hidden items-center gap-6 text-sm font-medium text-[var(--color-muted)] md:flex"> 112 <button type="button" data-demo-open class="cursor-pointer bg-transparent text-sm font-medium text-[var(--color-muted)] hover:text-[var(--color-ink)]">Demo</button> 113 <a href="#how-it-works" class="hover:text-[var(--color-ink)]">How it works</a> 114 <a href="#pricing" class="hover:text-[var(--color-ink)]">Pricing</a> 115 <a href="#faq" class="hover:text-[var(--color-ink)]">FAQ</a> 116 </nav> 117 <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="header" class="btn-primary shrink-0 px-5 py-2.5 text-sm"><img src="chrome.svg" alt="" class="h-4 w-4 shrink-0" aria-hidden="true">Add to Chrome</a> 118 </div> 119 </header> 120 121 <main> 122 123 <!-- Hero --> 124 <section class="section-pad pt-12 md:pt-16"> 125 <div class="mx-auto grid max-w-6xl items-center gap-10 px-5 lg:grid-cols-2 lg:gap-16"> 126 <div class="flex flex-col gap-5"> 127 <p class="font-mono text-xs font-semibold uppercase tracking-widest text-[var(--color-brand)]">Chrome extension</p> 128 <h1 class="text-3xl font-extrabold leading-[1.08] tracking-tight md:text-4xl lg:text-5xl"> 129 UI feedback that moves as fast as you speak. 130 </h1> 131 <p class="max-w-lg text-lg text-[var(--color-muted)]"> 132 Click any element, speak naturally, and get transcribed instructions with exact context for 133 <strong class="font-semibold text-[var(--color-ink)]">Cursor, Codex, Claude Code</strong>, and other AI coding agents. 134 </p> 135 <p class="font-mono text-sm font-semibold text-[var(--color-ink)]">BYOK · No subscription · Start free</p> 136 <div id="install" class="flex flex-wrap gap-3 pt-1"> 137 <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="hero" class="btn-primary text-lg"><img src="chrome.svg" alt="" class="h-5 w-5 shrink-0" aria-hidden="true">Add to Chrome â free</a> 138 <button type="button" data-demo-open class="btn-secondary"> 139 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> 140 <path d="M8 5.14v13.72c0 .88 1.02 1.36 1.68.78l10.02-6.86a1 1 0 0 0 0-1.56L9.68 4.36A1 1 0 0 0 8 5.14Z"/> 141 </svg> 142 Watch demo 143 </button> 144 </div> 145 <p class="text-sm text-[var(--color-muted)]">Install in under a minute. Free tier uses Groq â bring your own API key.</p> 146 </div> 147 148 <figure id="demo" class="overflow-hidden rounded-2xl border border-black/10 bg-zinc-900 p-2 shadow-lg shadow-black/5"> 149 <video 150 id="demo-preview" 151 class="w-full rounded-xl" 152 src="demo-video.mp4" 153 width="1546" 154 height="1080" 155 controls 156 playsinline 157 muted 158 loop 159 autoplay 160 preload="metadata" 161 aria-label="VoiceDOM demo preview" 162 > 163 Your browser does not support embedded video. <a href="demo-video.mp4">Download the demo</a>. 164 </video>
165 <figcaption class="px-2 py-3 font-mono text-xs text-[var(--color-muted)]"> 166 17s demo · pick â record â transcribe â copy agent-ready markdown 167 </figcaption> 168 </figure> 169 </div> 170 </section> 171 172 <!-- Before / After --> 173 <section class="border-y border-black/5 bg-white section-pad"> 174 <div class="mx-auto max-w-6xl px-5"> 175 <div class="mx-auto mb-10 max-w-2xl text-center"> 176 <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">Stop typing UI feedback. Point and speak instead.</h2> 177 <p class="mt-3 text-[var(--color-muted)]"> 178 VoiceDOM links your spoken request to the exact DOM element â so agents get clear text, selectors, and page context without back-and-forth. 179 </p> 180 </div> 181 <div class="grid gap-4 md:grid-cols-2 md:gap-6"> 182 <article class="rounded-2xl border border-black/8 bg-zinc-50 p-6"> 183 <p class="mb-2 font-mono text-xs font-semibold uppercase tracking-wider text-[var(--color-muted)]">Before</p> 184 <p class="text-lg font-semibold">2â5 minutes rewriting visual feedback</p> 185 <p class="mt-2 text-[var(--color-muted)]">Still unclear which element changed or what the agent should touch.</p> 186 </article> 187 <article class="rounded-2xl border-2 border-[var(--color-brand)]/30 bg-orange-50/60 p-6"> 188 <p class="mb-2 font-mono text-xs font-semibold uppercase tracking-wider text-[var(--color-brand)]">After VoiceDOM</p> 189 <p class="text-lg font-semibold">20â40 seconds to speak and paste</p> 190 <p class="mt-2 text-[var(--color-muted)]">Structured markdown with selector, URL, component name, and transcript â ready for your agent.</p> 191 </article> 192 </div> 193 </div> 194 </section> 195 196 <!-- How it works --> 197 <section id="how-it-works" class="section-pad"> 198 <div class="mx-auto max-w-6xl px-5"> 199 <div class="mb-12 max-w-xl"> 200 <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">From idea to agent in under a minute</h2> 201 <p class="mt-3 text-[var(--color-muted)]">Three steps. No layout shift. Annotations saved per site.</p> 202 </div> 203 204 <ol class="grid gap-5 lg:grid-cols-3"> 205 <!-- Step 1 --> 206 <li class="flex flex-col rounded-2xl border border-black/8 bg-white p-5 shadow-sm"> 207 <div class="flex gap-4"> 208 <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-sm font-bold text-white">1</span> 209 <div> 210 <h3 class="font-bold">Select any element</h3> 211 <p class="mt-1 text-sm text-[var(--color-muted)]">Crosshair picker with DevTools-style highlight. React component names when available.</p> 212 </div> 213 </div> 214 215 <div class="hiw-mock mt-5 min-h-[168px] p-3 pb-10" aria-hidden="true"> 216 <div class="flex gap-2"> 217 <div class="flex-1 rounded-xl border border-black/6 bg-white p-2.5 shadow-sm"> 218 <div class="flex items-center gap-2"> 219 <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-[9px] font-bold text-white">1</span> 220 <span class="rounded border border-dashed border-[var(--color-brand)] px-1.5 py-0.5 text-[10px] font-bold leading-tight">Select any element</span> 221 </div> 222 </div> 223 <div class="w-[38%] rounded-xl border border-black/6 bg-white p-2.5 opacity-50 shadow-sm"> 224 <div class="flex items-center gap-2"> 225 <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-[9px] font-bold text-white">2</span> 226 <span class="h-2.5 w-16 rounded bg-zinc-200"></span> 227 </div> 228 </div> 229 </div> 230 231 <div class="absolute bottom-2 left-1/2 z-10 w-[92%] max-w-[220px] -translate-x-1/2 roun
231ded-2xl border border-black/8 bg-white p-2.5 shadow-lg shadow-black/10"> 232 <div class="flex items-center gap-1.5"> 233 <span class="flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">1</span> 234 <p class="truncate font-mono text-[9px] leading-none"><span class="sel-class">.shadow-sm:nth-child(1)</span> <span class="sel-tag">h3</span></p> 235 </div> 236 <div class="mt-2 flex justify-center gap-0.5"> 237 <span class="h-1 w-1 rounded-full bg-zinc-300"></span> 238 <span class="h-1 w-1 rounded-full bg-zinc-300"></span> 239 <span class="h-1 w-1 rounded-full bg-zinc-300"></span> 240 <span class="h-1 w-1 rounded-full bg-zinc-300"></span> 241 <span class="h-1 w-1 rounded-full bg-zinc-300"></span> 242 </div> 243 <p class="mt-1 text-center font-mono text-[10px] font-semibold tabular-nums">00:00</p> 244 <div class="mt-2 rounded-full bg-[var(--color-ink)] py-1.5 text-center text-[10px] font-semibold text-white">Stop</div> 245 <div class="mt-1.5 flex gap-1"> 246 <span class="flex-1 rounded-full bg-zinc-100 py-1 text-center text-[8px] font-medium text-zinc-500">Cancel <span class="text-zinc-400">ESC</span></span> 247 <span class="flex-1 rounded-full bg-orange-200/80 py-1 text-center text-[8px] font-semibold text-white">Save âµ</span> 248 </div> 249 </div> 250 </div> 251 </li> 252 253 <!-- Step 2 --> 254 <li class="flex flex-col rounded-2xl border border-black/8 bg-white p-5 shadow-sm"> 255 <div class="flex gap-4"> 256 <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-sm font-bold text-white">2</span> 257 <div> 258 <h3 class="font-bold">Speak your change</h3> 259 <p class="mt-1 text-sm text-[var(--color-muted)]">Mic permission once. Transcribe with your Groq key on Free, or any provider on Pro.</p> 260 </div> 261 </div> 262 263 <div class="hiw-mock mt-5 flex min-h-[168px] items-center justify-center p-4" aria-hidden="true"> 264 <div class="w-full max-w-[220px] rounded-2xl border border-black/8 bg-white p-3 shadow-md shadow-black/8"> 265 <div class="flex items-center gap-1.5"> 266 <span class="flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">1</span> 267 <p class="truncate font-mono text-[9px] leading-none"><span class="sel-class">.shadow-sm:nth-child(1)</span> <span class="sel-tag">h3</span></p> 268 </div> 269 270 <div class="hiw-wave mt-3 flex items-end justify-center gap-[3px]"> 271 <span class="block h-2 w-[3px] rounded-full bg-zinc-300"></span> 272 <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span> 273 <span class="block h-4 w-[3px] rounded-full bg-zinc-500"></span> 274 <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span> 275 <span class="block h-5 w-[3px] rounded-full bg-zinc-600"></span> 276 <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span> 277 <span class="block h-4 w-[3px] rounded-full bg-zinc-500"></span> 278 <span class="block h-2 w-[3px] rounded-full bg-zinc-300"></span> 279 <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span> 280 <span class="block h-2 w-[3px] rounded-full bg-zinc-300"></span> 281 </div> 282 283 <p class="mt-2 text-center font-mono text-[11px] font-semibold tabular-nums">00:05</p> 284 <div class="mt-2.5 rounded-full bg-[var(--color-ink)] py-2 text-center text-[11px] font-semibold text-white">Stop</div> 285 <div class="mt-2 flex gap-1.5"> 286 <span class="flex flex-1 items-center justify-center gap-1 rounded-full bg-zinc-100 py-1.5 text-[9px] font-medium text-zinc-600"> 287 Cancel <span class="rounded bg-white px-1 py-px font-mono text-[7px] text-zinc-400">ESC</span> 288 </span>
289 <span class="flex flex-1 items-center justify-center gap-1 rounded-full bg-[#fbc4b4] py-1.5 text-[9px] font-semibold text-white"> 290 Save <span class="rounded bg-white/25 px-1 py-px font-mono text-[7px]">âµ</span> 291 </span> 292 </div> 293 </div> 294 </div> 295 </li> 296 297 <!-- Step 3 --> 298 <li class="flex flex-col rounded-2xl border border-black/8 bg-white p-5 shadow-sm"> 299 <div class="flex gap-4"> 300 <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-sm font-bold text-white">3</span> 301 <div> 302 <h3 class="font-bold">Ship to your agent</h3> 303 <p class="mt-1 text-sm text-[var(--color-muted)]">Copy structured markdown or let Pro MCP read annotations live â no copy-paste.</p> 304 </div> 305 </div> 306 307 <div class="hiw-mock mt-5 flex min-h-[168px] items-start justify-center p-3" aria-hidden="true"> 308 <div class="w-full max-w-[240px] overflow-hidden rounded-2xl border border-black/8 bg-white shadow-md shadow-black/8"> 309 <div class="flex items-center justify-between border-b border-black/6 px-3 py-2"> 310 <div class="flex items-center gap-1.5"> 311 <span class="text-[11px] font-bold">Annotations</span> 312 <span class="rounded-full bg-[var(--color-brand)] px-1.5 py-px font-mono text-[8px] font-bold text-white">2</span> 313 </div> 314 <span class="text-sm leading-none text-zinc-400">â</span> 315 </div> 316 317 <div class="border-b border-black/6 px-3 py-2"> 318 <div class="flex items-start gap-1.5"> 319 <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">1</span> 320 <div class="min-w-0 flex-1"> 321 <p class="truncate font-mono text-[9px] leading-tight"><span class="sel-class">.shadow-sm:nth-child(1)</span> <span class="sel-tag">h3</span></p> 322 <p class="mt-0.5 text-[9px] leading-snug text-[var(--color-muted)]">Okay, we are talking here about something.</p> 323 </div> 324 <span class="text-[10px] text-zinc-400">Ã</span> 325 </div> 326 </div> 327 328 <div class="px-3 py-2"> 329 <div class="flex items-start gap-1.5"> 330 <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">2</span> 331 <div class="min-w-0 flex-1"> 332 <p class="truncate font-mono text-[9px] leading-tight"><span class="sel-class">.shadow-sm:nth-child(2)</span></p> 333 <p class="mt-0.5 text-[9px] leading-snug text-[var(--color-muted)]">change this card to something better.</p> 334 </div> 335 <span class="text-[10px] text-zinc-400">Ã</span> 336 </div> 337 </div> 338 339 <div class="flex gap-1.5 border-t border-black/6 p-2"> 340 <span class="flex-1 rounded-full bg-[var(--color-brand)] py-1.5 text-center text-[9px] font-semibold text-white">Copy all</span> 341 <span class="flex-1 rounded-full border border-black/10 bg-zinc-50 py-1.5 text-center text-[9px] font-semibold">Clear</span> 342 </div> 343 </div> 344 </div> 345 </li> 346 </ol> 347 </div> 348 </section> 349 350 <!-- Features --> 351 <section class="border-t border-black/5 bg-white section-pad"> 352 <div class="mx-auto max-w-6xl px-5"> 353 <h2 class="mb-10 text-center text-3xl font-extrabold tracking-tight md:text-4xl">Built for real web app work</h2> 354 <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"> 355 <article class="rounded-2xl border border-black/8 p-6"> 356 <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div> 357 <h3 class="font-bold">Non-destructive picker</h3> 358 <p class="mt-2 text-sm text-[var(--color-muted)]">Highlight overlay with zero layout shift. Works on dynamic SPAs and modern frameworks.</p> 359 </article> 360 <article class="rounded-2xl border border-black/8 p-6"> 361 <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div> 362 <h3 class="font-bold">Voice â text, instantly</h3> 363 <p class="mt-2 text-sm text-[var(--color-muted)]">Groq Whisper on Free with your own key. Pro unlocks OpenAI, Deepgram, ElevenLabs, and more.</p> 364 </article> 365 <article class="rounded-2xl border border-black/8 p-6"> 366 <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div> 367 <h3 class="font-bold">Agent-ready export</h3> 368 <p class="mt-2 text-sm text-[var(--color-muted)]">Markdown with selector, XPath, tag, component name, URL, and optional screenshot refs.</p> 369 </article> 370 <article class="rounded-2xl border border-black/8 p-6"> 371 <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div> 372 <h3 class="font-bold">Saved per site</h3> 373 <p class="mt-2 text-sm text-[var(--color-muted)]">Annotations persist in local storage, grouped by hostname. Review and clear from settings.</p> 374 </article> 375 <article class="rounded-2xl border border-black/8 p-6"> 376 <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div> 377 <h3 class="font-bold">Component detection</h3> 378 <p class="mt-2 text-sm text-[var(--color-muted)]">Fiber introspection shows <code class="rounded bg-zinc-100 px-1 font-mono text-xs"><LoginButton /></code> alongside the CSS selector.</p> 379 </article> 380 <article class="rounded-2xl border border-black/8 p-6"> 381 <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div> 382 <h3 class="font-bold">MCP in Pro</h3> 383 <p class="mt-2 text-sm text-[var(--color-muted)]">Claude Code reads your annotations directly from a local MCP server â skip the clipboard. <a href="/mcp" class="font-medium text-[var(--color-brand)] underline decoration-[var(--color-brand)]/30 underline-offset-2 hover:
383decoration-[var(--color-brand)]">Setup guide â</a></p> 384 </article> 385 </div> 386 </div> 387 </section> 388 389 <!-- BYOK / providers --> 390 <section class="section-pad py-12"> 391 <div class="mx-auto max-w-6xl px-5"> 392 <div class="overflow-hidden rounded-3xl border border-black/8 bg-white shadow-sm shadow-black/5"> 393 <div class="grid lg:grid-cols-[1fr_minmax(0,340px)]"> 394 <div class="flex flex-col justify-center gap-4 p-6 md:p-10 lg:border-r lg:border-black/6"> 395 <p class="font-mono text-xs font-semibold uppercase tracking-widest text-[var(--color-brand)]">Bring your own key</p> 396 <h2 class="text-2xl font-extrabold tracking-tight md:text-3xl">Your keys stay local. Pick any provider.</h2> 397 <p class="max-w-md text-[var(--color-muted)]"> 398 API keys live in your browser profile â never on our servers. Start with Groq on Free, then switch to OpenAI, Deepgram, ElevenLabs, or another supported provider whenever you want. 399 </p> 400 <ul class="mt-1 flex flex-wrap gap-2 text-sm"> 401 <li class="inline-flex items-center gap-1.5 rounded-full border border-black/8 bg-zinc-50 px-3 py-1 font-medium"> 402 <svg class="h-3.5 w-3.5 text-[var(--color-brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> 403 Keys stored locally 404 </li> 405 <li class="inline-flex items-center gap-1.5 rounded-full border border-black/8 bg-zinc-50 px-3 py-1 font-medium"> 406 <svg class="h-3.5 w-3.5 text-[var(--color-brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg> 407 Switch anytime 408 </li> 409 <li class="inline-flex items-center gap-1.5 rounded-full border border-black/8 bg-zinc-50 px-3 py-1 font-medium"> 410 <svg class="h-3.5 w-3.5 text-[var(--color-brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg> 411 No key on our servers 412 </li> 413 </ul> 414 </div> 415 416 <div class="bg-gradient-to-br from-zinc-50 to-zinc-100/80 p-5 md:p-6" aria-hidden="true"> 417 <div class="mx-auto w-full max-w-[300px] overflow-hidden rounded-2xl border border-black/8 bg-white shadow-md shadow-black/8"> 418 <div class="border-b border-black/6 px-4 py-3"> 419 <p class="text-sm font-bold">Transcription</p> 420 <p class="mt-0.5 text-xs text-[var(--color-muted)]">Choose a provider and paste your API key</p> 421 </div> 422 423 <div class="flex flex-col gap-1.5 p-3"> 424 <div class="provider-mock-item is-active flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5"> 425 <div class="flex items-center gap-2.5"> 426 <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-orange-100 font-mono text-[10px] font-bold text-orange-700">Gq</span> 427 <div> 428 <p class="text-xs font-semibold">Groq</p> 429 <p class="text-[10px] text-[var(--color-muted)]">Whisper · Free tier</p> 430 </div> 431 </div> 432 <span class="flex h-4 w-4 items-center justify-center rounded-full bg-[var(--color-brand)] text-[9px] font-bold text-white">â</span> 433 </div> 434 435 <div class="provider-mock-item flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5 opacity-80"> 436 <div class="flex items-center gap-2.5"> 437 <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-100 font-mono text-[10px] font-bold text-zinc-600">AI</span> 438 <div> 439 <p class="text-xs font-semibold">OpenAI</p> 440 <p class="text-[10px] text-[var(--color-muted)]">Whisper API · Pro</p> 441 </div> 442 </div> 443 </div> 444 445 <div class="provider-mock-item flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5 opacity-80"> 446 <div class="flex items-center gap-2.5">
447 <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-100 font-mono text-[10px] font-bold text-zinc-600">DG</span> 448 <div> 449 <p class="text-xs font-semibold">Deepgram</p> 450 <p class="text-[10px] text-[var(--color-muted)]">Nova · Pro</p> 451 </div> 452 </div> 453 </div> 454 455 <div class="provider-mock-item flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5 opacity-80"> 456 <div class="flex items-center gap-2.5"> 457 <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-100 font-mono text-[10px] font-bold text-zinc-600">11</span> 458 <div> 459 <p class="text-xs font-semibold">ElevenLabs</p> 460 <p class="text-[10px] text-[var(--color-muted)]">Scribe · Pro</p> 461 </div> 462 </div> 463 </div> 464 </div> 465 466 <div class="border-t border-black/6 bg-zinc-50/80 px-4 py-3"> 467 <p class="font-mono text-[10px] font-medium text-[var(--color-muted)]">API key</p> 468 <div class="mt-1.5 flex items-center gap-2 rounded-lg border border-black/8 bg-white px-3 py-2"> 469 <span class="font-mono text-[11px] tracking-widest text-zinc-400">gsk_â¢â¢â¢â¢â¢â¢â¢â¢â¢â¢â¢â¢</span> 470 <span class="ml-auto rounded bg-emerald-50 px-1.5 py-0.5 font-mono text-[9px] font-semibold text-emerald-700">local</span> 471 </div> 472 </div> 473 </div> 474 </div> 475 </div> 476 </div> 477 </div> 478 </section> 479 480 <!-- Pricing --> 481 <section id="pricing" class="border-t border-black/5 bg-white section-pad"> 482 <div class="mx-auto max-w-6xl px-5"> 483 <div class="mx-auto mb-12 max-w-xl text-center"> 484 <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">Start free. Upgrade once if you need more.</h2> 485 <p class="mt-3 text-[var(--color-muted)]">No monthly fee. Pro is a $19 lifetime unlock via ExtPay.</p> 486 </div> 487 488 <div class="mx-auto grid max-w-4xl gap-6 md:grid-cols-2"> 489 <!-- Free --> 490 <article class="flex flex-col rounded-2xl border border-black/10 p-8"> 491 <p class="font-mono text-sm font-semibold text-[var(--color-brand)]">Free</p> 492 <p class="mt-2 text-4xl font-extrabold tracking-tight">$0</p> 493 <p class="mt-1 text-sm text-[var(--color-muted)]">Forever â core workflow included</p> 494 <ul class="mt-6 flex flex-1 flex-col gap-3 text-sm"> 495 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> DOM picker + unlimited annotations</li> 496 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> Groq transcription with your own API key</li> 497 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> Markdown export to Cursor, Codex, Claude Code</li> 498 <li class="flex gap-2"><span class="text-[var(--color-muted)]">â</span> <span class="text-[var(--color-muted)]">MCP & screenshots (Pro)</span></li> 499 </ul> 500 <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="pricing" class="btn-primary mt-8 w-full justify-center"><img src="chrome.svg" alt="" class="h-5 w-5 shrink-0" aria-hidden="true">Add to Chrome â free</a> 501 </article> 502 503 <!-- Pro --> 504 <article class="relative flex flex-col rounded-2xl border-2 border-[var(--color-brand)] bg-gradient-to-b from-orange-50/80 to-white p-8 shadow-lg shadow-orange-500/10"> 505 <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[var(--color-brand)] px-3 py-0.5 font-mono text-xs font-semibold text-white">Most popular for teams</span> 506 <p class="font-mono text-sm font-semibold text-[var(--color-brand)]">Pro</p> 507 <p class="mt-2 text-4xl font-extrabold tracking-tight">$19 <span class="text-lg font-semibold text-[var(--color-muted)]">lifetime</span></p> 508 <p class="mt-1 text-sm text-[var(--color-muted)]">One-time purchase â no recurring charges</p> 509 <ul class="mt-6 flex flex-1 flex-col gap-3 text-sm"> 510 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> Everything in Free</li> 511 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> MCP server â agents read annotations live</li> 512 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> BYOK for all transcription providers</li> 513 <li class="flex gap-2"><span class="text-[var(--color-brand)]">â</span> Element screenshots in exports</li> 514 </ul> 515 <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="get_pro_click" data-fast-goal-location="pricing" class="mt-8 inl
515ine-flex w-full items-center justify-center rounded-full bg-[var(--color-ink)] px-6 py-3.5 text-base font-semibold text-white transition hover:bg-zinc-800">Get Pro â $19 lifetime</a> 516 <p class="mt-3 text-center text-xs text-[var(--color-muted)]">Unlock inside the extension after install</p> 517 </article> 518 </div> 519 </div> 520 </section> 521 522 <!-- FAQ --> 523 <section id="faq" class="section-pad"> 524 <div class="mx-auto max-w-3xl px-5"> 525 <h2 class="mb-10 text-center text-3xl font-extrabold tracking-tight">Common questions</h2> 526 <div class="flex flex-col gap-4"> 527 <details class="rounded-xl border border-black/8 bg-white p-5" open> 528 <summary class="flex items-center justify-between font-semibold"> 529 Is this only for voice notes? 530 <span class="ml-4 text-[var(--color-muted)]">+</span> 531 </summary> 532 <p class="mt-3 text-sm text-[var(--color-muted)]">No. Voice is the input â the output is clean transcription linked to exact UI elements for fast AI handoff.</p> 533 </details> 534 <details class="rounded-xl border border-black/8 bg-white p-5"> 535 <summary class="flex items-center justify-between font-semibold"> 536 Which AI tools does it work with? 537 <span class="ml-4 text-[var(--color-muted)]">+</span> 538 </summary> 539 <p class="mt-3 text-sm text-[var(--color-muted)]">Any tool that accepts text context: Cursor, Codex, Claude Code, and more. Paste markdown or use MCP in Pro.</p> 540 </details> 541 <details class="rounded-xl border border-black/8 bg-white p-5"> 542 <summary class="flex items-center justify-between font-semibold"> 543 Where are annotations and keys stored? 544 <span class="ml-4 text-[var(--color-muted)]">+</span> 545 </summary> 546 <p class="mt-3 text-sm text-[var(--color-muted)]">Locally in your browser profile, grouped per hostname. Nothing leaves your machine unless you export it.</p> 547 </details> 548 <details class="rounded-xl border border-black/8 bg-white p-5"> 549 <summary class="flex items-center justify-between font-semibold"> 550 Does it work on dynamic web apps? 551 <span class="ml-4 text-[var(--color-muted)]">+</span> 552 </summary> 553 <p class="mt-3 text-sm text-[var(--color-muted)]">Yes. Built for SPAs and modern frameworks with non-destructive highlighting and React fiber detection.</p> 554 </details> 555 <details class="rounded-xl border border-black/8 bg-white p-5"> 556 <summary class="flex items-center justify-between font-semibold"> 557 What if transcription fails? 558 <span class="ml-4 text-[var(--color-muted)]">+</span> 559 </summary> 560 <p class="mt-3 text-sm text-[var(--color-muted)]">Retry immediately or switch provider in settings. Your saved annotations remain either way.</p> 561 </details> 562 <details class="rounded-xl border border-black/8 bg-white p-5"> 563 <summary class="flex items-center justify-between font-semibold"> 564 Do I need a subscription for Pro? 565 <span class="ml-4 text-[var(--color-muted)]">+</span> 566 </summary> 567 <p class="mt-3 text-sm text-[var(--color-muted)]">No. Pro is a one-time $19 lifetime purchase. Free tier has no time limit.</p> 568 </details> 569 </div> 570 </div> 571 </section> 572 573 <!-- Final CTA --> 574 <section class="section-pad pb-24 pt-0"> 575 <div class="mx-auto max-w-4xl px-5"> 576 <div class="rounded-3xl border border-[var(--color-brand)]/25 bg-gradient-to-br from-orange-50 to-orange-100/50 p-10 text-center md:p-14"> 577 <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">Point. Speak. Transcribe. Ship.</h2> 578 <p class="mx-auto mt-3 max-w-md text-[var(--color-muted)]">Turn UI feedback into agent-ready instructions in seconds.</p> 579 <div class="mt-8 flex flex-wrap items-center justify-center gap-3"> 580 <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="final-cta" class="btn-primary text-lg"><img src="chrome.svg" alt="" class="h-5 w-5 shrink-0" aria-hidden="true">Add to Chrome â free</a> 581 <a href="#pricing" class="btn-secondary">Compare Free vs Pro</a> 582 </div> 583 </div> 584 </div> 585 </section> 586 587 </main> 588 589 <footer class="border-t border-black/5 py-8"> 590 <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-5 text-sm text-[var(--color-muted)] sm:flex-row"> 591 <img src="voice-DOM-logo.png" alt="VoiceDOM" class="h-5 w-auto opacity-70"> 592 <p>Voice-first UI annotations for AI coding agents</p> 593 <nav class="flex items-center gap-4"> 594 <a href="/mcp" class="hover:text-[var(--color-ink)]">MCP</a> 595 <a href="/help" class="hover:text-[var(--color-ink)]">Help</a> 596 <a href="/privacy" class="hover:text-[var(--color-ink)]">Privacy</a> 597 <a href="/terms" class="hover:text-[var(--color-ink)]">Terms</a> 598 <a href="/faqs" class="hover:text-[var(--color-ink)]">FAQs</a> 599 </nav> 600 </div> 601 </footer> 602 603 <!-- Demo lightbox --> 604 <div 605 id="demo-modal" 606 class="fixed inset-0 z-[100] items-center justify-center bg-black/90 p-4 backdrop-blur-sm md:p-8" 607 role="dialog" 608 aria-modal="true" 609 aria-label="VoiceDOM demo video" 610 aria-hidden="true" 611 > 612 <button 613 type="button" 614 id="demo-modal-close" 615 class="absolute right-4 top-4 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20 focu
615s-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white md:right-8 md:top-8" 616 aria-label="Close demo" 617 > 618 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"> 619 <path d="M18 6 6 18"/><path d="m6 6 12 12"/> 620 </svg> 621 </button> 622 <div class="w-full max-w-[min(96vw,1546px)]"> 623 <video 624 id="demo-modal-video" 625 class="max-h-[88vh] w-full rounded-xl shadow-2xl" 626 src="demo-video.mp4" 627 width="1546" 628 height="1080" 629 controls 630 playsinline 631 preload="metadata" 632 ></video> 633 </div> 634 </div> 635 636
636<script> 637 (function () { 638 const modal = document.getElementById('demo-modal'); 639 const modalVideo = document.getElementById('demo-modal-video'); 640 const previewVideo = document.getElementById('demo-preview'); 641 const closeBtn = document.getElementById('demo-modal-close'); 642 const openTriggers = document.querySelectorAll('[data-demo-open]'); 643 let lastFocus = null; 644 645 function openDemo() { 646 lastFocus = document.activeElement; 647 modal.classList.add('is-open'); 648 modal.setAttribute('aria-hidden', 'false'); 649 document.body.style.overflow = 'hidden'; 650 previewVideo?.pause(); 651 modalVideo.currentTime = 0; 652 modalVideo.muted = false; 653 modalVideo.play().catch(function () {}); 654 closeBtn.focus(); 655 } 656 657 function closeDemo() { 658 modal.classList.remove('is-open'); 659 modal.setAttribute('aria-hidden', 'true'); 660 document.body.style.overflow = ''; 661 modalVideo.pause(); 662 modalVideo.currentTime = 0; 663 previewVideo?.play().catch(function () {}); 664 if (lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus(); 665 } 666 667 openTriggers.forEach(function (trigger) { 668 trigger.addEventListener('click', function (event) { 669 event.preventDefault(); 670 openDemo(); 671 }); 672 }); 673 674 closeBtn.addEventListener('click', closeDemo); 675 676 modal.addEventListener('click', function (event) { 677 if (event.target === modal) closeDemo(); 678 }); 679 680 document.addEventListener('keydown', function (event) { 681 if (event.key === 'Escape' && modal.classList.contains('is-open')) closeDemo(); 682 }); 683 })(); 684 </script>
684 685 686</body> 687</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.