Free Chrome Extension

POKE! the UI.
Tell AI what to fix.

Inspect any component, leave a QA note, and send the full context to your AI coding agent. No setup, no config.

localhost:3000
ProfileCard
★ ProfileCardsrc/components/ProfileCard.tsx:24
flex items-center gap-4 rounded-xl p-6
Make the padding 24px and border radius bigger
Notes(1)
POKEIT

How it works

Three steps. Zero config.

Button
01

Inspect

Press ⌥P or Option-click any element. POKEIT reads the component tree, computed styles, and source location.

★ Button src/ui/Button.tsx:12
flex items-center gap-2 px-4 py-2
Make padding 24px
02

Annotate

Leave a note — 'Make this 16px' or 'Align to grid'. Stack as many notes as you need.

Button
Make padding 24px
Header
Font size 16px
AI Agent
Full context pasted
03

Send to AI

Copy the full component context to clipboard and paste it into your AI coding agent.

Features

Built for real QA workflows

App
Layout
ProfileCard:24
Avatar

Component Tree

Reads React fiber — component names, source file paths, and line numbers. Navigate straight to the code.

displayflex
gap8px
padding16px 24px
border-radius12px

Computed Styles

Shows resolved CSS values and detects padding/margin overlaps between parent and child elements.

POKEIT
Chrome Extension
Active
localhost:3000
vercel.app

Chrome Extension

Works on any React site — production or localhost. No project setup required.

1★ ProfileCardsrc/components/ProfileCard.tsx:24
2 styles:display:flex; gap:8px
3 note:"Make padding 24px"
Copied!

One-Click Copy

Copy the full component context — tree, styles, source location, and your notes — in one click.

Start inspecting in seconds

Add the Chrome extension and Option-click any element. That's the whole setup.

Add to Chrome — Free
No account required Works instantly