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
- In your ClickNote dashboard, open Settings, then AI agents. Owners and admins see this page.
- Under Keys, give the key a name that says where it will live, such as “Claude Code on my laptop”, and press Create key.
- 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.
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.
claude mcp listSharing 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.
{
"mcpServers": {
"clicknote": {
"type": "http",
"url": "https://app.clicknote.io/mcp",
"headers": {
"Authorization": "Bearer ${CLICKNOTE_KEY}"
}
}
}
}The five tools
| Tool | Takes | Returns |
|---|---|---|
list_projects | Nothing. 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_comments | project: 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_comment | id: 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_status | id, 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_note | id, 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.
typeis one ofcopy,design,bug,questionorother. Your clients see “Wording” forcopyand “Something’s broken” forbug.kindiselementfor a note on one element, orpagefor 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_commentsgives 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
List the open notes on the Halden Ceramics project and fix the copy ones.- Claude calls
list_projectsto find the project, thenlist_commentswith statusopenand typecopy. - 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. - It finds that text in your repository and edits it.
- It calls
update_statusto set each note todone, with an internal note saying what it changed.
Find where something lives, and stop there
Read note 3 on Halden Ceramics and tell me which file that heading comes from. Do not change anything yet.- Claude lists the project’s notes to find the id of note 3, then calls
get_comment. - 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.
- 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
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.- Claude calls
list_commentswith typebug, thenget_commenton each. The device, browser and window size are in the note, which is usually what a bug turns on. - It calls
update_statusto set each toin_progress. Your client sees that status on their side, and from then on can no longer edit the note. - It calls
add_internal_notewith 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 withclaude mcp remove clicknoteand add it again. - “Unknown project”.
list_commentswants 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