フレームワーク別の実装例

すべての連携で守るルールは一つです。ブラウザーのコードで Orbz を一度登録し、<orb-z> カスタム要素をそのまま表示して制御します。フレームワーク用アダプターはパッケージに含まれていません。

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" 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} size="300px" />
      <button type="button" onClick={() => setState("listening")}>Listen</button>
    </>
  );
}

React と Next.js のガイドに従い、React.JSX.IntrinsicElements に orb-z を宣言します。

Next.js


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

Vue

アプリケーションのエントリーポイントで登録し、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`" />

Svelte


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


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

Angular

起動処理の前に登録用エントリーをインポートし、カスタム要素のスキーマを有効にします。


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"></orb-z>`
})
export class AppComponent {
  state = "idle";
}

公開されているサンプルは、各フレームワーク固有の状態モデルを使いながら、同じインターフェースとレイアウトを維持しています。