web-whisper-widget

Add browser-based speech-to-text input to web applications via a Whisper server.

1|Updated Nov 10, 2025
One-click install
npx skills add https://github.com/lawless-m/TheHand --skill web-whisper-widget
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-whisper-widget
Source: https://github.com/lawless-m/TheHand/tree/main/.claude/skills/web-whisper-widget
Command: npx skills add https://github.com/lawless-m/TheHand --skill web-whisper-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables browser-based speech-to-text transcription by integrating a Whisper server backend with a minimal front-end Widget, letting users dictate text directly into web pages.

Core Features & Use Cases

  • Browser-based transcription: A ready-to-use WhisperWidget that records audio, sends it to a Whisper server, and returns transcribed text to the page.
  • Easy integration for forms, chat, and search: Drop-in widget for any web app to enable hands-free input and accessibility.
  • Live controls and history: Visual status indicators and a simple transcription history you can reuse or store.

Quick Start

Follow these steps to add the widget to a web page:

  • Include whisper-widget.js and whisper-widget.css in your project.
  • Add a container element in your HTML.
  • Initialize with new WhisperWidget('#voice-input', { serverUrl: '/whisper/inference', onTranscription: (text) => { /* your handler */ } });

Frequently Asked Questions about web-whisper-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add speech-to-text input to a web application form?

To add speech-to-text input to a web application, include the WhisperWidget front-end package and initialize it with a Whisper server endpoint. The widget captures browser audio, sends it to the server, and returns transcribed text directly to your page.

Do I need a Whisper server to use browser-based voice transcription?

Yes, browser-based voice transcription with this widget requires a Whisper server endpoint. The front-end WhisperWidget records audio on the client and sends it to this backend server to retrieve the transcribed text.

Does this speech-to-text widget work on both desktop and mobile browsers?

Yes, the speech-to-text widget works across desktop and mobile browsers. It handles audio capture and initialization within the browser, allowing users to dictate text hands-free for forms, chat, and search on various devices.

What is the best way to integrate a Whisper widget for hands-free web input?

The best way to integrate a Whisper widget for hands-free web input is to add the provided JavaScript and CSS files to your project, create an HTML container, and initialize the widget with your server URL and a transcription handler.

Can I access the transcription history from the voice input widget?

Yes, you can access transcription history from the voice input widget. The WhisperWidget provides a simple transcription history UI alongside visual status indicators, which you can reuse or store for later reference.