@jutech-devs/voice-agent-sdk

@jutech-devs/voice-agent-sdk

Professional Voice Agent SDK that integrates seamlessly with @jutech-devs/agent-sdk.

Features

• 🎤 Voice-to-Text: Web Speech API integration
• 🔊 Text-to-Speech: Natural voice responses
• 🎯 Agent Integration: Works with existing chat agents
• 📱 Responsive UI: Beautiful voice interface
• 🎨 Customizable: Themes, colors, and positioning
• 🔄 Real-time: Live transcription and responses

Installation

npm install @jutech-devs/voice-agent-sdk

Quick Start

React Component

import { VoiceWidget } from '@jutech-devs/voice-agent-sdk'

function App() {
  return (
    <VoiceWidget
      apiKey="your-api-key"
      agentId="your-agent-id"
      baseUrl="https://your-server.com"
      user={{
        id: "user123",
        name: "John Doe",
        email: "[e-mail]"
      }}
      primaryColor="#3b82f6"
      position="bottom-right"
      theme="light"
      title="Voice Assistant"
      subtitle="Click to start talking"
    />
  )
}

JavaScript Class

import { VoiceAgent } from '@jutech-devs/voice-agent-sdk'

const voiceAgent = new VoiceAgent('your-api-key', {
  agentId: 'your-agent-id',
  baseUrl: 'https://your-server.com',
  user: {
    id: 'user123',
    name: 'John Doe',
    email: '[e-mail]'
  }
})

// Event listeners
voiceAgent.on('onConnect', () => {
  console.log('Connected to voice agent')
})

voiceAgent.on('onTranscript', (text, isFinal) => {
  console.log('Transcript:', text, 'Final:', isFinal)
})

voiceAgent.on('onResponse', (text) => {
  console.log('Agent response:', text)
})

// Connect and start
await voiceAgent.connect()
await voiceAgent.startRecording()

API Reference

VoiceWidget Props

Prop	Type	Required	Default	Description
apiKey	string	✅	-	Your agent API key
agentId	string	✅	-	Agent ID to connect to
baseUrl	string	❌	http://localhost:3001	Server base URL
user	object	❌	-	User information
primaryColor	string	❌	#3b82f6	Primary theme color
position	string	❌	bottom-right	Widget position
theme	string	❌	light	UI theme
title	string	❌	Voice Assistant	Widget title
subtitle	string	❌	Click to start talking	Widget subtitle
autoStart	boolean	❌	false	Auto-connect on mount
showTranscript	boolean	❌	true	Show transcription
language	string	❌	en	Speech recognition language

VoiceAgent Methods

Method	Description
connect()	Connect to the agent
disconnect()	Disconnect from agent
startRecording()	Start voice recording
stopRecording()	Stop voice recording
sendText(text)	Send text message
mute()	Mute microphone
unmute()	Unmute microphone
on(event, callback)	Add event listener

Events

Event	Parameters	Description
onConnect	-	Connected to agent
onDisconnect	-	Disconnected from agent
onTranscript	text, isFinal	Speech transcription
onResponse	text	Agent response
onError	error	Error occurred

Integration with Agent SDK

This voice SDK works seamlessly with the regular @jutech-devs/agent-sdk:

import { AgentWidget } from '@jutech-devs/agent-sdk'
import { VoiceWidget } from '@jutech-devs/voice-agent-sdk'

function App() {
  const [showVoice, setShowVoice] = useState(false)
  
  return (
    <div>
      {/* Regular chat widget */}
      <AgentWidget
        apiKey="your-api-key"
        agentId="your-agent-id"
      />
      
      {/* Voice widget for same agent */}
      <VoiceWidget
        apiKey="your-api-key"
        agentId="your-agent-id"
        position="bottom-left"
      />
    </div>
  )
}

Styling

The voice widget includes beautiful default styles with CSS custom properties for easy customization:

.voice-widget {
  --vw-primary-color: #3b82f6;
  --vw-primary-hover: #2563eb;
}

Browser Support

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support
• Mobile: iOS Safari, Chrome Mobile

License

MIT © JuTech Devs