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:

1npm install @sista/vuic-react

Using yarn:

1yarn add @sista/vuic-react

Setup

1. Import Provider

Import AiAssistantProvider and wrap your App at the root level.

1// ...
2import { AiAssistantProvider } from "@sista/vuic-react";
3
4ReactDOM.render(
5  <React.StrictMode>
6    <AiAssistantProvider apiKey="YOUR_API_KEY"> // << Wrap your app with this provider
7      <App />
8    </AiAssistantProvider>
9  </React.StrictMode>,
10  // ...
11);

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.

1// ...
2import { AiAssistantButton } from "@sista/vuic-react";
3
4// ...
5function MyComponent() {
6  return (
7    <div>
8      // ...
9      <AiAssistantButton />  // << Add the magic button anywhere
10    </div>
11  );
12}

🎉 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.

1const sayHelloWorld = () => {
2  console.log("Hello, World!");
3};
4
5// Define the functions to be voice-controlled
6const interactiveFunctions = [
7  {
8    function: {
9      handler: sayHelloWorld, // pass a refference to your function
10      description: "Greets the user with Hello World :)", // add function description
11    },
12  },
13  // ... register additional functions here
14];

For functions that accepts parameters:

1const sayHello = (name) => {
2  console.log(`Hello ${name}!`);
3};
4
5// Define the functions to be voice-controlled
6const interactiveFunctions = [
7  {
8    function: {
9      handler: sayHello,
10      description: "Greets the user with their name.",
11      // In case your function accepts parameters:
12      parameters: {
13        type: "object",
14        properties: {
15          name: { 
16            type: "string", // set parameter type
17            description: "User's name." // add parameter description
18          },
19        },
20        required: ["name"], // list required parameters
21      },
22    },
23  },
24];

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

1  const aiAssistant = useAiAssistant();
2  useEffect(() => {
3    if (aiAssistant) {
4      aiAssistant.registerFunctions(interactiveFunctions);
5    }
6  }, [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:

1import React, { useEffect } from 'react';
2import { useAiAssistant, AiAssistantButton } from '@sista/vuic-react';
3
4function TodoApp() {
5
6  const addTask = (task) => {
7    console.log(`Task added: ${task}`);
8  };
9
10  const removeTask = (task) => {
11    console.log(`Task removed: ${task}`);
12  };
13
14  // ...
15
16  // Initialize the aiAssistant instance
17  const aiAssistant = useAiAssistant();
18
19  useEffect(() => {
20    // Define the voice-controlled functions
21    const interactiveFunctions = [
22      {
23        function: {
24          handler: addTask,
25          description: 'Adds a new task.',
26          parameters: {
27            type: 'object',
28            properties: {
29              task: { 
30                type: 'string', 
31                description: 'Description of the task.' 
32              },
33            },
34            required: ['task'],
35          },
36        },
37      },
38      {
39        function: {
40          handler: removeTask,
41          description: 'Removes an existing task.',
42          parameters: {
43            type: 'object',
44            properties: {
45              task: { 
46                type: 'string', 
47                description: 'Description of the task.' 
48              },
49            },
50            required: ['task'],
51          },
52        },
53      },
54    ];
55
56    // Register the AI controlled functions
57    if (aiAssistant) {
58      aiAssistant.registerFunctions(interactiveFunctions);
59    }
60  }, [aiAssistant]);
61
62  // ...
63
64  return (
65    <div>
66      // ...
67      <AiAssistantButton />
68    </div>
69  );
70}
71
72export default TodoApp;

---

Configuration

AiAssistantProvider accepts few props:

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

---

Customization

Change Button Color

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

1    const colors = {
2        STATE_IDLE: '#4a6cf6', // Default
3        STATE_LISTENING_START: '#F64A7B', // Red
4        STATE_THINKING_START: '#4ac2f6', // Blue
5        STATE_SPEAKING_START: '#4af67f', // Green
6    };
7
8  <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 support@sista.ai.