Customizable AI voice web component

One voice component. Every framework.

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 GitHub

Native custom element
Closed Shadow DOM
SSR-safe entry points

A small visual contract with a wide reach.

Your product owns audio, models, transcripts, controls, and business logic. Orbz owns one thing: a polished visual state for the voice experience. That narrow boundary is what lets it cross framework, team, and microfrontend boundaries cleanly.

Framework-neutral by designStandards are the integration layer. Framework adapters remain optional conveniences.Read the philosophy →Strict, intentional appearanceChoose a built-in preset or five custom color attributes, with no open styling escape hatch.Configure appearance →Motion that respects peoplePause explicitly or follow the user’s reduced-motion preference without changing app logic.Understand motion →

See the same component everywhere.

Each showcase uses its framework’s native state and event model while presenting the same Orbz interface. The examples make integration differences visible without turning those differences into component differences.

Vanilla ↗React ↗Vue ↗Svelte ↗Angular ↗Next.js ↗

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" preset="neongate" size="300px"></orb-z>

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