ui-ticket-mcp — Claude Code MCP server: browser UI review
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.
claude mcp add --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> --transport stdio ui-ticket-mcp -- uvx ui-ticket-mcpWhat ui-ticket-mcp 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.
What it helps with
- 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 for the agent
- Run
get_review_summaryand 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
dashboardpage
How to install ui-ticket-mcp
Platform CLI
claude mcp add --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> --transport stdio ui-ticket-mcp -- uvx ui-ticket-mcpReplace <…> 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>
Platform CLI
codex mcp add ui-ticket-mcp --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> -- uvx ui-ticket-mcpReplace <…> 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>
Config file
{
"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>
Config file
{
"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>
Platform CLI
gemini mcp add -e PROJECT_ROOT=<PROJECT_ROOT> -e REVIEW_PORT=<REVIEW_PORT> ui-ticket-mcp uvx ui-ticket-mcpReplace <…> 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>
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about ui-ticket-mcp
How do I install ui-ticket-mcp in Claude Code?
Run claude mcp add ui-ticket-mcp -e PROJECT_ROOT=<PROJECT_ROOT> -- uvx ui-ticket-mcp with your project path, then restart the agent.
What does ui-ticket-mcp do?
It bridges browser UI review and your coding agent. You leave comments on interface elements, and the agent reads them over MCP and edits the code.
What does the server need to run?
PROJECT_ROOT must be set in the MCP config — the server uses it to locate the project and create .reviews/reviews.db. The port comes from REVIEW_PORT and defaults to 3200.
