Was This Helpful Bar

Component

About

A small feedback bar with Yes/No buttons under an AI chat answer, which swaps to a thank-you message once the visitor answers.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Was This Helpful Bar to your project and fits it to your theme.

Code

How Was This Helpful Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import HelpfulBar from "@/components/ui/helpful-bar";

export default function HelpfulBarDemo() {
  return (
    <div className="wrap">
      <div className="ai">
        <div className="av" aria-hidden="true">
          <svg
            viewBox="0 0 24 24"
            width="16"
            height="16"
            fill="currentColor"
            aria-hidden="true"
          >
            <path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z" />
          </svg>
        </div>
        <div className="col">
          <div className="bubble">
            To remove a red wine stain, blot it right away, then cover it with
            salt or baking soda for 10 minutes. Rinse with cold water, not hot,
            and wash as usual.
          </div>
          <HelpfulBar />
        </div>
      </div>
    </div>
  );
}