Galadrim Feedback

Page Notion

Project Configuration

Go to https://feedback.galadrim.ovh/admin

Log in with credentials from Passbolt: Back-Office - Galadrim Feedback

Create a project

Copy the project ID

Installation

🚀 Super Quick Install (Recommended)

Use our CLI to automatically copy the installation prompt:

npx galadrim-feedback cursor-init --project-id="project_id" --notion-database-id="notion_database_id"

This will copy the complete installation prompt to your clipboard. Then simply paste it into Cursor and let it handle the installation automatically!

Install and configure Galadrim Feedback in this React project:

1. Install dependencies:
yarn add axios galadrim-feedback

2. Configure Path Generation Plugin:
Galadrim Feedback requires a plugin to add file path data to your components. We recommend using the SWC plugin for performance, but a Babel plugin is also available for older projects.

#### SWC Configuration (Recommended)
1.  Install the necessary packages:
    `yarn add -D swc-plugin-react-generate-paths`

2.  Configure your build tool:
    **For Vite:**
    Install `@vitejs/plugin-react-swc` and update your `vite.config.ts`:
    ```typescript
    // vite.config.ts
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react-swc";
    import { includeGitSha } from "galadrim-feedback/vite";

    export default defineConfig({
      plugins: [
        react({
          plugins: [["swc-plugin-react-generate-paths", {}]],
        }),
        includeGitSha(),
      ],
    });
    ```

    **For Next.js (Turbopack):**
    Update your `next.config.js`:
    ```javascript
    // next.config.js
    module.exports = {
      experimental: {
        swcPlugins: [
          [
            "swc-plugin-react-generate-paths",
            {
              displayName: true,
              ssr: true,
            },
          ],
        ],
      },
    };
    ```

#### Babel Configuration
If your project uses Babel, you can use the Babel plugin instead.

1.  Install the plugin:
    `yarn add -D babel-plugin-react-generate-paths`

2.  Configure your build tool:
    **For Vite:**
    ```typescript
    // vite.config.ts
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import { includeGitSha } from "galadrim-feedback/vite";

    export default defineConfig({
      plugins: [
        react({
          babel: {
            plugins: [["babel-plugin-react-generate-paths"]],
          },
        }),
        includeGitSha(),
      ],
    });
    ```

    **For other Babel setups (e.g. `.babelrc`):**
    ```json
    {
      "plugins": ["babel-plugin-react-generate-paths"]
    }
    ```


3. Configure Git SHA tracking:
Feedbacks automatically record the git commit SHA of the deployed app — no prop is needed on FeedbackRoot. Pick the integration matching the project's build tool:
   - **Vite**: already handled by the `includeGitSha()` plugin added above (it injects a `<meta name="git-sha">` tag at build time).
   - **Next.js** (webpack or Turbopack): wrap the config in `next.config.js`:
     ```javascript
     const { withGitSha } = require("galadrim-feedback/next");
     module.exports = withGitSha({ /* existing next config */ });
     ```
     (On Vercel this is optional: `NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA` is detected automatically when system environment variables are exposed.)
   - **CRA / custom webpack**: add the webpack plugin (via craco/react-app-rewired for CRA):
     ```javascript
     const GitShaPlugin = require("galadrim-feedback/webpack");
     // in the webpack config: plugins: [new GitShaPlugin()]
     ```
   - **Any other React setup**: add `npx galadrim-feedback inject-git-sha` to the build/deploy script, right after the build — it patches the built HTML files with the `<meta name="git-sha">` tag.
   - **Docker builds**: the .git folder is usually absent from the build context, so pass the SHA explicitly: `docker build --build-arg GIT_SHA=$(git rev-parse HEAD)` with `ARG GIT_SHA` and `ENV GIT_SHA=$GIT_SHA` in the Dockerfile.

4. Configure FeedbackRoot component:
   - Run `pwd` command in the frontend root directory and use this absolute path for rootDir prop
   - Detect navigation package used in the project:
     * If using React Router Dom (react-router-dom):
       - Import: import { useNavigate } from "react-router-dom";
       - Hook: const navigate = useNavigate();
       - Navigate prop: navigate={(path) => navigate(path)}

    * If using React Router (react-router):
       - Import: import { useNavigate } from "react-router";
       - Hook: const navigate = useNavigate();
       - Navigate prop: navigate={(path) => navigate(path)}
     * If using Next.js router (next/router):
       - Import: import { useRouter } from "next/router";
       - Hook: const router = useRouter();
       - Navigate prop: navigate={(path) => router.push(path)}
     * If using Next.js app router (next/navigation):
       - Import: import { useRouter } from "next/navigation";
       - Hook: const router = useRouter();
       - Navigate prop: navigate={(path) => router.push(path)}
   - Add FeedbackRoot to the main App component with:
     * Import FeedbackRoot from "galadrim-feedback"
     * Import "galadrim-feedback/dist/styles.css"
     * Add <FeedbackRoot> component with these props:
       - rootDir="{absolute path from pwd command}"
       - projectId="${PROJECT_ID}"
       - navigate={(path) => navigate(path)} (using detected navigation method)
       - position="bottom-right"
       - notionDatabaseId="${NOTION_DATABASE_ID}"
     * Place it inside the router context but outside main content areas, if needed you can wrap it in a layout component that is parent to the rest of the app

