CommentKit / Tools

Build plugins

Source locations, branch and commit for Vite, Next.js, webpack and Astro.

What they add

@commentkit/build marks every element with the file, line and column it comes from, while you run the dev server or a preview build, never in production. Comments then carry the exact source location, so you and your agent open the right file. It also records the branch and commit, so feedback is filed per branch without passing anything to init().

Install

npm install -D @commentkit/build

Vite

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import commentkit from "@commentkit/build/vite";

export default defineConfig({
  plugins: [commentkit(), react()],
});

Works with React, Preact, Solid, Vue, Svelte and SvelteKit, and with Nuxt through its vite.plugins option.

Next.js

next.config.mjs

import { withCommentKit } from "@commentkit/build/next";

export default withCommentKit({ reactStrictMode: true });

Works with Turbopack and webpack in next dev. Add the widget with <CommentKit project=… /> from @commentkit/comment-kit/react in your root layout.

webpack 5

webpack.config.js

const { CommentKitWebpackPlugin } = require("@commentkit/build/webpack");

module.exports = {
  // …
  plugins: [new CommentKitWebpackPlugin()],
};

Source tagging runs when mode is "development", before Babel, SWC, esbuild or ts-loader. The branch and commit are available as process.env.COMMENTKIT_BRANCH and process.env.COMMENTKIT_COMMIT.

Astro

astro.config.mjs

import { defineConfig } from "astro/config";
import commentkit from "@commentkit/build/astro";

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

Run npx @commentkit/cli init to make any of these changes for you.