Langbase components

A component library for building AI powered web apps.

Install

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.

import '@langbase/components/styles';

Chatbot

'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

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 [email protected].