viact-ai-ui

Getting Started with Viact AI UI

Installation

npm install viact-ai-ui --legacy-peer-deps

Basic Example

1. Install the package dependencies

   npm install viact-ai-ui @react-pdf-viewer/core@3.12.0 @react-pdf-viewer/default-layout@3.12.0 @react-pdf-viewer/page-navigation@3.12.0 --legacy-peer-deps

2. Register a new AI CORE API Key by Requesting the AI Core team (VuDX)
3. Add key to the .env

   REACT_APP_AI_CORE_API_KEY = "i9YJO2qkMVzUS6hzaI1vRbxj0fAesQYnae2Wlyi1"

4. Connect with the viact-ai-ui server

   import { setupAICore } from "viact-ai-ui";
   
   useEffect(() => {
       // setup the integration to viact-ai-ui
       setupAICore({
           AI_CORE_API_KEY: process.env.REACT_APP_AI_CORE_API_KEY || "",
           user: ApiStore.user,    // This is the login user of your system
       });
   }, []);

5. Setup the Knowledge Base component

   import React from "react"
   import { AICoreKnowledgeBase } from 'viact-ai-ui';
   import { useHistory } from "react-router-dom";
   
   export default function AICoreKnowledgeBasePage() {
       const history = useHistory()
       return (
           <div>
               <AICoreKnowledgeBase onKnowledgeBaseClick={(kb) => history.push({
                   pathname: `/chatbot/knowledge-base/${kb.id}/chat`
               })} />
           </div>
       );
   }

6. Setup the Assistant component

   import React from "react";
   import { AICoreKnowledgeBase } from 'viact-ai-ui';
   import { useParams } from 'react-router-dom';
   // import pdf viewer styling
   import "@react-pdf-viewer/core/lib/styles/index.css";
   import "@react-pdf-viewer/default-layout/lib/styles/index.css";
   import "@react-pdf-viewer/page-navigation/lib/styles/index.css";
   
   export default function AICoreKnowledgeBasePage() {
       const { id: kbId } = useParams() as any;
       return (
           <div>
               <AICoreKnowledgeBase knowledgeBaseId={kbId} onBackToKnowledgeBases={() => window.location.href = "/chatbot/knowledge-base"} />
           </div>
       );
   }

7. Load those 2 components to the router