Skip to main content
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

  • Widget Only
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

  • Widget Only
<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 buttonsThumbs Up/Down screenshot
  • flag: Flag buttonFlag screenshot