The React feedback component adds thumbs up/thumbs down buttons and a feedback popover to collect user feedback about your AI-generated responses. View feedback in your Melodi dashboard.

For optimal analytics, we recommend first creating threads using the SDKs, then referencing them in the feedback widget. This ensures all conversations are tracked, even those without feedback.

​
Installation Options

npm install @melodi/melodi-sdk-react

​
Basic Setup

  1. Get a publishable API key from your Melodi settings (see API Access).

  2. Add the MelodiAuthProvider with your API key:

<MelodiAuthProvider apiKey="YOUR_API_KEY_HERE">
  {children}
</MelodiAuthProvider>

​
Usage

<MelodiFeedbackWidget
  thread={{
    messages: [
      {
        role: 'user',
        content: 'Hello!',
      },
      {
        role: 'assistant',
        content: 'Hi! How can I help you today?',
      }
    ],
    projectName: 'My Project',
    metadata: {
      environment: 'production',
      feature: 'chat'
    }
  }}
  userInfo={{
    id: 'user-123',
    email: 'user@example.com'
  }}
  companyName="My Company"
  // Optional: Set the feedback widget variant
  // variant="flag"
/>
Only threads that contain feedback will be displayed in the Melodi dashboard. To unlock analytics for all sessions, we recommend creating threads via the SDK then referencing them in the widget.

​
Component Props

​
threadId
string

ID of an existing thread created via the SDK (recommended)

​
thread
ThreadProps

Alternative: Direct thread configuration object. See Thread format for details.

​
userInfo
UserInfo
required

Information about the current user

​
companyName
string
required

Your company name to display in the feedback popover

​
variant
string

Set the feedback widget variant
Options:

  • thumbs (default): Thumbs up/down buttons

  • flag: Flag button

Was this page helpful?

API AccessPython and TypeScript SDKs