v1.0.0 — now on PyPI & npm

You review.
AI resolves.

Click on any element in your browser, write a comment like "fix the spacing here", and let your AI coding agent pick it up via MCP and fix the code automatically.

Get Started Explore Features

agent workflow

# Agent reads pending reviews
mcp get_pending_work()
## user-profile (2 open)
  - #4 [bug] (alice): The header spacing is off
  - #7 [suggestion] (bob): Add hover state to buttons
 
# Agent locates the source file
mcp find_source_file_tool("user-profile")
  src/app/user-profile/user-profile.component.ts
 
# Agent fixes the code, then resolves
mcp resolve_review(4)
  Resolved review #4 on user-profile.

How it works

Three steps. Zero friction.

One Python process runs both the MCP server for your AI agent and the REST API for the browser UI.

Click & Comment

Open your app, press Alt+A, click any element. Write your feedback in the popup. The system captures the element's selector, styles, position, and accessibility info.

→

AI Reads via MCP

Your coding agent (Claude Code, Cursor, Codex) calls get_pending_work() and sees every review with full element context.

→

Code Fixed, Review Resolved

Agent edits the code, calls resolve_review(), and the badge turns green. You see the fix in real time.

Features

Everything you need.
Nothing you don't.

Click-to-Annotate

Press Alt+A and click any element. Smart popup captures rich metadata: CSS selector, computed styles, DOM path, accessibility info, nearby text.

Any Framework

Standard Web Component. Works in Angular, React, Vue, Svelte, or plain HTML. Use npm install ui-ticket-panel with a bundler, or load directly from CDN with a single script tag.

10 MCP Tools

Everything your AI agent needs: review summaries, pending work, annotated reviews with element metadata, file finder, batch resolve, and more.

Tags & Threads

Categorize with tags: bug, suggestion, question, general. Reply to reviews for threaded discussions. Filter and search across all comments.

Smart Badges

Numbered markers appear on annotated elements. Red for open, green for resolved. Stacked reviews show a gradient pill with open/resolved ratio.

SQLite & Git-Friendly

Reviews stored in .reviews/reviews.db inside your project. WAL mode for concurrency. Commit to git to share with your team.

Annotation Context

Your AI agent sees everything

When you annotate an element, the system captures comprehensive metadata. Your AI agent gets the full picture—not just "fix this button", but exactly which button, where it is, what it looks like, and how to find it.

CSS selector · Bounding box · Computed styles · Full DOM path · ARIA roles · Nearby text · Sibling context · Selected text · Page URL

{
  "element": "Button 'Save'",
  "selector": "form.editor > button.primary",
  "boundingBox": { x: 420, y: 680, w: 96, h: 40 },
  "computedStyles": "background: #3b82f6; ...",
  "fullPath": "body > div#app > form > button",
  "accessibility": "role=button, tabindex=0",
  "nearbyText": "Save | [after:] Cancel",
  "url": "http://localhost:4200/editor"
}

Quick Start

Up and running in 2 minutes

Add the MCP config for your agent, drop the Web Component into your app.

Step 1 — .mcp.json

{
  "mcpServers": {
    "ui-ticket-mcp": {
      "command": "uvx",
      "args": ["ui-ticket-mcp"],
      "env": {
        "PROJECT_ROOT": "/path/to/project",
        "REVIEW_PORT": "3200"
      }
    }
  }
}

Step 2 — Your app

// Install
npm install ui-ticket-panel

// Use anywhere
import { defineReviewPanel } from 'ui-ticket-panel';
defineReviewPanel();

// HTML (any framework)
<review-panel
  api-url="http://localhost:3200/api"
></review-panel>

No bundler? Use CDN

<!-- Just two lines. No npm, no bundler. -->
<script type="module"
  src="https://unpkg.com/ui-ticket-panel/dist/bundle.js"
></script>

<review-panel
  api-url="http://localhost:3200/api"
></review-panel>

Let your AI agent set it up

Don't want to configure manually? Just tell your agent: "Read the setup guide and add the review panel to my app." The agent calls get_setup_guide() and knows exactly what to do.

Add it once, in the root

Place <review-panel> in your app's main entry file (e.g. App.vue, App.tsx, index.html). One instance covers your entire app — no need to add it per page or component.

Compatibility

Works everywhere

Standard Web Component. No wrappers, no adapters, no framework-specific builds.

Angular

React

Vue

Svelte

Plain HTML

MCP Protocol

10 tools for your AI agent

Everything an agent needs to understand, locate, fix, and resolve UI review feedback.

get_pending_work()

All open reviews grouped by page — the agent's todo list

get_annotated_reviews()

Reviews with full element metadata: selector, styles, DOM path

find_source_file_tool()

Locate source files by page ID (kebab-case, CamelCase, glob)

resolve_review()

Mark a review as resolved with timestamp and resolver name

batch_resolve()

Resolve all open reviews on a page at once

get_review_summary()

Per-page overview with open / resolved / total counts

get_reviews()

List all reviews with status, tags, element context, replies

add_review()

Create review with tag, metadata, and threading support

reopen_review()

Reopen a previously resolved review

get_setup_guide()

Full setup instructions — useful when agent configures new projects

Architecture

One process. Two protocols.

A single Python process serves both MCP (stdio) for AI agents and REST (HTTP) for the browser UI.

Your IDE

AI Agent

Claude Code, Cursor, Codex
stdio (MCP)

← →

Single process

ui-ticket-mcp

MCP Server (10 tools)
REST API (:3200)
FastAPI + MCP SDK

Your Browser

Reviewer

<review-panel>
HTTP REST

.reviews/reviews.db — SQLite (WAL)

Start reviewing today

Install the MCP server and drop the Web Component into your app. Your AI agent will handle the rest.

Get Started

$ pip install ui-ticket-mcp click to copy

$ npm install ui-ticket-panel click to copy

<> CDN — no bundler needed click to copy

You review.AI resolves.