Code & Prose

Inline code, syntax-highlighted blocks, tabbed snippets, blockquotes, keyboard shortcuts, highlighted text, and typographic prose wrapper.

Inline Code

The Code component renders inline code snippets within prose text. It uses a monospaced font with a subtle background to distinguish code from surrounding text.

Install the package with pnpm add composite-voice and import CompositeVoice from the main entry point.

Use the voice.start() method to begin a session, and voice.stop() to end it. Events are typed via VoiceEvent<T>.

Code Block

Full code blocks with syntax highlighting powered by prism-react-renderer. Colors adapt to light and dark mode via CSS variable tokens.

Basic

import { CompositeVoice } from "@lukeocodes/composite-voice";

const voice = new CompositeVoice({
  stt: new DeepgramSTT({ apiKey: "..." }),
  llm: new AnthropicLLM({ model: "claude-sonnet-4-20250514" }),
  tts: new DeepgramTTS({ model: "aura-asteria-en" }),
});

voice.on("transcript", (text) => {
  console.log("User said:", text);
});

voice.start();

With title

src/app.ts

import { CompositeVoice } from "@lukeocodes/composite-voice";

const voice = new CompositeVoice({
  stt: new DeepgramSTT({ apiKey: "..." }),
  llm: new AnthropicLLM({ model: "claude-sonnet-4-20250514" }),
  tts: new DeepgramTTS({ model: "aura-asteria-en" }),
});

voice.on("transcript", (text) => {
  console.log("User said:", text);
});

voice.start();

With line numbers

src/app.ts

1import { CompositeVoice } from "@lukeocodes/composite-voice";
2
3const voice = new CompositeVoice({
4  stt: new DeepgramSTT({ apiKey: "..." }),
5  llm: new AnthropicLLM({ model: "claude-sonnet-4-20250514" }),
6  tts: new DeepgramTTS({ model: "aura-asteria-en" }),
7});
8
9voice.on("transcript", (text) => {
10  console.log("User said:", text);
11});
12
13voice.start();

CSS example

theme.css

@theme {
  --color-primary-500: oklch(0.637 0.237 25.331);
  --color-surface: light-dark(#ffffff, #09090b);
  --color-surface-sunken: light-dark(#fafafa, #18181b);
}

Bash / Shell

Terminal

npm install @lukeocodes/composite-voice
# or
pnpm add @lukeocodes/composite-voice

Code Tabs

Tabbed code blocks for showing the same concept in multiple languages. Uses WAI-ARIA tablist pattern with arrow key navigation.

import { CompositeVoice } from "@lukeocodes/composite-voice";

const voice = new CompositeVoice({
  stt: new DeepgramSTT({ apiKey: "..." }),
  llm: new AnthropicLLM({ model: "claude-sonnet-4-20250514" }),
  tts: new DeepgramTTS({ model: "aura-asteria-en" }),
});

voice.on("transcript", (text) => {
  console.log("User said:", text);
});

voice.start();

With line numbers

1import { CompositeVoice } from "@lukeocodes/composite-voice";
2
3const voice = new CompositeVoice({
4  stt: new DeepgramSTT({ apiKey: "..." }),
5  llm: new AnthropicLLM({ model: "claude-sonnet-4-20250514" }),
6  tts: new DeepgramTTS({ model: "aura-asteria-en" }),
7});
8
9voice.on("transcript", (text) => {
10  console.log("User said:", text);
11});
12
13voice.start();

Blockquote

Styled block quotations with optional citation and Schema.org markup. Three visual variants available.

Default

The best way to predict the future is to invent it.

With citation

The best way to predict the future is to invent it.
— Alan Kay

With citation URL

The best way to predict the future is to invent it.
— Alan Kay

Variants

This uses the primary color scheme for the left border and background tint.
— Default variant

This uses the accent color scheme, great for highlighting important quotations.
— Accent variant

This uses neutral tones for a more understated appearance within documentation.
— Subtle variant

Keyboard Shortcuts

The Kbd component renders keyboard key indicators that mimic physical key appearance.

Press Ctrl + C to copy text.

Use Cmd + Shift + P to open the command palette.

Navigate with Tab and Shift + Tab for reverse direction.

Press Esc to close a modal or Enter to confirm.

Highlighted Text

The Mark component draws attention to specific text with a colored highlight background.

The CompositeVoice SDK provides a unified API for voice-driven applications.

Status: Connected | Reconnecting | 3 events queued

Variants

DefaultSuccessWarningInfo

Prose

The Prose component applies consistent typography styles to arbitrary HTML content. Wrap markdown-rendered or CMS content in Prose and all child elements receive appropriate spacing, sizing, and color.

Default size

Getting Started

CompositeVoice is a modular voice SDK that connects speech-to-text, language models, and text-to-speech into a seamless pipeline. It supports both browser-native and cloud-based providers.

Installation

Install with your preferred package manager. You can use npm, pnpm, or yarn.

Provider-agnostic architecture
Event-driven with typed events
Conversation history with configurable turn limits
WebSocket reconnection with exponential backoff

Features

Real-time speech-to-text transcription
Streaming LLM responses
Natural text-to-speech output

The best voice experiences feel like natural conversation, not command-and-control interfaces.

Visit the GitHub repositoryfor full documentation.

Note: This SDK requires a modern browser with support for the MediaRecorder API.

Small size

Quick Reference

The CompositeVoice class is the main entry point. Call voice.start() to begin and voice.stop() to end a session.

STT: DeepgramSTT, NativeSTT
LLM: AnthropicLLM, OpenAILLM, WebLLMLLM
TTS: DeepgramTTS, OpenAITTS, NativeTTS

Large size

Why CompositeVoice?

Building voice interfaces shouldn't require gluing together incompatible APIs. CompositeVoice provides a unified abstraction that lets you swap providers without changing application code.

Whether you need real-time transcription, streaming LLM responses, or natural-sounding speech, the SDK handles the complexity so you can focus on building great experiences.

With tables

Provider Comparison

Provider	Type	Latency	Quality
DeepgramSTT	Cloud (WebSocket)	~200ms	Excellent
NativeSTT	Browser	~400ms	Good
AnthropicLLM	Cloud (SSE)	~300ms TTFT	Excellent

Combining Components

These components work naturally together within prose or standalone contexts.

To start a voice session, call voice.start() in your component. Press Ctrl + M to toggle the microphone.

voice.on("transcript", (text) => {
  console.log("User said:", text);
});

Tip: Use the conservative turn-taking strategy for noisy environments.

The eager pipeline feature sends partial transcripts to the LLM for speculative generation, reducing perceived latency by up to 40%.