From install to first comment.

Connect your project

1. Create your project. Create an account and choose a plan. Add a project in your workspace, then copy its API key.
2. Allow your hostnames. Add your website hostname in project settings. Add localhost if you develop locally.
3. Install the SDK. Run the command below, then add the component or adapter for your framework.
4. Leave your first comment. Open your website and press Ctrl/Cmd + Shift + K on production, staging or preview hosts. Sign in with a team member’s email and one-time code, then comment on an element.

npm install @commentkit/[email protected] react react-dom

Screenshot capture is optional. To enable it, also run npm install html2canvas in your app, or configure a custom screenshotProvider. See screenshot setup.

Choose your framework

Replace your-project-api-key with the key from your project. Mount CommentKit once in your app.

All adapters use the same isolated React comment UI. Keep react and react-dom installed, including in apps using another framework. They are optional peers for headless consumers, so install matching React and ReactDOM versions (18 or later) explicitly when using the UI.

import { CommentKit } from '@commentkit/comment-kit/react';

export default function App() {
  return (
    <CommentKit apiKey="your-project-api-key">
      <YourApp />
    </CommentKit>
  );
}

Mount CommentKit once in your app. Its controls live in a Shadow DOM so your page styles stay separate.

Pick up the same feedback on localhost

Use the same project key on your deployed site and local app. Allow each hostname in project settings and sign in with an account that belongs to the project’s team.

Open the same path and query string locally. Element comments use selectors and page context to find their place, so keep the relevant elements present as you work.

The developer export tools appear on localhost and loopback hosts. Select the comments you want, copy their context, and paste it into your coding agent.

Give your agent the context

Exports can include comment text, selectors and XPath. Install the optional source resolver to add file locations and component details when your framework and development build expose that information. Source file and line information is not available on every framework or production build; selectors remain available as a fallback.

npm install element-source

Your agent still needs access to your code. Review its changes and verify the page before resolving the comment.

Add screenshots when you need them

To capture screenshots, install html2canvas or provide a custom screenshotProvider. Commenting does not require a screenshot provider.

npm install html2canvas

Choose what gets captured

Password inputs are excluded from the built-in capture. Mark other sensitive elements with data-commentkit-redact to exclude them too. A custom screenshot provider must apply its own redaction rules.

Keep feedback tied to its deployment

Set branch to the branch your app was built from. Use main on production and your feature branch on a preview. On localhost, use the same project key and select the branch you want to review from the comments panel.

new CommentKit({
  apiKey: 'your-project-api-key',
  branch: 'main',
});

The branch menu filters what you see. New feedback keeps the branch configured on the host, even when you are viewing another branch or all branches. The Page tab matches the current path and query string; All includes other pages in the project.

Search and filters cover loaded comments. Use Load more comments to include older threads. If a paid plan expires, team members can still view and export feedback; adding or changing it requires an active plan.

Release notes

0.7.4 — Screenshot capture on production pages

• Captures SVG color transitions without changing the original page's styles or animations.
• Captures a selected region on long pages without first rendering the entire page.
• Preserves the current viewport and scroll position, host redaction rules, and custom screenshot providers.

0.7.3 — Checklist permissions and thread reading

• Enables saved checklist changes only for the comment author or a comment manager with write access.
• Prevents overlapping checklist saves, restores the saved value after a failed request, and explains when to retry.
• Uses a clear permission message when the server refuses an action.
• Opens a thread without replies at its original feedback and keeps your reading position when the first reply arrives.

0.7.2 — Host privacy and connection hardening

• Applies host redaction markers to element grabs and agent exports, including nested private content.
• Omits host cookies and referrers from API requests and rejects unexpected redirects.
• Rejects executable page links and external SVG paint resources in feedback.
• Handles realtime service limits without false presence or repeated automatic reconnects.

MCP 0.1.0 — Optional agent access

The separate comment-kit-mcp package runs locally over stdio. Authenticated read-only tools retrieve focused feedback and thread context; they do not change comments or execute instructions in feedback.

0.7.1 — Realtime and access reliability

• Restores authenticated realtime updates between the deployed site and localhost.
• Keeps new feedback on its configured branch and matches query-specific pages.
• Preserves your reading position when replies arrive and adds reply deletion confirmation.
• Shows read-only workspaces clearly and preserves viewing and export.
• Includes richer thread, attachment, and deployment context in agent exports.

0.7.0 — Shared UI and complete thread workflows

Adds persistent reply quotes, attachments, reactions, assignees and checklists, with shared styles across all framework adapters. The UI and tools load when needed, and the package includes a separate headless entry and private browser-local demo.