v1.0 — voice + click + vision

Talk. Click.
The agent edits the right files.

The design intent capture layer between humans and AI agents. Speak naturally, click what you mean. TAPE produces a structured critique with selectors, source paths, design tokens, screenshots, and parsed intent. Paste into Cursor, Claude Code, or Copilot and ship.

$ npm install usetapeui copy

View on GitHub See it work →

Voice + click

Vision capture

Source linking

Token aware

MCP native

01Live demo

Click each element on the left. Watch what TAPE captures on the right. Each click is paired with simulated speech, sentiment, intent, the source file path, current styles translated to design tokens, and a vision snapshot.

Welcome back, friend.

Pick up where you left off, or start something new.

Recent project

Edited 2 days ago

Templates

12 available

Recording 0 / 5 captured

Click any element on the left.

02What's new in v1.0

Five pillars compound to make this a different tier of tool than v0.x.

01Vision capture

Every click takes a cropped screenshot of the element, lazy-loaded so it never blocks the recorder. Vision-capable agents read what you saw, not just what you said.

02Source linking

React fiber walk (16/17/18), Vue 3 component walk, Svelte meta extraction. Every marker carries the component name and source file path. The agent knows which file to edit.

03Design tokens

Auto-detects Tailwind utility classes and CSS custom properties at session start. Computed values translated back to your design vocabulary in the export.

04Intent extraction

Replaces keyword sentiment with structured intent: action, attribute, direction, magnitude, value. Pure rules-based, deterministic, zero API keys, runs entirely in the browser.

05Reference resolution

Pronouns, ordinals, and back-references get bound to specific markers. "The first one", "the previous", "this", "that" all resolve correctly.

06Editor + replay + verify

Edit comments after recording. Save sessions as .tape.json. Replay walks elements step-by-step. Verify diffs current styles against the recording so you can confirm fixes worked.

03React

Drop in once. Press Alt + T to toggle.

App.tsx

import { Tape } from 'usetapeui'

export default function App() {
  return (
    <>
      <YourApp />
      <Tape />
    </>
  )
}

04useTape hook

Headless API for custom recording surfaces.

MyToolbar.tsx

import { useTape } from 'usetapeui'

function MyToolbar() {
  const tape = useTape({ vision: true, sourceLink: true })

  return (
    <div>
      <button onClick={tape.start} disabled={tape.isRecording}>Record</button>
      <button onClick={tape.stop}  disabled={!tape.isRecording}>Stop</button>
      <pre>{tape.exportAgent()}</pre>
      <button onClick={() => tape.download()}>Save .tape</button>
      <button onClick={() => console.log(tape.verify())}>Verify</button>
    </div>
  )
}

05Vanilla JS

No framework, no build step. Works on any page.

index.html

<!-- ESM -->
<script type="module">
  import { Tape } from 'https://unpkg.com/usetapeui/dist/vanilla.mjs'
  Tape.init({ vision: true, position: 'bottom-right' })
</script>

<!-- Or via global -->
<script src="https://unpkg.com/usetapeui/dist/vanilla.js"></script>
<script>UseTape.Tape.init()</script>

06Vue 3

App.vue

<script setup>
import { Tape } from 'usetapeui/vue'
</script>

<template>
  <Tape :vision="true" @report="onReport" />
</template>

07Svelte

+page.svelte

<script>
  import { onMount, onDestroy } from 'svelte'
  import { mountTape } from 'usetapeui/svelte'

  let tape
  onMount(() => { tape = mountTape({ vision: true }) })
  onDestroy(() => tape?.destroy())
</script>

08Agent export format

Pasted into Cursor rules, CLAUDE.md, Copilot instructions, or any system prompt. The agent reads it and edits the right files.

design_critique.md

<design_critique>
<!-- URL: https://app.example.com | 6 comments | 0m 34s -->
<!-- Design system: Tailwind + 12 CSS variables -->

## Issues to fix (3)

1. **button.cta-primary** ← CTAButton (src/components/CTAButton.tsx:42): padding too aggressive
   intent: CHANGE padding (decrease, large)
   current: padding: 7px 18px (≈ 1.75 / 4.5 on the spacing scale), border-radius: 3px

