สร้างวิดเจ็ตแอป MCP ด้วยเครื่องมือสร้างโค้ด AI

[หัวข้อนี้คือเอกสารรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

บทความนี้อธิบายวิธีการใช้เครื่องมือสร้างโค้ด AI เช่น GitHub Copilot CLI หรือ Claude Code เพื่อสร้างแอปโพรโทคอลบริบทแบบจําลองแบบโต้ตอบ (MCP) สําหรับเครื่องมือ Power Apps MCP แบบจําลองของคุณ แอป MCP เป็นไฟล์ HTML ที่มีในตัวเองซึ่งแสดงผลลัพธ์ JSON ของเครื่องมือเป็นการ์ด แผนภูมิ แดชบอร์ด หรือแผนที่ภายในโฮสต์ที่เข้ากันได้กับแอป MCP รวมถึง Microsoft 365 Copilot, Claude และ Visual Studio Code

ถ้าคุณมีเครื่องมือ MCP ที่ส่งกลับข้อมูล generate-mcp-app-ui JSON ทักษะสามารถสร้างวิดเจ็ตที่ปรับแต่งตามธีมซึ่งแสดงข้อมูลนั้นในรูปแบบวิชวลขนาดกะทัดรัดโดยตรงภายในการสนทนาทางแชท

สำคัญ

คุณลักษณะนี้เป็นคุณลักษณะพรีวิว
คุณลักษณะการแสดงตัวอย่างไม่ได้มีไว้สำหรับการนำไปใช้งานจริง และอาจมีการจำกัดฟังก์ชันการทำงาน คุณลักษณะเหล่านี้สามารถใช้ได้ก่อนการเปิดตัวอย่างเป็นทางการ เพื่อให้ลูกค้าสามารถเข้าใช้งานได้ก่อนเวลาและให้ข้อคิดเห็น
แอป MCP สนับสนุนใน Microsoft 365 Copilot Chat พร้อมใช้งานโดยทั่วไปณ เดือนมีนาคม 2026 ขณะนี้การสนับสนุนของ Power Apps สำหรับแอป MCP ในเอเจนต์เชิงประกาศอยู่ในช่วงพรีวิวสำหรับสาธารณะ สําหรับการประกาศแบบเต็มให้ดูที่ MCP Apps ตอนนี้พร้อมใช้งานใน Copilot Chat

คุณสามารถทําอะไรได้บ้างด้วยทักษะการสร้าง mcp-app-ui

สร้างวิดเจ็ตภาพสำหรับเครื่องมือ MCP ใด ๆ โดยอธิบายสิ่งที่คุณต้องการและวางผลลัพธ์ JSON ของเครื่องมือ
เลือกวิชวลที่เหมาะสมสําหรับข้อมูลของคุณ เช่น แผนภูมิสําหรับแนวโน้มตัวเลข การ์ดสําหรับระเบียนที่มีโครงสร้าง ตารางสําหรับการเปรียบเทียบ แผนที่สําหรับพิกัด และอื่น ๆ
รองรับธีมสว่างและมืดโดยอัตโนมัติผ่านโทเค็นการออกแบบ UI แบบคล่องตัว
เพิ่มการโต้ตอบเพื่อให้วิดเจ็ตสามารถเรียกใช้เครื่องมือของคุณอีกครั้งในขณะทํางาน (ตัวอย่างเช่น ปุ่มรีเฟรช)
ปรับปรุง UX ซ้ํา ๆ โดยการอธิบายการเปลี่ยนแปลงในภาษาธรรมชาติ ตัวอย่างเช่น "ทําให้แกลเลอรีกระชับ" "เพิ่มแผนภูมิ" หรือ "ใช้เค้าโครงการ์ด"

ข้อกำหนดเบื้องต้น

ข้อกำหนดของซอฟต์แวร์

ส่วนประกอบ	เวอร์ชันขั้นต่ำ	ข้อมูลเพิ่มเติม
GitHub Copilot CLI, Claude Code หรือเครื่องมือสร้างโค้ดอื่นๆ	Latest	Claude Code, GitHub Copilot CLI
เบราว์เซอร์ที่ทันสมัย	Any	สําหรับการแสดงตัวอย่างวิดเจ็ตที่สร้างขึ้นภายในเครื่อง

ข้อกําหนดเพิ่มเติม

เครื่องมือ MCP ที่ส่งกลับผลลัพธ์ JSON ต้องตั้งค่าชนิดเอาต์พุตของเครื่องมือของคุณเป็น JSON
การเชื่อมต่ออินเทอร์เน็ตที่ใช้งานได้ วิดเจ็ตโหลดไลบรารี Fluent UI และไลบรารีอื่น ๆ จาก Content Delivery Network (CDN) ในช่วงเวลาการทำงานของโปรแกรม

ติดตั้งปลั๊กอิน

เรียกใช้คําสั่งตัวติดตั้งต่อไปนี้จาก GitHub Copilot CLI หรือ Claude Code ตัวติดตั้งจะตรวจหาเครื่องมือที่มีอยู่และติดตั้งปลั๊กอิน Power Platform ทั้งหมดโดยอัตโนมัติ รวมถึงgenerate-mcp-app-ui

/plugin marketplace add microsoft/power-platform-skills

หากต้องการติดตั้งเฉพาะทักษะวิดเจ็ตของแอป MCP เท่านั้น:

/plugin install mcp-apps@power-platform-skills

คำแนะนำ

เปิดใช้งานการอัปเดตอัตโนมัติเพื่อรับการอัปเดตทักษะโดยอัตโนมัติ /pluginใช้คําสั่ง ไปที่ Marketplaces เลือก Marketplace และเปิดใช้งานการอัปเดตอัตโนมัติ

ภาพรวมทักษะ

ทักษะ	คำสั่ง	คำอธิบาย
ตัวสร้างวิดเจ็ตแอป MCP	`/generate-mcp-app-ui`	สร้างวิดเจ็ตแอป MCP ที่มีในตัว (ไฟล์ HTML) สําหรับผลลัพธ์ JSON ของเครื่องมือ MCP

ทักษะจะถูกทริกเกอร์โดยวลีภาษาธรรมชาติเช่น "สร้างวิดเจ็ต" "สร้างวิดเจ็ตสําหรับเครื่องมือของฉัน" หรือ "สร้างแอป MCP"

ทําตามขั้นตอนเหล่านี้เพื่อสร้างวิดเจ็ตใหม่สําหรับเครื่องมือ MCP

สร้างและทดสอบเครื่องมือแบบกําหนดเอง จากตัวออกแบบแอปแบบจําลองและคัดลอกผลลัพธ์ JSON แบบเต็ม ตรวจสอบให้แน่ใจว่าประเภทเอาต์พุตของเครื่องมือถูกตั้งค่าเป็น JSON ข้อมูลเพิ่มเติม: สร้างเครื่องมือแบบกําหนดเอง

เรียกใช้ทักษะ และอธิบายสิ่งที่คุณต้องการแสดง วางผลลัพธ์ JSON ลงในการสนทนา:

/generate-mcp-app-ui Visualizes flights using an animated arc map for routes and a synchronized Gantt timeline for departure and arrival schedules, enabling quick understanding of flight coverage, timing, and overlaps. Here's an example of the tool's output: {"flight_records":[{"Departure Time":"2024-07-02T05:00:00Z","Arrival Time":"2024-07-02T07:30:00Z","Flight Name":"Zava 1001","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Los Angeles Intl"},{"Departure Time":"2024-07-02T03:00:00Z","Arrival Time":"2024-07-02T10:00:00Z","Flight Name":"Zava 103","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Hartsfield-Jackson"}]}

ตรวจสอบไฟล์ HTML ที่สร้างขึ้น ทักษะจะเขียนไฟล์ HTML ที่มีตัวเองอยู่ เช่น flight-map.htmlลงในไดเรกทอรีการทํางานของคุณ
แสดงตัวอย่างในเบราว์เซอร์ เปิดไฟล์ HTML ภายในเครื่อง เนื่องจากวิดเจ็ตมีตัวเลือกสํารองสําหรับการทดสอบ คุณสามารถขอให้ตัวแทนการสนทนาเพิ่มการแสดงตัวอย่าง HTML แบบสแตนด์อโลนหากหายไป
วนซ้ำ อธิบายการเปลี่ยนแปลงโดยตรงในแชท:
- "ทําให้แผนที่ใหญ่ขึ้น"
- "เพิ่มเคล็ดลับเครื่องมือบนแผนภูมิ"
- "ลดความสูงและพอดีกับ 250 พิกเซลด้วยเค้าโครงแบบตอบสนองและไม่มีแถบเลื่อน"

หมายเหตุ

ทักษะจําเป็นต้องใช้ JSON จริงจากเครื่องมือของคุณ ไม่ใช่ตัวอย่างหรือจําลองข้อมูล รูปร่างข้อมูลขับเคลื่อนการสร้างวิดเจ็ต ถ้าคุณวางข้อมูลจําลอง วิดเจ็ตที่สร้างขึ้นอาจทํางานไม่ถูกต้องเมื่อเชื่อมต่อกับเครื่องมือจริง

เมื่อวิดเจ็ตของคุณพร้อมให้คัดลอกไฟล์ HTML ไปยังการป้อนข้อมูล UX สําหรับเครื่องมือที่เกี่ยวข้องและจะถูกส่งกลับเป็นการตอบสนอง UI ของเครื่องมือ ดู เอกสารประกอบสร้างเครื่องมือแบบกําหนดเอง ของคุณสําหรับรายละเอียด

เพิ่มการโต้ตอบกับ callServerTool

หากคุณใส่ชื่อของเครื่องมือเมื่อเรียกใช้ทักษะ วิดเจ็ตที่สร้างขึ้นสามารถรวมการเชื่อมต่อการโทรแบบโต้ตอบกับเครื่องมือได้ ซึ่งช่วยให้วิดเจ็ตเรียกใช้เครื่องมือของคุณอีกครั้งในขณะทํางาน ตัวอย่างเช่น ปุ่มรีเฟรชบน UX เครื่องมือสามารถเรียกตัวเองได้

/generate-mcp-app-ui Show the current weather conditions with a refresh button. Tool name: get_weather. Tool output: {"city":"Seattle","temp_f":54,"condition":"Overcast","humidity":78,"forecast":[...]}

การเชื่อมโยง app.callServerTool ในวิดเจ็ตจะช่วยให้เมื่อผู้ใช้เลือก รีเฟรช วิดเจ็ตจะดึงข้อมูลที่อัปเดตโดยตรงจากเครื่องมือของคุณ ถ้าคุณไม่ได้ระบุชื่อเครื่องมือ วิดเจ็ตจะเป็นแบบอ่านอย่างเดียวและแสดงผลเฉพาะข้อมูลที่ส่งผ่าน ontoolresult การเรียกกลับ

แชทของ Microsoft 365 Copilot: ดู แอป MCP ใน Copilot Chat สําหรับเส้นทางการปรับใช้รวมถึงการโหลดด้านข้างสําหรับการทดสอบ การปรับใช้ผ่านศูนย์การจัดการ Microsoft 365 สําหรับการใช้งานขององค์กร และเผยแพร่ไปยังที่เก็บตัวแทนของ Microsoft 365
ตัวแทนเชิงประกาศของ Power Apps: ดู เอกสารประกอบตัวแทนเชิงประกาศของ Power Apps MCP สำหรับวิธีการเชื่อมต่อเครื่องมือ MCP กับแอปแบบจำลอง
โฮสต์ MCP อื่น ๆ: ดูเอกสารประกอบของโฮสต์ของคุณสําหรับกระบวนการลงทะเบียนแอป MCP

โพรโทคอลแอป MCP

วิดเจ็ตสื่อสารกับโฮสต์แชทโดยใช้ App คลาสจาก @modelcontextprotocol/ext-apps แพคเกจ โพรโทคอลจัดการการเรียกกลับและวิธีการเหล่านี้

การเรียกกลับ / เมธอด	คำอธิบาย
`app.ontoolresult`	ทํางานเมื่อโฮสต์ส่งมอบข้อมูลเครื่องมือ ข้อมูลของคุณจะอยู่ที่ `result.structuredContent`—ไม่ใช่ `result.data` หรือ `result` ตัวมันเอง
`app.onhostcontextchanged`	ทํางานเมื่อมีการเปลี่ยนแปลงบริบทโฮสต์ รวมถึงธีม (`ctx.theme` คือ `'light'` หรือ `'dark'`)
`app.onteardown`	ไฟขึ้นเมื่อวิดเจ็ตถูกลบออกจากการสนทนา
`app.connect()`	สร้างการสื่อสารกับโฮสต์ ตัวจัดการเหตุการณ์ทั้งหมดต้องลงทะเบียนก่อนที่จะเรียก`connect()`
`app.getHostContext()`	แสดงบริบทโฮสต์ปัจจุบัน (รวมถึงธีมเริ่มต้น) หลังจาก `connect()` เสร็จสิ้น
`app.callServerTool({ name, arguments })`	เรียกใช้เครื่องมือแบบโต้ตอบ ส่งกลับ `result.isError` และ`result.structuredContent`

การนําเข้า CDN

วิดเจ็ตโหลดการอ้างอิงทั้งหมดจาก CDN ไม่จําเป็นต้องมีขั้นตอนการสร้างหรือการติดตั้งภายในเครื่อง การพึ่งพาซอฟต์แวร์มีอยู่ในสองรูปแบบ:

โมดูล ECMAScript (ESM) — นําเข้าภายใน <script type="module"> โดยใช้ URL ที่ลงท้ายด้วย /+esm

Universal Module Definition (UMD) — โหลดผ่านแท็ก <script src> ธรรมดา; ลงทะเบียนทั้งหมดเป็นผลข้างเคียง

ไลบรารี	รูปแบบ	URL	วัตถุประสงค์
`@modelcontextprotocol/ext-apps`	Esm	`cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm`	คลาส `App` ของแอป MCP
`@fluentui/tokens`	Esm	`cdn.jsdelivr.net/npm/@fluentui/tokens/+esm`	`webLightTheme` / `webDarkTheme` ชุดโทเค็น
`@fluentui/web-components@beta`	UMD	`unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js`	องค์ประกอบแบบกำหนดเองของ Fluent UI

สถานะการแสดงผล

วิดเจ็ตทุกตัวจัดการกับสามสถานะ:

สถานะ	คำแนะนำ
Loading	`<fluent-spinner>`แสดง พร้อมด้วยข้อความตามบริบท ("การค้นหาสถานที่ท่องเที่ยว..." ไม่เพียงแค่ "โหลด...")
โหลดแล้ว	แสดงเนื้อหาอย่างกระชับ ใช้ความกว้างแบบเต็มที่พร้อมใช้งาน
เกิดข้อผิดพลาด	แสดงข้อความที่เป็นมิตรและปุ่ม "ลองอีกครั้ง" หากวิดเจ็ตใช้ `callServerTool`ปุ่มจะเรียกใช้เครื่องมืออีกครั้ง

ส่วนประกอบ UI คล่องตัว

องค์ประกอบเว็บ UI ของ Fluent ต่อไปนี้พร้อมใช้งานในวิดเจ็ต:

<fluent-card>, <fluent-button>, <fluent-text-input>, , <fluent-textarea>, <fluent-dropdown><fluent-listbox>, , <fluent-option>, <fluent-checkbox>, <fluent-spinner>, , <fluent-divider><fluent-badge><fluent-switch><fluent-tooltip>

การสนับสนุนธีม

วิดเจ็ตสนับสนุนธีมสว่างและมืดผ่านโทเค็นการออกแบบ UI ที่คล่องตัว วิดเจ็ตจะใช้ค่าโทเค็นที่ถูกต้องเมื่อธีมของโฮสต์เปลี่ยนแปลงผ่านonhostcontextchanged ตัวอย่างเช่น var(--colorNeutralForeground1)ใช้ตัวแปรโทเค็นเสมอ แทนที่จะใช้ค่าสีแบบฮาร์ดโค้ดเพื่อให้แน่ใจว่าการแสดงผลที่ถูกต้องในทั้งสองธีม

โทเค็นสี

ใช้	โทเค็น
ข้อความหลัก	`var(--colorNeutralForeground1)`
ข้อความรอง	`var(--colorNeutralForeground2)`
พื้นหลังหลัก	`var(--colorNeutralBackground1)`
พื้นหลังการ์ด/โฮเวอร์	`var(--colorNeutralBackground2)`
แบรนด์/จุดเด่น	`var(--colorBrandBackground)`
ข้อความบนพื้นผิวของแบรนด์	`var(--colorNeutralForegroundOnBrand)`
เส้นขอบ	`var(--colorNeutralStroke1)`
ข้อความข้อผิดพลาด	`var(--colorStatusDangerForeground1)`
ข้อความสําเร็จ	`var(--colorStatusSuccessForeground1)`

อย่าใช้ค่าฮาร์ดโค้ด hexidecimal หรือ RGB อย่าประดิษฐ์ชื่อโทเค็นที่ไม่ได้ระบุไว้ที่นี่

แนวทางปฏิบัติที่ดีที่สุด

ให้ข้อมูลการทดสอบจริง ทักษะวิเคราะห์โครงสร้าง JSON จริงเพื่อเลือกวิชวลที่ถูกต้อง ข้อมูลจําลองสร้างวิดเจ็ตที่แตกเมื่อเชื่อมต่อกับเครื่องมือจริง
ระบุให้ชัดเจนเกี่ยวกับภาพ อธิบายรูปแบบที่คุณต้องการ เช่น แผนที่ แผนภูมิ ตาราง หรือเค้าโครงการ์ด คําอธิบายที่คลุมเครือนําไปสู่ผลลัพธ์ทั่วไป
เริ่มต้นด้วยมุมมองเดียว วิดเจ็ตเป็นการ์ดการสนทนาขนาดกะทัดรัดไม่ใช่แอปพลิเคชันเต็มรูปแบบ ไม่มีแท็บ การนําทางในหน้า หรือแถบค้นหาที่ทําซ้ําการป้อนข้อมูลด้วยการสนทนา
ทดสอบกับธีมทั้งสอง แสดงตัวอย่างในโหมดสว่างและโหมดสีเข้มเพื่อตรวจสอบความคมชัดและความสามารถในการอ่าน
จับคู่ภาพกับข้อมูล แผนที่สําหรับพิกัด แผนภูมิสําหรับข้อมูลตัวเลขหรือแนวโน้ม การ์ดสําหรับระเบียนที่มีโครงสร้าง ตารางสําหรับการเปรียบเทียบ

การจำกัด

วิดเจ็ตต้องโหลดไลบรารีภายนอกทั้งหมดจาก CDN จําเป็นต้องมีการเชื่อมต่ออินเทอร์เน็ตในขณะทํางาน
โหมดแสดงผลแบบเต็มหน้าจอ ต้องการการใช้งานเพิ่มเติมนอกเหนือจากสิ่งที่ทักษะสร้างขึ้น
ทักษะนี้ไม่จัดการกับการลงทะเบียนเซิร์ฟเวอร์ MCP หรือการปรับใช้ไปยังศูนย์การจัดการ Microsoft 365 คุณต้องทําตามขั้นตอนเหล่านั้นแยกต่างหาก
การรับรองความถูกต้อง (OAuth 2.1, Microsoft Entra SSO) จัดการโดยสภาพแวดล้อมโฮสต์ MCP ไม่ใช่ตัว HTML ของวิดเจ็ตเอง