index.html•18.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practical Usage of AI Agents and MCP</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!-- Progress Bar -->
<div id="progress-bar" class="progress-bar"></div>
<!-- Presentation Container -->
<div class="presentation">
<!-- Slide 1: Title -->
<div class="slide title-slide active">
<div style="display: flex; flex-direction: column; height: 100%; justify-content: center;">
<h1>Practical Usage of<br>AI Agents and MCP Protocol</h1>
<p class="subtitle">From Theory to Working Code in 30 Minutes</p>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 4rem; gap: 4rem; max-width: 1200px; margin-left: auto; margin-right: auto;">
<div style="flex: 1; text-align: left;">
<p style="font-size: 1.4rem; line-height: 1.8;">
<strong>Muhammad Abdugafarov</strong><br>
<span style="opacity: 0.9;">October 11, 2025</span><br>
<span style="opacity: 0.9;">Khujand, Tajikistan</span>
</p>
</div>
<div style="text-align: center;">
<img src="../images/slides-qr-code.jpg" alt="Slides QR Code" style="width: 280px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
<p style="margin-top: 1.2rem; font-size: 1.1rem; opacity: 0.9; font-weight: 500;">Scan to view slides</p>
</div>
</div>
</div>
</div>
<!-- Slide 2: About Me -->
<div class="slide">
<h2>About Me 👨💻</h2>
<div class="bio">
<img src="https://media.licdn.com/dms/image/v2/D4D03AQFCnHejnOQVdA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1726477184320?e=1762992000&v=beta&t=heHgNA3ur9oHCPnp2r1EAxzucAa5hfGtzO6gS1_pUY4" alt="Muhammad Abdugafarov" class="bio-photo">
<div class="bio-text">
<p><strong>Name:</strong> Muhammad Abdugafarov</p>
<p><strong>Role:</strong> Team Lead at SilkRoad Professionals</p>
<p><strong>Experience:</strong> 8 years in IT</p>
<p><strong>Interests:</strong> AI, product development</p>
<div class="social-links">
<a href="https://github.com/dev-muhammad" target="_blank" rel="noopener noreferrer">🐙 GitHub: @dev-muhammad</a>
<a href="https://linkedin.com/in/dev-muhammad" target="_blank" rel="noopener noreferrer">💼 LinkedIn: @dev-muhammad</a>
<a href="https://t.me/muhammad_babolo" target="_blank" rel="noopener noreferrer">✈️ Telegram: @muhammad_babolo</a>
</div>
</div>
</div>
</div>
<!-- Slide 3: What are LLMs? -->
<div class="slide">
<h2>What is an LLM? 🧠</h2>
<h3>Large Language Model</h3>
<ul>
<li>Neural network trained on massive amounts of text</li>
<li>Understands and generates natural language text</li>
<li>Examples: GPT-4, Claude, Llama, Gemini</li>
<li>Can perform various tasks through text interface</li>
</ul>
<p style="margin-top: 2rem; font-size: 1.3rem; text-align: center;">
💡 LLM = "Brain" that understands human language
</p>
</div>
<!-- Slide 4: What LLMs Can Do -->
<div class="slide dark">
<h2>What Can LLMs Do? ✨</h2>
<div class="two-columns">
<div>
<h3 style="color: white;">Can:</h3>
<ul class="check">
<li>Understand text, images, audio</li>
<li>Generate responses</li>
<li>Analyze data</li>
<li>Write code</li>
<li>Translate languages</li>
</ul>
</div>
<div>
<h3 style="color: #FF6600;">Cannot:</h3>
<ul class="cross">
<li>Perform real-world actions</li>
<li>Use external tools</li>
<li>Change system state</li>
<li>Work with real-time data</li>
</ul>
</div>
</div>
<p style="text-align: center; margin-top: 2rem; font-size: 1.3rem; color: white;">
💡 LLMs can think, but can't act
</p>
</div>
<!-- Slide 5: From LLM to Agent -->
<div class="slide">
<h2>From LLM to AI Agent 🤖</h2>
<div class="diagram">
<pre>
LLM (Just a model)
↓
+ Tools
+ Memory
+ Decision-making ability
↓
AI Agent (Can act)
</pre>
</div>
<p style="margin-top: 2rem; font-size: 1.5rem; text-align: center;">
<strong>AI Agent = LLM + ability to interact with the world</strong>
</p>
</div>
<!-- Slide 6: What is an AI Agent? -->
<div class="slide dark">
<h2>What is an AI Agent? 🤖</h2>
<div class="two-columns">
<div>
<h3 style="color: white;">Components:</h3>
<ul>
<li>🧠 LLM (brain)</li>
<li>🛠️ Tools (hands)</li>
<li>💾 Memory (context)</li>
<li>🎯 Goal (task)</li>
</ul>
</div>
<div>
<h3 style="color: white;">Capabilities:</h3>
<ul class="check">
<li>Performs actions</li>
<li>Makes decisions</li>
<li>Uses tools</li>
<li>Solves complex tasks</li>
</ul>
</div>
</div>
<p style="text-align: center; margin-top: 2rem; font-size: 1.3rem; color: #00AA66;">
Agent = Not just a chatbot, but an assistant that can act!
</p>
</div>
<!-- Slide 7: The Problem -->
<div class="slide">
<h2>The Problem 🤔</h2>
<h3 style="color: #FF6600; margin-bottom: 2rem;">LLMs are inherently limited</h3>
<ul>
<li>Limited by training data (knowledge becomes outdated)</li>
<li>Cannot interact with external world</li>
<li>No access to your systems and data</li>
<li>Cannot perform real actions</li>
</ul>
<p style="margin-top: 3rem; font-size: 1.5rem; text-align: center;">
<strong>Question:</strong> How to give LLMs the ability to use tools?
</p>
</div>
<!-- Slide 8: The Solution -->
<div class="slide dark">
<h2>Solution: MCP ✨</h2>
<h3 style="color: #00AA66; margin-bottom: 2rem;">Model Context Protocol</h3>
<ul>
<li>Standard protocol for connecting tools to LLMs</li>
<li>Gives LLMs the ability to interact with external world</li>
<li>Created by Anthropic, works with any LLM</li>
<li>Transforms LLMs into AI agents</li>
</ul>
<p style="margin-top: 3rem; font-size: 1.8rem; text-align: center;">
MCP = <span class="highlight" style="color: #00AA66;">USB for AI tools</span>
</p>
</div>
<!-- Slide 9: What is MCP? -->
<div class="slide">
<h2>What is MCP? 🔌</h2>
<ul>
<li>Model Context Protocol</li>
<li>Standard for AI-to-tool communication</li>
<li>Like REST API, but for AI agents</li>
<li>Server provides tools</li>
<li>AI automatically discovers and uses them</li>
</ul>
</div>
<!-- Slide 10: MCP Architecture -->
<div class="slide dark">
<h2>System Architecture 🏗️</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="../images/diagram.png" alt="System Architecture" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 8px;">
</div>
</div>
<!-- Slide 11: Why MCP? -->
<div class="slide">
<h2>Why MCP? 💡</h2>
<div class="two-columns">
<div>
<h3 style="color: #00AA66;">With MCP ✓</h3>
<ul class="check">
<li>Standardized protocol</li>
<li>Plug-and-play tools</li>
<li>Works with any LLM</li>
<li>Easily extensible</li>
</ul>
</div>
<div>
<h3 style="color: #dc3545;">Without MCP ✗</h3>
<ul class="cross">
<li>Custom integration</li>
<li>For each tool</li>
<li>Tightly coupled to LLM</li>
<li>Hard to maintain</li>
</ul>
</div>
</div>
</div>
<!-- Slide 12: Today's Demo -->
<div class="slide dark">
<h2>Today's Demo 🎬</h2>
<h3 style="color: white; text-align: center; margin-bottom: 2rem;">Expense Tracker Agent</h3>
<ul>
<li>Track expenses in natural language</li>
<li>"I spent 50 on groceries" → Creates transaction</li>
<li>AI automatically categorizes</li>
<li>Provides financial insights</li>
<li>No forms, no clicks - just conversation</li>
</ul>
</div>
<!-- Slide 13: System Architecture -->
<div class="slide">
<h2>System Architecture 🔧</h2>
<div class="diagram">
<pre>
User → AI Agent (Agno) → MCP Server → FastAPI → SQLite
↓
OpenAI GPT-4
↓
Processes request
Selects tools
Formats response
</pre>
</div>
</div>
<!-- Slide 14: Tech Stack -->
<div class="slide">
<h2>Tech Stack 🛠️</h2>
<ul>
<li><strong>Agent Framework:</strong> Agno</li>
<li><strong>AI Model:</strong> OpenAI GPT-4</li>
<li><strong>Protocol:</strong> Model Context Protocol (MCP)</li>
<li><strong>Backend:</strong> FastAPI + SQLite</li>
<li><strong>Clients:</strong> Web UI, Telegram Bot</li>
<li><strong>Language:</strong> Python 🐍</li>
</ul>
</div>
<!-- Slide 15: MCP Server Code -->
<div class="slide dark">
<h2>MCP Server - code 💻</h2>
<pre><code><span class="keyword">from</span> fastapi <span class="keyword">import</span> FastAPI
<span class="keyword">from</span> fastapi_mcp <span class="keyword">import</span> FastApiMCP
app = FastAPI()
<span class="comment"># That's it! 5 lines of code</span>
mcp = FastApiMCP(
app,
name=<span class="string">"Expense Tracker MCP"</span>
)
<span class="comment"># Automatically converts all FastAPI routes into MCP tools!</span></code></pre>
</div>
<!-- Slide 16: FastAPI Backend -->
<div class="slide">
<h2>FastAPI Backend 🚀</h2>
<pre><code><span class="keyword">@app.post</span>(<span class="string">"/transactions"</span>)
<span class="keyword">async def</span> <span class="function">create_transaction</span>(
data: TransactionCreate
):
<span class="keyword">return</span> store.create(data)
<span class="comment"># Regular FastAPI route</span>
<span class="comment"># Becomes MCP tool automatically</span>
<span class="comment"># AI can call it via MCP</span></code></pre>
</div>
<!-- Slide 17: Agent Configuration -->
<div class="slide dark">
<h2>Agent Configuration ⚙️</h2>
<pre><code>agent = Agent(
name=<span class="string">"Expense Tracker Agent"</span>,
model=OpenAIChat(id=<span class="string">"gpt-4"</span>),
<span class="comment"># Connect to MCP server</span>
tools=[MCPTools(
url=<span class="string">"http://localhost:9002/mcp"</span>
)],
<span class="comment"># System instructions</span>
instructions=SYSTEM_PROMPT
)</code></pre>
</div>
<!-- Slide 18: Live Demo -->
<div class="slide title-slide">
<h1 style="font-size: 5rem;">🎬</h1>
<h1>LIVE DEMO</h1>
<p class="subtitle">Let's see how it works!</p>
</div>
<!-- Slide 19: Under the Hood -->
<div class="slide">
<h2>Under the Hood 🔍</h2>
<div class="diagram">
<pre>
1. User: "Show my balance"
↓
2. GPT-4 thinks:
- Need tool: get_summary
↓
3. MCP call:
POST /mcp/tools/get_summary
↓
4. FastAPI executes:
SELECT SUM(...) FROM transactions
↓
5. Agent responds:
"Your balance: 5000.00"
</pre>
</div>
</div>
<!-- Slide 20: Real-World Use Cases -->
<div class="slide">
<h2>Real-World Use Cases 🌍</h2>
<ul>
<li><strong>Customer Support:</strong> AI agent with CRM tools</li>
<li><strong>DevOps:</strong> AI with monitoring and deployment tools</li>
<li><strong>Data Analysis:</strong> AI with databases and analytics</li>
<li><strong>Content Management:</strong> AI with CMS tools</li>
<li><strong>IoT Control:</strong> AI with device management tools</li>
</ul>
</div>
<!-- Slide 21: Production Benefits -->
<div class="slide dark">
<h2>Production Benefits 📈</h2>
<ul class="check">
<li>Reduced integration time (hours vs weeks)</li>
<li>Consistent tool interface</li>
<li>Easy to add new capabilities</li>
<li>Model-agnostic (easily switch GPT to Claude)</li>
<li>Better AI tool selection</li>
</ul>
</div>
<!-- Slide 22: Try It Yourself -->
<div class="slide">
<h2>Try It Yourself! 🚀</h2>
<pre><code><span class="comment"># Clone the repository</span>
git clone https://github.com/dev-muhammad/MCPAgent
cd MCPAgent
<span class="comment"># Configure</span>
cp .env.example .env
<span class="comment"># Add OPENAI_API_KEY to .env</span>
<span class="comment"># Run</span>
cd server && python start.py --mcp
cd server && python start.py --api
cd agent && python agent.py</code></pre>
</div>
<!-- Slide 23: Resources -->
<div class="slide dark">
<h2>Resources 📚</h2>
<div class="two-columns">
<div>
<h3 style="color: white;">Documentation:</h3>
<ul>
<li>MCP: modelcontextprotocol.io</li>
<li>FastAPI-MCP: github.com/jlowin/fastapi-mcp</li>
<li>Agno: docs.agno.com</li>
</ul>
</div>
<div>
<h3 style="color: white; text-align: center;">GitHub Repository:</h3>
<div class="qr-code">
<!-- QR code for GitHub repository -->
<img src="../images/repo-qr-code.jpg" alt="GitHub QR" style="max-width: 450px; border-radius: 32px;">
<p style="margin-top: 1rem; font-size: 1.2rem;">
<a href="https://github.com/dev-muhammad/MCPAgent" target="_blank" rel="noopener noreferrer" style="color: white; text-decoration: none;">
github.com/dev-muhammad/MCPAgent
</a>
</p>
</div>
</div>
</div>
</div>
<!-- Slide 24: Q&A -->
<div class="slide title-slide">
<h1>Questions? 🤔</h1>
<div class="social-links" style="justify-content: center; margin-top: 3rem;">
<a href="https://github.com/dev-muhammad" target="_blank" rel="noopener noreferrer" style="color: white; font-size: 1.5rem;">🐙 GitHub: @dev-muhammad</a>
<a href="https://t.me/muhammad_babolo" target="_blank" rel="noopener noreferrer" style="color: white; font-size: 1.5rem;">✈️ Telegram: @muhammad_babolo</a>
<a href="https://linkedin.com/in/muhammad-abdugafarov" target="_blank" rel="noopener noreferrer" style="color: white; font-size: 1.5rem;">💼 LinkedIn: @muhammad-abdugafarov</a>
</div>
<p style="margin-top: 3rem; font-size: 1.8rem; opacity: 0.9;">
Thank you for your attention! 🎉
</p>
</div>
</div>
<!-- Navigation Controls -->
<div class="controls">
<div class="slide-counter" id="slide-counter">1 / 24</div>
<button class="nav-btn" id="prev-btn">← </button>
<button class="nav-btn" id="next-btn"> →</button>
<button class="nav-btn" id="help-btn">?</button>
</div>
<!-- Help Overlay -->
<div class="help-overlay" id="help-overlay">
<div class="help-content">
<h2>Keyboard Shortcuts ⌨️</h2>
<ul>
<li><strong>→ / Space / PageDown:</strong> Next slide</li>
<li><strong>← / PageUp:</strong> Previous slide</li>
<li><strong>Home:</strong> First slide</li>
<li><strong>End:</strong> Last slide</li>
<li><strong>Shift + F:</strong> Fullscreen mode</li>
<li><strong>Esc:</strong> Exit fullscreen / Close help</li>
<li><strong>? / h:</strong> Show this help</li>
</ul>
<p style="text-align: center; margin-top: 2rem;">
<button class="nav-btn" id="close-help">Close</button>
</p>
</div>
</div>
<script src="../js/slides.js"></script>
</body>
</html>