@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: "[email protected]"
      }}
      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: '[email protected]'
  }
})

// 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