Aan het einde van deze module kun je:
- ✅ De Model Context Protocol (MCP) architectuur en voordelen begrijpen
- ✅ Het MCP server-ecosysteem van Microsoft verkennen
- ✅ MCP-servers integreren met AI Toolkit Agent Builder
- ✅ Een functionele browserautomatiseringsagent bouwen met Playwright MCP
- ✅ MCP-tools binnen je agents configureren en testen
- ✅ MCP-gestuurde agents exporteren en inzetten voor productie
In Module 1 hebben we de basis van AI Toolkit onder de knie gekregen en onze eerste Python Agent gemaakt. Nu gaan we je agents superkrachtig maken door ze te verbinden met externe tools en diensten via het revolutionaire Model Context Protocol (MCP).
Zie het als een upgrade van een simpele rekenmachine naar een volledige computer – je AI agents krijgen de mogelijkheid om:
- 🌐 Websites te browsen en ermee te interacteren
- 📁 Bestanden te openen en te bewerken
- 🔧 Te integreren met bedrijfsystemen
- 📊 Real-time data van API’s te verwerken
Model Context Protocol (MCP) is de "USB-C voor AI-toepassingen" – een revolutionaire open standaard die Large Language Models (LLM’s) verbindt met externe tools, databronnen en diensten. Net zoals USB-C de wirwar aan kabels wegneemt door één universele aansluiting te bieden, vereenvoudigt MCP AI-integraties met één gestandaardiseerd protocol.
Voor MCP:
- 🔧 Maatwerk integraties voor elke tool
- 🔄 Vendor lock-in met propriëtaire oplossingen
- 🔒 Beveiligingsrisico’s door ad-hoc verbindingen
- ⏱️ Maanden ontwikkelingstijd voor basisintegraties
Met MCP:
- ⚡ Plug-and-play toolintegratie
- 🔄 Vendor-neutrale architectuur
- 🛡️ Ingebouwde beveiligingspraktijken
- 🚀 Minuten om nieuwe functionaliteiten toe te voegen
MCP volgt een client-server architectuur die een veilige, schaalbare ecosysteem creëert:
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]
🔧 Kerncomponenten:
| Component | Rol | Voorbeelden |
|---|---|---|
| MCP Hosts | Applicaties die MCP-diensten gebruiken | Claude Desktop, VS Code, AI Toolkit |
| MCP Clients | Protocol handlers (1:1 met servers) | Ingebouwd in host applicaties |
| MCP Servers | Bieden functionaliteiten via standaard protocol | Playwright, Files, Azure, GitHub |
| Transportlaag | Communicatiemethoden | stdio, HTTP, WebSockets |
Microsoft leidt het MCP-ecosysteem met een uitgebreide set enterprise-grade servers die echte zakelijke behoeften adresseren.
🔗 Repository: azure/azure-mcp
🎯 Doel: Uitgebreid beheer van Azure resources met AI-integratie
✨ Belangrijkste kenmerken:
- Declaratieve infrastructuur provisioning
- Real-time monitoring van resources
- Aanbevelingen voor kostenoptimalisatie
- Controle op beveiligingscompliance
🚀 Gebruiksscenario’s:
- Infrastructure-as-Code met AI-ondersteuning
- Geautomatiseerde resource-scaling
- Cloudkosten optimaliseren
- DevOps workflow automatisering
📚 Documentatie: Microsoft Dataverse Integration
🎯 Doel: Natuurlijke taalinterface voor zakelijke data
✨ Belangrijkste kenmerken:
- Database queries in natuurlijke taal
- Begrip van zakelijke context
- Aangepaste prompt templates
- Enterprise data governance
🚀 Gebruiksscenario’s:
- Business intelligence rapportages
- Analyse van klantgegevens
- Inzichten in sales pipelines
- Compliance data queries
🔗 Repository: microsoft/playwright-mcp
🎯 Doel: Browserautomatisering en webinteractie
✨ Belangrijkste kenmerken:
- Cross-browser automatisering (Chrome, Firefox, Safari)
- Intelligente elementdetectie
- Screenshot- en PDF-generatie
- Netwerkverkeer monitoring
🚀 Gebruiksscenario’s:
- Geautomatiseerde testworkflows
- Web scraping en data-extractie
- UI/UX monitoring
- Automatisering van concurrentieanalyse
🔗 Repository: microsoft/files-mcp-server
🎯 Doel: Intelligente bestandsbeheeroperaties
✨ Belangrijkste kenmerken:
- Declaratief bestandsbeheer
- Content synchronisatie
- Integratie met versiebeheer
- Metadata extractie
🚀 Gebruiksscenario’s:
- Documentatiebeheer
- Organisatie van code repositories
- Workflows voor content publicatie
- Bestandsbeheer in datapijplijnen
🔗 Repository: microsoft/markitdown
🎯 Doel: Geavanceerde Markdown verwerking en manipulatie
✨ Belangrijkste kenmerken:
- Uitgebreide Markdown parsing
- Formaatconversie (MD ↔ HTML ↔ PDF)
- Analyse van contentstructuur
- Template verwerking
🚀 Gebruiksscenario’s:
- Workflows voor technische documentatie
- Content management systemen
- Rapportagegeneratie
- Automatisering van kennisbanken
📦 Package: @microsoft/clarity-mcp-server
🎯 Doel: Webanalyse en inzicht in gebruikersgedrag
✨ Belangrijkste kenmerken:
- Heatmap data-analyse
- Opnames van gebruikerssessies
- Prestatiestatistieken
- Analyse van conversietrechters
🚀 Gebruiksscenario’s:
- Website optimalisatie
- Onderzoek naar gebruikerservaring
- A/B-testanalyse
- Business intelligence dashboards
Naast Microsoft’s servers omvat het MCP-ecosysteem ook:
- 🐙 GitHub MCP: Repositorybeheer en code-analyse
- 🗄️ Database MCP’s: Integraties met PostgreSQL, MySQL, MongoDB
- ☁️ Cloud Provider MCP’s: Tools voor AWS, GCP, Digital Ocean
- 📧 Communicatie MCP’s: Integraties met Slack, Teams, Email
🎯 Projectdoel: Maak een intelligente browserautomatiseringsagent met Playwright MCP-server die websites kan navigeren, informatie kan extraheren en complexe webinteracties kan uitvoeren.
- Open AI Toolkit Agent Builder
- Maak een Nieuwe Agent aan met de volgende configuratie:
- Naam:
BrowserAgent - Model: Kies GPT-4o
- Naam:
- Ga naar het Tools-gedeelte in Agent Builder
- Klik op "Add Tool" om het integratiemenu te openen
- Selecteer "MCP Server" uit de beschikbare opties
🔍 Begrip van Tooltypes:
- Built-in Tools: Vooraf geconfigureerde AI Toolkit functies
- MCP Servers: Integraties met externe diensten
- Custom APIs: Je eigen service endpoints
- Function Calling: Directe toegang tot model functies
- Klik op "Use Featured MCP Servers" om toegang te krijgen tot Microsoft’s geverifieerde servers
- Selecteer "Playwright" uit de uitgelichte lijst
- Accepteer de standaard MCP ID of pas deze aan voor jouw omgeving
🔑 Kritieke stap: Selecteer ALLE beschikbare Playwright-methoden voor maximale functionaliteit
🛠️ Essentiële Playwright Tools:
- Navigatie:
goto,goBack,goForward,reload - Interactie:
click,fill,press,hover,drag - Extractie:
textContent,innerHTML,getAttribute - Validatie:
isVisible,isEnabled,waitForSelector - Vastleggen:
screenshot,pdf,video - Netwerk:
setExtraHTTPHeaders,route,waitForResponse
✅ Succesindicatoren:
- Alle tools verschijnen in de Agent Builder interface
- Geen foutmeldingen in het integratiepaneel
- Playwright server status toont "Connected"
🔧 Veelvoorkomende problemen oplossen:
- Verbinding mislukt: Controleer internetverbinding en firewall-instellingen
- Ontbrekende tools: Zorg dat alle functionaliteiten geselecteerd zijn tijdens setup
- Toestemmingsfouten: Controleer of VS Code de benodigde systeemrechten heeft
Maak geavanceerde prompts die de volledige mogelijkheden van Playwright benutten:
# 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 serviceOntwerp prompts die verschillende functionaliteiten demonstreren:
🌐 Voorbeeld Webanalyse:
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.- Klik op "Run" om de automatiseringsreeks te starten
- Volg de uitvoering in real-time:
- Chrome browser start automatisch
- Agent navigeert naar de doelwebsite
- Screenshots worden gemaakt bij elke belangrijke stap
- Analyse resultaten worden real-time weergegeven
Bekijk de uitgebreide analyse in de interface van Agent Builder:
Agent Builder ondersteunt meerdere deployment-opties:
✅ Beheerde vaardigheden:
- MCP architectuur en voordelen begrijpen
- Navigeren door Microsoft’s MCP server ecosysteem
- Playwright MCP integreren met AI Toolkit
- Geavanceerde browserautomatiseringsagents bouwen
- Geavanceerde prompt engineering voor webautomatisering
- 🔗 MCP Specificatie: Officiële Protocoldocumentatie
- 🛠️ Playwright API: Volledige methodereferentie
- 🏢 Microsoft MCP Servers: Enterprise Integratiehandleiding
- 🌍 Community Voorbeelden: MCP Server Galerij
🎉 Gefeliciteerd! Je hebt MCP-integratie succesvol onder de knie en kunt nu productieklare AI agents bouwen met externe toolmogelijkheden!
Klaar om je MCP-vaardigheden naar een hoger niveau te tillen? Ga verder naar Module 3: Geavanceerde MCP-ontwikkeling met AI Toolkit waar je leert hoe je:
- Je eigen custom MCP-servers maakt
- De nieuwste MCP Python SDK configureert en gebruikt
- De MCP Inspector instelt voor debugging
- Geavanceerde MCP server ontwikkelworkflows beheerst
- Bouw een Weather MCP Server vanaf nul
Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsdienst Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.