5. Verification:
   - Show all modified files
   - Confirm the navigation setup works with the detected router
   - List any manual steps needed (like getting projectId from admin) (see https://feedback.galadrim.ovh/admin)

Be very specific about file paths and exact code to add. Show the complete import statements and component setup.

Prerequisites

Before installing Galadrim Feedback, make sure you have axios installed in your project.

yarn add axios

Then, install Galadrim Feedback:

yarn add galadrim-feedback

Path Generation Plugin

Galadrim Feedback requires a plugin to add file path data to your components.

SWC Configuration

1. Install the necessary packages:

   yarn add -D swc-plugin-react-generate-paths

2. Configure your build tool:

   For Vite: Install @vitejs/plugin-react-swc and update your vite.config.ts:

   // vite.config.ts
   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react-swc";
   import { includeGitSha } from "galadrim-feedback/vite";
   
   export default defineConfig({
     plugins: [
       react({
         plugins: [["swc-plugin-react-generate-paths", {}]],
       }),
       includeGitSha(),
     ],
   });

   For Next.js (Turbopack): Update your next.config.js:

   // next.config.js
   module.exports = {
     experimental: {
       swcPlugins: [
         [
           "swc-plugin-react-generate-paths",
           {
             {
             /*  For example if my monorepo is at /path/to/monorepo, and the project to apply the plugin to, is at /path/to/monorepo/apps/web
                 This is needed to strip this part in dev mode, so the path are the same in production
                 You can add PATH_TO_ROOT to the dev .env, and leave it undefined in the staging .env
                 */
                 pathToRoot: process.env.PATH_TO_ROOT,
             },
           },
         ],
       ],
     },
   };

Babel Configuration

If your project uses Babel, you can use the Babel plugin instead.

1. Install the plugin:

   yarn add -D babel-plugin-react-generate-paths

2. Configure your build tool:

   For Vite:

   // vite.config.ts
   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import { includeGitSha } from "galadrim-feedback/vite";
   
   export default defineConfig({
     plugins: [
       react({
         babel: {
           plugins: [["babel-plugin-react-generate-paths"]],
         },
       }),
       includeGitSha(),
     ],
   });

   For other Babel setups (e.g. .babelrc):

   {
     "plugins": ["babel-plugin-react-generate-paths"]
   }

Git SHA / Version Tracking

Each feedback records the git commit SHA of the deployed app — see the Git SHA Setup section below for the integration matching your build tool.

FeedbackRoot Integration

Add the FeedbackRoot component to the root of your application. It must be placed inside the router.

import FeedbackRoot from "galadrim-feedback";
import "galadrim-feedback/dist/styles.css"; // Don't forget to import the CSS styles

// Add FeedbackRoot to your application
<FeedbackRoot
  rootDir="/path/to/your/project"
  projectId="your-project-id" // Your project ID in Galadmin
  notionDatabaseId="22c3c3f19e43808b9675f769eaeea394" // The id of the Board in Notion
  navigate={(path) => navigate(path)} // Navigation function to use your router
  position="bottom-right" // Position of the button to open Feedback mode (bottom-right, bottom-left, top-right, top-left)
/>;

Props Explanation:

• rootDir: The path to your project root up to src (feedbacks will be linked to components with the path src/path/to/your/component which is combined with rootDir to open them in VSCode).

• projectId: Your project identifier in Galadmin. (request from an administrator)

• navigate: A function that takes a path and allows you to navigate using your router.

• position: The position of the button to open Feedback mode (bottom-right, bottom-left, top-right, top-left)

• notionDatabaseId: The unique identifier for your Notion database. To obtain this ID:

  1. Navigate to your Notion Board
  2. Access database view:
     • Click the 3 dots (⋯) next to the board name
     • Select "View database" from the dropdown menu
  3. Extract the database ID:
     • Copy the first ID from the URL
     • Example URL: https://www.notion.so/galadrim/22c3c3f19e43808b9675f769eaeea394?v=22c3c3f19e43803cb4d0000c592bd047
     • Database ID: 22c3c3f19e43808b9675f769eaeea394

This concludes the installation of Galadrim Feedback in your project!

Kanban Integration

Once Galadrim Feedback is installed and configured, you can connect to a kanban board to manage your feedback:

• Notion Integration: If you provide a notionDatabaseId prop to the FeedbackRoot component, you'll be able to connect to a Notion kanban board through the settings menu. The Notion token is linked to the specific project for that particular kanban database.

• Trello Integration: If no notionDatabaseId is provided, you'll be able to connect to Trello instead through the settings menu. You can choose which Trello board to link with the project. Unlike Notion, the Trello token is linked to your account, so once you connect Trello for the first time, you only need to select the board for other projects without re-authenticating.

The kanban integration allows you to link feedback items to tickets/cards in your project management tool, creating a seamless workflow from feedback collection to task management.

Git SHA Setup

Each feedback records the git commit SHA of the app it was created on, so it can be traced back to the exact deployed version. Detection is fully automatic — nothing to pass to FeedbackRoot. All integrations resolve the SHA the same way: from GIT_SHA, VERCEL_GIT_COMMIT_SHA, CF_PAGES_COMMIT_SHA, GITHUB_SHA or CI_COMMIT_SHA env vars, falling back to git rev-parse HEAD.

Vite

Add the plugin to vite.config.ts. It injects a <meta name="git-sha"> tag at each build (dev server included):

import { includeGitSha } from "galadrim-feedback/vite";

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

Next.js

Works with webpack and Turbopack — wrap your config; the SHA is exposed as NEXT_PUBLIC_GIT_SHA and inlined into the client bundle:

// next.config.js
const { withGitSha } = require("galadrim-feedback/next");

module.exports = withGitSha({
  // your existing next config
});

On Vercel this is optional: NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA is picked up automatically (with "Automatically expose System Environment Variables" enabled).

CRA / custom webpack

Add the webpack plugin (via craco or react-app-rewired for CRA):

const GitShaPlugin = require("galadrim-feedback/webpack");

// in the webpack config
plugins: [new GitShaPlugin()],

Any other React setup

Run the CLI right after the build; it patches the built HTML files with the <meta name="git-sha"> tag:

npx galadrim-feedback inject-git-sha        # auto-detects dist/, build/ or out/
npx galadrim-feedback inject-git-sha dist   # or pass the output dir explicitly

Docker builds

The .git folder is usually absent from the build context, so pass the SHA in explicitly:

docker build --build-arg GIT_SHA=$(git rev-parse HEAD) .

ARG GIT_SHA
ENV GIT_SHA=$GIT_SHA

Manual override

Expose a <meta name="git-sha" content="..."> tag or a window.__GIT_SHA__ global at deploy time, or pass the gitSha prop to FeedbackRoot.

Modals and focus traps

Galadrim Feedback works on top of modal dialogs (Radix, Headless UI, MUI, react-focus-lock…) without any configuration on your side: you don't need modal={false}, onInteractOutside, onOpenAutoFocus or any other escape hatch on your dialogs.

The widget renders in a shadow root and stops its own events from reaching document, so the focus traps and "click outside" layers of your app never mistake it for an outside interaction — leaving a feedback on a modal keeps it open and keeps the comment field focusable.

Account Creation

Once it's installed, you can sign up and then in the Galadmin, you add yourself as a collaborator on the project

Galadrim Feedback MCP Server

A Model Context Protocol (MCP) server for the Galadrim feedback system. This server provides tools to fetch and manage feedbacks from a project via the backend API.

Cursor Configuration

To add this MCP server to Cursor, you need to configure it in your Cursor settings.

Click on the MCP Icon in the Galadrim Feedback Sidebar to get the MCP Payload

Add it to your Cursor MCP settings:

{
  "mcpServers": {
    "galadrim-feedback": {
      "command": "npx",
      "args": ["galadrim-feedback-mcp@latest", "--authToken", "my-jwt-token"]
    }
  }
}

Available Tools

get_feedbacks

Fetches all feedbacks for a specific project from the Galadrim feedback backend API.

mark_as_resolved

Marks a feedback as resolved.

mark_multiple_as_resolved

Marks multiple feedbacks as resolved.

get_trello_lists

Get all Trello lists for a specific project.

get_trello_list_tickets

Get all tickets/cards from a specific Trello list.

get_notion_statuses

Get all available statuses from a Notion database. This tool retrieves the status options (like "Backlog", "To do", "In Progress", etc.) that are configured in your Notion database.

get_notion_status_tickets

Get all tickets from a Notion database with a specific status. This tool allows you to filter and retrieve tickets based on their current status.

CLI Commands

Galadrim Feedback includes a CLI tool for easier setup and management.

Available Commands

cursor-init

Automatically copies the installation prompt to clipboard.

npx galadrim-feedback cursor-init --project-id=<project-id> --notion-database-id=<notion-database-id>