How to Build an MCP Client GUI with Streamlit and FastAPI

Key Takeaways

Good morning everyone. How's it going today? In today's video, I'm going to show you how to create an MCP client graphical user interface that looks precisely like this. So, I'm going to ask it, how do I integrate Lama index with Chromma? This one has access to a tool called get documentation which is exposed to it via an MCP server and it's going to call the MCP server, get the response and display everything to me in just a moment. So there you go. We have the response and this is what you can expect. As you can see, we have the user message which is the query that I sent right here. After that, we have that the assistant decided to call a tool. So we have a message of call of type tool use and the input which is exactly what parameters it send. And then we have right here a tool result which is the actual result from our um MCP tool. And then naturally we have the actual response from our assistant after having used my MCP tools right here. And just a very quick note on the fact that in this video we're going to be plugging this front end to a fast API application that we coded in the previous video that was up a few days ago. And that API that fast API actually looks like this. So it is an API that exposes an endpoint um under query right here. And it takes one parameter uh which is query where you send your query right here. And it returns a bunch of messages. The first one is your own message. Then it returns the assistance tool call tool use right here. Then it returns the actual response from the tool use that you did using the MCP server. And then by the end it returns the assistant right here. So in this video we're going to be plugging a very nice front end that we're going to build with very few lines of Python code uh with this uh fast API application that you should already have or a similar one that you may already have on your own. If you do not have that application, I recommend that you uh go to that other video to complete that fast API app first and then come right here to actually build the front end that looks like this. Okay, so let's get right into [Music] it. All right, so what we're going to be doing right here is very straightforward. Uh we're going to be going to creating a front directory right here beside our API and I'm going to initialize a main entry point in Python. Uh it's very straightforward. And in this one, uh, what I'm going to need is I'm going to need to install, uh, Streamlit, right? So, I'm going to use Streamlit. There we go. Uh, super quick. And there we go. Now, after that, I'm going to be able to just import it like this. So, this is what I'm going to be using. This I'm not going to be using it yet. So, I'm going to be using async.io. I'm going to be using a quick logger that I'm going to actually just copy from here from my API. So, I'm going to paste it right here. Uh, if you might remember from the API video, the logger that I use right here is essentially just a very quick logger that I vip coded that essentially just has two uh debugging levels, one for info and one for debug. Info is logged in the terminal and debug is logged into a file that will be right here. uh very quick, very straightforward. And after that, I'm going to be importing streaml and we're going to be using async io. So, I'm going to initialize my main um my main cl my main um uh function right here. And then we're going to just run it when we actually execute the whole thing. And we're going to be using three different environment. well not environment three different um state variables if you don't if you remember correctly about how it work how streamlid works in streamllet you have uh you had you have uh session state variables which essentially remain the same throughout the entire life cycle of streamllet because remember that streamllet essentially reruns your code every single time that anything happens in your application. So the variables that are stored in this session state variables are going to remain uh the same. So I have a boolean value right here for server connected if my MCP server is connected. I have my tools um uh array right here which is going to just save the information about the tools that I have in my MCP servers and the messages which is essentially going to be just the history of the messages with my assistant right here. Okay. Um, after that I'm going to just initialize a very quick uh API URL variable right here, which is going to be always the same one, which is going to be just the API that I coded before, which is in local host, if I remember correctly. If it's in Yeah, there you go. It's in port 8,000 if I remember that correctly. And then just as you usually do, you initialize uh when you initialize a a stream application, you set up the set page config. So you can set the title using page title and an icon. I don't remember why it was a shark here, but why not? And um after that, there you go. After that, we're going to initialize our chatbot like this. So we're going to go create the chatbot. chatbot is going to equal my chatbot that is going to take the API URL and um and there we go. Then all we're going to do is called chatbot render to actually render the entire application. Okay, so there you go. That is our main um entry point. But we're going to have to actually create the chatbot class and it's very straightforward. Um and it will have naturally a render method right here. Okay. So, let's create that right here. So, we're going to do chatbot py and that's where we're going to create the chatbot. And um that's how we're importing it right here. Let me just rename this right here. Chatbot py. Right. So, let's start with the chatbot. All right. So, in order to start with our chatbots, very straightforward. All we're going to have to do at start is we're going to import streamllet as st and httpx for my calls to the API that I just did. And uh there we go. So we're going to initialize our chatbot class like this. And in the constructor we have two main properties. So the first one is the API URL. I mean you can choose to just uh just define it hardcode it in here. I decided to inject it as a dependency from here but that's all right name's okay and then this one's very important that is going to be the list of messages that are going to be shown in the UI okay so these are the history of messages that your conversation is going to have and as you can see I am calling them straight from the session state that you see right right here um that's how it works in streamllet and it makes everything easier, but you do have to learn how to work with session state. Um, that being said, if you're not familiar enough with Streamlid, I did uh I do have a very complete uh crash course on Streamlit that you can check out in the description. Uh it's actually one module of a complete boot camp that I have on creating AI applications for production environments. So, but that one in particular is free. So you can open it and uh get a taste of what um the boot camp canvas is all about. And I mean the streamly part is completely free. So go for it. Um after this we're going to be having the render method. As you can see right here we're calling the render method and uh very straightforward. So what we're going to be doing is we're going to define an render method. And this method what it's going to do is it is going to there we go. just going to uh just going to make it async. And this method is going to load the components that we're going to be showing in our UI, right? If you remember correctly, the UI looks basically like this. So you have the title right here, and that's the title that we're going to be putting first. So the title is going to be uh like this. ST.title. Um after this we're going to be doing um with sidebar. In order to actually add a sidebar like the one that you see right here, we're going to be adding settings and the tools. So first let's add the settings. Very straightforward. For the settings, we're going to be just adding it like this. There we go. There we go. Uh subheader for settings and then the API URL that we imported right here. And then after that, what we're going to be doing is we're going to be calling the uh endpoint that we created in the previous video in the API. Right? So remember that the API right here, I have it right here inside of the API main. Remember that right here I have a tools endpoint which essentially just calls the get MCP tools method from my MCP server. And it's very straightforward. All that it does is that it returns my all of my tools available in my uh server. Uh so there you go. And I'm going to tap into this thing right here. So in order to do that, I'm going to have to first initialize a method called uh get tools. So I'm going to do here get tools like this. And uh there we go. So, we're going to be initializing a call to my async client like this. So, with httpx async client as client, we're going to await from my client, we're going to get and right here, let's call to my API URL and we're going to call into tools right here. Okay. And basically we're just going to return the response in JSON. Uh like that. So this should do. And now we're going to call that from here. So we're going to say the result is going to be await self.get tools. And the result we're going to uh display it under the subheader tools as we saw right here. Okay. So let's actually do that. Right. So, we're going to do this and then we're going to do st subheader. Going to tap tools and we're going to write st write and we're going to write every single tool um every single tool name like this for tool in result tools. There we go. That looks pretty good to me. And then we're going to save this. And this should already create the sidebar with all of my tools. And this call should be working correctly. So let's actually take a look at that. Going to open this right here. Going to go into my front um folder right here. Remember that my API is running currently. So I am going to tap into this pod right here. So let's actually do in order to run the streamllet application, I'm going to have to do streamlit run main, which is the name of my file. Hit enter. And oh, for some reason I don't have my source uh environment activated. So there you go. Uh so now I should be able to execute this thing right here. Uh I think I made a very quick mistake. It's not with st side sidebar, not with sidebar. There you go. So now I should be able to go to this browser right here. And let's just enter this right here. And there you go. As you can see, we have my settings sidebar. I have my title. I have my sidebar with the client tools right here. And if you want to check the actual uh logs from the API, you can see that it called the tools endpoint. So there you go. Now we can go to the next part which is the more exciting part which is the actual interactive chat. All right. So now that we're right here, we can initialize a next part right here. I'm going to be okay. I'm going to keep everything inside of the render uh method right here to make it easier, but feel free to modularize it uh to modularize this into different methods. Uh so right here, I'm going to be initializing my query uh input right here. So in Streamlit, you have this ST.put element that allows you to initialize a chat input. And what after that, we're going to test if the user actually sent something by doing if query like this. Um, and if there is a query, the first thing that we're going to be doing is why not let's just log it in the uh message uh UI doing st chat message. This is just going to show it in the UI. And after that, what we're going to be doing is we're going to initialize an an async client with our HTTPX uh client like this as client. And what we're going to be doing is we're going to be sending that query to our API. Okay, that's very straightforward. Uh remember that our API receives a query like this that takes one parameter which is query. Okay, uh I mean this is the name of the endpoint and the parameter itself is also named uh query as you see right here. So let's take a look at that. Uh so we're going to come right here and inside of here what we're going to do is we're going to first initialize the response which is going to be an await uh call to the client which is going to be post uh post call and we're going to send it to our API URL/query which is the endpoint that we just saw. And the body of it is going to be a JSON object with the only parameter called query like this. Okay. And uh there you go. Um after that what we are going to do is we are going to say that if the response um is correct. So if we got a 200s as response from our fast API application, what we're going to do is we're going to get the messages from there. So remember that our messages uh right here uh the object returned from our API call if you remember correctly from our HTTP client right here is a messages object right uh so I mean it's an object with one element called messages and this is the one that we're going to be uh trying to get. So, in order to get it, all that we have to do is we're going to go right here and the messages, we're going to set them to the response.json, and we're going to tap into the messages part right here. Okay. Now, after that, what we can do is we update the session state of messages and we set it to this new messages that we have right here. Okay. And uh there you go. After that, all that we have to do is show or display the messages that we are going to be sending. And in order to do that, all that we're going to have to do is to show the messages all every single one of these messages in our UI. And uh in order to do that, it's also very straightforward. All you're going to have to do is for message in messages. Uh you could do it like this. Uh so let me show you what this actually returns. So for ST chat message roh we're going to write it remember that st message st uh message what it does is that first of all it takes the type of message and then the content of the message itself. Um this will work uh but let me just show you how it actually works. Um um just as a recap um we sent the request to our query endpoint. We verified that the request was correct and then we tapped into the messages uh object inside the response and we set our internal history of our application of the UI messages to messages like this. the ones that we got from our API. Okay, so essentially we were setting those to these ones right here. And after that, we're showing them in the application using ST chat message. I think our main message is going to be duplicated because if you remember correctly in the first one, we already returned our own message. So there you go. This should work correctly. So let's take a look at it. So, if I do, if I go back to my browser right here, and I reload, as you can see, I have my input right here, which is the SD chat input. And I can say, hello. And let's see what my assistant is going to return to me. So, hello. How can I assist you today? I'm here to help you with any questions, etc. So, so far so good. Okay. Uh, now we want to test how would this work if it could actually call an MCP uh tool, right? So let's just restart this and let's ask a new question. Let's say uh how do I integrate um lama index with chroma this time let's do it with MCP and let's send that and it's going to start thinking. I'm actually going to show you what is actually happening in the terminal. Oh, seems like we had a mistake. Uh oh, we had a timeout. Let's actually set the time out to something a little bit less uh restrictive. So, let's set it to let's set the time out to 60 seconds. And uh there we go. So, this should already make it work a little bit better. So, I'm going to reload this. So, let's reload it like this. And let's ask how do I integrate uh LMA index with Chroma? No, with MCP it's going to stop thinking. And let's actually now take a look at our uh terminal right here. So, as you can see, the API is already trying to figure out what the uh returned value from the language from the MCP call was. So, as you can see here, we have the actual documentation and um here we have some errors. Let's see. Are we having any errors? It's still thinking. All right. It usually takes a little bit of time because um there we go. Um so, as you can see, this was a lot. So, first what happened is that we got as returned the uh first message which is let me search the data data main index documentation to find information about integrating MCP. So that is its thought process and here you have the actual tool call which is called uh llama index. It got it wrong. It thought that MCP means Microsoft cloud platform. Uh not a big problem but I mean uh it's nice to see to be able to actually see uh that your language model did not mess up your call by actually logging in the terminal. I mean in your UI the actual arguments that were sent to your application. All right. So now something that I wanted to show you real quick. Uh it's a quick little piece of advice to so that you can handle these messages a little bit more efficiently. And uh right here as you can see we're just basically just showing everything that our API returns to us. Uh which is a lot but you probably want to be able to handle them differently. Uh so what I would recommend is that in your client uh you handle different types of messages independently. And there are mainly four types of messages that you are going to be the most concerned with. The first one is the user message. So like this one. The other one is the AI message like the response. And then another one is the tool use. So the tool call from a language model. And then the tool response. Okay. So those are the four messages that I would want you to handle separately. And in order to do that, all you're going to have to do is come right here. And I'm actually going to instead of just showing every single message like this, I'm going to be using a function called uh display display message. And for each message, I'm going to log it using that display. So I'm going to save it like this. And the display message, I'm going to create the function right here. So I'm going to call it display message. And the message is going to be like this. So for now um here it's going to be it currently does nothing. And um there we go. So I'm going to click save. And as you can see everything's gone because it currently does nothing. So what we're going to be doing is we're going to handle the four different types of messages. First one is the user message. Then it is the tool call message or the tool use message. Then we're going to be handle the tool result message and finally the AI message. Right now how do we test them? Uh the first one is very straightforward. Um the actually the language model when it returns a user me when you send a user message it's very straightforward. It essentially just have to test that the message row is user and that and that the type of the message content is a string, right? And all you're going to do is just uh display it like that. So there you go. Um then I mean the reason why I test that it is a string is because remember when we checked right here on messages when the user uh when you send a message to the language model it counts as a content uh the content is a string but when you uh send a response uh from a tool call it also comes with ro of a user but as you can see in this case the content is actually an array. So, this one we're going to be handling differently under the tool response. And uh in order to do that, we're going to go back right here and let's actually check out the tool use. The tool use is this one right here. So, it is on roll assistant and the content is a list. So in order to do that, we're just going to come right here under tool use and we're going to say that if the message role is an assistant and the type is a list, we're going to say that for each item in the message content, we're going to say that if the item is a tool, use we're going to be just uh displaying it inside an ST message and we're going to be using the JSON method of ST message I mean the JSON message uh JSON method of ST in order to write right here and uh this one's very straightforward it takes the we're going to type in the um tool and uh the input so So the input's going to be input like this. And this one actually takes name. Uh just to be clear what's going on right here. Uh we tested that the role is assistant and then the content is a list like you see right here. So the role is assistant and the content is a list. And uh remember that we had two different messages whenever a an assistant makes a tool call. So the first one is its reasoning. So I'm doing something like let me search the documentation for information blah blah blah. And the second one is the actual tool call, right? Um, in this case, I'm only going to be showing the tool call. I don't really want to show this one, but you can do that, too, right? Uh, so in order to pinpoint this one, I'm going to have to target the one of type tool use, which is what I did right here. And then I just logged whatever is inside of it. um um which is the tool item the sorry the tool name right here and also the input which is the actual parameters that were sent to the function. Uh so there you go. Now if I click save like this right here and I go to my element right here I'm actually not seeing anything because I'm not displaying my messages before anything happens. So currently my uh display messages is only happening uh while I am inside of uh uh of uh the query conditional right here. So only if uh the user actually sends something. But if I want to display it right here, I can do it like this. And there you go. So you have my user question and the tool call. Now, next we're going to test um we're going to pinpoint the tool result. And the tool result usually looks something like this one right here. So, the role is going to be a user and the content is going to be the actual content of the whole thing right here. So, let's uh just send it like that. Um like this right here. So if the message is an assistant. Nope. Is the message is a user and the type is a list. Right here we're just going to log everything actually. Yeah, I think it's just easier. Um uh the tool response. So, um, yeah, I guess we can just st chat message. And this one's going to be, uh, let's call it an assistant message, even though it technically actually is an a message from the, um, a message from the user, but I'm going to be showing it as an assistant right here just to for user experience. And um let's just type the whole thing like this. Um if I remember correctly, it's still resolved. I can actually tap into the content object right here. It's probably easier. Um yeah, let's go. Let's just go like that. Should be good enough. There you go. And now if I open that up right here, you can see that my result is here. Now something useful about using JSON um the JSON um uh component right here is that you can actually call the expanded equal false so that whenever it is uh shown everything is going to be uh shown like this and that's quite convenient if you want to um if you want to do this because sometimes the responses are super long. Uh there you go. And then last but not least the AI message. Very straightforward as well. All you got to do is that that the mess role is assistant and that it is a string and then all you got to do is just do that like that and there you go. So now how do I integrate lain with MCP? Here you have the tool call and the result and uh there you go. I hope that you enjoyed this tutorial. It was very quick show you how to create a graphical user interface for your MCP client. Um, don't forget to check out the uh, Streamly crash course that I'm linking right there in the AI engineering boot camp. And also uh, feel free to take a look at the previous video on how to create a fast API application for um, MCP uh, clients really uh, MCP uh, yeah, a fast API application for MCP clients. Uh, so great to see you and uh, have a good one. I'll see you next time. [Music] [Music]