Feedback

Installation

npm i @fumapress/feedback

Add the plugin:

import { defineConfig } from "fumapress";
import { feedbackPlugin } from "@fumapress/feedback";

export default defineConfig({
  // ...
})
  .usePlugins(
    feedbackPlugin({
      onPageFeedbackAction(data) {
        "use server";
        // ...
      },
      onTextFeedbackAction(data) {
        "use server";
        // ...
      },
    }),
  );

The onPageFeedbackAction & onTextFeedbackAction options are Server Functions to be called by client. They receive the user feedback, you can define the flow afterwards (e.g. storing that in your analytics platform).

Finally, initialize the src/app.css file and add the following:

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumapress/css/preset.css";
@import "@fumapress/feedback/css/preset.css";

GitHub integration

1. Create your own GitHub App and obtain its app ID and private key.

2. Store them as private environment variables, do not share it.

   GITHUB_APP_ID=...
   GITHUB_PRIVATE_KEY=...

   You can also use stronger methods like Key Vault, see GitHub docs for managing private keys.

3. Use the integration plugin:

   import { defineConfig } from "fumapress";
   import { githubFeedbackPlugin } from "@fumapress/feedback/github";
   
   export default defineConfig({
     // ...
   })
     .usePlugins(
       githubFeedbackPlugin({
         appId: import.meta.env.GITHUB_APP_ID,
         privateKey: import.meta.env.GITHUB_PRIVATE_KEY,
         // your repository info, e.g.
         storage: {
           owner: "fuma-nama",
           repo: "fumapress",
           category: "Feedback",
         },
       }),
     );

   Create a Feedback category in your GitHub Discussions, the bot will forward user feedbacks in the specified category.

Email integration

Messages are sent with Resend over HTTP. The API key stays on the server; the browser only calls your app’s feedback routes.

1. Create a Resend account and create an API key.

2. Store it as a private environment variable (never commit it or expose it to the client).

   RESEND_API_KEY=re_...

3. Configure a verified sending domain in Resend, and use a from address on that domain in production.

4. Use the email plugin:

   import { defineConfig } from "fumapress";
   import { emailFeedbackPlugin } from "@fumapress/feedback/email";
   
   export default defineConfig({
     // ...
   })
     .usePlugins(
       emailFeedbackPlugin({
         apiKey: import.meta.env.RESEND_API_KEY,
         from: "Docs <feedback@yourdomain.com>",
         to: "team@yourdomain.com",
         // optional: subject lines become `${subjectPrefix} /path`
         subjectPrefix: "[Docs feedback]",
       }),
     );

   to may be a single address or an array.