How to Build an MCP Client GUI with Streamlit and FastAPI

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-c...
🔗 Create a FastAPI MCP Client:    • Create an MCP Client in Python - FastAPI T...  
🚀 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