@langdb/widget v1.0.8

Langdb Widget

Widget component interacting with LangDB APIs. Visit docs to get started.

Getting start

Installation

npm install @langdb/widget

or

pnpm install @langdb/widget

or

yarn add @langdb/widget

Basic Usage

1. Make sure you have a LangDB account and an application created. If you don't have an account, you can create one here.
2. Create new application and get either the publicId or appId from the application settings.
3. Ensure you have a chatbot agent created in your application. If you don't have one, you can create one by executing the following SQL code in the LangDB console.

CHAT cities_info_model

4. Replace the publicId and modelName with your application publicId and modelName respectively.

import { Widget } from "@langdb/widget";
import '@langdb/widget/style.css';

const LANGDB_CLOUD_SERVER = 'https://api.dev.langdb.ai';
const user_picture_url = 'https://avatars.githubusercontent.com/u/1016591?v=4';
const agent_logo = 'https://app.dev.langdb.ai/static/media/logo.0d259c55b001b212cc0a.png';
const model_name = 'cities_info_model'; // replace with your model name
const publicId = '83186f34-84d7-4633-8da1-db3e579edeea'; // replace with your public app id
const App = () => {
    return <div className="flex flex-1 h-full">
            <Widget
                publicId={publicId}
                personaOptions={{
                    assistant: {
                        name: "LangDB",
                        tagline: "Build and Publish AI Agents using SQL",
                        avatar: agent_logo,
                    },
                    user: {
                        avatar: user_picture_url,
                        name: 'Alice',
                    }
                }}
                modelName={model_name}
                advancedOptions={{
                    displayOptions: {
                        themeId: 'langdb',
                        colorScheme: 'light',
                    },
                    conversationOptions: {
                      conversationStarters: [
                        {
                          prompt: 'What is the most Populous City'
                        },
                        {
                          prompt: 'Tell me interesting facts about Tokyo.'
                        },
                        {
                          prompt: 'Give me some interesting cities to visit.'
                        }
                      ]
                    }
                }}
                serverUrl={LANGDB_CLOUD_SERVER}
            />
    </div>
};
export default App;

Props