Quickstart

This sets ontrackd up on your dev server, where you are the first reviewer. Once it works, share a preview so people who are not on your machine can comment too. A site with no build uses the script tag instead.

Ask your agent

Paste this into Claude Code, Cursor or any coding agent working in your project:

It detects your framework and package manager, installs the package, adds it to your config and connects your agent over MCP. First it asks you who will comment: only you, on your dev server, which needs no account; or others too, on shared previews, which uses your ontrackd account. When it is done, it lists what it changed and what to do next.

Or by hand

1. Install the package

   Add @ontrackd/feedback to your app as a dev dependency. It is private to your npm organisation: install it with an account that has access. The command for your package manager is below.

2. Add it to your build

   Add the plugin to your framework’s config: one line, or one wrapper around it. Production builds carry nothing of ours; previews are opted in separately, in Share a preview. The config for your framework is below.

3. Comment on your dev server

   Start it as usual. A small bar appears at the bottom of the page: press the comment button, click any element, and write what should change.

   ⌥ ⇧ F (Alt Shift F on Windows and Linux) shows or hides the bar, and you can drag it anywhere. The first time, it asks for a name, so comments say who wrote them.

4. Hand it to your agent

   Run this once in the app, and give your agent the line it prints:

   npmpnpmyarnbun

   $ npx feedback-mcp init

   Then ask it to fix the open feedback. It reads the comments from your dev server itself, each with the file and lines to change, makes the edits, and resolves each comment. Connect your agent has the details, and how to work without one.

sora-ceramics

$

added @ontrackd/feedback

vite.config.ts

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

+import { feedback } from '@ontrackd/feedback/vite';

export default defineConfig({

plugins: [react()],

+ plugins: [feedback(), react()],

});

localhost:5173

Free shipping on orders over €60

SORA

ShopCollectionsJournal

2

Spring collection

Handmade ceramics for slow mornings

Wheel-thrown in our Lisbon studio, in batches of forty.

Shop the collection

New · Moss mug €38

Agentsora-ceramicsfeedback

Install

$ npm i -D @ontrackd/feedback

$ pnpm add -D @ontrackd/feedback

$ yarn add -D @ontrackd/feedback

$ bun add -D @ontrackd/feedback

Add it to your build

import { feedback } from '@ontrackd/feedback/vite';

export default defineConfig({
  plugins: [feedback(), react()], // feedback() first
});

import { withFeedback } from '@ontrackd/feedback/next';

export default withFeedback({ /* your config */ });

import { Feedback } from '@ontrackd/feedback/next/overlay';

<body>
  {children}
  <Feedback /> {/* renders nothing in production */}
</body>

import feedback from '@ontrackd/feedback/astro';

export default defineConfig({
  integrations: [feedback()],
});

import { feedback } from '@ontrackd/feedback/vite';

export default defineNuxtConfig({
  vite: { plugins: [feedback()] },
});

import { feedback } from '@ontrackd/feedback/vite';

export default defineConfig({
  plugins: [feedback(), sveltekit()], // feedback() first
});

Vue, Svelte, React Router, TanStack Start, Preact, Solid, webpack, Rspack and Rsbuild work too. The Guide in the dashboard, and each project’s Setup tab, show their config.

No build: use the script tag

For a site you do not build yourself, like a theme or a CMS, one script tag adds the widget. There is no package to install and no config.

1. Create a project

   In the dashboard’s Projects, create one for the site. Its Setup tab has these steps with your project filled in.

2. Paste the script

   Before </head>, on every page: in a theme, a layout, or your CMS’s custom code setting. Replace prj_your_project with your project’s id, or copy the tag from the Setup tab.

   <script type="module" async src="https://api.ontrackd.com/overlay/v1/browser.js?p=prj_your_project"></script>

   Visitors see nothing: the widget stays asleep until a reviewer opens the site through their review link. With no build behind the page, each comment describes its element, and your agent finds the element in your code by that description.

3. Allow the site's address

   In the project’s Settings → Allowed sites, add the exact origin, like https://www.example.com. The widget’s comments are refused anywhere else.

4. Invite reviewers

   In the project’s People tab, create a Review link: whoever opens it can comment under the name you give, without an account. See Review links.

Next