Coolhand

Coolhand Feedback Widget

Get more high-quality human feedback on your AI workloads

Quick & Easy Integration

The Coolhand Feedback Widget is a lightweight JavaScript library that lets you collect user feedback on AI-generated content with just a few lines of code. Simply add the script to your page, mark any element containing LLM output with the coolhand-feedback attribute, and users can rate the quality of responses with a single click.

By default, all feedback is configured to be automatically sent to the Coolhand API where you can analyze patterns, identify problematic outputs, and continuously improve your AI application. However, the widget is built be compatible with any API endpoint that accepts the same basic JSON payload.

Try the interactive examples below to see how it works.

Generated Article

Static content with feedback widget

<div coolhand-feedback>
  Your AI-generated content here
</div>

Artificial intelligence has transformed the way businesses operate, enabling unprecedented levels of automation and insight generation. From natural language processing to computer vision, AI systems are now capable of tasks that were once thought to require human intelligence exclusively.

Machine learning models, particularly deep neural networks, have achieved remarkable performance on complex tasks such as image classification, speech recognition, and language translation. These advances have been driven by increases in computational power, the availability of large datasets, and improvements in algorithmic techniques.

As AI continues to evolve, organizations must consider both the opportunities and challenges it presents. Ethical considerations, data privacy, and the need for transparency in AI decision-making are becoming increasingly important topics in both research and industry applications.

Editable AI Response (Textarea)

Editable content area with revision tracking

<!-- Coolhand fuzzy-matches to original AI output by default,
     but specifying a workload id will improve match rate -->
<div coolhand-feedback data-coolhand-workload-id="workload-123">
  <textarea>AI-generated text that users can edit...</textarea>
</div>

This textarea tracks revisions. Edit the text - changes are sent after 1 second of no typing (or immediately on blur).

Editable AI Response (Input)

Input field with revision tracking (hidden widget style)

<input
  type="text"
  coolhand-feedback
  data-coolhand-widget-style="hidden"
  value="AI-generated summary..."
/>

This input field tracks revisions with no visible widget. Edit the text - changes are sent after 1 second of no typing (or immediately on blur).

Chat Interface

Interactive chat with per-message feedback (pixel style)

<!-- Use pixel style for compact chat bubbles - appears as a small
     dot that expands on hover, keeping the UI clean -->
<div coolhand-feedback data-coolhand-widget-style="pixel">
  Bot response text here...
</div>

The pixel widget style is ideal for chat interfaces and compact layouts. It renders as a tiny dot in the corner that expands into a full feedback widget on hover, keeping the conversation flow unobtrusive.

Can you explain what machine learning is in simple terms?

User - 2:30 PM

Machine learning is like teaching a computer to recognize patterns and make decisions by showing it many examples, rather than explicitly programming every rule. Think of it like teaching a child to identify animals - instead of describing every detail, you show them many pictures until they can recognize cats, dogs, etc. on their own.

AI Assistant - 2:31 PM

That makes sense! Can you give me a real-world example?

User - 2:32 PM

A great example is email spam filtering. The system learns from millions of emails that users have marked as spam or not spam. It identifies patterns like certain words, sender addresses, or formatting that commonly appear in spam. Over time, it gets better at automatically filtering out unwanted emails without you having to create rules for every possible spam scenario.

AI Assistant - 2:33 PM

How accurate are these systems typically?

User - 2:34 PM

Accuracy varies widely depending on the task and data quality. For example, spam filters can achieve 99%+ accuracy, facial recognition systems often reach 95-99% accuracy in controlled conditions, while more complex tasks like natural language understanding might range from 70-90% depending on the specific application. The key is having enough quality training data and choosing the right algorithm for the task.

AI Assistant - 2:35 PM

60 Second Setup

1. Add the Script

<script src="https://cdn.jsdelivr.net/npm/coolhand/dist/coolhand.min.js"></script>

This demo uses v0.3.0 with widget styles and explanation prompts. View the release notes.

2. Mark Elements for Feedback

<div coolhand-feedback>
  Your AI-generated content here
</div>

3. Initialize with Your API Key

CoolhandJS.init('your-api-key', {
  widgetStyle: 'overlay', // or 'pixel', 'hidden'
  explanationSample: 0.3  // 30% chance to prompt for explanation
});

The explanationSample option (0-1) controls how often users are prompted to explain their rating after providing feedback.