Klu.ai React SDK

Description

Klu SDK for building AI-powered react applications

• Documentation
• GitHub
• Npm

The Klu.ai React SDK is a library that provides the most common AI-powered components and hooks that can be used in any React application.

Requirements

The Klu.ai Typescript SDK can be installed in any React application. The 2 libraries that you have to have installed are react and react-dom

Installation

To install the Klu.ai React SDK, simply run:

npm i @kluai/chat

Getting Started

To use the Klu.ai React SDK, you must first obtain an API key from the Klu.AI website. Once you have your API key, you can wrap your root component in a KluProvider:

import * as ReactDOM from 'react-dom/client';

import { KluProvider } from '@kluai/chat';

const API_KEY = 'You Klu API key';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <KluProvider apiKey={API_KEY}>// Your components can go here</KluProvider>,
);

Once you have wrapped your app in a KluProvider, you can now use Klu hooks and render Klu components in your system.

Chat component

import { Chat } from '@kluai/chat';

<Chat action={ACTION} />;

The user is an optional string that represents your unique id for the current user authenticate into your system. Providing it will limit this chat session to this user only and other users will not see it

The className is an optional string parameter that allows you to override the default styling on the Chat container.

The isFoldable is an optional boolean parameter that allows to have a chat where only the input is visible unless it is focused. Use this option if you want to save some space and only display chat when it's needed.

The withSessionList is an optional boolean parameter that defaults to true If set to false, the rendered Chat component will not have a session list to select from.

The persistToLocalStorage flag configures, whether the last session is memoized and will be opened by default when reopening the browser window after leaving it. We use localStorage for this, so it will memoize a separate session for each user of your system.

Input component

import { ActionInput } from '@kluai/chat';

<ActionInput action={ACTION} />;

The className is an optional string parameter that allows you to override the default styling on the Chat container.

The placeholder is an optional string parameter that allows you to override the default input placeholder.

The corrections is an optional parameter that contains an array of improvements that can be applied by the user to the response from AI. If there are no corrections provided, no improvements will be suggested.

The onResponseStreamToken is an optional parameter that contains a function that will be called on each message token returned from a response stream. If you want to display the text as it goes, use this function and append each new token to the result string.

The onResponseStreamComplete is an optional parameter that contains a function that will be called when the whole response is received. If you do not want to display the text as it comes and prefer to display the whole output once it's ready, use this callback.

Hooks

Finally, if you do not want to work with the chat or input and want to expose other Klu functions through your UI, you can use the useKlu hooks to get access to a wider range of Klu API's. Here is the example of usage.

import { useKlu } from '@kluai/chat';

const { klu } = useKlu();
await klu.sessions.create({
  action: 'Your actions',
  name: `Chat ${uuid4()}`,
});

For a complete list of available functions, please go to our Klu documentation

Documentation

For more detailed information on how to use the Klu.ai React SDK, please refer to the API documentation.

License

Free Software: MIT License

The Klu SDK is open source software released under the MIT License. This permissive license allows you to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Klu SDK, subject to a few simple conditions:

• Copyright notice - You must include the copyright notice in all copies or substantial portions of the software.
• License notice - You must include the license notice in all copies or substantial portions of the software.
• Warranty disclaimer - The software is provided "as is" without warranty of any kind. The authors and copyright holders are not liable for any claim, damages or other liability.
• Liability limitation - In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise.