Getting started

Orbz publishes one UI primitive: the native <orb-z> custom element. Every framework renders that same tag. There is no React, Vue, Svelte, or Angular component adapter.

Install


pnpm add @neongate-ai/orbz


npm install @neongate-ai/orbz

Choose an entry point

Import	Use it for	Side effect
`@neongate-ai/orbz/browser`	Browser applications in any framework	Defines `<orb-z>` once
`@neongate-ai/orbz/react-types`	Optional React/Next.js JSX typing for `<orb-z>`	None
`@neongate-ai/orbz`	Types, constants, adapters, helpers, and explicit registration	None
`@neongate-ai/orbz/standalone`	CDN or self-contained browser loading	Defines `<orb-z>` once
`@neongate-ai/orbz/index.css`	Inspecting or tooling around the embedded source stylesheet	None

Render the element


import "@neongate-ai/orbz/browser";


<orb-z
  state="idle"
  preset="neongate"
  size="300px"
  speed="1"
  reduced-motion="system"
></orb-z>

The browser entry is guarded and idempotent. Importing it more than once does not redefine the tag.

React and Next.js

Use the browser entry from client code and render the literal tag:


"use client";
 
import "@neongate-ai/orbz/react-types";
import "@neongate-ai/orbz/browser";
import type { OrbzState } from "@neongate-ai/orbz";
 
interface AssistantPresenceProps {
  state: OrbzState;
}
 
export function AssistantPresence(props: AssistantPresenceProps) {
  return (
    <orb-z
      state={props.state}
      preset="neongate"
      size="300px"
      reduced-motion="system"
    />
  );
}

TypeScript projects can import @neongate-ai/orbz/react-types once to add orb-z to React.JSX.IntrinsicElements without creating a framework wrapper component.

Automatic talk startup

The element schedules its talk flow after its first connected render. The built-in WebSpeechAdapter requests en-US, waits for the browser voice list, and prefers an English voice. A browser may still require user activation for audio; in that case Orbz retries the flow after the first pointer, keyboard, or touch interaction.

Continue with Native web component, React and Next.js, or the Voice and talk runtime.