React

Add Siri like Native AI Assistants to React App

1. Prerequisites

   Before using this package, ensure you have the following:

   • An existing React application
   • Sugar AI Account or Self Hosted

2. Install Pacakge

   Install the latest package in you react project

   npm

   npm install @sugar-ai/copilot-one-js@latest

   yarn

   yarn add @sugar-ai/copilot-one-js@latest

   pnpm

   pnpm add @sugar-ai/copilot-one-js@latest

3. Create Copilot

   Login/Sigup Account or Self Hosted

   Create a Copilot and get the copilotId and token

4. Add to your main file src/App.tsx

   import {useCopilot, CopilotProvider, CopilotConfigType} from '@sugar-ai/core';
   import {
     VoiceAssistant,
     TextAssistant,
   } from "@sugar-ai/copilot-one-js";
   
   const copilotConfig: CopilotConfigType = {
     copilotId: "<copilotId>",
     server: {
       endpoint: "http://play.sugarcaneai.dev/api",
       token: "<token>",
     },
   
     ai: {
       defaultPromptTemplate: "<prompt template>",
       defaultPromptVariables: {
         $NAME: "Sugar",
       },
       successResponse: "Task is completed",
       failureResponse: "I am not able to do this",
     },
   };

5. Wrap your App src/App.tsx

   Take this example of Todo app

   <CopilotProvider config={copilotConfig}>
     <TodoApp />
   </CopilotProvider>

6. Add Assistants

   Voice Assistant

   Add the Voice assistant to the pages you want to. If you want to enable it on all the pages, add it to common section.

   <VoiceAssistant
     promptVariables={{ $NAME: "Sugar" }}
     position={"botttm-center"}
   ></VoiceAssistant>

   This will show a mic button on the bottom center of the page. Test it out if you talk with it. This Assistant have no registered actions

   Text Assistant

   Add the Text assistant to the pages you want to. If you want to enable it on all the pages, add it to common section.

   <TextAssistant
     promptVariables={{ $NAME: "Sugar" }}
     position={"botttm-center"}
   ></TextAssistant>

   This will show a Chat button on the bottom center of the page. Test it out if you talk with it. This Assistant have no registered actions

7. Register Actions

   To invoke actions by AI Assistant, register methods using registerAction with its name, definition and callback.

   import { useCopilot } from "@sugar-ai/core";
   
   const TodoApp = () => {
   
   const { registerAction } = useCopilot(); // Add
   
   ...
   
   // Functionalies
   const addTodo = (task) => {...}};
   const deleteTodo = (task) => {...};
   const markTodoAsDoneById = function (todoId: number) {...};
   
   // Register addTodo function
   registerAction(
     "addTodo",
     {
     name: "addTodo",
     description: "Add a new todo",
     parameters: [
       {
       name: "task",
       type: "string",
       description: "Task description",
       required: true,
       }
     ],
     },
     addTodo,
   );
   
   ...
   
   }

   After this, ask Assistant to perform the action by saying Remind to get a haircut. In you app you can use equivalent instruction.

8. Active Screen Context (Optional)

   To make AI Assistant aware of the current screen content, use useStateEmbedding to track the current screen content.

   useStateEmbedding is build on too of useState hook. This automatically create an embedding in db for the current user with a scope.

   you can easily replace your useState hook with useStateEmbedding and pass the scope as the second argument. This will define the scope for created embedding.

   Check out the todo App exmaple below useStateEmbedding

   import { useCopilot } from "@sugar-ai/core";
   
   const TodoApp = () => {
   
   const { useStateEmbedding } = useCopilot(); // Add
   const scope = {scope1: "todoApp", scope2:  "todos"}
   
   // const [todos, setTodos] = useState([]);
   const [todos, setTodos] = useStateEmbedding([], {...scope}); // Switch
   
   ...
   
   }

   Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. Writing a good guide requires thinking about what your users are trying to do.

9. Test The AI Assistant on your App

   Go ahead and press the Mic button shown in the Voice Assistant component to interact with the AI Assistant.

   You should be able to invoke registered actions like “Add a todo item”.

10. Refine Prompt

    Go to Copilot > Select Copilot > Linked Packages

    Update, Version, Test & Deploy the prompt