@sista/vuic-react NPM

Voice UI Assistant

Turn your App into an AI-powered, Voice-controlled interface in less than 10 minutes!

No Code Changes or Intent Definitions! Just add our magic button <AiAssistantButton />.

Sista AI: 🤖 Your AI Integration Platform. ❤️

Features at a Glance:

UI Controller: Performs any action
Voice UI: Speaks any language
AI Assistant: Answers any question
Admin Panel: Customizes any detail

Demo

Try it now!

Visit our Demo click the button, and start talking... Say "turn the light on"!__

Supported Projects

This package integrates with many React projects.

Create React App
React Native
Next.js
Gatsby
Electron
Meteor
Parcel
Expo
Remix
Storybook
RedwoodJS
Blitz.js

Installation

To use @sista/vuic-react, install it in your React App.

Using npm:

npm install @sista/vuic-react

Using yarn:

yarn add @sista/vuic-react

Setup

1. Import Provider

Import AiAssistantProvider and wrap your App at the root level.

// ...
import { AiAssistantProvider } from "@sista/vuic-react";

ReactDOM.render(
  <React.StrictMode>
    <AiAssistantProvider apiKey="YOUR_API_KEY"> // << Wrap your app with this provider
      <App />
    </AiAssistantProvider>
  </React.StrictMode>,
  // ...
);

Get your free API key from the Admin Panel and replace "YOUR_API_KEY".

2. Import Button

Import AiAssistantButton and add it wherever you want.

// ...
import { AiAssistantButton } from "@sista/vuic-react";

// ...
function MyComponent() {
  return (
    <div>
      // ...
      <AiAssistantButton />  // << Add the magic button anywhere
    </div>
  );
}

🎉 Congrats! Press the button, start talking, and enjoy!

3. Register Voice-Interactive Functions

To make your UI voice-interactive, simply register an array of function signatures to the Sista AI model.

const sayHelloWorld = () => {
  console.log("Hello, World!");
};

// Define the functions to be voice-controlled
const interactiveFunctions = [
  {
    function: {
      handler: sayHelloWorld, // pass a refference to your function
      description: "Greets the user with Hello World :)", // add function description
    },
  },
  // ... register additional functions here
];

For functions that accepts parameters:

const sayHello = (name) => {
  console.log(`Hello ${name}!`);
};

// Define the functions to be voice-controlled
const interactiveFunctions = [
  {
    function: {
      handler: sayHello,
      description: "Greets the user with their name.",
      // In case your function accepts parameters:
      parameters: {
        type: "object",
        properties: {
          name: { 
            type: "string", // set parameter type
            description: "User's name." // add parameter description
          },
        },
        required: ["name"], // list required parameters
      },
    },
  },
];

  const aiAssistant = useAiAssistant();
  useEffect(() => {
    if (aiAssistant) {
      aiAssistant.registerFunctions(interactiveFunctions);
    }
  }, [aiAssistant]);

Just like that, your app is voice-interactive. Magic! :sparkles:

To customize the AI assistant's voice or feed information about your product, visit the Admin Panel.

Full Example: (Todo App)

For a voice-interactive todo app to add or remove tasks, the setup is:

import React, { useEffect } from 'react';
import { useAiAssistant, AiAssistantButton } from '@sista/vuic-react';

function TodoApp() {

  const addTask = (task) => {
    console.log(`Task added: ${task}`);
  };

  const removeTask = (task) => {
    console.log(`Task removed: ${task}`);
  };

  // ...

  // Initialize the aiAssistant instance
  const aiAssistant = useAiAssistant();

  useEffect(() => {
    // Define the voice-controlled functions
    const interactiveFunctions = [
      {
        function: {
          handler: addTask,
          description: 'Adds a new task.',
          parameters: {
            type: 'object',
            properties: {
              task: { 
                type: 'string', 
                description: 'Description of the task.' 
              },
            },
            required: ['task'],
          },
        },
      },
      {
        function: {
          handler: removeTask,
          description: 'Removes an existing task.',
          parameters: {
            type: 'object',
            properties: {
              task: { 
                type: 'string', 
                description: 'Description of the task.' 
              },
            },
            required: ['task'],
          },
        },
      },
    ];

    // Register the AI controlled functions
    if (aiAssistant) {
      aiAssistant.registerFunctions(interactiveFunctions);
    }
  }, [aiAssistant]);

  // ...

  return (
    <div>
      // ...
      <AiAssistantButton />
    </div>
  );
}

export default TodoApp;

Configuration

AiAssistantProvider accepts few props:

<AiAssistantProvider
  apiKey="api-key"   // (required): Your API key.
  debug={true}       // (optional): Enables debug mode.
  apiUrl="api-url"   // (optional): For custom backend or testing purposes.
>
  // ...
</AiAssistantProvider>

Customization

Change Button Color

You can modify the colors of the AiAssistantButton at different states:

    const colors = {
        STATE_IDLE: '#4a6cf6', // Default
        STATE_LISTENING_START: '#F64A7B', // Red
        STATE_THINKING_START: '#4ac2f6', // Blue
        STATE_SPEAKING_START: '#4af67f', // Green
    };

  <AiAssistantButton buttonColors={colors} />