One Voice Web Component

Orbz gives voice assistants a visible pulse without choosing your application stack for you. Use the same strict custom element in a plain page, React, Next.js, Vue, Svelte, or Angular.

Get started →View on npm ↗

voice.jsJavaScript

import '@neongate-ai/orbz/browser'
const orb = document.querySelector('orb-z')

orb.voiceModel = {
  provider: 'openai-speech',
  endpoint: '/api/voice/speech',
  model: 'gpt-4o-mini-tts',
  voice: 'marin'
}
orb.speech = 'Hello from Orbz.'
// From your Speak button:
const speak = () => orb.startTalking()

Your server generates the speech. Provider keys stay on the server. Voice integration guide ↗

Preview a state

Make it yours

PrimarySecondaryAccentHighlightBackground

Size 100%

Your text input to Voice

Native custom element, no third-party libs
Closed Shadow DOM
SSR-safe entry points

Live componentidle

Model: gpt-4o-mini-tts
Voice: marin

Install once. Control it with public attributes.

Register the browser entry point, place <orb-z> in your markup, and drive it from the same state machine that drives your assistant. There is no theme provider, stylesheet, or framework runtime hidden inside the component.


pnpm add @neongate-ai/orbz


<script type="module">
  import "@neongate-ai/orbz/browser";
</script>
 
<orb-z state="listening" size="300px"></orb-z>

Ready for the details? Continue with Getting started, explore the live sandboxes, or read how Orbz works across microfrontend boundaries.