Chat with any website Demo
This demo shows a retrieval-augmented chatbot that scrapes any website, stores it in Pinecone, and answers questions with current information ChatGPT can't reach.
ChatGPT is useful, but it has a hard limit: it only knows what it was trained on, and current events or newly released documentation fall outside that window. This demo, built by Agash Uthayasuriyan as a teaching assistant project for the INFO 6105 data science course, tackles that gap directly with an application that lets you chat with the actual content of any website, in real time.
The problem with relying on ChatGPT alone
The motivation is simple: language models like GPT-3.5 and GPT-4 are not reliable for current affairs or recently released information. GPT-3.5 will often say outright that its knowledge only goes up to a certain month and year, and GPT-4 will attempt an answer but frequently misses the specific detail being asked for. If a new library has just had a major update and its functions have changed, or a news article was published minutes ago, neither model can speak to it directly. The application built here solves this by letting a user paste in a website link and start a conversation grounded in that page's actual, current content.
Seeing it in action
The demo uses a live Google News article about Kamala Harris visiting an abortion clinic and declaring a health crisis, published and updated only minutes before the demo. Asking ChatGPT directly where she made that declaration returns a response admitting its knowledge only goes up to January 2022, with no real-time information. Asking GPT-4 gets closer but still doesn't surface the specific location. Pulling the same article's URL into the custom chatbot and asking the identical question returns the correct, specific answer: she visited Twin Cities and St. Paul, Minnesota, and declared a health crisis around access to reproductive medical care. The chatbot can also handle looser, more conversational follow-ups, like asking "what was the event about" without repeating any names, and it still correctly ties the question back to the loaded website's content.
How it works under the hood
The pipeline starts by scraping the text content of the given website. That text is converted into vectors using an embedding model and stored in a vector store, in this case Pinecone. When a user submits a question, that input is also converted into a vector, and the system searches the vector store to find the closest match to the user's query. The best-matching content is then handed to a large language model to generate the actual answer. Pinecone is used here specifically as the vector database, with the website URL loaded, the page content split into chunks, and those chunks converted into embeddings using OpenAI's embeddings model before being stored. Pinecone's free tier runs on Google Cloud and uses cosine similarity to measure distance between vectors.
Building the conversational chain
The language model layer is also powered by OpenAI. Given the ongoing chat history, a retriever chain first generates a search query to look up relevant information related to the conversation, then pulls the most suitable matching vector from the store. That retrieved context is passed into a conversational RAG chain, where a prompt instructs the model to answer the user's question based specifically on the provided context. The whole interface is built with Streamlit, using Streamlit's session state to keep the chat history and vector store persistent across interactions, so the app doesn't reload or lose its data and reprocess the website content on every refresh.
Key takeaways
- Standard LLMs like ChatGPT have a knowledge cutoff and struggle with current, page-specific information.
- The application scrapes a target website, embeds its content, and stores it in a Pinecone vector store.
- User questions are embedded the same way and matched against stored vectors to retrieve the most relevant content.
- A conversational retrieval chain generates search queries from chat history, then answers using only the retrieved website context.
- Streamlit's session state keeps the chat history and vector store alive across interactions without reprocessing the website each time.
Try it yourself
The code for this project is available on the AI4ED GitHub repository under the Chat with Website RAG Project folder, and it's a strong starting point for anyone in the Humanitarians AI community who wants to build a retrieval-augmented chatbot grounded in live, up-to-date web content rather than a model's fixed training data.
Full transcript(auto-generated, with timestamps)
[0:01]Hello all I am Akash UD surian a teaching assistant for info 6105 data science course for the spring 2024 term and this is the educational application that I have built it is named as chat with website uh first I'll just show you the demo and um let you know about the use case and then we shall dive into the specifics of how I made it this is a streamlet application and uh the command streamlet run app.py will work so yeah this is the application the idea for creating this application is because the llm models that we available for open use now like uh gpts uh the CH
[0:55]GPT 4 or 3.5 whatever may be it it is not a able to produce answers reliably for the current affairs or um any new technology that was released recently or any of those sort uh which had a recent update when uh when using chat GPT 3.5 as many of you might have known it sometimes says um that it has only knowledge up to certain month and year and the question that we have arised Falls after it and it won't be able to address it prop properly even in the case of gp4 it just tries to give some answer but not the exact answer that we
[1:37]Might want sometimes let us say there is a current affairs um uh news article that you read that you saw and you don't have all the time in the world to read every word in the website instead you just want to know few things and maybe like create an article out of it so you want a conversational boy to chat with the website that you are in and just pull up answers immediately in a simpler way or let us take another example that there is a new library that is released let us say a napai major update has been released where all the functions has
[2:15]Been change now and um if that is happening and you just can't rely on chat GPT 3.5 or four to you know work around with installation of it and to know what what is changed so instead what you could do is you could just pull up the website link and put it here and you can just start chatting with that particular website you can know what you want to know and uh make it a conversation between you and the website so this is very useful in these kind of scenarios and um to show an example there's the Google News website and today is March 14th March 14th here as
[2:54]Well so yeah here we have a news article saying kamla haris declar Health crisis is in visit to uh an abortion clinic and when I just pull up this it says she declar Health crisis when she visited to Minnesota so this is the news that I have and it was also updated recently 4:20 to 22 p.m. and now it's 4:29 p.m. so if I just go to chat GPD and ask where did Kamala Harris visit and declare the Health crisis it just says I have information up to Jan 2022 and I don't have real time information some might say use chat gp4 well yeah we'll use that as well
[3:35]Chat gp4 says Kamala Harris has been actively doing this she's part of Biden Harris and everything but the answer that we want where did she visit and where where did she declare the Health crisis that is not present so let us try to use um our application that I built to answer this so we'll just pull this um website take the website link and put it here make sure the backend process happens properly let us also copy the same question and uh put it here so we are welcomed with hello I'm chat B based on drag how can I help you and we just want
[4:24]Help regarding this yeah it says she visited Twin Cities and um St Paul Minnesota she declared Health crisis access to reproductive Medical Care while Chad GPT 4 was able to tell something related to mothers babies and everything it was not able to particularly get the information that we wanted from this website so this is where the uh application that I have built excels and it could also make um you could also make a conversation with it like what was the event about so here you're not mentioning anything related to the um comma related to Kamala Harris or anything but you're just bluntly saying what was the event
[5:28]About and it tries to make a conversation with um the website and it says a event that Kam har attended was a portion Clinic fight fight for Reproductive freedoms to so you get the idea right it is not always that you have to mention everything but you could just make it a conversation and um get benefited from it so let us now dive into the specifics of how this was implemented so the idea is to have the website take the contents out of it web scrape it and um we will have the text that is scraped from the website so this website text will be
[6:08]Then converted to vectors using an embedding model these converted vectors will be stored in a vector store now we have the vector store where we have converted all the text present in the website uh that converter to vectors and they are stored in the vector store parall what we also do is we have the input from the user now which is also a form of text and that is also converted to Vector now we have a vector base and we have a new Vector so what we now do is have the new Vector uh match with all the other vectors that is present in the vector
[6:50]Base and then we see which is the most uh perfect fit or good fit and that particular Vector we display it as the output using the large language model so the vector base that I have chose here is Pine con Pine con is a vector store that you could use and here the website is being loaded where the URL is being passed this is the um credentials that you have to give uh the secret keys that you have to give to access Pine con where I have did it in the &b file you could also look at this dummy en where these are the kind of uh
[7:29]Keys that you have to fill in to make this application work uh concerning uh the Privacy I have not revealed it and um yeah so here is where the website will get loaded and we get the document out of it we split the text and we make it into chunks so now these chunks we are converting it into embeddings using open a embeddings uh model and I'm just passing my open key here and putting it into a vctor store so now uh this is how the vector store looks this is the pine con um website where you can access and this is how the vector store looks so here if I see in
[8:12]The browser I'll be able to see all the other things um that I have played around so this uh the vctor account that we have now is 114 so this is a free service that you can use and it uh is currently using Google Cloud um services so this is a good thing to start with and the metric that they use is cosine to you know calculate the distance and uh everything and um yeah so the large language model that I am using is also provided by open AI where we have the chat history and uh we say that given the up conversation generate a search query to look up in
[8:53]Order to get the information related to conversation so when the user gives an input the retriever chain just goes and searches the searches the whole Vector store using the prompts that we have given and it just returns a retriever chain so what is a retriever chain the retriever chain just pulls up the vector that is more suitable and it make and it gives it to a conversational rack chain where we have a prompt saying here we are again using open a is large language model where we say answer the users question based on the below context we pass the context that uh we have so this
[9:33]Is again past year and um and uh finally this get response is where we pull uh put all these things together and we basically have a chat history so this is an important statement uh st. session state is important because we have this uh before initializing the vector store and also the chart history like I mean in the name basically because this is a streamlit application and it is fully built from scratch to front end and the front end is being done uh has been done using streamlit so in streamlit the variable the in streamlet the session State makes sure that the chat history or the vector store or basically
[10:22]Anything that follows after this that variable is not reloaded again and again or it becomes null in each refresh so it makes sure that the vector store and the chat history the contents in it doesn't vanish and each time you reload it is present so you don't have to you know put uh a lot of stress on your vector store by making it giving it a lot of data or even clear the chat history again and again so that is not required here and the streamit application is being set up here saying the page title is R project and the page icon is this and we have the settings Side Bar where
[11:02]I have the website URL and I just enter the URL so when I enter um I also see see that the website URL is not null and um if it is null I just say please enter website URL and if not I just proceed with the next things where the chatbot greets me with saying hello I'm um chatbot based on drag and how can I help you only after the website it is being initialized and um what we do is we initialize the chart history and we also uh make sure that the vector store is present and the vector store we make sure to get the data from the website
[11:45]URL and put it in this Vector store we have the user input uh saying type your message and when the user when the user has given some input and when it when if it is not null we make sure that we up that particular um user input into chat history saying that is a human message and we also get the response from get response of user input and we app that as a AI message so this we again printed using these from the chat history and this is how it works so here it is also important to see the openi usage here we I have the usage and this is the
[12:22]Activity of um my particular um key that I have here and um so yeah that is all about it and I believe this project would be beneficial for um educational purposes as there is new technologies um evolving and releasing every day and it is very important for us to stay up to date and also not spend a lot of time in reading the documents but uh implementing ideas and new projects thanks for watching this video I hope you have a great day
More videos
2:08Bridging the Pixel Gap in Browser Automation.
2:23How One Narrow Safety Rule Can Make an AI Less Safe Everywhere Else.
2:04Why splitting a chunk from its document makes it retrieve for the wrong question
4:20Three You Can Take Back. One You Can't.
2:21Why a 50-turn agent pays for the same screenshot 35 times unless it caches the pixels
1:53