2. **h3.hero-title** ← HeroSection (src/components/Hero.tsx:88): font weight is way too heavy
   intent: CHANGE font-weight (decrease, large)
   current: font-weight: 800, line-height: 1.35

3. **p.footer-text** ← Footer (src/components/Footer.tsx:14): barely readable, too small and faded
   intent: CHANGE font-size (increase)
   current: font-size: 10px (≈ text-xs), color: rgb(187, 187, 187)

## Keep as-is (2)

1. **div.card-grid** ← CardGrid (src/components/CardGrid.tsx:20): card layout spacing feels right
2. **div.mini-card**: shadow is perfect

## Questions (1)

1. **div.hero-section** ← HeroSection: should this be left-aligned?

</design_critique>

09.tape files

A stable JSON envelope you can save, share, replay, and verify against.

tape-2026-04-26.tape.json

{
  "format": "tape",
  "version": "1",
  "report": { "version": "1", "url": "...", "comments": [...], "markers": [...], ... },
  "meta": { "generator": "usetapeui", "generatorVersion": "1.0.0", "createdAt": 1714123200000 }
}

10Replay

Walk a saved session step by step with the live page highlighted.

replay.ts

import { createReplay, parseTape } from 'usetapeui'

const report = parseTape(savedJson)
const replay = createReplay(report)

replay.play(1500, (step) => console.log(step?.text))
// or step manually:
replay.next(); replay.prev(); replay.goto(3); replay.stop(); replay.destroy()

11Verify

After your agent applies fixes, see exactly what changed.

verify.ts

import { verifyReport, parseTape } from 'usetapeui'

const result = verifyReport(parseTape(savedJson))
// { total, found, changed, unchanged, missing, results: [...] }
// each result has a property-level diff: { before, after }

12MCP server

Built-in MCP server exposes your tape sessions to any MCP-capable agent (Claude Code, Cursor, etc.). Sessions become first-class context the agent can read on demand.

terminal

# Start the MCP server
$ npx usetapeui mcp --dir ./tapes

# Or just list sessions in the directory
$ npx usetapeui list --dir ./tapes
2026-04-26T18:32:11.000Z   6 comments  https://app.example.com
  tape-2026-04-26-18-32.tape.json

~/.claude.json

{
  "mcpServers": {
    "usetapeui": {
      "command": "npx",
      "args": ["usetapeui", "mcp", "--dir", "./tapes"]
    }
  }
}

Tools the server exposes: tape_list_sessions, tape_get_latest_critique, tape_get_critique, tape_get_session, tape_summary.

13Browser extension

A Chrome extension scaffold ships in extension/. Inject TAPE into any site you visit, even ones that don't ship the SDK themselves. Build, copy dist/vanilla.js, load unpacked from chrome://extensions.

14Configuration

Prop	Default	Description
`shortcut`	`'Alt+T'`	Keyboard toggle
`language`	`'en-US'`	Speech recognition language
`vision`	`true`	Capture a screenshot per click
`sourceLink`	`true`	Walk framework fibers for component + source path
`tokens`	`true`	Detect Tailwind / CSS variables at session start
`intent`	`true`	Run intent extraction
`mergeWindow`	`3000`	Max ms between speech and click for pairing
`position`	`'bottom-right'`	Panel corner
`onReport`	—	Callback fired with the final CritiqueReport

15Stability

This is 1.0.0. Schema version on CritiqueReport and TapeFile is '1'. Future breaking changes will bump it and ship a migrator.

MIT licensed. Built by Dragoon0x. Voice transcription uses the Web Speech API which works in Chrome, Edge, and Safari (partial in Firefox). Vision uses html-to-image. Software provided as-is, no warranties.

Talk. Click.The agent edits the right files.

01Live demo

Welcome back, friend.

02What's new in v1.0

01Vision capture

02Source linking

03Design tokens

04Intent extraction

05Reference resolution

06Editor + replay + verify

03React

04useTape hook

05Vanilla JS

06Vue 3

07Svelte

08Agent export format

09.tape files

10Replay

11Verify

12MCP server

13Browser extension

14Configuration

15Stability

Talk. Click.
The agent edits the right files.