JSPM – @langbase/components@0.1.3

Package Exports

@langbase/components
@langbase/components/styles

Readme

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.

Custom styles

interface CustomStylesI {
    chatBtn?: {
        borderRadius?: string;
        backgroundColor?: string;
        foregroundColor?: string;
    };
    chatbot?: {
        borderColor?: string;
        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.