AI

Feedback

Thumbs up/down rating for AI responses.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash
npx @mcp-elements/cli add feedback

Usage

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

PropTypeDefaultDescription
childrenReact.ReactNodeFeedbackButton elements and optional separators
type (FeedbackButton) *'up' | 'down'Whether the button is a thumbs-up or thumbs-down
selected (FeedbackButton)booleanfalseWhether the button is in the selected/active state