How to Build an MCP Client GUI with Streamlit and FastAPI
Skills:
Prompt Craft80%Advanced Prompting70%Prompt Systems Engineering70%Agent Foundations60%Tool Use & Function Calling60%
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/AII
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Alejandro AO · Alejandro AO · 49 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
▶
50
51
52
53
54
55
56
57
58
59
60
Linear Regression in R - Full Project for Beginners
Alejandro AO
Configure Webpack 5 in Wordpress (2025) with Typescript and SASS
Alejandro AO
R Programming 101 - Crash Course for beginners
Alejandro AO
Convert HTML template to WordPress Theme (2025) - Full Course
Alejandro AO
Javascript Interactive Map with Leaflet EASY (with Marker Clusters & Popups)
Alejandro AO
Vanilla JS Project: Multi Step form in HTML, CSS & OOP Javascript
Alejandro AO
How to do AJAX in WordPress correctly (2025)
Alejandro AO
React Leaflet Tutorial for Beginners (2025)
Alejandro AO
Linear Regression in Python - Full Project for Beginners
Alejandro AO
Logistic Regression Project: Cancer Prediction with Python
Alejandro AO
Display Equations in ChatGPT
Alejandro AO
Create a Chrome Extension (Manifest V3) for ChatGPT
Alejandro AO
Full-Stack Project | ChatGPT API, React, Node.js, Express
Alejandro AO
Streamlit Python Course: Build a Machine Learning App to Predict Cancer
Alejandro AO
Langchain PDF App (GUI) | Create a ChatGPT For Your PDF in Python
Alejandro AO
LangChain Memory Tutorial | Building a ChatGPT Clone in Python
Alejandro AO
Chat with a CSV | LangChain Agents Tutorial (Beginners)
Alejandro AO
Create a ChatGPT clone using Streamlit and LangChain
Alejandro AO
Chat with Multiple PDFs | LangChain App Tutorial in Python (Free LLMs and Embeddings)
Alejandro AO
Full Python Environment Setup for AI (or other) Apps + Virtual Environments
Alejandro AO
Langchain + Qdrant Cloud | Pinecone FREE Alternative (20GB) | Tutorial
Alejandro AO
LangChain Version 0.1 Explained | New Features & Changes
Alejandro AO
Create a RAG Chain using LangChain 0.1 (New version)
Alejandro AO
Tutorial | Chat with any Website using Python and Langchain (LATEST VERSION)
Alejandro AO
Deploy Your AI Streamlit App for FREE | Step-by-Step (Heroku Alternative)
Alejandro AO
What is Google's Gemini 1.5 Pro | 10 Million Token Window
Alejandro AO
Chat with MySQL Database with Python | LangChain Tutorial
Alejandro AO
Stream LLMs with LangChain + Streamlit | Tutorial
Alejandro AO
Chat with MySQL Database using GPT-4 and Mistral AI | Python GUI App
Alejandro AO
#1 Harrison Chase: LangChain and The Future of LLM Applications | Alejandro AO
Alejandro AO
CrewAI Step-by-Step | Complete Course for Beginners
Alejandro AO
Python: Automating a Marketing Team with AI Agents | Planning and Implementing CrewAI
Alejandro AO
Build a Web App (GUI) for your CrewAI Automation (Easy with Python)
Alejandro AO
Early days of RAG and LlamaIndex - Jerry Liu
Alejandro AO
LlamaParse: Convert PDF (with tables) to Markdown
Alejandro AO
#2 Jerry Liu - What is LlamaIndex, Agents & Advice for AI Engineers
Alejandro AO
CrewAI + Exa: Generate a Newsletter with Research Agents (Part 1)
Alejandro AO
#3 Joe Moura | Multi Agent Systems and CrewAI
Alejandro AO
Python: Create a ReAct Agent from Scratch
Alejandro AO
New Groq Models: Best for Function-Calling Agents
Alejandro AO
Introduction to LlamaIndex with Python (2025)
Alejandro AO
LlamaIndex: How to use LLMs
Alejandro AO
LlamaIndex: How to Get Structured Data from LLMs
Alejandro AO
Multimodal RAG: Chat with PDFs (Images & Tables) [2025]
Alejandro AO
Advanced RAG with LlamaIndex - Metadata Extraction [2025]
Alejandro AO
Learn MCP Servers with Python (EASY)
Alejandro AO
Create MCP Clients in JavaScript - Tutorial
Alejandro AO
Create an MCP Client in Python - FastAPI Tutorial
Alejandro AO
How to Build an MCP Client GUI with Streamlit and FastAPI
Alejandro AO
Vibe Coding For Engineers (make it ACTUALLY work)
Alejandro AO
LlamaExtract Tutorial: Convert PDF & Images into JSON
Alejandro AO
Local MCP Servers for Cursor (Step by step)
Alejandro AO
Anthropic: How to Build Multi Agent Systems
Alejandro AO
Deploy Remote MCP Servers in Python (Step by Step)
Alejandro AO
GPT-5 for Developers: API Changes, Pricing, Model Router & Security
Alejandro AO
Tutorial: Auth for Remote MCP Servers (Step by Step) | OAuth 2.1 with ScaleKit
Alejandro AO
Generate UI Tests with TestSprite MCP Server + TRAE
Alejandro AO
#4 Allan Guo | 19-yo YC Founder - Willow Voice
Alejandro AO
RAG Project: Build an AI Onboarding Chatbot with Streamlit, LangChain, and ChromaDB
Alejandro AO
MCP Security | Malicious MCP Servers (Protect Yourself)
Alejandro AO
More on: Prompt Craft
View skill →Related AI Lessons
⚡
⚡
⚡
⚡
From Site Photos to Proposals: How AI Automates Takeoff for Trades
Dev.to AI
This new Claude skill saves you from bad contracts - and costs less than a lawyer
ZDNet
From Script to Strategy: Automating Your Audition Analysis with AI
Dev.to AI
Claude for Small Business: A Solo Founder's Honest Take
Dev.to · Max Mendes
🎓
Tutor Explanation
DeepCamp AI