Anything App

AI Speech Reference

Use useAISpeech to convert text into natural-sounding audio. Generated speech includes a raw Blob for client-side processing and a hosted URL for playback and persistence.

useAISpeech

Import the hook from the AI hook module:

import { useAISpeech } from "@/hooks/use-ai";
import { usePersistentItem } from "@/hooks/use-persistent-item";

export default function App() {
  const [text, setText] = React.useState("");
  const [audioUrl, setAudioUrl] = usePersistentItem<string | null>(
    "audioUrl",
    null
  );
  const { generateSpeech, isLoading, error } = useAISpeech();

  const handleGenerate = async () => {
    if (!text.trim()) return;

    const audio = await generateSpeech({ text: text.trim() });
    if (audio?.url) {
      setAudioUrl(audio.url);
    }
  };

  return (
    <div>
      <textarea
        value={text}
        onChange={(event) => setText(event.target.value)}
        placeholder="Enter text to convert to speech..."
      />
      <button onClick={handleGenerate} disabled={isLoading}>
        {isLoading ? <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" /> : "Generate speech"}
      </button>
      {error && <p className="text-destructive">{error.message}</p>}
      {audioUrl && (
        <audio controls src={audioUrl} className="w-full">
          Your browser does not support the audio element.
        </audio>
      )}
    </div>
  );
}

For model-specific voices:

import {
  listSpeechModels,
  listSpeechVoices,
  useAISpeech,
} from "@/hooks/use-ai";

const models = listSpeechModels();
const [modelId, setModelId] = React.useState(models[0]?.id);
const voices = modelId ? listSpeechVoices(modelId) : [];
const [voiceId, setVoiceId] = React.useState<string | undefined>(undefined);
const { generateSpeech } = useAISpeech();

await generateSpeech({
  text: "Welcome to our application!",
  model: modelId,
  voice: voiceId,
});

Model Selection

When no model is specified, the platform chooses the best available speech model for the user's subscription tier. To expose model choice, pass a model ID and build selectors from listSpeechModels():

import { listSpeechModels, useAISpeech } from "@/hooks/use-ai";

const models = listSpeechModels();
const [modelId, setModelId] = React.useState<string | undefined>(undefined);
const { generateSpeech } = useAISpeech();

await generateSpeech({
  text: "Hello world",
  model: modelId,
});

listSpeechModels() returns ModelInfo[] with id, displayName, provider, tier, description, and capabilities. Speech model capabilities include tts.

listSpeechVoices(modelId) returns SpeechVoiceInfo[]:

  • id: Voice ID to pass as voice.
  • name: Human-readable voice name.
  • description: Guidance about the voice character.

Advanced models require a Pro subscription. Deprecated models automatically fall back to a recommended replacement.

Best Practices

  • Omit voice unless the app specifically needs a voice picker or branded voice.
  • Use the url field for playback and persistence.
  • Store the URL with usePersistentItem if the audio should survive reloads.
  • Use blob only when you need local audio processing.
  • Split long content into chunks because maximum text length varies by model.
  • If you require a specific voice, choose the model first and load voices with listSpeechVoices(modelId).