Primeiros passos

Orbz publica uma primitiva de interface: o elemento personalizado nativo <orb-z>. Todos os frameworks renderizam essa mesma tag. Não há adaptador de componente React, Vue, Svelte ou Angular.

Instalação


pnpm add @neongate-ai/orbz


npm install @neongate-ai/orbz

Escolha um ponto de entrada

Importação	Uso	Efeito colateral
`@neongate-ai/orbz/browser`	Aplicações de navegador em qualquer framework	Define `<orb-z>` uma vez
`@neongate-ai/orbz/react-types`	Tipagem JSX opcional para `<orb-z>` em React/Next.js	Nenhum
`@neongate-ai/orbz`	Tipos, constantes, adaptadores, utilitários e registro explícito	Nenhum
`@neongate-ai/orbz/standalone`	CDN ou carregamento independente no navegador	Define `<orb-z>` uma vez
`@neongate-ai/orbz/index.css`	Inspeção ou ferramentas para a folha de estilos embutida	Nenhum

Renderize o elemento


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


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

A entrada do navegador é protegida e idempotente. Importá-la várias vezes não redefine a tag.

React e Next.js

Importe a entrada do navegador no código cliente e renderize a tag literal:


"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"
    />
  );
}

Projetos TypeScript podem importar @neongate-ai/orbz/react-types uma vez para adicionar orb-z a React.JSX.IntrinsicElements sem criar um componente wrapper.

Ative a fala explicitamente

Conectar o elemento não produz som. Forneça speech ou talkFlow do host, configure um mecanismo e chame startTalking() a partir de uma ação do usuário. No pacote instalado 1.0.3, WebSpeechAdapter usa pt-BR por padrão; defina language conforme o texto, como en-US nos exemplos em inglês. O adaptador aguarda a lista de vozes, mas não garante uma voz instalada.

Continue em Componente web nativo, React e Next.js ou Voz e execução de conversas.