Bắt đầu

Orbz cung cấp một thành phần UI cơ bản: phần tử tùy chỉnh gốc <orb-z>. Mọi framework hiển thị cùng thẻ đó, không có bộ chuyển đổi thành phần React, Vue, Svelte hoặc Angular.

Cài đặt


pnpm add @neongate-ai/orbz


npm install @neongate-ai/orbz

Chọn điểm vào

Import	Mục đích	Tác dụng phụ
`@neongate-ai/orbz/browser`	Ứng dụng trình duyệt dùng mọi framework	Định nghĩa `<orb-z>` một lần
`@neongate-ai/orbz/react-types`	Kiểu JSX tùy chọn cho `<orb-z>` trong React/Next.js	Không
`@neongate-ai/orbz`	Kiểu, hằng số, adapter, tiện ích và đăng ký tường minh	Không
`@neongate-ai/orbz/standalone`	CDN hoặc tải độc lập trong trình duyệt	Định nghĩa `<orb-z>` một lần
`@neongate-ai/orbz/index.css`	Kiểm tra hoặc dùng công cụ với bảng định kiểu nguồn nhúng	Không

Hiển thị phần tử


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


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

Điểm vào trình duyệt có cơ chế bảo vệ và tính lũy đẳng. Import nhiều lần không định nghĩa lại thẻ.

React và Next.js

Dùng điểm vào trình duyệt từ mã phía máy khách và hiển thị trực tiếp thẻ:


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

Dự án TypeScript có thể import @neongate-ai/orbz/react-types một lần để thêm orb-z vào React.JSX.IntrinsicElements mà không cần tạo thành phần bọc cho framework.

Chủ động bật giọng nói

Kết nối phần tử không phát âm thanh. Cung cấp speech hoặc talkFlow của ứng dụng, cấu hình bộ máy rồi gọi startTalking() từ thao tác người dùng. Trong gói 1.0.3, WebSpeechAdapter mặc định dùng pt-BR; đặt language khớp văn bản, chẳng hạn en-US cho ví dụ tiếng Anh. Adapter chờ danh sách giọng nhưng không bảo đảm giọng yêu cầu đã được cài.

Đọc tiếp Thành phần web gốc, React và Next.js hoặc Giọng nói và runtime hội thoại.