入门

Orbz 只发布一个 UI 基础组件：原生自定义元素 <orb-z>。所有框架都渲染同一标签，没有 React、Vue、Svelte 或 Angular 组件适配器。

安装


pnpm add @neongate-ai/orbz


npm install @neongate-ai/orbz

选择入口

导入	用途	副作用
`@neongate-ai/orbz/browser`	任意框架的浏览器应用	定义一次 `<orb-z>`
`@neongate-ai/orbz/react-types`	React/Next.js 可选的 `<orb-z>` JSX 类型	无
`@neongate-ai/orbz`	类型、常量、适配器、工具和显式注册	无
`@neongate-ai/orbz/standalone`	CDN 或独立浏览器加载	定义一次 `<orb-z>`
`@neongate-ai/orbz/index.css`	检查内嵌源码样式表或用于相关工具	无

渲染元素


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


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

浏览器入口具有保护机制且幂等，多次导入不会重复定义标签。

React 与 Next.js

在客户端代码中使用浏览器入口，并直接渲染原始标签：


"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 项目可导入一次 @neongate-ai/orbz/react-types，将 orb-z 添加到 React.JSX.IntrinsicElements，无需创建框架包装组件。

主动启用语音

连接元素时保持静音。宿主提供 speech 或 talkFlow、配置引擎，并从用户触发的控件调用 startTalking()。已安装的 1.0.3 中，WebSpeechAdapter 默认使用 pt-BR；应明确设置与文本匹配的 language，如英语示例中的 en-US。适配器等待浏览器语音列表，但无法保证所需声音已安装。

继续阅读原生 Web 组件、React 与 Next.js或语音与对话运行时。