{"_id":"@agoai/vp-ui","_rev":"4-a4000e034d8518ceb7bfa5f6f298c593","name":"@agoai/vp-ui","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@agoai/vp-ui","version":"0.0.1","keywords":["voice","ui","component","ageofai","react"],"author":{"name":"Age Of AI"},"license":"MIT","_id":"@agoai/vp-ui@0.0.1","maintainers":[{"name":"melexdev","email":"melexchi@gmail.com"},{"name":"incenix","email":"davidayoa11@gmail.com"}],"dist":{"shasum":"5df91c737c40e781858f6c5645e5913740a53174","tarball":"https://registry.npmjs.org/@agoai/vp-ui/-/vp-ui-0.0.1.tgz","fileCount":9,"integrity":"sha512-2DLr+kkl8j1+tI9Z1wFGWBlgHWZTMLqqneS2+cfvoeoUVwgv4JLQr6yKh27vrzxXG1itD+5pVHhLeLvjB0PMTA==","signatures":[{"sig":"MEUCIQCUAD5PH30N7UjlC7xso5lIFCFxXaxQXRcdO8BDWhU2GgIgDJAsZe/q/9Igy35K87izYxjAkfZnqMhO86rSg2wXQxg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":189498},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"899c015eda489b1b2b93677b98a53bf67fea3336","scripts":{"dev":"tsup --watch --config tsup.config.ts","build":"tsup --config tsup.config.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"melexdev","email":"melexchi@gmail.com"},"_npmVersion":"10.8.1","description":"A reusable voice UI component","directories":{},"_nodeVersion":"20.15.0","dependencies":{"lucide-react":"^0.539.0","html-to-image":"^1.11.11","@pipecat-ai/client-js":"^1.2.0","@pipecat-ai/client-react":"^1.0.1","@pipecat-ai/small-webrtc-transport":"^1.2.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","react":"^19.1.1","react-dom":"^19.1.1","typescript":"^5","@types/react":"^19","@types/react-dom":"^19"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/vp-ui_0.0.1_1756575571467_0.1911062123371967","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@agoai/vp-ui","version":"0.0.2","keywords":["voice","ui","component","ageofai","react"],"author":{"name":"Age Of AI"},"license":"MIT","_id":"@agoai/vp-ui@0.0.2","maintainers":[{"name":"melexdev","email":"melexchi@gmail.com"},{"name":"incenix","email":"davidayoa11@gmail.com"}],"dist":{"shasum":"98152a3f47747ac2d28cb1642b163a52a2ffabe4","tarball":"https://registry.npmjs.org/@agoai/vp-ui/-/vp-ui-0.0.2.tgz","fileCount":9,"integrity":"sha512-OFode216FQ6TlXb6YiahfNJ2TbRYtBskPVykElR4noq7xwecafr8ZdoNamK+hHYZBBlROq0FFSK2vjPm3vwEQg==","signatures":[{"sig":"MEUCIEASuBelto/XTH5nKcMMyZvAf9N+yDEppSz4nbnQ4ywXAiEA6aQRGvehmx6cnXJSmxCW1EE70b2Yk4Zxrzn3xwbW/Ls=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":187557},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"9307a77299fd52d1679aa6203d1408aaca72b9ac","scripts":{"dev":"tsup --watch --config tsup.config.ts","build":"tsup --config tsup.config.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"melexdev","email":"melexchi@gmail.com"},"_npmVersion":"10.8.1","description":"A reusable voice UI component","directories":{},"_nodeVersion":"20.15.0","dependencies":{"lucide-react":"^0.539.0","html-to-image":"^1.11.11","@pipecat-ai/client-js":"^1.2.0","@pipecat-ai/client-react":"^1.0.1","@pipecat-ai/small-webrtc-transport":"^1.2.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","react":"^19.1.1","react-dom":"^19.1.1","typescript":"^5","@types/react":"^19","@types/react-dom":"^19"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/vp-ui_0.0.2_1756584242835_0.7121358037984469","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@agoai/vp-ui","version":"0.0.3","keywords":["voice","ui","component","ageofai","react"],"author":{"name":"Age Of AI"},"license":"MIT","_id":"@agoai/vp-ui@0.0.3","maintainers":[{"name":"melexdev","email":"melexchi@gmail.com"},{"name":"incenix","email":"davidayoa11@gmail.com"}],"dist":{"shasum":"892a5aa188736beb4265378ca58314e95abdfc2b","tarball":"https://registry.npmjs.org/@agoai/vp-ui/-/vp-ui-0.0.3.tgz","fileCount":9,"integrity":"sha512-eMZVbBfGyDEfBrWAyg28IGrujvRwKoUTnPWYq1yT4nwlgWvhqfiEXqqBXF8s5VspmPkZliHNCUBVeN54Ww2I6A==","signatures":[{"sig":"MEYCIQC++ifNK1nj4A0thAPRLyX7rTaa31lpVGg1SN9AvtkE0QIhAKlRtQQ2JIx3G0eMss5uta4KJltym2vMTjKk8F1gkcnN","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":187548},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"cdcebc07885ab31f20d7e18787077cb3c8dcf9ea","scripts":{"dev":"tsup --watch --config tsup.config.ts","build":"tsup --config tsup.config.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"melexdev","email":"melexchi@gmail.com"},"_npmVersion":"10.8.1","description":"A reusable voice UI component","directories":{},"_nodeVersion":"20.15.0","dependencies":{"lucide-react":"^0.539.0","html-to-image":"^1.11.11","@pipecat-ai/client-js":"^1.2.0","@pipecat-ai/client-react":"^1.0.1","@pipecat-ai/small-webrtc-transport":"^1.2.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","react":"^19.1.1","react-dom":"^19.1.1","typescript":"^5","@types/react":"^19","@types/react-dom":"^19"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/vp-ui_0.0.3_1756756452248_0.6848164114873354","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-08-30T17:39:31.342Z","modified":"2025-09-02T11:24:38.277Z","0.0.1":"2025-08-30T17:39:31.669Z","0.0.2":"2025-08-30T20:04:03.040Z","0.0.3":"2025-09-01T19:54:12.439Z"},"author":{"name":"Age Of AI"},"license":"MIT","keywords":["voice","ui","component","ageofai","react"],"description":"A reusable voice UI component","maintainers":[{"email":"melexchi@gmail.com","name":"melexdev"},{"email":"davidayoa11@gmail.com","name":"incenix"},{"email":"rockyxcoded@gmail.com","name":"rockyxcoded"}],"readme":"# @ageofai/vp-ui\r\n\r\n✨ **@ageofai/vp-ui** is a beautiful, reusable **voice interface component** for React applications.  \r\nIt features **real-time audio visualization**, **live transcription**, and **seamless integration** with AI voice servers.\r\n\r\n---\r\n\r\n## 🚀 Features\r\n\r\n- 🎤 **Real-time Voice Interface** – Connect and communicate with AI agents via voice  \r\n- 🎨 **Audio Visualization** – Dynamic orb that responds to audio levels  \r\n- 📝 **Live Transcription** – Real-time display of conversation transcripts  \r\n- 🎯 **Highly Customizable** – Style and behavior flexibility  \r\n- 🌙 **Theme Support** – Dark and light mode out of the box  \r\n- 📱 **Responsive Design** – Works on mobile, tablet, and desktop  \r\n- 🔧 **TypeScript Ready** – Full type safety and IntelliSense support  \r\n- 🎛️ **Advanced Hook** – Use `useAgeOfAiConnect` for custom implementations  \r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @agoai/vp-ui\r\n```\r\n\r\n---\r\n\r\n## ⚡ Quick Start\r\n\r\n```tsx\r\nimport { VoiceUI } from '@ageofai/vp-ui';\r\n\r\nfunction App() {\r\n  return (\r\n    <VoiceUI\r\n      serverUrl=\"http://localhost:8099\"\r\n      systemPrompt=\"You are a helpful assistant.\"\r\n      theme=\"dark\"\r\n      size=\"md\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## ⚙️ Configuration\r\n\r\n### Basic Setup\r\n\r\n```tsx\r\n<VoiceUI\r\n  serverUrl=\"http://localhost:8099\"\r\n  systemPrompt=\"You are a helpful AI assistant.\"\r\n  authToken=\"your-auth-token\"\r\n  agentId=\"your-agent-id\"\r\n  enableMic={true}\r\n  enableCam={false}\r\n  debug={true}\r\n/>\r\n```\r\n\r\n### Theme & Size Options\r\n\r\n```tsx\r\n<VoiceUI\r\n  serverUrl=\"http://localhost:8099\"\r\n  theme=\"light\"        // 'dark' | 'light'\r\n  size=\"lg\"            // 'sm' | 'md' | 'lg'\r\n/>\r\n```\r\n\r\n### UI Controls\r\n\r\n```tsx\r\n<VoiceUI\r\n  serverUrl=\"http://localhost:8099\"\r\n  showInfo={true}        // Show info button\r\n  showShare={true}       // Show share button\r\n  showTranscript={true}  // Show transcript toggle\r\n/>\r\n```\r\n\r\n---\r\n\r\n## 🎨 Styling\r\n\r\n### Custom CSS Classes\r\n\r\n```tsx\r\n<VoiceUI\r\n  serverUrl=\"http://localhost:8099\"\r\n  className=\"border border-gray-300 rounded-lg shadow-lg\"\r\n  orbClassName=\"ring-4 ring-blue-500 shadow-2xl\"\r\n  controlsClassName=\"gap-6 mt-4\"\r\n  transcriptClassName=\"bg-gray-100 rounded-lg p-4\"\r\n/>\r\n```\r\n\r\n### Event Handlers\r\n\r\n```tsx\r\n<VoiceUI\r\n  serverUrl=\"http://localhost:8099\"\r\n  onShare={() => {\r\n    navigator.clipboard.writeText('Check out this amazing voice UI!');\r\n    alert('Link copied to clipboard!');\r\n  }}\r\n  onInfoClick={() => {\r\n    console.log('Custom info handler');\r\n  }}\r\n/>\r\n```\r\n\r\n### Custom Info Content\r\n\r\n```tsx\r\n<VoiceUI\r\n  serverUrl=\"http://localhost:8099\"\r\n  infoTitle=\"My Custom Voice Assistant\"\r\n  infoDescription=\"This is a custom voice interface powered by AI.\"\r\n/>\r\n```\r\n\r\n---\r\n\r\n## 🔥 Examples\r\n\r\n### Minimal Setup\r\n\r\n```tsx\r\nimport { VoiceUI } from '@agoai/vp-ui';\r\n\r\nexport default function MinimalVoice() {\r\n  return (\r\n    <VoiceUI\r\n      serverUrl=\"http://localhost:8099\"\r\n      showInfo={false}\r\n      showShare={false}\r\n      showTranscript={false}\r\n      size=\"sm\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Full-Featured Implementation\r\n\r\n```tsx\r\nimport { VoiceUI } from '@@agoai/vp-ui';\r\n\r\nexport default function FullVoice() {\r\n  const handleShare = () => {\r\n    navigator.clipboard.writeText('Check out this amazing voice UI!');\r\n    alert('Link copied to clipboard!');\r\n  };\r\n\r\n  const handleInfo = () => {\r\n    console.log('Custom info handler');\r\n  };\r\n\r\n  return (\r\n    <VoiceUI\r\n      serverUrl=\"http://localhost:8099\"\r\n      systemPrompt=\"You are a knowledgeable AI assistant.\"\r\n      authToken=\"your-auth-token\"\r\n      theme=\"dark\"\r\n      size=\"lg\"\r\n      className=\"max-w-2xl mx-auto border border-gray-700 rounded-2xl\"\r\n      orbClassName=\"ring-4 ring-blue-500/50 shadow-2xl shadow-blue-500/25\"\r\n      controlsClassName=\"gap-8 mt-6\"\r\n      transcriptClassName=\"max-h-64 overflow-y-auto bg-gray-900/50 rounded-lg p-4\"\r\n      showInfo={true}\r\n      showShare={true}\r\n      showTranscript={true}\r\n      onShare={handleShare}\r\n      onInfoClick={handleInfo}\r\n      infoTitle=\"AI Voice Assistant\"\r\n      infoDescription=\"Powered by advanced AI technology for natural conversations.\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🛠️ Using the Hook Separately\r\n\r\nFor custom implementations, use the `useAgeOfAiConnect` hook:\r\n\r\n```tsx\r\nimport { useAgeOfAiConnect } from '@agoai/vp-ui';\r\n\r\nfunction CustomVoiceInterface() {\r\n  const {\r\n    client,\r\n    isConnected,\r\n    isConnecting,\r\n    transcript,\r\n    isBotSpeaking,\r\n    isUserSpeaking,\r\n    connect,\r\n    disconnect,\r\n    sendMessage,\r\n    sendVoiceMode,\r\n    clearTranscript,\r\n  } = useAgeOfAiConnect({\r\n    serverUrl: 'http://localhost:8099',\r\n    systemPrompt: 'You are a helpful assistant.',\r\n    enableMic: true,\r\n    enableCam: false,\r\n    debug: true,\r\n    authToken: 'your-auth-token',\r\n    agentId: 'your-agent-id',\r\n  });\r\n\r\n  return (\r\n    <div className=\"voice-interface\">\r\n      <button \r\n        onClick={isConnected ? disconnect : connect}\r\n        disabled={isConnecting}\r\n        className=\"px-4 py-2 bg-blue-500 text-white rounded\"\r\n      >\r\n        {isConnecting ? 'Connecting...' : isConnected ? 'Disconnect' : 'Connect'}\r\n      </button>\r\n      \r\n      <div className=\"status\">\r\n        <p>Bot Speaking: {isBotSpeaking ? 'Yes' : 'No'}</p>\r\n        <p>User Speaking: {isUserSpeaking ? 'Yes' : 'No'}</p>\r\n      </div>\r\n\r\n      <button \r\n        onClick={() => sendMessage('Hello, how are you?')}\r\n        disabled={!isConnected}\r\n        className=\"px-4 py-2 bg-green-500 text-white rounded\"\r\n      >\r\n        Send Message\r\n      </button>\r\n\r\n      <button \r\n        onClick={clearTranscript}\r\n        className=\"px-4 py-2 bg-red-500 text-white rounded\"\r\n      >\r\n        Clear Transcript\r\n      </button>\r\n      \r\n      {transcript.length > 0 && (\r\n        <div className=\"transcript mt-4\">\r\n          {transcript.map((msg, i) => (\r\n            <div\r\n              key={msg.id || i}\r\n              className={`message p-2 mb-2 rounded ${\r\n                msg.role === 'user' ? 'bg-blue-100' : 'bg-gray-100'\r\n              }`}\r\n            >\r\n              <strong>{msg.role}:</strong> {msg.content}\r\n              {!msg.final && (\r\n                <span className=\"text-xs text-gray-500 ml-2\">(interim)</span>\r\n              )}\r\n            </div>\r\n          ))}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 📖 API Reference\r\n\r\n### VoiceUI Props\r\n\r\n```tsx\r\ninterface VoiceUIProps {\r\n  // Connection & AI\r\n  serverUrl?: string;\r\n  systemPrompt?: string;\r\n  authToken?: string;\r\n  agentId?: string;\r\n  enableMic?: boolean;\r\n  enableCam?: boolean;\r\n  debug?: boolean;\r\n\r\n  // Styling\r\n  className?: string;\r\n  orbClassName?: string;\r\n  controlsClassName?: string;\r\n  transcriptClassName?: string;\r\n\r\n  // UI Features\r\n  showInfo?: boolean;\r\n  showShare?: boolean;\r\n  showTranscript?: boolean;\r\n\r\n  // Appearance\r\n  size?: 'sm' | 'md' | 'lg';\r\n  theme?: 'dark' | 'light';\r\n\r\n  // Event Handlers\r\n  onShare?: () => void;\r\n  onInfoClick?: () => void;\r\n\r\n  // Content\r\n  infoTitle?: string;\r\n  infoDescription?: string;\r\n}\r\n```\r\n\r\n### useAgeOfAiConnect Hook\r\n\r\n```tsx\r\nconst {\r\n  // State\r\n  client,\r\n  isConnected,\r\n  isConnecting,\r\n  transportState,\r\n  error,\r\n  transcript,\r\n  isBotSpeaking,\r\n  isUserSpeaking,\r\n\r\n  // Actions\r\n  connect,\r\n  disconnect,\r\n  sendMessage,\r\n  sendVoiceMode,\r\n  clearTranscript,\r\n} = useAgeOfAiConnect(options);\r\n```\r\n\r\n### Transcript Message Format\r\n\r\n```tsx\r\ninterface TranscriptMessage {\r\n  id: string;\r\n  role: 'user' | 'assistant';\r\n  content: string;\r\n  timestamp: Date;\r\n  final?: boolean;\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🔧 Troubleshooting\r\n\r\n### Common Issues\r\n\r\n**Microphone not working:**\r\n```tsx\r\n// Check permissions\r\nnavigator.permissions.query({ name: 'microphone' })\r\n  .then(result => console.log('Mic permission:', result.state));\r\n```\r\n\r\n**Connection failures:**\r\n```bash\r\n# Test server connectivity\r\ncurl -X GET http://localhost:8099/health\r\n```\r\n\r\n**Debug mode:**\r\n```tsx\r\n<VoiceUI debug={true} /> // Enables detailed console logging\r\n```\r\n\r\n---\r\n\r\n## 📘 TypeScript Support\r\n\r\n```tsx\r\nimport { \r\n  VoiceUI, \r\n  useAgeOfAiConnect, \r\n  VoiceUIProps, \r\n  TranscriptMessage \r\n} from '@agoai/vp-ui';\r\n\r\nconst voiceProps: VoiceUIProps = {\r\n  serverUrl: 'http://localhost:8099',\r\n  theme: 'dark',\r\n  size: 'lg',\r\n  onShare: () => console.log('Shared!')\r\n};\r\n```\r\n\r\n---\r\n\r\n## 📋 Requirements\r\n\r\n- **React**: `18.0.0+`  \r\n- **Node.js**: `16.0.0+`  \r\n- **Tailwind CSS**: (Recommended for styling)  \r\n\r\n---\r\n\r\n## 🤝 Contributing\r\n\r\n1. Fork the repository  \r\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)  \r\n3. Commit your changes (`git commit -m 'Add amazing feature'`)  \r\n4. Push to the branch (`git push origin feature/amazing-feature`)  \r\n5. Open a Pull Request  \r\n\r\n---\r\n\r\n## 🆘 Support\r\n\r\n- 🐛 [Issue Tracker](https://github.com/ageofai/vp-ui/issues)  \r\n- 💬 [Discussions](https://github.com/ageofai/vp-ui/discussions)  \r\n- 📧 Email: **support@ageofai.com**  \r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nMIT License – see the [LICENSE](LICENSE) file for details.","readmeFilename":"README.md"}