index.html•22.3 kB
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Практическое использование AI агентов и 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>Практическое использование<br>AI агентов и MCP протокола</h1>
<p class="subtitle">От теории к рабочему коду за 30 минут</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>Мухаммад Абдугафаров</strong><br>
<span style="opacity: 0.9;">11 октября 2025</span><br>
<span style="opacity: 0.9;">Худжанд, Таджикистан</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;">Сканируйте для просмотра слайдов</p>
</div>
</div>
</div>
</div>
<!-- Slide 2: About Me -->
<div class="slide">
<h2>Обо мне 👨💻</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="Мухаммад Абдугафаров" class="bio-photo">
<div class="bio-text">
<p><strong>Имя:</strong> Мухаммад Абдугафаров</p>
<p><strong>Роль:</strong> Тимлид в SilkRoad Professionals</p>
<p><strong>Опыт:</strong> 8 лет в IT</p>
<p><strong>Интересы:</strong> AI, продуктовая разработка</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>Что такое LLM? 🧠</h2>
<h3>Large Language Model — Большая языковая модель</h3>
<ul>
<li>Нейронная сеть, обученная на огромных объёмах текста</li>
<li>Понимает и генерирует текст на естественном языке</li>
<li>Примеры: GPT-4, Claude, Llama, Gemini</li>
<li>Может выполнять разные задачи через текстовый интерфейс</li>
</ul>
<p style="margin-top: 2rem; font-size: 1.3rem; text-align: center;">
💡 LLM = "Мозг", который понимает человеческий язык
</p>
</div>
<!-- Slide 4: What LLMs Can Do -->
<div class="slide dark">
<h2>Что умеют LLM? ✨</h2>
<div class="two-columns">
<div>
<h3 style="color: white;">Могут:</h3>
<ul class="check">
<li>Понимать текст, изображения, аудио</li>
<li>Генерировать ответы</li>
<li>Анализировать данные</li>
<li>Писать код</li>
<li>Переводить языки</li>
</ul>
</div>
<div>
<h3 style="color: #FF6600;">Не могут:</h3>
<ul class="cross">
<li>Выполнять реальные действия</li>
<li>Использовать внешние инструменты</li>
<li>Изменять состояние систем</li>
<li>Работать с актуальными данными</li>
</ul>
</div>
</div>
<p style="text-align: center; margin-top: 2rem; font-size: 1.3rem; color: white;">
💡 LLM умеет думать, но не умеет делать
</p>
</div>
<!-- Slide 5: From LLM to Agent -->
<div class="slide">
<h2>От LLM к AI агенту 🤖</h2>
<div class="diagram">
<pre>
LLM (Просто модель)
↓
+ Инструменты (Tools)
+ Память (Memory)
+ Способность принимать решения
↓
AI Agent (Может делать)
</pre>
</div>
<p style="margin-top: 2rem; font-size: 1.5rem; text-align: center;">
<strong>AI Agent = LLM + возможность взаимодействовать с миром</strong>
</p>
</div>
<!-- Slide 6: What is an AI Agent? -->
<div class="slide dark">
<h2>Что такое AI агент? 🤖</h2>
<div class="two-columns">
<div>
<h3 style="color: white;">Компоненты:</h3>
<ul>
<li>🧠 LLM (мозг)</li>
<li>🛠️ Инструменты (руки)</li>
<li>💾 Память (контекст)</li>
<li>🎯 Цель (задача)</li>
</ul>
</div>
<div>
<h3 style="color: white;">Возможности:</h3>
<ul class="check">
<li>Выполняет действия</li>
<li>Принимает решения</li>
<li>Использует инструменты</li>
<li>Решает сложные задачи</li>
</ul>
</div>
</div>
<p style="text-align: center; margin-top: 2rem; font-size: 1.3rem; color: #00AA66;">
Агент = Не просто чат, а помощник, который может делать!
</p>
</div>
<!-- Slide 7: The Problem -->
<div class="slide">
<h2>Проблема 🤔</h2>
<h3 style="color: #FF6600; margin-bottom: 2rem;">LLM сами по себе ограничены</h3>
<ul>
<li>Ограничены тренировочными данными (знания устаревают)</li>
<li>Не могут взаимодействовать с внешним миром</li>
<li>Нет доступа к вашим системам и данным</li>
<li>Не могут выполнять реальные действия</li>
</ul>
<p style="margin-top: 3rem; font-size: 1.5rem; text-align: center;">
<strong>Вопрос:</strong> Как дать LLM возможность использовать инструменты?
</p>
</div>
<!-- Slide 8: The Solution -->
<div class="slide dark">
<h2>Решение: MCP ✨</h2>
<h3 style="color: #00AA66; margin-bottom: 2rem;">Model Context Protocol</h3>
<ul>
<li>Стандартный протокол для подключения инструментов к LLM</li>
<li>Даёт LLM возможность взаимодействовать с внешним миром</li>
<li>Создан Anthropic, работает с любой LLM</li>
<li>Превращает LLM в AI агента</li>
</ul>
<p style="margin-top: 3rem; font-size: 1.8rem; text-align: center;">
MCP = <span class="highlight" style="color: #00AA66;">USB для AI инструментов</span>
</p>
</div>
<!-- Slide 9: What is MCP? -->
<div class="slide">
<h2>Что такое MCP? 🔌</h2>
<ul>
<li>Model Context Protocol</li>
<li>Стандарт для коммуникации AI с инструментами</li>
<li>Как REST API, но для AI агентов</li>
<li>Сервер предоставляет инструменты</li>
<li>AI автоматически их обнаруживает и использует</li>
</ul>
</div>
<!-- Slide 10: MCP Architecture -->
<div class="slide dark">
<h2>Архитектура системы 🏗️</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="../images/diagram.png" alt="Архитектура системы" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 8px;">
</div>
</div>
<!-- Slide 11: Why MCP? -->
<div class="slide">
<h2>Зачем нужен MCP? 💡</h2>
<div class="two-columns">
<div>
<h3 style="color: #00AA66;">С MCP ✓</h3>
<ul class="check">
<li>Стандартизированный протокол</li>
<li>Plug-and-play инструменты</li>
<li>Работает с любой LLM</li>
<li>Легко расширяется</li>
</ul>
</div>
<div>
<h3 style="color: #dc3545;">Без MCP ✗</h3>
<ul class="cross">
<li>Кастомная интеграция</li>
<li>Для каждого инструмента</li>
<li>Жёстко привязан к LLM</li>
<li>Тяжело поддерживать</li>
</ul>
</div>
</div>
</div>
<!-- Slide 12: Today's Demo -->
<div class="slide dark">
<h2>Сегодняшнее демо 🎬</h2>
<h3 style="color: white; text-align: center; margin-bottom: 2rem;">Expense Tracker Agent</h3>
<ul>
<li>Отслеживание расходов на естественном языке</li>
<li>"Я потратил 50 на продукты" → Создаёт транзакцию</li>
<li>AI автоматически категоризирует</li>
<li>Предоставляет финансовые инсайты</li>
<li>Без форм, без кликов - только разговор</li>
</ul>
</div>
<!-- Slide 13: System Architecture -->
<div class="slide">
<h2>Архитектура системы 🔧</h2>
<div class="diagram">
<pre>
Пользователь → AI Agent (Agno) → MCP Server → FastAPI → SQLite
↓
OpenAI GPT-4
↓
Обрабатывает запрос
Выбирает инструменты
Форматирует ответ
</pre>
</div>
</div>
<!-- Slide 14: Tech Stack -->
<div class="slide">
<h2>Технологический стек 🛠️</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 - код 💻</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"># Это всё! 5 строк кода</span>
mcp = FastApiMCP(
app,
name=<span class="string">"Expense Tracker MCP"</span>
)
<span class="comment"># Автоматически преобразует все FastAPI роуты в MCP инструменты!</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"># Обычный FastAPI роут</span>
<span class="comment"># Становится MCP инструментом автоматически</span>
<span class="comment"># AI может вызывать его через MCP</span></code></pre>
</div>
<!-- Slide 17: Agent Configuration -->
<div class="slide dark">
<h2>Настройка агента ⚙️</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"># Подключаемся к MCP серверу</span>
tools=[MCPTools(
url=<span class="string">"http://localhost:9002/mcp"</span>
)],
<span class="comment"># Системные инструкции</span>
instructions=SYSTEM_PROMPT
)</code></pre>
</div>
<!-- Slide 18: Live Demo -->
<div class="slide title-slide">
<h1 style="font-size: 5rem;">🎬</h1>
<h1>ЖИВОЕ ДЕМО</h1>
<p class="subtitle">Посмотрим, как это работает!</p>
</div>
<!-- Slide 19: Under the Hood -->
<div class="slide">
<h2>Под капотом 🔍</h2>
<div class="diagram">
<pre>
1. Пользователь: "Покажи мой баланс"
↓
2. GPT-4 думает:
- Нужен инструмент: get_summary
↓
3. MCP вызов:
POST /mcp/tools/get_summary
↓
4. FastAPI выполняет:
SELECT SUM(...) FROM transactions
↓
5. Агент отвечает:
"Ваш баланс: 5000.00"
</pre>
</div>
</div>
<!-- Slide 20: Real-World Use Cases -->
<div class="slide">
<h2>Реальные применения 🌍</h2>
<ul>
<li><strong>Поддержка клиентов:</strong> AI агент с CRM инструментами</li>
<li><strong>DevOps:</strong> AI с инструментами мониторинга и деплоя</li>
<li><strong>Анализ данных:</strong> AI с базами данных и аналитикой</li>
<li><strong>Управление контентом:</strong> AI с CMS инструментами</li>
<li><strong>IoT управление:</strong> AI с инструментами управления устройствами</li>
</ul>
</div>
<!-- Slide 21: Production Benefits -->
<div class="slide dark">
<h2>Преимущества в продакшене 📈</h2>
<ul class="check">
<li>Сокращение времени интеграции (часы vs недели)</li>
<li>Консистентный интерфейс инструментов</li>
<li>Легко добавлять новые возможности</li>
<li>Не привязан к модели (легко менять GPT на Claude)</li>
<li>Лучший выбор инструментов AI</li>
</ul>
</div>
<!-- Slide 22: Try It Yourself -->
<div class="slide">
<h2>Попробуйте сами! 🚀</h2>
<pre><code><span class="comment"># Клонируйте репозиторий</span>
git clone https://github.com/dev-muhammad/MCPAgent
cd MCPAgent
<span class="comment"># Настройте</span>
cp .env.example .env
<span class="comment"># Добавьте OPENAI_API_KEY в .env</span>
<span class="comment"># Запустите</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>Ресурсы 📚</h2>
<div class="two-columns">
<div>
<h3 style="color: white;">Документация:</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 репозиторий:</h3>
<div class="qr-code">
<!-- QR код для GitHub репозитория -->
<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>Вопросы? 🤔</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;">
Спасибо за внимание! 🎉
</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>Горячие клавиши ⌨️</h2>
<ul>
<li><strong>→ / Пробел / PageDown:</strong> Следующий слайд</li>
<li><strong>← / PageUp:</strong> Предыдущий слайд</li>
<li><strong>Home:</strong> Первый слайд</li>
<li><strong>End:</strong> Последний слайд</li>
<li><strong>Shift + F:</strong> Полноэкранный режим</li>
<li><strong>Esc:</strong> Выйти из полноэкранного режима / Закрыть справку</li>
<li><strong>? / h:</strong> Показать эту справку</li>
</ul>
<p style="text-align: center; margin-top: 2rem;">
<button class="nav-btn" id="close-help">Закрыть</button>
</p>
</div>
</div>
<script src="../js/slides.js"></script>
</body>
</html>