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.