Lobe TTS

Give your app a voice, and ears.

Text-to-speech and speech-to-text for server and browser, with React hooks and audio components.

Documents · Changelog · Report Bug · Request Feature

Table of contents

TOC

• ✨ Why Lobe TTS?
• 🚀 Getting Started
  • Generate speech on the server
  • Play speech in React
• 🤖 AI-Powered Development
• 📦 Packages
• 📖 Documentation
• ⌨️ Local Development
• 🤝 Contributing
• 🩷 Sponsor
• 🔗 Links

✨ Why Lobe TTS?

Lobe TTS (@lobehub/tts) lets you add natural-sounding speech output and voice input to your app, on the server or in the browser, in a few lines of TypeScript. It powers the voice features of 🤯 LobeHub.

• Speak and listen — turn text into speech and speech into text with one library
• Pick your voice provider — Microsoft Edge, Microsoft Speech, OpenAI or the browser's built-in speech, behind the same simple API
• Server or browser — generate audio files in Node.js / Bun, or speak directly in the user's browser
• React-ready — drop-in hooks and an audio player with progress, pause and download, so you don't build playback yourself
• Smooth long-form playback — long text starts playing quickly instead of waiting for the whole audio
• AI-native — skills.md and llms.txt let your coding agent use the real API instead of guessing

🚀 Getting Started

Important

This package is ESM only.

$ pnpm i @lobehub/tts

The React entry @lobehub/tts/react also needs the peer dependencies @lobehub/ui@^6, react@^19 and react-dom@^19.

Generate speech on the server

// index.js — run with `bun index.js`
import { EdgeSpeechTTS } from '@lobehub/tts';
import fs from 'node:fs';

const tts = new EdgeSpeechTTS({ locale: 'en-US' });

const response = await tts.create({
  input: 'This is a speech demonstration',
  options: { voice: 'en-US-GuyNeural' },
});

fs.writeFileSync('./speech.mp3', Buffer.from(await response.arrayBuffer()));

Note

Edge Speech needs a global WebSocket. It is built into Bun and Node.js 22+; on older Node.js versions, set global.WebSocket from the ws package.

Play speech in React

import { AudioPlayer, useEdgeSpeech } from '@lobehub/tts/react';
import { Button, Flexbox } from '@lobehub/ui';

export default () => {
  const { isGlobalLoading, start, stop, audio } = useEdgeSpeech('Hello from Lobe TTS', {
    options: { voice: 'en-US-GuyNeural' },
  });

  return (
    <Flexbox gap={8}>
      <Button loading={isGlobalLoading} onClick={isGlobalLoading ? stop : start}>
        Speak
      </Button>
      <AudioPlayer audio={audio} isLoading={isGlobalLoading} onLoadingStop={stop} />
    </Flexbox>
  );
};

Using Next.js? Add transpilePackages: ['@lobehub/tts'] to next.config.js. For other providers, speech-to-text and more examples, see the documentation.

🤖 AI-Powered Development

Lobe TTS publishes agent-friendly docs, so your AI assistant can write code against the documented API.

Resource	What it does
Agent Skills	tts.lobehub.com/skills.md — skill entry point with setup, workflow and an index of the docs
llms.txt	tts.lobehub.com/llms.txt — an llms.txt index of every docs page

Paste this into Cursor, Claude Code, Codex or any agent that can fetch URLs:

Read https://tts.lobehub.com/skills.md, then use @lobehub/tts to add a "read aloud" button to my React app.

Works with Cursor, Claude Code, Windsurf, GitHub Copilot and other tools that read skills.md or llms.txt.

📦 Packages

Entry	Use it for
@lobehub/tts	Generate speech or transcribe audio, on the server or browser
@lobehub/tts/server	Proxy OpenAI speech and transcription from your own API route
@lobehub/tts/react	React hooks and audio player components

📖 Documentation

Visit tts.lobehub.com for guides, API reference and live demos. See the Changelog for release notes.

⌨️ Local Development

You can use Github Codespaces for online development:

Or clone it for local development:

$ git clone https://github.com/lobehub/lobe-tts.git
$ cd lobe-tts
$ bun install
$ bun run docs:dev

🤝 Contributing

Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.

🩷 Sponsor

Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.

🔗 Links

• 🍭 Lobe UI - React component library for AI apps
• 🥨 Lobe Icons - AI / LLM brand logos and icons
• 📊 Lobe Charts - React chart components
• ✒️ Lobe Editor - Lexical-based rich text editor for React, with Markdown, plugins and a chat composer
• 🎤 Lobe TTS - TTS / STT speech library
• 📐 Lobe Lint - ESLint, Prettier, Stylelint, Commitlint and more lint configs
• 😀 Fluent Emoji - Fluent Emoji assets
• 📖 Docs Kit - Reusable documentation toolkit and lobedocs CLI for LobeHub component libraries
• 🌊 Streamdown - Headless streaming markdown engine for React

---

📝 License

Copyright © 2023 LobeHub.
This project is MIT licensed.