In this article
Title
TL;DR: Annot's MCP integration lets Claude read client feedback directly from your review session and apply changes to your codebase without you manually translating comments into tasks. Two commands to set up, then Claude handles the rest.
The copy-paste problem
The client leaves a comment: "the hero text feels too small on desktop." You read it, open your editor, open Claude, and type something like: "The hero heading on the homepage desktop view needs to be larger. The current font size is around 48px, can you increase it." Claude makes the change. You move to the next comment and repeat.
It works. But for every comment in a review round, you're doing the same manual translation: read the feedback, understand what element it's on, describe it to Claude, apply the change. For a round with fifteen comments, that's fifteen separate prompts, each one requiring you to bridge the gap between what the client said and what Claude needs to know.
Annot MCP removes that step. When Claude is connected to your Annot account, it can read comments directly, with full context: the URL, the breakpoint, the specific element the client was pointing at, the computed styles at the time of the comment, and the client's actual words. Claude gets everything it needs to make the change without you explaining it.
What Annot MCP actually does
When a client leaves a comment in Annot, the tool captures more than just their words. It records a comment brief containing:
The page URL and title
The breakpoint they were viewing (desktop, tablet, mobile)
The exact position on the page
The CSS selector of the element they pinned the comment on
The current HTML of that element
The parent structure around it
The computed styles at the time of the comment
The client's feedback text
That brief is what Claude reads when you connect Annot via MCP. So instead of Claude trying to find "the hero heading" from a vague description, it has the exact CSS selector, the current font size, the full element context, and the client's words all in one place. The change Claude makes is precise because the input is precise.
What you need
An Annot account on Pro or Agency plan (MCP is not available on the free tier)
Claude Code installed and running
An Annot API key, generated from your account settings
Setting up the Annot MCP server
Open your terminal and run:
Then set your API key as an environment variable:
That's the full setup. Once connected, Claude can read pending feedback from your Annot projects and apply changes using any other MCP servers it has access to, including Webflow, Framer, Vercel, GitHub, and more.
The workflow in practice
Step 1: Run your client review as normal
Nothing changes on the client side. You share the Annot review link, the client leaves comments pinned to the live site, and feedback accumulates in your Annot project the same way it always does.
Step 2: Prepare the comment briefs in Annot
Once the client has finished their review, open your Annot project and prepare the comment briefs for the round. Each brief packages the full technical context for that comment, including the element details, styles, and client feedback, into a structured format Claude can read directly.
Step 3: Ask Claude to check for briefs
Open Claude Code and ask it to check for pending comment briefs from Annot. Claude connects to your account via the MCP server, pulls the briefs, and can begin working through them.
A prompt like this works well to start:
"Check Annot for pending feedback briefs on [project name] and apply the changes."
Claude reads each brief, understands what element needs changing and why, and applies the change using the codebase it has access to. If you also have a Webflow MCP or GitHub MCP connected, Claude can push the changes directly without you touching the editor.
Step 4: Review and resolve
As Claude works through the comments, you can mark briefs as resolved in Annot. The open list clears down as each change is applied, giving you the same tracked resolution view you'd have working through comments manually.
Why the comment brief format matters
Most attempts to connect AI tools to client feedback rely on passing the raw comment text to the model. "The button is too big" is not something Claude can act on without knowing which button, on which page, in which file.
Annot's comment brief solves this by capturing the technical context at the moment the client leaves feedback. The CSS selector tells Claude exactly which element to target. The computed styles tell it the current state. The parent structure gives it enough surrounding context to make the change without breaking adjacent elements. The breakpoint tells it which responsive context the client was looking at.
The result is that Claude is applying changes based on precise, verified element data rather than guessing from a description. On animation-heavy Webflow and Framer sites, where element selectors can be complex and the relationship between CSS and visual output isn't always obvious, that context makes a material difference to the accuracy of the output.
Combining Annot MCP with other MCP servers
The value of the Annot MCP integration scales with the other tools Claude has connected. A few combinations worth knowing:
Annot plus GitHub MCP. Claude reads the comment brief, makes the change in your local codebase, and opens a pull request. The whole revision loop from client comment to code review happens without you opening an editor.
Annot plus Webflow MCP. Claude reads the brief and applies style or content changes directly to your Webflow project via the Webflow API. Works well for copy changes, spacing adjustments, and color updates where the element context is clear.
Annot plus Vercel MCP. After applying changes, Claude can trigger a new deployment. Useful when you want the client to be able to see the updated live site for round two without a manual deploy step.
None of these combinations require any extra configuration in Annot. You connect the MCP servers you want in Claude Code, and Claude decides which ones to use based on what the comment brief is asking it to do.
When it works best
The MCP workflow is well-suited to revision rounds with a clear scope: layout adjustments, typography changes, color updates, copy edits, spacing fixes. Comments that point to a specific element with a specific ask.
It works less well for open-ended feedback like "the overall vibe feels a bit corporate" or comments that involve design decisions requiring judgment rather than execution. Those still need a human in the loop. The workflow is strongest when the client feedback is actionable and the element context is specific, which is exactly what pinned comments in Annot are designed to produce.
Common questions
Do I need to know how to code to use Annot MCP?
You need to be comfortable running terminal commands and working with Claude Code. The setup is two lines in your terminal. Beyond that, Claude handles the actual code changes. It's built for developers and technically-minded designers rather than non-technical users.
Which plan includes MCP access?
MCP is available on Pro ($29/month) and Agency ($59/month) plans. The freelancer tier includes Slack integrations but not MCP.
Can Claude apply changes to any website or just specific platforms?
Claude can apply changes to any codebase it has access to via your connected MCP servers. Webflow, Framer, Vercel, and GitHub are the most common setups. If your site is built in a framework Claude can read and edit directly, it works with that too.
What if a comment brief is ambiguous?
Claude will flag comments where the brief doesn't give it enough confidence to make a specific change and ask for clarification before proceeding. It doesn't guess on destructive actions.
Is the API key stored securely?
The API key is set as a local environment variable on your machine. It doesn't pass through any third-party service.
The short version
The manual step in most AI-assisted development workflows is translating client feedback into something the AI can act on. Annot MCP removes that translation layer. The client comments on the live site, the brief captures the full element context automatically, and Claude reads it directly. Two commands to set up, then the revision loop runs with significantly less friction on your end.
Set up Annot MCP — available on Pro and Agency plans.
Already using Annot for client reviews? See how to run a client website review without a single email for the full workflow this integration fits into.