How to Build an MCP Client GUI with Streamlit and FastAPI

Video Description

In this video, you'll learn how to build a graphical user interface (GUI) for an MCP client using Streamlit in Python, and connect it to a FastAPI backend. The tutorial covers the full process—from setting up the front-end project structure and session state management in Streamlit, to making asynchronous API calls, handling chat input, logging, and rendering complex message types (user, assistant, tool call, and tool result). This video is perfect for developers looking to build interactive AI-driven chat interfaces that connect to tool-enabled backends like MCP servers, using modern Python frameworks. ## Topics - How to create an MCP client GUI with Streamlit - Connecting a Streamlit front-end to a FastAPI backend - Project structure for Streamlit + FastAPI applications - Installing and using Streamlit and httpx - Managing session state and chat message history in Streamlit - Asynchronous API calls with httpx in Python - Creating and rendering custom chatbot classes - Handling different message types: user, assistant, tool call, and tool result - Displaying JSON data and chat messages in Streamlit - Using Streamlit's input and sidebar components - Setting up and running the Streamlit application - Error handling and logging in Streamlit apps - Troubleshooting API timeouts and frontend/backend connectivity - Tips for modularizing Streamlit code and separating logic - Recommendations for further learning (Streamlit crash course, AI Engineering Bootcamp) - Best practices for building AI chat interfaces in Python ## Links - 🔗 Code from the video: https://github.com/alejandro-ao/mcp-client-python-example - 🔗 Create a FastAPI MCP Client: https://youtu.be/mhdGVbJBswA - 🚀 Complete AI Engineer Bootcamp: https://aibootcamp.dev/ - ❤️ Buy me a coffee... or a beer (thanks): https://link.alejandro-ao.com/l83gNq - 💬 Join the Discord Help Server: https://link.alejandro-ao.com/HrFKZn - ✉️ Get the news from the channel and AI Engineering: https://link.alejandro-ao.com/AIIguB ## Timestamps 0:00:00 - 01 Intro 0:02:25 - Setup 0:06:31 - Chatbot GUI 0:13:10 - Handle Query 0:20:52 - Message Types