Panduan membaca yang dilokalisasi

ui-widget-developerTujuan, penggunaan, dan sumber

Buat server MCP untuk Copilot Chat menggunakan OpenAI Apps SDK atau dukungan rendering widget MCP Apps SDK (bahasa apa pun). Gunakan keahlian ini saat: - Membuat server MCP yang terintegrasi dengan M365Agen deklaratif Copilot - Membangun widget interaktif yang kaya (React + Fluent UI) yang ditampilkan di Copilot Chat - Mengimplementasikan alat yang mengembalikan structuredContent untuk rendering widget - Mengadaptasi server MCP yang ada untuk mendukung rendering widget Copilot - Menyiapkan devtunnel untuk paparan server MCP localhost - MengkonfigurasimcpPlugin.jsPada manifest dengan runtime RemoteMCPServer, JANGAN gunakan skill ini untuk pengembangan agen umum (scaffolding, manifest, deployment) — gunakan declarative-agent-developer sebagai gantinya. Skill ini HANYA untuk pengembangan server MCP + widget. Pemicu: "Server MCP untuk Copilot", "OpenAI Apps SDK", "Widget Copilot", "structuredContent", "Plugin MCP", "devtunnels MCP", "Aplikasi OAI", "rendering widget", "Widget UI"

Sumber diambil: 2026-10-29

Repositori sumber: microsoft/skills
SKILL.md: .github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
Bintang Repositori: 3,157
Pembaruan terakhir repositori: 2026-10-31
Klasifikasi Kemampuan: Alur Kerja Agen
Waktu pengumpulan terbaru: 2026-10-31 10:38 UTC+08:00

Lisensi: MIT

SKILL.md asli

Cuplikan alur kerja adalah alat bantu baca, bukan instruksi yang dapat dieksekusi dari Codez. Tidak ada Skill pihak ketiga yang dijalankan untuk menghasilkan halaman ini.

Bagian yang menjelaskan tujuan dan alur kerja di bawah ini merupakan materi dari hulu, yang telah diorganisir dan diterjemahkan untuk dibaca. Bagian ini berbeda dari analisis editorial Codez yang diberi label secara terpisah.

Apa yang dilakukan oleh Skill ini?

Bagaimana alur kerja hulu bekerja

Panduan Singkat

Terminal1- Mulai Server MCP: Terminal2- Mulai DevTunnel: Pada eksekusi pertama, sediakan agen setelah terowongan aktif (lihat aturan PENYEDIAAN AGEN). Pada eksekusi berikutnya, URL terowongan akan stabil — tidak perlu penyediaan ulang kecuali manifes agen berubah.

Jalur hulu · L384 ↗

Alur Kerja Pengembangan

Mulai server MCP (mode pengembangan dengan hot reload): TypeScript:cd mcp-server && npm install && npm run devPython:cd mcp-server && pip install -r requirements.txt && python server.pyC#:cd mcp-server && dotnet run

Jalur hulu · L402 ↗

🚨 ATURAN PELAKSANAAN KRITIS 🚨

PENERAPAN FLUENT UI (WAJIB): Implementasi widget HARUS menggunakan React + komponen Fluent UI. Sebelum menulis kode widget apa pun, agen HARUS membaca dan mengikuti:references/best-practices.mdPERSYARATAN PAKET FLUENT UI (WAJIB): Proyek widget HARUS menyertakan dependensi Fluent UI sebelum implementasi. Minimal, instal dan simpan dependensi berikut dalam paket widget: Jika ada paket yang hilang, instal secara otomatis sebelum melanjutkan pembuatan kode widget. Jika widget yang dihasilkan tidak menyertakan file entri React (misalnyawidgets/src//main.tsxdan file komponen React) dan impor Fluent dari@fluentui/react-componentsTugas ini belum lengkap dan HARUS diperbaiki sebelum hasil dikembalikan.

Jalur hulu · L95 ↗

Jalur hulu · bash ↗

export ATK_CLI_SKILL=true

Persyaratan dan pengaturan

Pengaturan DevTunnels

> Hanya untuk pengujian lokal. DevTunnels ditujukan untuk pengembangan dan pengujian di mesin Anda. Sebelum membagikan agen secara lebih luas, sebarkan aset server MCP dan widget ke lingkungan yang dihosting (misalnya, Azure App Service, Azure Static Web Apps, atau penyedia hosting lainnya) dan perbarui URL manifes agen sesuai dengan itu. DevTunnels mengekspos server MCP localhost Anda ke M365Copilot menggunakan terowongan bernama untuk URL yang stabil. Lihatreferences/devtunnels.mduntuk skrip pengaturan, referensi perintah, dan pemecahan masalah.

Jalur hulu · L372 ↗

Batasan dan pemeriksaan kualitas

Tidak ada bagian batasan terpisah yang dipilih dari file ini. Ini tidak berarti Keterampilan ini aman untuk setiap input atau lingkungan. Tinjau sumber lengkapnya dan validasi hasil Anda sendiri.

Mulailah dengan uji coba yang aman.

Periksa host yang didukung dan petunjuk instalasi repositori. Simpan direktori Skill beserta skrip, aset, dan dokumentasi yang dirujuk di dalamnya secara bersamaan;SKILL.mdsendirian dapat menghilangkan dependensi.
Berikan input sebenarnya, output yang diinginkan, dan kriteria penerimaan kepada agen. Sintaks pemanggilan dan alat yang tersedia bergantung pada host; situs ini tidak mengasumsikan perintah instalasi universal.
Cobalah alur kerja sumber dalam proyek sementara atau pada salinannya. Tinjau operasi yang mengubah file, layanan jarak jauh, atau sumber daya yang dapat ditagih sebelum mengizinkannya.
Validasi output terhadap pemeriksaan kualitas sumber dan persyaratan Anda sendiri. Pemicu yang berhasil atau jumlah bintang repositori yang tinggi tidak menjamin hasil yang benar.

Spesifikasi format dan direktori keterampilan ↗

Baca selengkapnya di sumber aslinya.

Terjemahan dan ruang lingkup

Panduan membaca ini memilih bagian-bagian dari teks yang telah disematkan di bagian atas.SKILL.mdTerjemahan ini dibantu. Ini bukan manual lengkap atau klaim kompatibilitas yang telah diuji. Bacalah dokumen asli dan file referensinya sebelum digunakan.

Pendahuluan ini mengacu pada versi yang disematkan di bawah ini; aktivitas repositori saat ini dan waktu pengumpulan ditampilkan secara terpisah.

Sumber yang disematkan: Baca teks aslinya ↗
Sumber diambil: 2026-10-29T09:32:23Z
Komit sumber: 00d66a64919edca5bca2c673373444e36a4b5461
Sumber SHA-256: b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12

Kembali ke katalog Keterampilan lengkap