Na kraju ovog modula moći ćete:
- ✅ Razumjeti arhitekturu i prednosti Model Context Protocola (MCP)
- ✅ Istražiti Microsoftov MCP server ekosustav
- ✅ Integrirati MCP servere s AI Toolkit Agent Builderom
- ✅ Izgraditi funkcionalnog agenta za automatizaciju preglednika koristeći Playwright MCP
- ✅ Konfigurirati i testirati MCP alate unutar svojih agenata
- ✅ Izvesti i implementirati agente pokretane MCP-om za produkcijsku upotrebu
U Modulu 1 savladali smo osnove AI Toolkita i stvorili našeg prvog Python agenta. Sada ćemo pojačati vaše agente povezivanjem s vanjskim alatima i uslugama putem revolucionarnog Model Context Protocola (MCP).
Zamislite to kao nadogradnju s običnog kalkulatora na pravi računalo - vaši AI agenti dobit će mogućnost da:
- 🌐 Pregledavaju i komuniciraju s web stranicama
- 📁 Pristupaju i upravljaju datotekama
- 🔧 Integriraju se s poslovnim sustavima
- 📊 Obradjuju podatke u stvarnom vremenu iz API-ja
Model Context Protocol (MCP) je "USB-C za AI aplikacije" - revolucionarni otvoreni standard koji povezuje velike jezične modele (LLM) s vanjskim alatima, izvorima podataka i uslugama. Kao što je USB-C eliminirao nered od kabela pružajući jedan univerzalni priključak, MCP uklanja složenost AI integracija jedinstvenim standardiziranim protokolom.
Prije MCP-a:
- 🔧 Prilagođene integracije za svaki alat
- 🔄 Zaključavanje kod dobavljača zbog vlasničkih rješenja
- 🔒 Sigurnosni propusti zbog ad-hoc veza
- ⏱️ Mjeseci razvoja za osnovne integracije
S MCP-om:
- ⚡ Integracija alata plug-and-play principom
- 🔄 Nezavisna arhitektura bez vezanosti uz dobavljače
- 🛡️ Ugrađene najbolje sigurnosne prakse
- 🚀 Dodavanje novih mogućnosti u nekoliko minuta
MCP koristi klijent-server arhitekturu koja stvara siguran i skalabilan ekosustav:
graph TB
A[AI Application/Agent] --> B[MCP Client]
B --> C[MCP Server 1: Files]
B --> D[MCP Server 2: Web APIs]
B --> E[MCP Server 3: Database]
B --> F[MCP Server N: Custom Tools]
C --> G[Local File System]
D --> H[External APIs]
E --> I[Database Systems]
F --> J[Enterprise Systems]
🔧 Glavne komponente:
| Komponenta | Uloga | Primjeri |
|---|---|---|
| MCP Hosts | Aplikacije koje koriste MCP usluge | Claude Desktop, VS Code, AI Toolkit |
| MCP Clients | Rukovatelji protokolom (1:1 sa serverima) | Ugrađeni u host aplikacije |
| MCP Servers | Izlažu mogućnosti putem standardnog protokola | Playwright, Files, Azure, GitHub |
| Transport Layer | Metode komunikacije | stdio, HTTP, WebSockets |
Microsoft predvodi MCP ekosustav s opsežnim paketom serverskih rješenja za poslovne potrebe.
🔗 Repository: azure/azure-mcp 🎯 Namjena: Sveobuhvatno upravljanje Azure resursima s AI integracijom
✨ Ključne značajke:
- Deklarativno upravljanje infrastrukturom
- Praćenje resursa u stvarnom vremenu
- Preporuke za optimizaciju troškova
- Provjera usklađenosti sa sigurnosnim standardima
🚀 Primjeri upotrebe:
- Infrastructure-as-Code s AI podrškom
- Automatsko skaliranje resursa
- Optimizacija troškova u oblaku
- Automatizacija DevOps procesa
📚 Dokumentacija: Microsoft Dataverse Integration 🎯 Namjena: Sučelje za poslovne podatke na prirodnom jeziku
✨ Ključne značajke:
- Upiti baze podataka na prirodnom jeziku
- Razumijevanje poslovnog konteksta
- Prilagođeni predlošci za upite
- Upravljanje podacima u poduzeću
🚀 Primjeri upotrebe:
- Izvještavanje poslovne inteligencije
- Analiza podataka o korisnicima
- Pregled prodajnog procesa
- Upiti za usklađenost podataka
🔗 Repository: microsoft/playwright-mcp 🎯 Namjena: Automatizacija preglednika i web interakcija
✨ Ključne značajke:
- Automatizacija za više preglednika (Chrome, Firefox, Safari)
- Inteligentno prepoznavanje elemenata
- Snimanje zaslona i generiranje PDF-a
- Praćenje mrežnog prometa
🚀 Primjeri upotrebe:
- Automatizirani testni tijekovi
- Web scraping i ekstrakcija podataka
- Praćenje UI/UX elemenata
- Automatizacija konkurentske analize
🔗 Repository: microsoft/files-mcp-server 🎯 Namjena: Inteligentno upravljanje datotekama
✨ Ključne značajke:
- Deklarativno upravljanje datotekama
- Sinkronizacija sadržaja
- Integracija s kontrolom verzija
- Ekstrakcija metapodataka
🚀 Primjeri upotrebe:
- Upravljanje dokumentacijom
- Organizacija repozitorija koda
- Radni tokovi za objavljivanje sadržaja
- Rukovanje datotekama u podatkovnim cjevovodima
🔗 Repository: microsoft/markitdown 🎯 Namjena: Napredno procesiranje i manipulacija Markdown sadržajem
✨ Ključne značajke:
- Bogato parsiranje Markdowna
- Konverzija formata (MD ↔ HTML ↔ PDF)
- Analiza strukture sadržaja
- Obrada predložaka
🚀 Primjeri upotrebe:
- Radni tokovi tehničke dokumentacije
- Sustavi za upravljanje sadržajem
- Generiranje izvještaja
- Automatizacija baze znanja
📦 Paket: @microsoft/clarity-mcp-server 🎯 Namjena: Web analitika i uvidi u ponašanje korisnika
✨ Ključne značajke:
- Analiza heatmap podataka
- Snimke korisničkih sesija
- Metrike performansi
- Analiza konverzijskih tokova
🚀 Primjeri upotrebe:
- Optimizacija web stranica
- Istraživanje korisničkog iskustva
- Analiza A/B testiranja
- Poslovni inteligencijski dashboardi
Osim Microsoftovih servera, MCP ekosustav uključuje:
- 🐙 GitHub MCP: Upravljanje repozitorijima i analiza koda
- 🗄️ Database MCPs: Integracije za PostgreSQL, MySQL, MongoDB
- ☁️ Cloud Provider MCPs: Alati za AWS, GCP, Digital Ocean
- 📧 Communication MCPs: Integracije za Slack, Teams, Email
🎯 Cilj projekta: Izraditi inteligentnog agenta za automatizaciju preglednika koristeći Playwright MCP server koji može pregledavati web stranice, izvlačiti informacije i izvoditi složene web interakcije.
- Otvorite AI Toolkit Agent Builder
- Kreirajte novog agenta s konfiguracijom:
- Ime:
BrowserAgent - Model: Choose GPT-4o
- Ime:
- Navigate to Tools Section in Agent Builder
- Click "Add Tool" to open the integration menu
- Select "MCP Server" from available options
🔍 Understanding Tool Types:
- Built-in Tools: Pre-configured AI Toolkit functions
- MCP Servers: External service integrations
- Custom APIs: Your own service endpoints
- Function Calling: Direct model function access
-
Choose "MCP Server" option to proceed
-
Browse MCP Catalog to explore available integrations
- Click "Use Featured MCP Servers" to access Microsoft's verified servers
- Select "Playwright" from the featured list
- Accept Default MCP ID or customize for your environment
🔑 Critical Step: Select ALL available Playwright methods for maximum functionality
🛠️ Essential Playwright Tools:
- Navigation:
goto,goBack,goForward,reload - Interaction:
click,fill,press,hover,drag - Extraction:
textContent,innerHTML,getAttribute - Validation:
isVisible,isEnabled,waitForSelector - Capture:
screenshot,pdf,video - Network:
setExtraHTTPHeaders,route,waitForResponse
✅ Indikatori uspjeha:
- Svi alati vidljivi u sučelju Agent Buildera
- Nema poruka o greškama u panelu za integraciju
- Status Playwright servera prikazuje "Connected"
🔧 Rješavanje uobičajenih problema:
- Neuspjela veza: Provjerite internetsku vezu i postavke vatrozida
- Nedostaju alati: Provjerite jesu li sve mogućnosti odabrane tijekom postavljanja
- Greške dozvola: Provjerite ima li VS Code potrebne sistemske dozvole
Kreirajte sofisticirane promptove koji koriste sve mogućnosti Playwrighta:
# Web Automation Expert System Prompt
## Core Identity
You are an advanced web automation specialist with deep expertise in browser automation, web scraping, and user experience analysis. You have access to Playwright tools for comprehensive browser control.
## Capabilities & Approach
### Navigation Strategy
- Always start with screenshots to understand page layout
- Use semantic selectors (text content, labels) when possible
- Implement wait strategies for dynamic content
- Handle single-page applications (SPAs) effectively
### Error Handling
- Retry failed operations with exponential backoff
- Provide clear error descriptions and solutions
- Suggest alternative approaches when primary methods fail
- Always capture diagnostic screenshots on errors
### Data Extraction
- Extract structured data in JSON format when possible
- Provide confidence scores for extracted information
- Validate data completeness and accuracy
- Handle pagination and infinite scroll scenarios
### Reporting
- Include step-by-step execution logs
- Provide before/after screenshots for verification
- Suggest optimizations and alternative approaches
- Document any limitations or edge cases encountered
## Ethical Guidelines
- Respect robots.txt and rate limiting
- Avoid overloading target servers
- Only extract publicly available information
- Follow website terms of serviceDizajnirajte promptove koji demonstriraju različite funkcionalnosti:
🌐 Primjer web analize:
Navigate to github.com/kinfey and provide a comprehensive analysis including:
1. Repository structure and organization
2. Recent activity and contribution patterns
3. Documentation quality assessment
4. Technology stack identification
5. Community engagement metrics
6. Notable projects and their purposes
Include screenshots at key steps and provide actionable insights.
- Kliknite "Run" za pokretanje automatizacije
- Pratite izvršenje u stvarnom vremenu:
- Chrome preglednik se automatski pokreće
- Agent navigira do ciljne web stranice
- Snimke zaslona bilježe svaki važan korak
- Rezultati analize stižu u stvarnom vremenu
Pregledajte detaljnu analizu u sučelju Agent Buildera:
Agent Builder podržava više opcija za implementaciju:
✅ Savladane vještine:
- Razumijevanje MCP arhitekture i prednosti
- Navigacija Microsoftovim MCP server ekosustavom
- Integracija Playwright MCP s AI Toolkitom
- Izrada sofisticiranih agenata za automatizaciju preglednika
- Napredno oblikovanje promptova za web automatizaciju
- 🔗 MCP specifikacija: Službena dokumentacija protokola
- 🛠️ Playwright API: Kompletan pregled metoda
- 🏢 Microsoft MCP serveri: Vodič za poslovne integracije
- 🌍 Primjeri zajednice: Galerija MCP servera
🎉 Čestitamo! Uspješno ste savladali integraciju MCP-a i sada možete graditi produkcijski spremne AI agente s mogućnostima vanjskih alata!
Spremni za podizanje MCP vještina na višu razinu? Krenite na Modul 3: Napredni razvoj MCP-a s AI Toolkitom gdje ćete naučiti kako:
- Kreirati vlastite prilagođene MCP servere
- Konfigurirati i koristiti najnoviji MCP Python SDK
- Postaviti MCP Inspector za ispravljanje pogrešaka
- Ovladati naprednim radnim tokovima razvoja MCP servera
- Izgraditi Weather MCP Server od nule
Odricanje od odgovornosti:
Ovaj je dokument preveden korištenjem AI prevoditeljskog servisa Co-op Translator. Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.