@sista/vuic-react

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
      },
    },
  },
];

Register the functions with aiAssistant.registerFunctions(..); inside a useEffect hook.

  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} />

Modify AI Responses

Customize AI assistant behavior via the Admin Panel by providing your custom prompt and training data.

Change Assistant Voice

Change AI assistant's voice via the Admin Panel by selecting your preferred voice in the application settings.

Unlock the Future with our advacned Voice UI Assistant: Embrace top-tier components:

• Voice UI Controller
• Natural Language Understanding Engine
• Text-to-Executable Translator
• Audio-to-Text / Text-to-Audio Conversion
• Intent Recognition and Handling
• Contextual Response Generator
• Custom Prompt Configuration
• Analytics and Logging
• Privacy and Security

Contributing

Your contributions are warmly welcomed! Let's collaborate 🤝

License

Licensed under CC BY-NC-ND 3.0.

Support

For issues, raise on Github or contact [e-mail].