Part 1: Langchain AI app with Flutterflow & Flowise - No-code Crash Course

hello no coders let's get started with the first part of this course let's first set up our super base Vector database create a super base account for free you can either use email or GitHub I would recommend using GitHub because we we need the GitHub account for hosting flow wise later on as well so pause here create your GitHub account first and then create a super base account we will then go ahead and create a new project and once the new project is created no down your project API key here and your project URL which are needed when we work with flow wise and then let's head to SQL editor tab here and click on add new query and we want to rename these Untitled query as match uncore documents and then we want to copy and paste these following code into this editor so just go ahead use the link and then get the code there copy this entire code into the editor and we want to hit run and now you have a vector data table named documents and a query named match uncore documents so remember these or keep the tab open we will use these two names later as well now let's go to open AI create an account and what you want to do is head to the top right corner and click view API key and you want to create a new secret key and note it down at a safe place for later use in part two when we work with flow wise and this is pretty much the first part of our setup now let's move on to hosting our flow wise and setting up the core functionality on flow wise with three different chat flows so the tool we want to use to host flow wise it's uh Railway you there are a bunch of different hosting services that you can use but Railway is very simple that I have have prepared a template for you is simply just take a couple clicks so here you can see you need a GitHub account to use Railway but if you already created one for your superbase login as well simply just use that and just log in with your GitHub account now use this link I'll leave it down below in the description box use my template below to deploy and host your own flow wise you can add your username and password variable if you want to prevent others to use your flow wise through your domain now you can access your own flow wise interface from either the railway app domain that just comes by default or you can add your own custom domain here either way will work and simply click on the link and log into your own flow wise if you have uh username and password protection but otherwise you should be able to just see your flow wise hosted at this URL already you can find your Railway domain or a your domain from the settings tab okay now let's set up our PDF upsert chat flow for flowise first the PDF upsert chat flow on flowise is there to handle uh the functionality where user can upload their PDF and then we send that PDF into this chat flow and then the chat flow will process that PDF and upsert that into our knowledge base so this is what this chat flow is for and it's only for this functionality so let's create this new CH flow and then we just name it PDF upsert okay so you can download and load the following PDF upster superbase chat flow Json file that I prepared so basically if you load it up if you download these and load it up here it will all the flow all the nodes already connected and set up for you so you can use that link it's part of the course material that I have provided now you can create and plug your open AI API key here which we have prepared in the previous steps right so have your opening I key ready here and create create that and you want to plug that into open AI embedding node and also the open AI node here and now we also want to plug uh create and plug super base API key here and you want to paste your super based project URL here so as you can see the match document and document at the table name and also the query name I've already put them there so you don't have to do anything about it the rest of the flow wise chat flow noes you don't have to worry about but if you are curious I'll just quickly walk through what this chat flow is doing so basically your your users PDF file is going to be uploaded here so that's why we leave it blank we're not really uploading any PDF file and once they do their API call from the flutter Flow side will put that here and basically this recursive character text splitter will chunk that PDF into different chunks and once we have that we're going to upsert that we're going to process that that document and then turn them into embeddings with open Ai and once you have the embeddings we're going to we're going to upsert that into our super based table documents once the user asks questions we can retrieve the information from these knowledge base and with open AI we can then generate responses this is already a working chat bot if you just want to for example we can test it here and then we can upload a PDF here and then straight away just start chatting with these Chat bar here that you can see but we we are not using that because we do want users to be able to interact with the custom UI that's why we just want to leave the PDF part blank and then we're going to send a file into here through an API call later so this is what this upser chat flow is doing and now let's move on to a website upser chat flow first let's create a new chat flow and name it website upsert and we want to download and download the template I prepared and load it into here here so it is quite similar to the PDF officer flow we want to plug your opening I key which you already created here so basically when once you create the openi key here once you can use it on every single chat flow on your flow wise so you can see that we already have the openi API here and we just plug that into the openi embedding node and openi node and we can create and we can plug the super base API key here and want to put the same project URL and into the super base upser document node it's pretty much similar to what we have with the PDF upser flow except instead of using a PDF loader we use the cherial web scraper and then the URL basically the user will send that into here through an API call and we'll do HTML to marck down text spater basically to chunk the content that's scraped here and upsert that into our sub base so that's that's a very similar flow for uh PDF but this chat flow is specifically set up to handle the website URL PP because it is not simply just loading something we have to go there and scrape the website and then chunk them into different chunks okay now we have the part the upsert part done right so these two chat flow the user can upload their PDF or scrape a website that they want to scrape and upser that into our super based knowledge base now we need to set up a query flow where it's handling the Q&A part so let's create a new chlow and name it Universal query I name it Universal because these same query can be used for both uh information from the PDF or a website because once those information is upser into the vector database as embeddings it doesn't matter if it was originally from a PDF or it was from a website so we call that Universal query and download and load the following Universal query super based chat flow uh template that I have prepared and load that into here and plug your openi API key here into the embedding node and open Ai nodee and plug the superbase API here plug your project URL into the superbase load existing index node as you can see this is not an upsert node anymore it is called load existing this cha flow is uh much simpler because this chaow is basically just going to handle the questions the user sent we're basically going to search through our embeddings and get the Rel information and they use open AI the chbt model to then uh formulate and generate a response back to our user and we're ready to go here so let's now continue to the next part of our course where we will be connecting flow wise with flux flow make them work together if you need more support for the content in this part of the course join my Discord Channel post your questions I will usually respond within 24 hours so I will see you in part two cheat [Music] yeah

Channel: Nomo Codes - AI apps & automation with no-code

Views: 585

Keywords: nocode, softr, airtable, design, ux, ui, web design, web development, frontend, backend, lowcode, 3d, spline, product, saas, framer, webflow, googlesheet, zapier, make, integromat, bubble, figma, adobe, plugin, ios, android, pwa, sparkar, lensstudio, chatgpt, gpt4, openai, flutterflow, aigen, generativeai, generativedesign, nocodedesign, nocodeai, automation, MVP, startup, entrepreneur, ai, agi, artificial intelligence, generative ai, gpt, Langchain, Flowise, Supabase, Openai, Chatwithpdf

Id: fZJMAKy0K5k

Length: 9min 20sec (560 seconds)

Published: Mon Oct 30 2023