はじめに

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 を一度インポートすると、ラッパーを作らずに React.JSX.IntrinsicElements へ orb-z を追加できます。

音声を明示的に有効にする

接続時は無音です。ホストの speech または talkFlow と音声エンジンを設定し、ユーザー操作から startTalking() を呼びます。導入済みの 1.0.3 では WebSpeechAdapter の既定は pt-BR です。英語例なら en-US のように文に合う language を明示します。音声一覧の読み込みは待ちますが、必要な音声の導入は保証できません。

ネイティブ Web コンポーネント、React と Next.js、音声と会話ランタイムへ進んでください。