AI
Feedback
Thumbs up/down rating for AI responses.
Available in
reactangularPreview
Live previewreal component
Install
TerminalBash
npx @mcp-elements/cli add feedbackUsage
feedback-example.tsxTSX
import { Feedback, FeedbackButton } from '@mcp-elements/react'
import { useState } from 'react'
export function Example() {
const [sel, setSel] = useState<'up' | 'down' | null>(null)
return (
<Feedback>
<FeedbackButton type="up" selected={sel === 'up'} onClick={() => setSel('up')} aria-label="Thumbs up" />
<FeedbackButton type="down" selected={sel === 'down'} onClick={() => setSel('down')} aria-label="Thumbs down" />
</Feedback>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | FeedbackButton elements and optional separators |
type (FeedbackButton) * | 'up' | 'down' | — | Whether the button is a thumbs-up or thumbs-down |
selected (FeedbackButton) | boolean | false | Whether the button is in the selected/active state |