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";

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

    **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";

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

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


3. 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

4. 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";
   
   export default defineConfig({
     plugins: [
       react({
         plugins: [["swc-plugin-react-generate-paths", {}]],
       }),
     ],
   });

   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";
   
   export default defineConfig({
     plugins: [
       react({
         babel: {
           plugins: [["babel-plugin-react-generate-paths"]],
         },
       }),
     ],
   });

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

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

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.

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>