框架集成示例

所有集成都遵循一条规则：在浏览器代码中注册 Orbz 一次，然后直接渲染并控制 <orb-z> 自定义元素。软件包不包含框架适配器。

原生 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";
}

在线示例使用各框架原生的状态模型，同时保持相同的界面与布局。