Pada akhir modul ini, Anda akan mampu:
- ✅ Memahami arsitektur dan manfaat Model Context Protocol (MCP)
- ✅ Menjelajahi ekosistem server MCP Microsoft
- ✅ Mengintegrasikan server MCP dengan AI Toolkit Agent Builder
- ✅ Membangun agen otomatisasi browser fungsional menggunakan Playwright MCP
- ✅ Mengonfigurasi dan menguji alat MCP dalam agen Anda
- ✅ Mengekspor dan menerapkan agen bertenaga MCP untuk penggunaan produksi
Di Modul 1, kita telah menguasai dasar-dasar AI Toolkit dan membuat Python Agent pertama kita. Sekarang kita akan meningkatkan agen Anda dengan menghubungkannya ke alat dan layanan eksternal melalui Model Context Protocol (MCP) yang revolusioner.
Bayangkan ini seperti meng-upgrade dari kalkulator sederhana ke komputer lengkap - agen AI Anda akan mendapatkan kemampuan untuk:
- 🌐 Menjelajah dan berinteraksi dengan situs web
- 📁 Mengakses dan memanipulasi file
- 🔧 Terintegrasi dengan sistem perusahaan
- 📊 Memproses data real-time dari API
Model Context Protocol (MCP) adalah "USB-C untuk aplikasi AI" - standar terbuka revolusioner yang menghubungkan Large Language Models (LLM) dengan alat eksternal, sumber data, dan layanan. Sama seperti USB-C yang menghilangkan kekacauan kabel dengan menyediakan satu konektor universal, MCP menghilangkan kompleksitas integrasi AI dengan satu protokol standar.
Sebelum MCP:
- 🔧 Integrasi khusus untuk setiap alat
- 🔄 Ketergantungan vendor dengan solusi proprietary
- 🔒 Kerentanan keamanan dari koneksi ad-hoc
- ⏱️ Berbulan-bulan pengembangan untuk integrasi dasar
Dengan MCP:
- ⚡ Integrasi alat plug-and-play
- 🔄 Arsitektur vendor-agnostik
- 🛡️ Praktik keamanan terbaik bawaan
- 🚀 Penambahan kemampuan baru dalam hitungan menit
MCP mengikuti arsitektur client-server yang menciptakan ekosistem yang aman dan skalabel:
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]
🔧 Komponen Utama:
| Komponen | Peran | Contoh |
|---|---|---|
| MCP Hosts | Aplikasi yang menggunakan layanan MCP | Claude Desktop, VS Code, AI Toolkit |
| MCP Clients | Penangan protokol (1:1 dengan server) | Terintegrasi dalam aplikasi host |
| MCP Servers | Menyediakan kemampuan melalui protokol standar | Playwright, Files, Azure, GitHub |
| Transport Layer | Metode komunikasi | stdio, HTTP, WebSockets |
Microsoft memimpin ekosistem MCP dengan rangkaian server kelas enterprise yang lengkap untuk memenuhi kebutuhan bisnis nyata.
🔗 Repository: azure/azure-mcp
🎯 Tujuan: Manajemen sumber daya Azure yang komprehensif dengan integrasi AI
✨ Fitur Utama:
- Penyediaan infrastruktur deklaratif
- Pemantauan sumber daya real-time
- Rekomendasi optimasi biaya
- Pemeriksaan kepatuhan keamanan
🚀 Kasus Penggunaan:
- Infrastruktur sebagai Kode dengan bantuan AI
- Skalabilitas sumber daya otomatis
- Optimasi biaya cloud
- Otomatisasi alur kerja DevOps
📚 Dokumentasi: Microsoft Dataverse Integration
🎯 Tujuan: Antarmuka bahasa alami untuk data bisnis
✨ Fitur Utama:
- Query database dengan bahasa alami
- Pemahaman konteks bisnis
- Template prompt kustom
- Tata kelola data enterprise
🚀 Kasus Penggunaan:
- Pelaporan intelijen bisnis
- Analisis data pelanggan
- Insight pipeline penjualan
- Query data kepatuhan
🔗 Repository: microsoft/playwright-mcp
🎯 Tujuan: Otomatisasi browser dan kemampuan interaksi web
✨ Fitur Utama:
- Otomatisasi lintas browser (Chrome, Firefox, Safari)
- Deteksi elemen cerdas
- Pembuatan screenshot dan PDF
- Pemantauan lalu lintas jaringan
🚀 Kasus Penggunaan:
- Alur kerja pengujian otomatis
- Web scraping dan ekstraksi data
- Pemantauan UI/UX
- Otomatisasi analisis kompetitif
🔗 Repository: microsoft/files-mcp-server
🎯 Tujuan: Operasi sistem file cerdas
✨ Fitur Utama:
- Manajemen file deklaratif
- Sinkronisasi konten
- Integrasi kontrol versi
- Ekstraksi metadata
🚀 Kasus Penggunaan:
- Manajemen dokumentasi
- Organisasi repositori kode
- Alur kerja penerbitan konten
- Penanganan file pipeline data
🔗 Repository: microsoft/markitdown
🎯 Tujuan: Pemrosesan dan manipulasi Markdown tingkat lanjut
✨ Fitur Utama:
- Parsing Markdown kaya fitur
- Konversi format (MD ↔ HTML ↔ PDF)
- Analisis struktur konten
- Pemrosesan template
🚀 Kasus Penggunaan:
- Alur kerja dokumentasi teknis
- Sistem manajemen konten
- Pembuatan laporan
- Otomatisasi basis pengetahuan
📦 Paket: @microsoft/clarity-mcp-server
🎯 Tujuan: Analitik web dan wawasan perilaku pengguna
✨ Fitur Utama:
- Analisis data heatmap
- Rekaman sesi pengguna
- Metrik performa
- Analisis funnel konversi
🚀 Kasus Penggunaan:
- Optimasi situs web
- Riset pengalaman pengguna
- Analisis A/B testing
- Dashboard intelijen bisnis
Selain server Microsoft, ekosistem MCP mencakup:
- 🐙 GitHub MCP: Manajemen repositori dan analisis kode
- 🗄️ Database MCPs: Integrasi PostgreSQL, MySQL, MongoDB
- ☁️ Cloud Provider MCPs: Alat AWS, GCP, Digital Ocean
- 📧 Communication MCPs: Integrasi Slack, Teams, Email
🎯 Tujuan Proyek: Membuat agen otomatisasi browser cerdas menggunakan Playwright MCP server yang dapat menavigasi situs web, mengekstrak informasi, dan melakukan interaksi web kompleks.
- Buka AI Toolkit Agent Builder
- Buat Agen Baru dengan konfigurasi berikut:
- Nama:
BrowserAgent - Model: Pilih GPT-4o
- Nama:
- Masuk ke Bagian Tools di Agent Builder
- Klik "Add Tool" untuk membuka menu integrasi
- Pilih "MCP Server" dari opsi yang tersedia
🔍 Memahami Jenis Alat:
- Built-in Tools: Fungsi AI Toolkit yang sudah dikonfigurasi
- MCP Servers: Integrasi layanan eksternal
- Custom APIs: Endpoint layanan milik Anda sendiri
- Function Calling: Akses langsung fungsi model
-
Pilih opsi "MCP Server" untuk melanjutkan
-
Jelajahi Katalog MCP untuk melihat integrasi yang tersedia
- Klik "Use Featured MCP Servers" untuk mengakses server Microsoft yang terverifikasi
- Pilih "Playwright" dari daftar unggulan
- Terima MCP ID Default atau sesuaikan untuk lingkungan Anda
🔑 Langkah Penting: Pilih SEMUA metode Playwright yang tersedia untuk fungsi maksimal
🛠️ Alat Playwright Esensial:
- Navigasi:
goto,goBack,goForward,reload - Interaksi:
click,fill,press,hover,drag - Ekstraksi:
textContent,innerHTML,getAttribute - Validasi:
isVisible,isEnabled,waitForSelector - Tangkap:
screenshot,pdf,video - Jaringan:
setExtraHTTPHeaders,route,waitForResponse
✅ Indikator Keberhasilan:
- Semua alat muncul di antarmuka Agent Builder
- Tidak ada pesan error di panel integrasi
- Status server Playwright menunjukkan "Connected"
🔧 Pemecahan Masalah Umum:
- Koneksi Gagal: Periksa koneksi internet dan pengaturan firewall
- Alat Hilang: Pastikan semua kemampuan dipilih saat setup
- Error Izin: Verifikasi VS Code memiliki izin sistem yang diperlukan
Buat prompt canggih yang memanfaatkan kemampuan penuh Playwright:
# 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 serviceRancang prompt yang menunjukkan berbagai kemampuan:
🌐 Contoh Analisis Web:
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 "Run" untuk memulai urutan otomatisasi
- Pantau Eksekusi Real-time:
- Browser Chrome terbuka otomatis
- Agen menavigasi ke situs target
- Screenshot menangkap setiap langkah utama
- Hasil analisis mengalir secara real-time
Tinjau analisis lengkap di antarmuka Agent Builder:
Agent Builder mendukung berbagai opsi deployment:
✅ Keterampilan yang Dikuasai:
- Memahami arsitektur dan manfaat MCP
- Menavigasi ekosistem server MCP Microsoft
- Mengintegrasikan Playwright MCP dengan AI Toolkit
- Membangun agen otomatisasi browser yang canggih
- Rekayasa prompt lanjutan untuk otomatisasi web
- 🔗 Spesifikasi MCP: Dokumentasi Protokol Resmi
- 🛠️ Playwright API: Referensi Metode Lengkap
- 🏢 Server MCP Microsoft: Panduan Integrasi Enterprise
- 🌍 Contoh Komunitas: Galeri Server MCP
🎉 Selamat! Anda telah berhasil menguasai integrasi MCP dan kini dapat membangun agen AI siap produksi dengan kemampuan alat eksternal!
Siap meningkatkan keterampilan MCP Anda? Lanjutkan ke Modul 3: Pengembangan MCP Lanjutan dengan AI Toolkit di mana Anda akan belajar cara:
- Membuat server MCP kustom Anda sendiri
- Mengonfigurasi dan menggunakan SDK MCP Python terbaru
- Menyiapkan MCP Inspector untuk debugging
- Menguasai alur kerja pengembangan server MCP lanjutan
- Membangun Server Weather MCP dari nol
Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI Co-op Translator. Meskipun kami berupaya untuk mencapai akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.