@langbase/components

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 [e-mail].