# @kluai/chat

> ## Description

Latest version **0.0.11** (published 2023-12-04) · 0 weekly downloads

## Install

```sh
npm install @kluai/chat
pnpm add @kluai/chat
yarn add @kluai/chat
bun add @kluai/chat
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2023-12-04 |
| First published | 2023-09-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | stephenwalker, ankys |

## Links

- npm: https://www.npmjs.com/package/@kluai/chat
- npm.io page: https://npm.io/package/@kluai/chat

## Dependencies (13)

- [clsx](https://npm.io/package/clsx.md) ^2.0.0
- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@kluai/core](https://npm.io/package/@kluai/core.md) ^0.0.34
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.287.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^1.14.0
- [vite-plugin-svgr](https://npm.io/package/vite-plugin-svgr.md) ^3.2.0
- [tailwindcss-animate](https://npm.io/package/tailwindcss-animate.md) ^1.0.7
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5
- [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) ^1.0.4
- [class-variance-authority](https://npm.io/package/class-variance-authority.md) ^0.7.0
- [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.0.6

## Recent versions

- 0.0.11 (latest) — 2023-12-04
- 0.0.10 — 2023-11-30
- 0.0.9 — 2023-11-29
- 0.0.8 — 2023-11-12
- 0.0.7 — 2023-09-22
- 0.0.6 — 2023-09-22
- 0.0.5 — 2023-09-21
- 0.0.4 — 2023-09-21
- 0.0.3 — 2023-09-21
- 0.0.2 — 2023-09-13
- 0.0.1 — 2023-09-13

## README

# Klu.ai React SDK

## Description

Klu SDK for building AI-powered react applications

- [Documentation](https://docs.klu.ai)
- [GitHub](https://github.com/klu-ai/klu-chat-components)
- [Npm](https://www.npmjs.com/package/@kluai/chat)

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`:

```tsx
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

```tsx
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

```tsx
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.

```tsx
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](https://docs.klu.ai)

## Documentation

For more detailed information on how to use the Klu.ai React SDK, please refer to the [API documentation](https://docs.klu.ai/resources/api-basics).

## 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.

---
_Source: https://npm.io/package/@kluai/chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._