ClickNote
ClickNote
Try the live demoStart free trial

The demo needs no sign-up. The trial needs no card.

Open dashboard
Choose a plan
Dashboard
Start free trial

The trial needs no card.

Docs: Claude Code and MCP

Connect Claude Code to your website feedback with MCP

Your clients leave notes on the site. Claude Code reads them from the terminal it is already working in: it lists a project’s notes, opens one with the selector and HTML it points at, makes the change in your repository and marks the note done.

What MCP is

MCP, the Model Context Protocol, is an open standard that lets an AI agent call tools on another system: here, your ClickNote workspace. You add ClickNote to Claude Code once as an MCP server, and from then on Claude can use ClickNote’s tools whenever something you ask needs them.

ClickNote’s MCP endpoint is included on every plan and during the free trial.

1. Create a key

  1. In your ClickNote dashboard, open Settings, then AI agents. Owners and admins see this page.
  2. Under Keys, give the key a name that says where it will live, such as “Claude Code on my laptop”, and press Create key.
  3. Press Copy key straight away. The key is shown once: ClickNote stores only a hash of it and cannot show it again.

Treat the key like a password. The same page lists each key with the date it was last used, and a Revoke button that stops it working immediately. Make one key for each person or machine, so you can revoke one without disturbing the others.

2. Add the server to Claude Code

Run this once in a terminal, with your key in place of <key>. The AI agents page has the same command under Connect your agent, with a button that copies it.

Terminal
claude mcp add --transport http clicknote https://app.clicknote.io/mcp \
  --header "Authorization: Bearer <key>"

clicknote is the name Claude Code will know the server by. To check the connection, list your servers, or type /mcp inside Claude Code.

Terminal
claude mcp list

Sharing the connection with a repository

To give everyone who works in a repository the same connection, add it to the repository’s .mcp.json. Claude Code fills in ${CLICKNOTE_KEY} from each person’s environment, so the key itself stays out of version control.

.mcp.json
{
  "mcpServers": {
    "clicknote": {
      "type": "http",
      "url": "https://app.clicknote.io/mcp",
      "headers": {
        "Authorization": "Bearer ${CLICKNOTE_KEY}"
      }
    }
  }
}

The five tools

ToolTakesReturns
list_projectsNothing. Optionally include_archived.Every project in the workspace: its id, public id, name, the site’s address, whether it is archived, and how many notes are open, in progress and done.
list_commentsproject: its id, public id or exact name. Optional filters: status, page_url, type, kind, include_deleted.A compact list of the project’s notes. For each: id, number, status, type, page, the element (or “whole page”), the section or block it sits in, the first 200 characters of the note, the reviewer’s email, and whether it has a screenshot and an internal note.
get_commentid: the note’s id from list_comments.One note in full, as Markdown: the page, the platform and theme, the section, block or builder container, the DOM path, selector and XPath, the element’s text and HTML, its attributes and styles, the device, the reviewer and their words, the thread of replies, your internal note, and a signed link to the screenshot that works for 24 hours.
update_statusid, and status: open, in_progress or done. Optionally internal_note, which replaces the note’s internal note.The note’s id, number, new status and internal note.
add_internal_noteid, and text.The note’s id and its whole internal note, with the new line added at the end and stamped with the time.
  • The tools say “comment” where the rest of ClickNote says “note”. They are the same thing.
  • type is one of copy, design, bug, question or other. Your clients see “Wording” for copy and “Something’s broken” for bug.
  • kind is element for a note on one element, or page for a note about a whole page.
  • A note has a number within its project (“note 3”) and an id. The tools that act on one note take the id, which list_comments gives alongside the number.

Three things to ask Claude

Ask in plain words and Claude chooses the tools. The steps under each example are the usual shape of what follows: an agent does not take the same route every time. Halden Ceramics is a made-up project.

Fix the wording notes

Ask Claude
List the open notes on the Halden Ceramics project and fix the copy ones.
  1. Claude calls list_projects to find the project, then list_comments with status open and type copy.
  2. For each note it calls get_comment, which gives the page, the selector, the element’s current text and what the client wants it to say.
  3. It finds that text in your repository and edits it.
  4. It calls update_status to set each note to done, with an internal note saying what it changed.

Find where something lives, and stop there

Ask Claude
Read note 3 on Halden Ceramics and tell me which file that heading comes from. Do not change anything yet.
  1. Claude lists the project’s notes to find the id of note 3, then calls get_comment.
  2. The note names the selector, the heading’s text and, where the platform allows, the theme section or builder block. Claude searches the repository with those.
  3. It tells you the file and the line. Nothing in ClickNote has changed.

Each note says its screenshot is optional, so Claude works from the text first and opens the picture only when a note is about how something looks.

Investigate, and leave a trail

Ask Claude
Go through the bug notes on Halden Ceramics. For each one, find the cause, set it to in progress and add an internal note saying what you found. Leave the fixes to me.
  1. Claude calls list_comments with type bug, then get_comment on each. The device, browser and window size are in the note, which is usually what a bug turns on.
  2. It calls update_status to set each to in_progress. Your client sees that status on their side, and from then on can no longer edit the note.
  3. It calls add_internal_note with what it found. Internal notes are for your team: clients never see them.

What the agent cannot do

  • It has no reviewer access. It cannot leave a note on a site, or edit or delete a client’s note.
  • It cannot reply to a client. It reads a note’s thread through get_comment, but replies are written by your team in the dashboard.
  • It changes two things only: a note’s status and its internal note. There are no tools for creating projects, inviting people or changing settings.
  • A key belongs to one workspace. It sees and changes that workspace’s projects and notes and nothing else. Ask it for another workspace’s note and the answer is that there is no such note.
  • It needs a workspace with a plan or a running trial. If a trial has ended with no plan chosen, the endpoint answers that the workspace has no active plan until you choose one.

What Claude does in your repository is between you and Claude Code. ClickNote sees only the tool calls.

Other MCP clients

Nothing here is special to Claude Code. The endpoint works with any MCP client that can send a bearer token over HTTP. It needs two things:

  • The endpoint: https://app.clicknote.io/mcp
  • A header: Authorization: Bearer <key>

If your client asks which transport, it is Streamable HTTP. The general MCP page has the same details in short, and what to do if you are not using an agent at all.

If it does not connect

  • “Unauthorised: a valid API key is required”. The key is mistyped or has been revoked. The header must read Authorization: Bearer, a space, then the key. Remove the server with claude mcp remove clicknote and add it again.
  • “Unknown project”. list_comments wants the project’s exact name or its id. Ask Claude to list your projects first.

New to ClickNote? Try it on a sample site first. No sign-up for the demo, no card for the 14-day trial. See pricing.

Try the live demo

Live demo

Try the live demo

We will set up a demo account for you.