ui-ticket-mcp server

ui-ticket-mcp

Human-to-AI code review bridge. Review UI prototypes directly in the browser, then let AI agents read your feedback and fix the code automatically.

You click on elements, write review comments like "This button should be blue" or "The spacing is wrong here", and your AI coding agent (Claude Code, Codex, Cursor, etc.) picks them up via MCP and resolves them - with full context about which element you pointed at, its CSS, position, and surrounding DOM.

How it works

journey
    title Using ui-ticket-mcp
    section Review
      Open your app in browser: 5: You
      Click on a broken element: 4: You
      Write what's wrong: 5: You
    section AI resolves
      Agent reads your feedback: 3: AI
      Agent finds the source file: 4: AI
      Agent fixes the code: 5: AI
      Review disappears: 5: You, AI

One Python process handles everything - MCP protocol for the agent (stdio) and REST API for the browser UI (HTTP). Reviews are stored in a SQLite database inside your project.

Quick Start

1. Connect to your AI agent

Add to your project's .mcp.json (Claude Code, Codex, Cursor, etc.):

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

Restart the agent. uvx downloads and runs the package automatically - no manual install needed.

Alternative: pip install ui-ticket-mcp, then use "command": "ui-ticket-mcp" instead of uvx.

When the MCP server starts, it also launches a REST API on http://localhost:3200 (or your custom REVIEW_PORT) for the browser UI.

Important: The API always runs locally (localhost). The website https://uiticket.0ics.ai/ is the landing page only — it is NOT an API endpoint. Always use http://localhost:{PORT}/api as the api-url.

2. Add the browser UI to your app

npm install ui-ticket-panel

In your app's entry file (e.g. main.ts, index.tsx):

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

Then in your root template:

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

That's it. Works in any framework - Angular, React, Vue, Svelte, or plain HTML. It's a standard Web Component. For SSR frameworks (Next.js, Nuxt, SvelteKit) see the Framework Examples section — you need a dynamic import on the client side.

No bundler? Use CDN

<script type="module" src="https://unpkg.com/ui-ticket-panel/dist/bundle.js"></script>
<review-panel api-url="http://localhost:3200/api"></review-panel>

The bundle auto-registers the element. No npm install, no build step needed.

3. Start reviewing

Open your app in the browser. You'll see a floating chat button in the bottom-right corner. Click it to open the review panel, or press Alt+A to enter annotation mode and click directly on elements.

Browser UI Features

Review Panel

The floating panel lets you browse, filter, and manage all reviews:

• Filter tabs - Switch between Open, Resolved, and All reviews
• Search - Full-text search across all review comments
• Tag filter - Filter by category: general, bug, suggestion, question
• Per-review actions - Resolve, Reopen, Delete, Reply, Highlight element
• Threaded replies - Reply to reviews for back-and-forth discussion
• Manual review form - Write reviews without annotation (Ctrl+Enter to submit)
• Badge counter - Floating button shows count of open reviews

Annotation System

The annotation system lets you point at specific elements and attach reviews to them:

Shortened. The full README is on GitHub.