# ui-ticket-mcp

Click an element in the browser, leave a comment, and your coding agent picks it up over MCP and edits the code. Handy when showing a layout beats describing it.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 9
- Author: 0ics-srls
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/0ics-srls/ui-ticket-mcp_public
- Updated: 2026-09-28
- HTML: https://affpapa.org/en/nevibecode/mcp/ui-ticket-mcp

## What it does

One Python process serves both sides: MCP over stdio for the agent and a REST API over HTTP for the browser panel. Comments live in a SQLite file at `.reviews/reviews.db` inside your project. The agent gets 10 tools for listing, resolving and managing those comments, so it can trace a note back to the source file.

On the frontend you install the `ui-ticket-panel` web component. Drop `<review-panel api-url="http://localhost:3200/api"></review-panel>` into your root template and call `defineReviewPanel()` in the app entry file. It works in Angular, React, Vue, Svelte or plain HTML; SSR frameworks need a client-side dynamic import. No bundler? Load the bundle from unpkg instead.

Annotations carry real context: Alt+A turns on annotation mode, and a click on a button or block attaches its CSS selector, bounding box, computed styles, nearby text and ARIA roles. `PROJECT_ROOT` is required in the MCP config — without it the server has no idea where your sources are or where to put the database. The port defaults to 3200; if it is taken, set `REVIEW_PORT` and use the same address in the `api-url` attribute. The landing page at `https://uiticket.0ics.ai/` is not an API endpoint, so pointing the panel there will not work.

## Requirements
- Needs: Python and uv (commands run via uvx)
- Environment variables: `PROJECT_ROOT`, `REVIEW_PORT` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> --transport stdio ui-ticket-mcp -- uvx ui-ticket-mcp
```
Replace <…> with your own values. uvx runs the command named after the package; if the README names another one, use uvx --from ui-ticket-mcp <command>

### Codex

**Platform CLI**
```bash
codex mcp add ui-ticket-mcp --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> -- uvx ui-ticket-mcp
```
Replace <…> with your own values. uvx runs the command named after the package; if the README names another one, use uvx --from ui-ticket-mcp <command>

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "ui-ticket-mcp": {
            "command": "uvx",
            "args": [
                "ui-ticket-mcp"
            ],
            "env": {
                "PROJECT_ROOT": "<PROJECT_ROOT>",
                "REVIEW_PORT": "<REVIEW_PORT>"
            }
        }
    }
}
```
Replace <…> with your own values. uvx runs the command named after the package; if the README names another one, use uvx --from ui-ticket-mcp <command>

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "ui-ticket-mcp": {
            "type": "stdio",
            "command": "uvx",
            "args": [
                "ui-ticket-mcp"
            ],
            "env": {
                "PROJECT_ROOT": "<PROJECT_ROOT>",
                "REVIEW_PORT": "<REVIEW_PORT>"
            }
        }
    }
}
```
Replace <…> with your own values. uvx runs the command named after the package; if the README names another one, use uvx --from ui-ticket-mcp <command>

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e PROJECT_ROOT=<PROJECT_ROOT> -e REVIEW_PORT=<REVIEW_PORT> ui-ticket-mcp uvx ui-ticket-mcp
```
Replace <…> with your own values. uvx runs the command named after the package; if the README names another one, use uvx --from ui-ticket-mcp <command>

## When to use it
- point the agent at the exact broken element instead of describing it in words
- keep UI feedback in one searchable, filterable list
- hand the agent a CSS selector and computed styles for the problem block
- tag notes as bugs, suggestions or questions
- resolve and reopen comments without losing the reply thread

## Example prompts
- Run `get_review_summary` and tell me which pages have the most open reviews
- Take the spacing review on the product card and fix the styles in the source
- List the open reviews for the `dashboard` page

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [Serena MCP: the IDE for your agent](https://affpapa.org/en/nevibecode/mcp/serena-mcp-the-ide-for-your-agent.md) — MCP server · ★ 30677
- [Repomix](https://affpapa.org/en/nevibecode/mcp/repomix.md) — MCP server · ★ 29027
- [Repowise](https://affpapa.org/en/nevibecode/mcp/repowise.md) — MCP server · ★ 7891
- [sem](https://affpapa.org/en/nevibecode/mcp/sem.md) — MCP server · ★ 3422

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md