fluidai-gpt-sdk v1.0.21

fluidai-gpt-sdk

Welcome to the documentation for fluidai-gpt-sdk module! This module contains a collection of React components and hooks that have been developed to streamline processes and enhance functionalities within our organization. By utilizing this module, you'll be able to accelerate development and maintain consistency across various projects.

Installation

To use this module in your projects, follow these simple steps:

1. Install the module using npm:

npm i fluidai-gpt-sdk

Hooks

Hooks available are

• useFluidGpt
• useSpeechRecognition
• useSpeechSynthesis

Import the desired hook from the module in your functional component:

useFluidGpt

Hook handles all the request and response from the GPT. Helps keeping the context.

How it works

You've to set the token that you've received from fluid gpt. Once the token and tenant name (name of your organization) are sent. Hook handles the context of the conversation and handles response received from GPT.

import { useGptQuery } from 'fluidai-gpt-sdk';

Using useFluidGpt hook

Apply the imported hook within your functional component:

function ChatInterface() {
	const {
		getGptResponse,
		conversationHistory,
		isLoading,
		errorLog,
		setGptToken,
		setTenant,
		setConversationHistory,
	} = useGptQuery();
	// Stores the user query
	const [userQuery, setUserQuery] = useState('');

	// Setting the access token
	useEffect(() => {
		// Getting the access token
		(async function () {
			const token = await getAccessToken();
			setGptToken(token);
		})();
	}, []);

	function sendBtnHandler(event) {
		event.preventDefault();
		getGptResponse(userQuery);
	}
}

States exposed by useFluidGpt

• conversationHistory Keeps track of the back and forth done between user and gpt. Helping keeping the context for the gpt bot. ConversationHistory contains an array of type conversation

  interface Conversation {
  	role: 'assistant' | 'user';
  	content: string | null; // Response send from gpt or query of the user
  	isLoading?: boolean;
  }

• setConversationHistory: Helps set the context of the conversation.

• setGptToken : GPT access token.
• setTenant: Setting the tenant value for the token.
• getGptResponse: Pass the query string, conversation history state is manipulated and appends the gpt response to conversation history state.
• errorLog : All the errors are logged.
• isLoading : Check if the gpt is generating response for the query.

useSpeechRecognition

import { useSpeechRecognition } from 'fluidai-gpt-sdk';

Using useSpeechRecognition hook

Convert speech into text using useSpeechRecognition hook. Uses the Speech Recognition module present in the browser, and exposes all the functionality as states with live indicators.

function RecordComponent() {
	const {
		transcript,
		isRecording,
		setStartRecording,
		errorMsg,
		isSpeechRecognitionSupported,
	} = useSpeechRecognition();

	return isRecording ? (
		<RecordingIndicator />
	) : (
		<RecordMic onClick={setStartRecording(true)} />
	);
}

States exposed by useSpeechRecognition

• isRecording: Let you know, if the browser is recording.
• setStartRecording: Start recording and list.
• transcript : Once the speech is converted to text, it is stored in transcript.
• errorMsg: If the conversation failed, error message is logged inside this state.
• isSpeechRecognitionSupported :Check if the browser support Speech to text conversation

Using useSpeechSynthesis hook

Convert text to speech using useSpeechRecognition hook. Uses the SpeechSynthesi module present in the browser, and exposes all the functionality as states with live indicators.

function useSpeechSynthesis() {
	const {
		setTTSVoices,
		convertTextToSpeech,
		isSpeaking,
		cancelTTS,
		isSpeechSynthesisSupported,
	} = useSpeechSynthesis();
}

States exposed by useSpeechRecognition

• setTTSVoices: Setting the voice for the TTS.
• convertTextToSpeech: Pass your text, that need to converted to speech.
• isSpeaking : Let us know, if the TTS is speaking.
• cancelTTS: Stop the browser from speaking.
• isSpeechSynthesisSupported :Check if the browser support Text to speech conversation

Thank you for choosing our fluidai-gpt-sdk module! We hope these components and hooks will enhance your development process and contribute to more efficient and consistent projects within our organization. If you have any questions or need further assistance, feel free to reach out to our team. Happy coding!