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"
  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}
      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.

Opt in to speech

Connecting the element is silent. To start a talk flow, explicitly configure a voice engine and call startTalking() from a user-initiated control. The built-in WebSpeechAdapter requests en-US, waits for the browser voice list, and prefers an English voice.

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