How to create the frontend of a chat box using @veracity.ai npm package

This guide will walk you through the steps to create a simple chat box frontend using the @veracity.ai npm package. Follow the instructions below to set up your project and implement the chat box functionality. This example uses React as the frontend framework.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

• Node.js (version 20 or higher)
• npm (Node Package Manager)
• A code editor (e.g., Visual Studio Code)
• A React application set up (you can use Create React App to quickly set up a new project)
• @veracity.ai Package
• @veracity/vui Package

Step 1: Set Up Your React Application

If you haven't already set up a React application, you can create one using Create React App:

npx create-react-app chat-box-app
cd chat-box-app

Step 2: Install the @veracity.ai & @veracity/vui Package

Install the @veracity.ai npm package by running the following command in your project directory:

npm install @veracity.ai

Install the @veracity/vui npm package by running the following command in your project directory:

npm install @veracity/vui

Step 3: Create the Chat component

In @veracity.ai package, it provides a reusable chat component named Chat that you can easily integrate into your React application. It provides the main chat features to ask questions and get responses, store the chat history in table storage.

You can create a new Chat by providing four endpoints:

• url: The endpoint to send chat messages.
• historyUrl: The endpoint to fetch chat history of current chat, so chat id should be included in the url.
• feedbackUrl: The endpoint to send and retrieve feedback on chat responses in current chat, so chat id should be included in the url.
• summarizeTitleUrl: The endpoint to create chat title based on current chat content, so chat id should be included in the url.

After the component is created, you can call the methods it provides:

• LoadHistoryMessages: load current chat history messages from the historyUrl.
• SubmitMessageAsync: submit a new message to the url and get the response.
• SummarizeTitleAsync: generate a title based on current chat content using the summarizeTitleUrl.
• SetLikeAsync: set like and dislike feedback for a specific message using the feedbackUrl.
• LoadLikesAsync: load likes and dislikes for messages in the current chat using the feedbackUrl.

Here is an example to create a react hook component to use the Chat component:

import { useEffect, useState } from 'react'
import { Chat } from '@veracity/ai'
import { LoginDto } from '../types'

export const useAIChat = (endpoint: string, historyEndpoint: string, feedbackUrl: string, titleUrl: string, userInfo: LoginDto | null) => {
    const [aiChat, setAiChat] = useState<Chat | null>(null)

    useEffect(() => {
        if (userInfo && !aiChat) {
            const newAiChat = new Chat({
                url: endpoint,
                historyUrl: historyEndpoint,
                feedbackUrl: feedbackUrl,
                summarizeTitleUrl: titleUrl
            })
            setAiChat(newAiChat)
        }
    }, [aiChat, endpoint, feedbackUrl, historyEndpoint, titleUrl, userInfo])

    return aiChat
}

Step 4: Integrate the Chat Component into Your Application

Please refer to the example project to see how to integrate the Chat component into your React application. You can find the example project here