addcomments

Floating comment toolbar for React apps with a Figma/Vercel-style collaboration experience.

Built and refined primarily for MUI-based apps, and also works in regular React apps without MUI.

Default hosted API: https://addcomments.vercel.app/api

Hide In Production

Use the enabled prop and keep it false in production.

<AddComment
  enabled={process.env.NODE_ENV !== "production"}
/>

This package already defaults to hidden in production:

• enabled default is process.env.NODE_ENV !== "production"

Install

npm i addcomments

Usage

import { AddComment } from "addcomments";
import "addcomments/styles.css";

export default function App() {
  return (
    <>
      <YourPage />
      <AddComment
      />
    </>
  );
}

You can also pass projectKey, workspaces, defaultWorkspace, and currentUser when you already know the active project or signed-in user.

Props

• apiBaseUrl: Optional API base URL override. default: https://addcomments.vercel.app/api
• projectKey: Project identifier
• workspaces: Optional initial workspace list (default [])
• defaultWorkspace: Optional default workspace (default "")
• pageUrl: Optional override
• pageTitle: Optional override
• currentUser: Optional logged-in user object
• enableBuiltInAuth: Enable widget auth form (default true)
• enabled: Show/hide widget. Default hides in production.
• loginEndpoint: Login route. If omitted, ${apiBaseUrl}/auth/login is used.
• signupEndpoint: Signup route. If omitted, ${apiBaseUrl}/auth/signup is used.

Quick start flow

1. Install package.
2. Render <AddComment /> in your app.
3. Provide your projectKey and optional workspaces list if you want to seed the dropdown.
4. Start using comments immediately with the hosted API.
5. Select or create a project, then create or select a workspace.
6. Invite members by email so invited users can join the same project/workspace.

Workspace and member sharing

• Workspace is project-scoped and user-created.
• User1 creates a project and workspace.
• User1 invites User2 by email in the widget.
• User2 sees the pending invite in their account, then can accept or reject it.
• Accepted users can see and reply in the shared project/workspace.

Discord notifications

• Workspace owner can set Discord webhook URL from widget and enable notifications.
• When Discord notifications are enabled for a workspace, comments created in that workspace can be routed to the configured webhook.
• The widget exposes the webhook URL and notification toggle in the Settings tab.

Hosted API contract used by widget

• GET /comments?projectKey=...&workspaceKey=...&pageUrl=...
• POST /comments
• GET /comments/projects
• POST /comments/projects
• GET /comments/workspaces?projectKey=...
• POST /comments/workspaces
• GET /comments/workspaces/webhook?projectKey=...&workspaceKey=...
• POST /comments/workspaces/webhook
• GET /comments/members?projectKey=...&workspaceKey=...
• POST /comments/members
• PATCH /comments/members
• DELETE /comments/members
• POST /auth/login
• POST /auth/signup

All endpoints are resolved from apiBaseUrl.

Self-hosted backend (optional)

If you do not want to use hosted API, point apiBaseUrl to your own backend and implement the same endpoints.

Optional env variables for self-host backend:

JWT_SECRET=replace_with_a_strong_secret
DATABASE_URL=mysql://USER:PASSWORD@HOST:3306/DB_NAME

If your backend uses host/user/password style config, expose:

DATABASE_HOST=127.0.0.1
DATABASE_PORT=3306
DATABASE_NAME=addcomments
DATABASE_USER=app_user
DATABASE_PASSWORD=strong_password

For database bootstrap (self-host only):

SOURCE ./node_modules/addcomments/sql/addcomments-schema.sql;

Or copy and run from this file:

• node_modules/addcomments/sql/addcomments-schema.sql

Notes

• This package is frontend-only and works with hosted API by default.
• UI behavior is optimized for MUI screens, drawers, and dialogs, while remaining compatible with normal React layouts.
• To self-host, provide your own API + database and set apiBaseUrl.
• Keep react and react-dom provided by host app (peer dependencies).

Author

Mohd Mizna Ansari