Custom AI Chatbot for Websites using any LLM | No-Code | Open-Source

Key Takeaways

everyone Timothy kbat founder of mlex labs and creator of anything llm and today I want to showcase a really awesome feature we just added into anything llm that's available for everybody in the open source repo on GitHub where you can now publish an AI chatbot on any website or page that supports HTML that you own and this can be an internal facing website it can also be public facing with all of the controls powered by whatever llm you want all the data stored privately on your instance and it just works now today we're actually going to be using an anything llm Cloud instance but if you are on GitHub and you know how to use Docker you can just run anything llm in a Docker container we publish an image it's as easy as two steps to get it running today I'm going to use a cloud instance though but it all works exactly the same now you may be familiar with chatbots I'm on product hunt right now and you can see these little icons in the bottom now this is intercom which is a helpful chatbot client where people can respond to requests we want to actually use an AI llm trained on information on our website and just make it happen with no code just copy paste some HTML snippet and just have it work so that's what we're going to do and we're going to actually do it on our website use.com now I'm going to use the staging site because I don't want to publish this to the whole world but if I wanted to I would just click publish now we use framer but if you use WordPress or whatever it doesn't matter it all works the same and I'll show you how simple it is so first things first you need anything llm running somewhere on the internet where you can access it hopefully you've put up a password protection and all of that now the workspace and the chatbot we're going to expose is public facing the documents in this workspace however the things that it's trained on is not given back to the public user but you can modify them and manage them within anything llm as if you normally would if you've used our tool before so the first thing we need to do is create a workspace a workspace is essentially a collection of documents that the llm will use to answer user questions the more you have the better but there is kind of a science but in general if you have documents it'll work I want to showcase that I am using open AI I already have my API key in and I'm going to use three and A2 we could use three and 1/2 turbo GPT 4 even the 32k context even fine tunes if you have one available you want to use we also have a whole bunch of other AI providers if you want to pick one of those including olama LM studio and local AI if you're trying to run your own model locally or on a server you maintained let's create a workspace that we're going to publish to the world and I'm just going to name it anything llm all right so we're already here we're started and if I were to ask this chatbot just in anything LM what is anything LM it'll either give give me a wrong response or tell me that it doesn't know because our project is not yet big enough for GPT to have scraped it which is sad so I'm going to ask it on an empty workspace and it says that anything llm is an online platform for basically people pursuing a masters of law that is not what we are so let's give it some information but actually just use our website to fill in those blanks the way we do that is we're just going to click on the settings icon move me out of the way and and I already have a text document embedded in here that is literally just like hey this is anything LM I said we're going to grab information from the website so let's do that all right so our website was pulled in now all we need to do is embed it and you're probably wondering how am I embedding information anything LM actually ships with a built-in embedding model that runs on instance totally isolated and privately that being said if you want to use open AIS text Ada embedding or the newest generation which I believe actually has a even higher Dimension output you can this is just what we give you for free now we've embedded this information so let's go back to the main prompt and ask that same question what is anything llm so here we are asking the question again and it says that anything llm is the ultimate business intelligence tool blah blah blah and it got that information straight from use.com which is right because it actually is in the tagline and that is important information so it looks like our chatbot is pretty much ready to go that being said if we wanted to add more pages we could add the anything llm Cloud page the docs we could put the entire repo of the GitHub in here or we could put the download page again we're only doing this for the homepage for this example but go crazy so now that we have a workspace that's ready to go and we can publish to the world and basically just be hands off for customer support or at least that's the dream we can go to settings go to embed embed chat and we're going to create an embed now you're presented with a couple options here and that's only because we give you ultimate control as usual and we're here we can select a workspace we only have one but if we had more they'd appear here we want to use the anything llm workspace now there's two chat methods one is for chatting which is basically like using chat GPT general knowledge plus your specific data or query which basically means the llm won't respond unless there is something to respond with for your safety we put it on query mostly because we don't want people asking random unrelated site questions that have nothing to do with our product running up our GPT Bill and of course you can restrict the domain as well to make sure that people don't copy your embed and put it on their website or anything like that and it all gets handled on the anything llm instant side of things Additionally you can set the max chats per day or per session enable Dynamic model use which allows you to specify the model that you would like to use maybe on one page you would like to use GPT 4 versus GPT 3 and a half or a finetune here you can make that happen you can also modify the temperature per page sometimes we find that that parameter helps a lot and then of course enabling The Prompt override through a simple string in the embed in the actual code snippet you can override the system prompt maybe you want to grab the actual description from the header HTML and inject that as a prompt you can do that this isn't visible to the client it's the system prompt but here you can override it anything here that you override will overwrite the workspace settings that you've already set now I already know the URL of our staging site so let's limit all requests only coming from a certain domain and you can see that's the domain you can have multiple here having none here means you can have it anywhere we really don't recommend it but if you want it you can do it now we'll just just click create embed and our embed is created you can of course go back and modify any of these parameters at any time if you'd like now for the next part of this video we're going to do the really easy part which is showing this code snippet which really is just this part of HTML we're going to click on this which will copy it to our clipboard and now we're going to go to framer and embed it into our website now just to Showcase this is the same exact website but on our staging site as you can probably see from the URL now from here all we need to do is to go into framer which by the way this is unique to however you're using it could be webflow or GoDaddy or WordPress whatever what I'm about to show you is definitely possible in every single website builder so we're going to go to settings because that's where we can access this I want this embed to be present on all pages and it's probably best that we put it at the end of the body tag so we'll paste that in right there scroll up click save oh sorry we have to to publish it first I will click update right here and then it'll be live okay and now our embed is present now it's very plain looking and if we open it you'll see that we have anything llm branding we have the kind of footer here but let's ask the crucial question of what is anything llm and here we get a description now notice we don't get the context that was used because we want to keep your real Source document right and of course the customer can go and reset their chat or anything like that but I really do want to dive in to just a little bit of the functionality here that's possible now I'm on GitHub right now and I'm in the embed folder there's a readme file in there and this is all of the customization options that you can use that you can Define with the embed you can change the chat icon to a number of basically pre-support icons you can change the button color the background color the assistant response bubble your response bubble your brand image URL the greeting hiding the footer sponsor or changing the link and the text of it entirely and also showing should it open when the page first loads what your support email is and this is just the options that we have today so while yes out the box our chat Ed just shows anything llm we give you the ability to totally clean slate and refresh this chat bubble to where it really works with the brand of your site and your Brand's identity we're going to be doing a lot more improvements in the UI and the ux of this so your customers have a really great experience but that is the anything llm built-in embed tool you can publish this on any website you own and it comes with anything llm thank you