Framework recipes

Every integration follows one rule: register Orbz once in browser code, then render and control the literal <orb-z> custom element. Framework adapters are not part of the package.

Vanilla JavaScript


import "@neongate-ai/orbz/browser";
import type { OrbzElement } from "@neongate-ai/orbz";
 
const orb = document.querySelector<OrbzElement>("orb-z");
if (orb) orb.state = "listening";


<orb-z state="idle" preset="neongate" size="300px"></orb-z>

React


import "@neongate-ai/orbz/browser";
import { useState } from "react";
import type { OrbzState } from "@neongate-ai/orbz";
 
export function Assistant() {
  const [state, setState] = useState<OrbzState>("idle");
 
  return (
    <>
      <orb-z state={state} preset="neongate" size="300px" />
      <button onClick={() => setState("listening")}>Listen</button>
    </>
  );
}

Declare orb-z in React.JSX.IntrinsicElements as shown in the React and Next.js guide.

Next.js


"use client";
 
import "@neongate-ai/orbz/browser";
 
export function AssistantPresence() {
  return <orb-z state="thinking" preset="neongate" size="300px" />;
}

Vue


import "@neongate-ai/orbz/browser";
import { createApp } from "vue";
import App from "./App.vue";
 
createApp(App).mount("#app");


<orb-z :state="state" :size="`${size}px`" preset="neongate" />

Svelte


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


<orb-z {state} size={`${size}px`} preset="neongate"></orb-z>

Angular

Import registration before bootstrap and enable the custom-elements schema:


import "@neongate-ai/orbz/browser";
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 
@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: "app-root",
  template: `<orb-z [attr.state]="state" preset="neongate"></orb-z>`
})
export class AppComponent {
  state = "idle";
}

The live examples preserve the same interface and layout while using each framework’s native state model.