npm package: @jutech-devs/voice-agent-sdk
Description: Professional Voice Agent SDK that integrates with @jutech-devs/agent-sdk
Author: JuTech Devs
Latest version: 1.0.34

# @jutech-devs/voice-agent-sdk

Professional Voice Agent SDK that integrates seamlessly with [@jutech-devs/agent-sdk](https://www.npmjs.com/package/@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

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

## Quick Start

### React Component

```jsx
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: "john@example.com"
      }}
      primaryColor="#3b82f6"
      position="bottom-right"
      theme="light"
      title="Voice Assistant"
      subtitle="Click to start talking"
    />
  )
}
```

### JavaScript Class

```javascript
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: 'john@example.com'
  }
})

// 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](https://www.npmjs.com/package/@jutech-devs/agent-sdk):

```jsx
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:

```css
.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