Ved slutningen af dette modul vil du kunne:
- ✅ Forstå Model Context Protocol (MCP) arkitektur og fordele
- ✅ Udforske Microsofts MCP server-økosystem
- ✅ Integrere MCP servere med AI Toolkit Agent Builder
- ✅ Bygge en funktionel browser-automationsagent med Playwright MCP
- ✅ Konfigurere og teste MCP værktøjer i dine agenter
- ✅ Eksportere og implementere MCP-drevne agenter til produktion
I Modul 1 mestrede vi AI Toolkit grundlæggende og oprettede vores første Python Agent. Nu vil vi supercharge dine agenter ved at forbinde dem til eksterne værktøjer og tjenester gennem den banebrydende Model Context Protocol (MCP).
Tænk på det som at opgradere fra en simpel lommeregner til en fuld computer – dine AI agenter får evnen til at:
- 🌐 Gennemse og interagere med hjemmesider
- 📁 Tilgå og manipulere filer
- 🔧 Integrere med virksomheds systemer
- 📊 Behandle realtidsdata fra API’er
Model Context Protocol (MCP) er "USB-C for AI applikationer" – en revolutionerende åben standard, der forbinder store sprogmodeller (LLMs) til eksterne værktøjer, datakilder og tjenester. Ligesom USB-C fjernede kabelrod ved at samle alt i ét stik, fjerner MCP kompleksiteten ved AI-integration med én standardiseret protokol.
Før MCP:
- 🔧 Skræddersyede integrationer for hvert værktøj
- 🔄 Leverandørlås med proprietære løsninger
- 🔒 Sikkerhedsrisici ved ad hoc-forbindelser
- ⏱️ Måneder til udvikling af grundlæggende integrationer
Med MCP:
- ⚡ Plug-and-play værktøjsintegration
- 🔄 Leverandøruafhængig arkitektur
- 🛡️ Indbyggede sikkerhedsbest practices
- 🚀 Minutter til at tilføje nye funktioner
MCP følger en client-server arkitektur, der skaber et sikkert, skalerbart økosystem:
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]
🔧 Kernekomponenter:
| Komponent | Rolle | Eksempler |
|---|---|---|
| MCP Hosts | Applikationer, der bruger MCP services | Claude Desktop, VS Code, AI Toolkit |
| MCP Clients | Protokol-håndterere (1:1 med servere) | Indbygget i host applikationer |
| MCP Servers | Eksponerer funktioner via standardprotokol | Playwright, Files, Azure, GitHub |
| Transport Layer | Kommunikationsmetoder | stdio, HTTP, WebSockets |
Microsoft leder MCP økosystemet med en omfattende suite af enterprise-servere, der dækker reelle forretningsbehov.
🔗 Repository: azure/azure-mcp
🎯 Formål: Omfattende Azure ressourcehåndtering med AI-integration
✨ Nøglefunktioner:
- Deklarativ infrastrukturprovisionering
- Realtids overvågning af ressourcer
- Anbefalinger til omkostningsoptimering
- Sikkerhedsoverholdelse
🚀 Anvendelsestilfælde:
- Infrastructure-as-Code med AI assistance
- Automatisk skalering af ressourcer
- Optimering af cloud-omkostninger
- Automatisering af DevOps workflows
📚 Dokumentation: Microsoft Dataverse Integration
🎯 Formål: Naturligt sprog-interface til forretningsdata
✨ Nøglefunktioner:
- Naturlige sprogforespørgsler til databaser
- Forståelse af forretningskontekst
- Tilpassede prompt-skabeloner
- Enterprise data governance
🚀 Anvendelsestilfælde:
- Business intelligence rapportering
- Analyse af kundedata
- Indsigt i salgsprocesser
- Overholdelse af dataforespørgsler
🔗 Repository: microsoft/playwright-mcp
🎯 Formål: Browser-automatisering og webinteraktion
✨ Nøglefunktioner:
- Tværbrowser-automatisering (Chrome, Firefox, Safari)
- Intelligent elementdetektion
- Skærmbilleder og PDF generering
- Netværkstrafikovervågning
🚀 Anvendelsestilfælde:
- Automatiserede test-workflows
- Web scraping og dataudtræk
- UI/UX overvågning
- Automatiseret konkurrentanalyse
🔗 Repository: microsoft/files-mcp-server
🎯 Formål: Intelligent filsystemhåndtering
✨ Nøglefunktioner:
- Deklarativ filhåndtering
- Indholdssynkronisering
- Versionskontrolintegration
- Metadataudtræk
🚀 Anvendelsestilfælde:
- Dokumentationsstyring
- Organisering af kode-repositorier
- Workflow til indholdspublicering
- Data pipeline filhåndtering
🔗 Repository: microsoft/markitdown
🎯 Formål: Avanceret Markdown behandling og manipulation
✨ Nøglefunktioner:
- Omfattende Markdown parsing
- Formatkonvertering (MD ↔ HTML ↔ PDF)
- Analyse af indholdsstruktur
- Skabelonbehandling
🚀 Anvendelsestilfælde:
- Tekniske dokumentations-workflows
- Indholdsstyringssystemer
- Rapportgenerering
- Vidensbaseautomatisering
📦 Pakke: @microsoft/clarity-mcp-server
🎯 Formål: Webanalyse og brugeradfærdsindsigt
✨ Nøglefunktioner:
- Heatmap dataanalyse
- Optagelser af brugersessioner
- Performance-målinger
- Analyse af konverteringsflow
🚀 Anvendelsestilfælde:
- Optimering af hjemmesider
- Brugeroplevelsesforskning
- A/B test analyse
- Business intelligence dashboards
Udover Microsofts servere omfatter MCP økosystemet:
- 🐙 GitHub MCP: Repositoriehåndtering og kodeanalyse
- 🗄️ Database MCP’er: PostgreSQL, MySQL, MongoDB integrationer
- ☁️ Cloud Provider MCP’er: AWS, GCP, Digital Ocean værktøjer
- 📧 Kommunikations MCP’er: Slack, Teams, Email integrationer
🎯 Projektmål: Skab en intelligent browser-automationsagent med Playwright MCP server, som kan navigere på hjemmesider, udtrække information og udføre komplekse webinteraktioner.
- Åbn AI Toolkit Agent Builder
- Opret Ny Agent med følgende konfiguration:
- Navn:
BrowserAgent - Model: Choose GPT-4o
- Navn:
- 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
✅ Succesindikatorer:
- Alle værktøjer vises i Agent Builder interfacet
- Ingen fejlmeddelelser i integrationspanelet
- Playwright serverstatus viser "Connected"
🔧 Fejlfinding af Almindelige Problemer:
- Forbindelse Mislykkedes: Tjek internetforbindelse og firewall-indstillinger
- Manglende Værktøjer: Sørg for at alle kapabiliteter var valgt under opsætningen
- Tilladelsesfejl: Bekræft at VS Code har nødvendige systemtilladelser
Skab avancerede prompts, der udnytter Playwrights fulde kapabiliteter:
# 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 serviceDesign prompts, der demonstrerer forskellige funktioner:
🌐 Webanalyse Eksempel:
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 på "Run" for at starte automationssekvensen
- Overvåg Udførelsen i Real-time:
- Chrome browser åbnes automatisk
- Agent navigerer til målwebsted
- Skærmbilleder tages ved hvert væsentligt trin
- Analyse resultater streames live
Gennemgå den omfattende analyse i Agent Builder interfacet:
Agent Builder understøtter flere implementeringsmuligheder:
✅ Færdigheder Mestret:
- Forståelse af MCP arkitektur og fordele
- Navigering i Microsofts MCP server-økosystem
- Integration af Playwright MCP med AI Toolkit
- Opbygning af avancerede browserautomationsagenter
- Avanceret prompt engineering til webautomation
- 🔗 MCP Specifikation: Official Protocol Documentation
- 🛠️ Playwright API: Complete Method Reference
- 🏢 Microsoft MCP Servere: Enterprise Integration Guide
- 🌍 Community Eksempler: MCP Server Gallery
🎉 Tillykke! Du har nu mestret MCP integration og kan bygge AI agenter til produktion med eksterne værktøjsfunktioner!
Klar til at tage dine MCP færdigheder til næste niveau? Fortsæt til Module 3: Advanced MCP Development with AI Toolkit hvor du lærer at:
- Oprette dine egne tilpassede MCP servere
- Konfigurere og bruge den nyeste MCP Python SDK
- Sætte MCP Inspector op til fejlfinding
- Mestre avancerede MCP server udviklings-workflows
- Bygge en Weather MCP Server fra bunden
Ansvarsfraskrivelse:
Dette dokument er oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.