ask-use-voice-control

Integrate text-to-speech and speech-to-text into apps using the use-voice-control package.

74|11|Updated Jul 4, 2024
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-use-voice-control-opensourceagi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ask-use-voice-control
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-use-voice-control
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-use-voice-control-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @huggingface/transformers, kokoro-js, @moonshine-ai/moonshine-js, react, react-dom.

What problem does it solve? Adding speech features to an app means juggling TTS providers, in-browser dictation, Markdown cleanup, and CLI tooling across five different package entry points. This Skill maps the use-voice-control package so you pick the right subpath, provider, and voice without reading the source. ## Core Features & Use Cases - Entry-point selection: Choose among the root TTS entry, /client browser engines, /react hooks, /node document rendering, /markdown conversion, and /api-client. - Speech generation: Use generateSpeech with the local Kokoro provider (28 voices) or Deepgram Aura via a Cloudflare Workers AI binding. - Dictation and read-aloud: Run Moonshine.js transcription fully in-browser with LiveTranscriber/useLiveTranscription, and chunk-and-play text with ReadAloudController/useReadAloud. - Use Case: You want a docs site to read its Markdown pages aloud. Convert pages with markdownToSpeech so headings and code fences are announced properly, then synthesize audio with generateSpeech or the npx CLI. ## Quick Start Ask the assistant to add read-aloud playback to a React component using use-voice-control's useReadAloud hook with the Kokoro provider.

Frequently Asked Questions about ask-use-voice-control

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

FAQPage Schema
How do I add text-to-speech to a React app with use-voice-control?

Import useReadAloud or useLiveTranscription from the use-voice-control/react subpath, which wraps the framework-agnostic /client engines. Pass a SynthesizeFn to ReadAloudController if you want to point playback at your own TTS route.

Kokoro vs Deepgram provider in generateSpeech, which should I use?

Kokoro is the default provider and runs locally on Node CPU with no external dependency, offering 28 voices. Deepgram Aura requires a Cloudflare Workers AI binding resolved at runtime and throws when the binding is absent.

Does use-voice-control support in-browser speech recognition without an API?

Yes, LiveTranscriber and the useLiveTranscription hook run Moonshine.js entirely in the browser with no API call. Gate the UI on isTranscriptionSupported() since it needs WebAssembly, microphone permission, and a secure context.

Why is Markdown syntax read out loud during text-to-speech?

Raw Markdown passed to generateSpeech is spoken verbatim, including # and ** characters. Run the text through markdownToSpeech or markdownToSpeechSegments first, which strips syntax, announces headings, and handles code blocks.

Why does the use-voice-control CLI say the package is not built?

The bin/use-voice-control.mjs launcher is a thin wrapper around dist/cli.js, so the error means the build output is missing. Run bun run build inside the package to produce dist before invoking the CLI.

Can I import use-voice-control root entry in browser code?

No, the root entry is for server or Worker TTS and pulls Node code into browser bundles. Browser code should import from the /client or /react subpaths, which map to the appropriate dist outputs.