Ready to use components for building AI powered web apps
A component library for building AI powered web apps.
``bash
npm install @langbase/components
yarn add @langbase/components
pnpm add @langbase/components
`
- Chatbot
Import the styles in the root layout of your app.
`jsx`
import '@langbase/components/styles';
`jsx
'use client';
import { Chatbot } from '@langbase/components';
export default function App() {
return (
suggestions={[
{
title: Explain how to get started in easy steps,Explain how to get started in easy steps?
prompt: How do I create an API key?
},
{
title: ,How do I create an API key?
prompt: What are the supported providers?
},
{
title: ,What are the supported providers?
prompt: How do I reset my password?
},
{
title: ,How do I reset my password?
prompt: `
}
]}
/>
);
}
#### Props
| Name | Type | Required | Default | Description |
|----------------|-----------------|----------|----------|---------------------------------------------------------------------------------------|
| apiRoute | string | true | - | The API route where the Langbase AI Pipe is called. |false
| suggestions | Array | | [] | An array of suggestions to show to the user. |false
| trigger | React.ReactNode | | - | A custom React component to open the chatbot. |false
| openingMessage | string | | - | The opening message to show when the chatbot opens. |false
| onConnect | Function | | - | A function that is called before request |false
| onResponse | Function | | - | A function that is called everytime chatbot receives a stream chunk. |false
| onError | Function | | - | A function that is called when there is an error. |false
| onFinish | Function | | - | A function that is called after the AI text stream finishes. |false
| customStyles | Object | | - | Custom styles for the chatbot. |false
| title | string | | 'Ask AI' | Title of the chatbot overlay. Defaults to "Ask AI" |false
| badge | string | | - | Optional badge that shows up next to the chatbot title. No badge is shown by default. |false
| triggerText | string | | '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.
If you've found an issue with any of the components, please reach out to us at support@langbase.com.