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

Usage

Import the styles in the root layout of your app.

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

$3

`jsx
'use client';

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

export default function App() {
return (
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.