Morpheme React is a specialized component library for building voice agent applications using Deepgram's Voice Agent API. It provides a suite of React components and hooks designed specifically for voice interaction interfaces.
- Voice Agent Integration: Seamless integration with Deepgram's Voice Agent API
- Audio Visualization: Multiple components for visualizing audio input/output
- TypeScript Support: Fully typed for improved development experience
- Customizable Styling: CSS-based styling with easy overrides
- Accessible Components: Built with accessibility in mind
The library is still under development and not yet published on npm. Stay tuned for updates!
- First, initialize the useDeepgramAgent hook with your configuration:
import { useDeepgramAgent } from '@morpheme/react';
const config = {
audio: {
// Optional
input: {
encoding: 'linear16', // Defaults to 'linear16'
sample_rate: 24000, // Defaults to 24k
},
output: {
// Optional
encoding: 'mp3',
sample_rate: 24000, // Defaults to 24k
bitrate: 128000,
container: 'mp3',
},
},
agent: {
listen: {
model: 'nova-2', // Optional, defaults to 'nova-2'
},
think: {
provider: {
type: 'open_ai', // LLM provider type
},
model: 'gpt-4', // LLM model to use
instructions: 'You are a helpful voice assistant...', // LLM System prompt
},
// Add other Deepgram configuration options as needed
},
};
function MyVoiceApp() {
const { isRecording, isConnected, toggleRecording, connect, disconnect, audioPlayer, messages } =
useDeepgramAgent(config, 'YOUR_DEEPGRAM_TOKEN');
// Your app logic here
}See Deepgram's Voice Agent Settings Configuration for more information.
A circular button specifically designed for voice input control:
<MicrophoneButton
onClick={toggleRecording}
isConnected={isConnected}
size="lg" // 'sm' | 'md' | 'lg' | 'xl'
/>A general-purpose button with voice interaction styling:
<Button
onClick={handleClick}
isConnected={isConnected}
size="md" // 'sm' | 'md' | 'lg'
>
Start Recording
</Button>Displays audio levels as animated dots:
<DotVisualizer audioPlayer={audioPlayer} isRecording={isRecording} numDots={20} color="#7C3AED" />Shows audio as a traditional waveform:
<WaveCanvas
audioPlayer={audioPlayer}
isPlaying={isRecording}
barWidth={4}
gap={2}
color="#13EF93"
/>Displays the transcribed conversation between user and agent:
<Conversation messages={messages} showCloseButton={true} onClose={handleClose} />A pre-built component combining a microphone button and wave visualization:
<SimplePlayer
onClick={toggleRecording}
isConnected={isConnected}
audioPlayer={audioPlayer}
isPlaying={isRecording}
micIconColor="#000000"
micButtonColor="#13EF93"
waveCanvasColor="#13EF93"
scale={1}
/>Components can be styled using:
- className prop for custom CSS classes
- style prop for inline styles
- CSS custom properties (coming soon)
- Node.js 18+
- npm or Yarn
git clone https://github.com/<your-username>/morpheme-react.git
cd morpheme-react
npm installnpm run devnpm run buildnpm run testMIT
For more detailed documentation and examples, please visit our documentation site (coming soon).