Create chatbot in few minutes using FloWiseAI open-source tool

-

In this article I am going to demonstrate how to design and create chatbot using FlowWiseAI tool. I will also demonstrate how you can integrate chatbots with your existing web application with minimal code. In this article I have used OpenAI as a LLM (large language model).


 

 

go to below FlowiseAI website which is Open source UI visual tool to build your customized LLM flow powered by LangchainJS, written in Node Typescript/Javascript

 https://flowiseai.com/

 in above webpage there is following link of GitHub

https://github.com/FlowiseAI/Flowise 

 There is three way we can use the flowwiseAI 

  1. Global installation of FlowiseAI using Node version Higher Than  18.15.0
  2. Using Docker image
  3. Using Developer after cloning the application in local using GitHub  

In this article i am going to talking about the global installation of FlowiseAI to create chatbot

Prerequisite:

Install NodeJS version 18.15.0 or above.

after installation of NodeJS open the powershell terminal and execute the following command to install FlowiseAI globally in the machine.

npm install -g flowise

 After installation completed, execute the below command to run the FlowiseAI application.

npx flowise start

 This will run the application and will be accessible using http://localhost:3000 as per image below.

 

FlowiseAi 1

 Now first add the OpenAI secret key in credential page of FlowiseAI as per shown in below images.

Click on add credentials button on credential page it will open one popup where search for OpenAI API option as shown in below figure.

flowise credential 1

 Now enter the credential name for OpenAI API and enter the secret key and click on Add button as shown in figure.

flowise credential 2

 Now you will see the credentials added in list page as shown in below figure.

flowise credential 3

 Now we have added the OpenAI API secret key in credentials so we can use this credentials in building the chat-bot in chaflows page.

Now navigate to ChatFlows page and add the below three components in canvas connect as per below images.

  1. ChatOpenAI - This will connect with openAI API and provide response to the given prompt in chat prompt template.
  2. Chat Prompt Template - This helps to setup persona of chat-bots using system prompt and human prompt
  3. LLM Chain - Its a connector between ChatOpenAI and Chat prompt Template

 

Now select the added credentials in ChatOpenAI component as shown in figure.

 

flowise ChatFlows 4


 

 Connect the components with each other by dragging the nodes to each component as per below images.

Update the system message and human message as per your requirement. 

flowise ChatFlows 1

Once settings done then save the chatflows by giving unique name to your chatbot.

 

flowise ChatFlows 2

Now click on right corner button to test the bot, it will open chat popup where you can ask questions to chat bot you have designed, below is the image which demonstrate the chat popup sample.

flowise ChatFlows 3

Now once your chatbot is got tested we can now integrate this chatbot to your existing website. You can get the code to integrate the chatbot by clicking code icon button in right top corner. as shown in below figures.

flowise ChatFlows 5

 Copy the code from above popup and paste it to the head section of html page as per below image.

flowise ChatFlows 6

 Now you have successfully integrated chat-bot to your website.

flowise ChatFlows 7

This way we can create chat-bots with minimal code to your existing websites.

 

 

Comments

Post a Comment

Popular posts from this blog

Implement Logging in CSV file using Nlog in .net core MVC application- part 2

-
Image
In previous article " Implement Nlog in .Net core MVC application part 1 "  I have demonstrated how we can implement basic setup of NLog in .core mvc application. In previous article we have logged the exceptions in flat file system. In this article I will show you how you can write the exception and custom logs in csv file. Writing logs in csv file can enable us better readability of logs in tabular form.       Lets start the implementation of it, I going to use the same example project used in previous demonstration. Modify the Nlog.config file as follows, added new target and rule for logging logs in csv file. <?xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd" autoReload="true" throwExceptions="fal
Read more

Implement Nlog in .Net core MVC application part 1

-
Image
Logging is a very important part of the enterprise application/web application. Setting up the logging correctly not only beneficial for long term maintenance of the application but also it is useful tool to find out the RCA in case of mission critical bug arises. Therefor we will going to discuss the various logging technique implementation using Nlog library package. In this article we will going to use .net core application for demonstration but you can implement it in .net framework application also. So lets start the implementation of Nlog in .net core MVC application. Open visual studio 2019/17 and create the new project as shown below.     Select Asp.net core Web App (Model-View-Controller) and provide the project name in project name text box.   Now on next screen click on create button this will create MVC app with .net core Now go to solution explorer and right click on project and click on Manage Nuget Package. Now in Nuget package manager install below listed Nlog packages.
Read more

Angular User Session Timeout example step by step

-
Image
This functionality let the user know that their session is about to expire and that they would be logged out if they didn’t take action. I have written this functionality in Angular for my latest application.  If you are new to Angular 6 then read my article about Setting up Angular 6 step by step before jump to this article to get handy in Angular 6. Dealing with timers in Angular can be significantly different when using React components and subscriptions. The basic premises remains the same, though. We’ll have a service with a timer that will provide a Subject to which consumers of the service can subscribe. A React Subject provides an easy mechanism to trigger a “next” subscription to alert consumers that the timer has expired.   import { Injectable } from '@angular/core'; import { Observable, Subject, Subscription, BehaviorSubject} from 'rxjs/Rx'; @Injectable() export class IdleTimeoutService { private _count: number = 0;
Read more

Devexpress Datebox date formatting in angular 6 with example

-
The Devexpress DateBox in Angular is a widget that displays the date and time in one of DevExtreme predefined formats or a format defined in an external localization library, or a type in the required date/time value. In this article, the i will provide you different date-format which we can set on DateBox to show date and time to user. Following is the code snippet to add Datebox in your Angular form if the you want to capture only date      <dx-date-box [value]="now" displayFormat="EEEE, MMM dd" type="date" > </dx-date-box> Following is the custom formats we can set and depending upon its converted values will be shown. "dd-MM-yyyy" => 28-10-2018 "EEEE, MMM dd" => Sunday, Oct 28 "dd MMM yyyy EEEE" => 28 Oct 2018 Sunday "dd-MM-yyyy EEEE" => 28-10-2018 Sunday alternatively you can change the format as way you want Following is
Read more

Restore the lost focus of Auto post back controls in asp.net update Panel control

-
Problem: We put  autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details  the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times. Solution: Step 1: Save following in js file give any name to it (like MyUpdatePanelFocus.js ) var lastFocusedControlId = ""; function focusHandler(e) { document.activeElement = e.originalTarget; } function appInit() { if (typeof (window.addEventListener) !== "undefined") { window.addEventListener("focus", focusHandler, true); } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); } function pageLoadingHandler(sender, args) { lastFocusedControlId = typeof (document.acti
Read more