AI-NATIVE CHROME EXTENSION

Click the bug.
Ship the fix.

Twiq turns visual clicks into deep, structured Markdown context — DOM, React Fiber, console errors, exact source files. Paste once into Cursor, Claude Code, or Copilot. AI fixes it right the first time.

Add to Chrome — Free Try the live demo
2,400+ devs
4.9 / 5
3
2
staging.acme-app.com/dashboard
Twiq
DASHBOARD
Welcome back, Alex
REVENUE
$24.5k
ACTIVE
1,204
2
CHURN
2.4%
Recent activity
New user signed up · 2m ago
Payment received · 8m ago
1
TWIQ · MARKER 2
selector: div.stat-card.active
component: Dashboard > StatCard
source: Dashboard.tsx:84:12
|
500 error auto-captured
console.error captured
WORKS WITH YOUR AI CODING AGENT
Cursor
Claude Code
Copilot
Windsurf
Aider
Continue
THE PROBLEM

AI agents can't see
what you're pointing at.

BEFORE
The old way
"There's a button on the left, kind of near the top..."
Screenshots that AI can't map to actual code
Manual Ctrl+Shift+F marathons through 800 files
"I think the error is in the Hero component?"
Three rounds of "no, the OTHER button" with your AI
WITH TWIQ
The Twiq way
Click the element. Get exact selector + bounding box.
Component name + source file + line number, auto-extracted
Hidden console errors attached automatically
Viewport tagged — mobile, tablet, or desktop
One paste. AI nails the fix on the first try.
THE WORKFLOW

Six steps. Six seconds.

From broken UI to AI-ready Markdown context, faster than you can describe the bug.

STEP 01
1
Activate
Press Alt+S to enter Inspect Mode.
STEP 02
2
Target
Hover any element. Blue bounding box highlights the target.
STEP 03
3
Annotate
Click. Type your instruction. "Make this button rounded."
STEP 04
4
Drop Marker
Twiq pins a numbered marker on the element. Repeat as needed.
STEP 05
5
Copy Context
Alt+C compiles structured Markdown.
STEP 06
6
Execute
Paste into Cursor or Claude. AI reads. Writes the fix. Done.
UNDER THE HOOD

Built like a forensics lab.

Every click pulls deep, structured context — not just a screenshot.

Zero-setup & agent-ready

No npm install. No local MCP servers. No codebase modifications. Runs entirely in the browser.

✕ npm install twiq
✕ MCP server config
✓ Just install & click

Deep DOM forensics

Extracts outerHTML, bounding box coordinates, computed styles, and exact selector paths on every click.

// captured on click
x: 540, y: 432
width: 180, height: 48

React Fiber tracing

Hooks into Chrome Debugger Protocol to reverse-engineer minified React. Extracts real component names and source locations.

component: Hero > CTAButton
source: Hero.tsx:42:15

Live error sniffing

Silently buffers 60 seconds of console.error logs and unhandled Promise rejections. Auto-attaches to your report.

500 Error
→ auto-attached

Responsive context

Auto-detects viewport (Mobile / Tablet / Desktop) so your AI writes accurate Tailwind md: and sm: media queries.

mobile
tablet
desktop

Customizable UI

Dark-mode glassmorphic interface. Four detail levels: Compact, Standard, Detailed, Forensic. Custom marker colors.

Compact
Standard
Detailed
Forensic
LIVE DEMO

Try it. Right here.

Hover over elements below. Click to drop a marker. See what Twiq captures.

localhost:3000/pricing
INSPECT ON
PRICING

Simple, transparent pricing

No hidden fees. Cancel anytime.

STARTER
$0
For hobby projects
POPULAR
PRO
$29
For growing teams
ENTERPRISE
Custom
For large orgs
Can I switch plans later?
Yes, upgrade or downgrade anytime.
● INSPECT MODE Markers: 0
Click any element above to drop a marker · Press Alt+C to "copy"
USE CASES

Where Twiq earns its keep.

1
DESIGN HANDOFF

Rapid UI/UX iteration

Designers and PMs click around staging, leave notes, and ship structured Markdown to devs. No more Figma comments lost in translation.

PM clicks "Make this CTA bigger" Dev gets exact selector
2
DEBUGGING

Debug broken API buttons

Click a "Submit" button that's silently failing. Twiq auto-attaches the hidden 500 network error from the console to your report.

POST /api/submit → 500 Internal Server Error ← auto-attached
3
RESPONSIVE

Fix mobile responsiveness

Open mobile view, click a misaligned card, tell AI to fix it. Twiq tags viewport as "Mobile" so AI edits the right Tailwind md: or sm: classes.

viewport: mobile AI edits sm:flex-row
4
LEGACY NAVIGATION

Legacy codebase navigation

Working on a massive React codebase? Click any element and Twiq tells you the exact .tsx file and line it lives in. No more Ctrl+Shift+F marathons.

Ctrl+Shift+F for 20 min Hero.tsx:42:15
KEYBOARD

Fingers on the keys. All day.

No mouse acrobatics. No context menus. Just shortcuts.

Toggle Inspect Mode
Enter or exit Twiq's inspector
AltS
Copy Markdown
Compile all markers to clipboard
AltC
Clear Markers
Wipe all current markers & data
AltX
Hide / Show Markers
Toggle visual markers on screen
AltH
Close Modal
Exit modals & inspect mode
Esc
Combo Power
Alt+S → click → Alt+C → paste
THE OUTPUT

This is what your AI sees.

Structured Markdown with everything Cursor, Claude Code, or Copilot needs to fix it on the first try.

YOU TYPE
"Make this button rounded and blue"
TWIQ CAPTURES
DOM snapshot (outerHTML)
CSS bounding box & computed styles
React component: Hero > CTAButton
Source: Hero.tsx:42:15
Viewport: Desktop 1920×1080
Console errors: 1 captured
twiq-context.md
# Twiq Context Report
# Generated 2025-01-15 14:32:08
 
## Marker 1: CTAButton
- Instruction: "Make this button rounded and blue"
- Component: `Hero > CTAButton`
- Source: `Hero.tsx:42:15`
- Viewport: Desktop (1920×1080)
- Selector: `body > main > div.hero > button.cta`
 
### Bounding Box
- x: 540, y: 432
- width: 180, height: 48
 
### DOM Snapshot
<button class="cta px-4 py-2 bg-black">
  Get Started
</button>
 
### Computed Styles
- background-color: rgb(0, 0, 0)
- border-radius: 0px
- padding: 8px 16px
 
### Console Errors (Last 60s)
// 14:31:52 — auto-attached
- "Failed to load resource: 500
  (Internal Server Error) — POST /api/cta/impression"
2,400+
DEVELOPERS
180k+
MARKERS DROPPED
94%
FIRST-TRY FIX RATE
0
NPM INSTALLS NEEDED
1
2
3
4
FREE FOREVER · NO ACCOUNT NEEDED

Stop typing
bug descriptions.

Install Twiq. Point at what's broken. Let your AI agent handle the rest.

Add to Chrome — Free Rate on Web Store
No account required Works offline Open source Chrome & Edge