Quickstart

Put a discussion beside a record your app already authorizes. Free local mode needs no keys. Test publishable keys are free. Live config needs BYO ($9.99) or Hosted ($19.99). Live Hosted writes need Hosted.

1. Install

pnpm add @bootstrapware/comments

Peer dependencies are react and react-dom 18 or newer. Import @bootstrapware/comments/styles.css once next to the widget.

2. Local, no keys

import { Comments, createLocalAdapter } from "@bootstrapware/comments";
import "@bootstrapware/comments/styles.css";

<Comments
  user={{ id: session.user.id, name: session.user.name }}
  scope={{ tenantKey: workspace.id, resourceType: "task", resourceId: task.id }}
  adapter={createLocalAdapter({ storageKey: "demo-comments" })}
/>

user.id is the session id your app already has. Local mode stores JSON in localStorage under that storage key. It does not sync other browsers or devices. Do not use it as production authorization.

3. Hosted

Create an app with Comments MCP (create_comment_app, then publish_comment_app), call ensure_comment_test_publishable, and paste envLine into .env.local. The env name is NEXT_PUBLIC_BSW_COMMENTS_PUBLISHABLE_KEY. The install snippet's appId is the real cma_ id. Mint authorToken on your server. See the Next.js guide.

<Comments
  appId="cma_demo"
  publishableKey={process.env.NEXT_PUBLIC_BSW_COMMENTS_PUBLISHABLE_KEY}
  user={{ id: session.user.id, name: session.user.name }}
  scope={{ tenantKey: "acme", resourceType: "task", resourceId: "task_1842" }}
  authorToken={authorTokenFromYourServer}
  renewAuthorToken={renewFromYourServer}
/>

cma_demo, tenant acme, and resource task_1842 are the ids in the persisted BYO example. A Hosted app id from create_comment_app has the same cma_ prefix plus 24 hex characters. Replace cma_demo with that id. The publishable value is the key from ensure_comment_test_publishable, not a secret.

4. BYO

Pass a CommentsAdapter whose methods call your API. Your API reads the session cookie and rejects anyone who is not a member of that tenant and resource. The example at examples/comments-nextjs writes a JSON file and is the reference for a persisted store. Run it with pnpm --filter @bootstrapware/comments-example dev on port 3014.

Related: Modes · Identity and tokens · Cursor guide