@langbase/components/readme.md

Ready to use components for building AI powered web apps

## Langbase components

A component library for building AI powered web apps.

## Install

```bash
npm install @langbase/components

# or

yarn add @langbase/components

# or

pnpm add @langbase/components
```

## Components

-   [Chatbot](#chatbot)

## Usage

Import the styles in the root layout of your app.

```jsx
import '@langbase/components/styles';
```

### Chatbot

```jsx
'use client';

import { Chatbot } from '@langbase/components';

export default function App() {
	return (
		<Chatbot
			apiRoute="/api/chat"
			suggestions={[
				{
					title: `Explain how to get started in easy steps`,
					prompt: `Explain how to get started in easy steps?`
				},
				{
					title: `How do I create an API key?`,
					prompt: `How do I create an API key?`
				},
				{
					title: `What are the supported providers?`,
					prompt: `What are the supported providers?`
				},
				{
					title: `How do I reset my password?`,
					prompt: `How do I reset my password?`
				}
			]}
		/>
	);
}
```

#### Props

| Name           | Type            | Required | Default  | Description                                                                           |
|----------------|-----------------|----------|----------|---------------------------------------------------------------------------------------|
| apiRoute       | string          | `true`   | -        | The API route where the Langbase AI Pipe is called.                                   |
| suggestions    | Array           | `false`  | []       | An array of suggestions to show to the user.                                          |
| trigger        | React.ReactNode | `false`  | -        | A custom React component to open the chatbot.                                         |
| openingMessage | string          | `false`  | -        | The opening message to show when the chatbot opens.                                   |
| onConnect      | Function        | `false`  | -        | A function that is called before request                                              |
| onResponse     | Function        | `false`  | -        | A function that is called everytime chatbot receives a stream chunk.                  |
| onError        | Function        | `false`  | -        | A function that is called when there is an error.                                     |
| onFinish       | Function        | `false`  | -        | A function that is called after the AI text stream finishes.                          |
| customStyles   | Object          | `false`  | -        | Custom styles for the chatbot.                                                        |
| title          | string          | `false`  | 'Ask AI' | Title of the chatbot overlay. Defaults to "Ask AI"                                    |
| badge          | string          | `false`  | -        | Optional badge that shows up next to the chatbot title. No badge is shown by default. |
| triggerText    | string          | `false`  | 'Ask AI' | Text of the trigger button. Defaults to "Asks AI"                                     |

#### Custom styles

```tsx
interface CustomStylesI {
	chatBtn?: {
		borderRadius?: string;
		backgroundColor?: string;
		foregroundColor?: string;
	};
	chatbot?: {
		borderRadius?: string;
		backgroundColor?: string;
		foregroundColor?: string;
	};
}
```

> Note: The background & foreground color in `customStyles` prop reverses for dark mode.

## Issues

If you've found an issue with any of the components, please reach out to us at [support@langbase.com](mailto:support@langbase.com).