DevMode

Visual bug reporter for AI-driven development. QA taps a broken element, describes the bug, and your LLM fixes it.

Your App + <DevMode />  →  Backend API  →  LLM reads bugs  →  Code fixed

Quick Start

1. Install

npm install @memetrix/devmode

2. Add to your app

import { DevMode } from "@memetrix/devmode";

function App() {
  return (
    <>
      <YourApp />
      <DevMode apiUrl="https://your-worker.workers.dev" />
    </>
  );
}

3. Deploy backend

cd packages/worker
npm install
npx wrangler d1 create devmode-bugs    # create database
# paste database_id into wrangler.toml
npx wrangler d1 execute devmode-bugs --file=src/schema.sql
npx wrangler deploy

4. (Optional) Connect Telegram

Set in wrangler.toml:

[vars]
TELEGRAM_BOT_TOKEN = "your-bot-token"
TELEGRAM_CHAT_ID = "-100your-group-id"
WEBHOOK_SECRET = "random-secret"

Then register the webhook:

curl "https://api.telegram.org/bot{TOKEN}/setWebhook?url=https://your-worker.workers.dev/webhook/{SECRET}"

5. Let your LLM fix bugs

Point Claude Code / Cursor at CLAUDE.md and say:

"Fetch open bugs from DevMode and fix them"

Props

Prop	Type	Default	Description
apiUrl	string	required	Backend worker URL
authCheck	() => boolean	() => true	Who can see DevMode
getUser	() => {name, id}	() => ({name:"user",id:0})	User identification
position	"bottom-right" | "bottom-left"	"bottom-right"	FAB position
locale	"en" | "ru"	"en"	UI language
onCapture	(item) => void	—	Callback on element capture

Features

• Tap any element to capture its CSS selector, component name, computed styles
• Z-cycling: tap the same spot multiple times to cycle through stacked elements
• Component detection: automatically extracts React component names from CSS Modules
• Computed styles: captures color, fontSize, padding, margin, etc.
• Export: copy LLM-ready XML, download .txt, or send to Telegram
• Offline-first: saves to localStorage, syncs to backend on save
• Mobile-optimized: touch-friendly, keyboard-safe bottom popover

Architecture

packages/
  react/     → npm package (@memetrix/devmode)
  worker/    → Cloudflare Worker + D1 database

See CLAUDE.md for LLM integration docs.

License

MIT