AI coding agent UI feedback, from a browser click to a commit

Why your AI agent needs more than a screenshot

Your agent is good at editing code. It is bad at guessing which button "the one at the top" means. Most UI feedback still arrives as a screenshot and a sentence, and someone has to turn it into a prompt: find the page, find the element, find the file, describe the styles.

PinSay removes that step. The person who sees the problem points at it, and the agent receives what it needs to act.

The loop, step by step

1. Click the element in the running app

Your client, QA, PM or a developer opens the app (local, staging or production) and clicks the element they mean: a button, a heading, a whole section. They type the change in their own words and language. Arabic and English both work, and the agent gets a translation while the original stays with the comment.

There are three ways to put the comment button in your app:

• npx @pinsay/cli@latest init in your repo detects your stack, adds the widget and installs the agent skills.
• One script tag before the closing body tag:

  <script src="https://app.pinsay.dev/widget.js" defer></script>
  <pinsay-feedback project="YOUR_PROJECT_KEY" server="https://app.pinsay.dev"></pinsay-feedback>

  Copy
• The Chrome extension, to comment on any site with no code change.

2. PinSay captures the element context

Each comment carries what the agent needs to find the right place:

• the element's CSS selector;
• the CSS rules that apply to it, including the winning rule;
• the route and the viewport;
• a sanitized DOM snapshot (page text included unless an admin turns it off for the project);
• for React and Vue on Vite, with source mapping on, the source file and line, for example CheckoutSummary.tsx:42.

Every comment also says which environment it was made in, so a staging comment never gets confused with a production one.

3. Your agent pulls the comments through the CLI or MCP

Your agent reads the queue in one of two ways:

• CLI. npx @pinsay/cli apply builds the apply prompt for the pending comments. With --mark, it commits and marks them applied. Any agent that can run a terminal command can use it.
• MCP server. npx @pinsay/cli mcp runs a local MCP server with 10 typed tools. MCP-capable tools such as Claude Code and Cursor connect to it with one config entry. See the MCP server page.

Agent skills (curl -fsSL https://app.pinsay.dev/install.sh | sh) teach your agent how to read and apply comments, so you don't write the prompt yourself.

4. Your agent edits and commits, locally

Your own agent makes the change in your repo and commits it. PinSay never runs AI itself, and it never pushes or deploys. The comment is marked applied with its commit.

5. You review and ship

You read the diff, push and deploy the way you always do. Nothing reaches production without you.

6. The comment shows Live after deploy

After your deploy, npx @pinsay/cli status --deployed (from your terminal or your CI) marks the applied comments that are in that build as Live. The person who asked can see their change is out.

Comments can also go to Slack, Discord, Microsoft Teams (paid plans), Telegram or a webhook, and to GitHub Issues with a two-way sync: close or reopen the issue and the comment's status follows, and a comment on the issue comes back as a reply.

Apply browser comments with Claude Code, Cursor or any agent

PinSay doesn't replace your AI editor. It feeds it. Your editor alone only hears from the developer, who describes the element in words. With PinSay, anyone on the team can ask, the agent gets the exact element, styles and page, and every request sits in one queue, tracked to live.

It works with any agent that can run a terminal command or connect to an MCP server: Claude Code, Codex, Cursor and others.

Not only bug fixes

A pin gives your agent the exact element, so you can ask for anything about it: a fix, copy, an accessibility check, or a test. "Write a Playwright test for this form: empty email shows an error" is a valid comment.

When bug capture is turned on for a project, a comment marked as a bug can also carry the network calls, console errors, uncaught errors, the user's steps and a screenshot per step. Request and response bodies are a separate setting, off by default, with secrets redacted.

What stays in your hands

• Your repo. The agent works locally; PinSay never touches your code itself.
• Your review. The agent commits; you decide what ships.
• Your data. Snapshots are sanitized, page text capture can be turned off per project, and private comments stay private.