sandai-react

React components and utilities for the Sandai 3D AI Characters.

Installation

To use sandai-react, install it via npm:

npm install sandai-react

Components

AI3DCharacter

A React component that renders a 3D AI character using Sandai.

AI3DCharacter Props

| Prop | Type | Description | |--------------|---------------------------------|-------------| | url | string | The base URL for the Sandai AI 3D character chat interface. | | onLoad | (client: SandaiClient) => void | Callback function triggered when the SandaiClient is loaded. | | vrmUrl | string (optional) | URL for the VRM model to be loaded as the 3D character. | | voiceName | VoiceNames (optional) | Name of the voice to be used by the 3D character. | | showControls | boolean (optional) | Determines if controls should be displayed in the interface. |

AI3DCharacter Example Usage

import { AI3DCharacter } from "sandai-react";

const handleLoad = (client) => {
  console.log("Sandai Client Loaded", client);
};

<AI3DCharacter
  url="https://sandai.org/chat"
  onLoad={handleLoad}
  vrmUrl="https://example.com/model.vrm"
  voiceName="ruri"
  showControls={true}
/>

AI3DCharacterDocs

A React component that renders interactive documentation for functions exposed by the SandaiClient instance.

AI3DCharacterDocs Props

| Prop | Type | Description | |---------|------------------|-------------| | client | SandaiClient | The SandaiClient instance retrieved from the onLoad callback of AI3DCharacter. |

AI3DCharacterDocs Example Usage

import { AI3DCharacter, AI3DCharacterDocs } from "sandai-react";
import { useState } from "react";

const App = () => {
  const [client, setClient] = useState(null);

  return (
    <>
      <AI3DCharacter
        url="https://sandai.org/chat"
        onLoad={setClient}
        showControls
      />
      {client && <AI3DCharacterDocs client={client} />}
    </>
  );
};

FunctionTester

A reusable form component that dynamically generates input fields based on a schema and executes a function when submitted.

FunctionTester Props

| Prop | Type | Description | |--------|-----------------|-------------| | func | Function | The function to be tested, receiving input values as arguments. | | schema | SchemaType[] | An array of schema objects defining the function parameters. |

FunctionTester Example Usage

import { FunctionTester } from "sandai-react";

const myFunction = (name, age) => {
  console.log(`Name: ${name}, Age: ${age}`);
};

const schema = [
  { id: "name", type: "text", label: "Name" },
  { id: "age", type: "number", label: "Age" }
];

<FunctionTester func={myFunction} schema={schema} />;

Contributing

Contributions are welcome! If you have suggestions or find issues, feel free to open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.