Point at it. Your agent makes it better.
whichbutton is an agentic tool for improving UI. Circle what feels off on your site and type what you'd rather see. Your coding agent gets your note, the page and view it was left on, and where your mark sits. Then it changes the code and checks off the note.
$5/month or $100 once. Works on localhost.
Build something people remember.
You
Make this larger
- › whichbutton.get_feedback1 open
- › Element: a.btn "Get Started"
- › Edit src/components/Hero.tsx
- - className="px-4 py-2 text-xs"
- + className="px-6 py-3 text-sm"
- whichbutton.resolve_feedback #1
Works with any agent
- Claude Codeclaude mcp add
- Cursor~/.cursor/mcp.json
- Codex~/.codex/config.toml
- Any other agentMCP or Copy for agent
Features
Everything your agent needs to get the UI right
Agents are good at changing code. They just can't see which part of the screen is bugging you. whichbutton shows them.
Draw on the real page
Pen, box, circle, arrow, and text, drawn on your running site. Sketchy hand-drawn strokes you can move, resize, and edit any time.
Desktop, tablet, and mobile
Switch widths in one click. Each view keeps its own notes, and your agent is told which view every note came from.
A remote MCP server
Your agent connects with an API key and pulls open notes with list_projects and get_feedback. When it's done, it calls resolve_feedback.
Annotated screenshots
Notes on pages our servers can reach come with a screenshot at the viewport you used, cropped around your marks, with a #N tag on the exact spot. Localhost notes go to your agent as text.
The element, not a guess
On public pages, notes carry the tag, classes, text, and a selector for whatever sits under your mark. Every note has the page path, view, and scroll position.
Localhost or production
Point it at localhost:3000 with hot reload, a preview deploy, or your live site. Design images work too. Our servers can't reach your machine, so local notes reach your agent without a screenshot.
How it works
From a circle on the screen to a code change
Connect once. After that you only do the first two.
- 01
Open your site in whichbutton
Paste localhost:3000, a preview deploy, or production. Flip between desktop, tablet, and mobile widths to catch the layout that only looks wrong on a phone.
- 02
Mark what could be better
Circle it, draw an arrow, or box a whole section. Then type what you want in plain words, like "more room above the cards".
- 03
Connect your agent once
Add the whichbutton MCP server to Claude Code, Cursor, or Codex with an API key. The settings page gives you the exact command.
- 04
Let the agent improve it
Tell it to work through your notes. It pulls each one with an annotated screenshot, changes the code, and checks it off.
For agents
What your agent actually receives
The agent calls get_feedback and gets each note with the page, the view it was left in, the element under your mark, and an annotated screenshot. It looks at the picture instead of guessing what "that button" means. On localhost it gets the note and mark position as text, since our servers can't reach your machine.
01 · Your mark
Move this up, it's crowding the cards
02 · get_feedback
# acme
site: https://staging.acme.studio
2 open item(s).
#2 · /
"Move this up, it's crowding the cards"
element: a.btn.btn-primary "Get Started"
mark: ellipse
[annotated screenshot]03 · Agent
Agent chat
You
fix the whichbutton feedback
Agent
Moved the hero buttons up and gave the cards more room below them.
Hero.tsx · mt-6 → mt-3
resolve_feedback #2
No pasting. If your agent doesn't speak MCP, Copy for agent puts the same note and a screenshot on your clipboard.
Setup
Connect once, in under a minute
Create an API key in whichbutton, add the MCP server to your agent, then say "fix the whichbutton feedback". The settings page has the exact command for Claude Code, Cursor, and Codex.
- list_projects
- get_feedback
- resolve_feedback
- reopen_feedback
claude mcp add --transport http whichbutton https://app.whichbutton.xyz/api/mcp \
--header "Authorization: Bearer <your-api-key>"{
"mcpServers": {
"whichbutton": {
"url": "https://app.whichbutton.xyz/api/mcp",
"headers": {
"Authorization": "Bearer <your-api-key>"
}
}
}
}Use cases
The small UI fixes that eat your afternoon
The ones that take five seconds to see and five paragraphs to explain.
More room above the cards
Box the cramped section. The agent finds the margin that's doing it.
Nav wraps onto two lines
Switch to mobile and circle the header. The note is tagged as a mobile note.
This should be the main button
Arrow at the CTA. The agent swaps the variant instead of guessing which button.
Shorten this to one line
Text marks sit right on the paragraph, so the agent edits the right string.
Pricing
Two ways to pay. Same product.
No seats, no usage meters, no feature tiers.
Monthly
Cancel any time.
$5/ month
- Unlimited projects
- Unlimited marks and notes
- Desktop, tablet, and mobile views
- Remote MCP server for your agent
- Annotated screenshots for reachable pages
- Works on localhost and live URLs
- Design image projects
- Product updates
Lifetime
No recurring charges.
$100once
- Unlimited projects
- Unlimited marks and notes
- Desktop, tablet, and mobile views
- Remote MCP server for your agent
- Annotated screenshots for reachable pages
- Works on localhost and live URLs
- Design image projects
- Product updates
Same product on both plans, with no cap on projects or marks. Pay monthly, or pay once and keep it. Prices in USD; taxes may apply at checkout. Full refund within 7 days of purchase, see the refund policy.
What is whichbutton?
A markup layer for your running site that your AI coding agent can read. Paste a URL (localhost works), circle what could be better, and type a note. Your agent connects to whichbutton over MCP, pulls the open notes with annotated screenshots, changes the code, and checks each one off.
Why not just describe the change to the agent?
Because "the button under the hero is too close to the cards" is a guess for the agent. It has to work out which button, which page, which breakpoint. A circle on a screenshot, plus the page and viewport it was drawn on, removes most of that guessing.
Which agents does it work with?
Anything that speaks MCP over HTTP. The settings page has setup for Claude Code, Cursor, and Codex. You create an API key, add the server, then tell the agent "fix the whichbutton feedback". For agents without MCP, Copy for agent puts the note and a screenshot on your clipboard to paste in.
What does the agent actually get?
For each open item: your comment, the page, the view, and where the mark sits. On public pages it also gets the element under your mark (tag, classes, text, selector) and a screenshot with the mark drawn on it. After it fixes something, the agent calls resolve_feedback with a note on what it changed, and you see that note on the item in whichbutton. If a note is unclear, the agent can ask you a question there instead of guessing.
Does it work on localhost?
You can mark up local URLs. They load directly in the review, so your dev server with hot reload works the way it normally does. Our servers can't reach your machine, so your agent gets local notes as text: your comment, the page, the view, and where the mark sits, without a screenshot or element details.
Stop describing the button. Point at it.
Set up a project in a minute, connect your agent, and let it work through your notes.