skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

ui-widget-developer

Develop interactive Copilot Chat widgets with OpenAI Apps SDK or MCP Apps SDK.

2.9k|323|Updated Jan 16, 2026
Search Tags:#UI development#OpenAI Apps SDK#widget development#Copilot Chat#MCP Apps SDK
One-click install
npx skills add https://github.com/microsoft/skills --skill ui-widget-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-widget-developer
Source: https://github.com/microsoft/skills/tree/main/.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer
Command: npx skills add https://github.com/microsoft/skills --skill ui-widget-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @fluentui/react-components, react, react-dom, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables the creation of interactive widgets for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK, providing a seamless and efficient way to build UI components for Copilot integration.

Core Features & Use Cases

  • Widget Development: Build rich interactive widgets using the OpenAI Apps SDK or MCP Apps SDK.
  • UI Integration: Integrate widgets into Copilot Chat for enhanced user interaction.
  • Use Case: Develop a custom widget for Copilot Chat that allows users to view and interact with data visualizations, form inputs, or other interactive elements directly within the chat interface.

Quick Start

Run the 'ui-widget-developer' skill to start building a new widget for Copilot Chat.

Frequently Asked Questions about ui-widget-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build interactive widgets for Copilot Chat using OpenAI Apps SDK?▼

Build interactive widgets for Copilot Chat by using the OpenAI Apps SDK to handle UI rendering, event handling, and data presentation. This approach requires React and Fluent UI components to develop custom interactive elements directly within the chat interface.

Can I use React and Fluent UI components to develop MCP Apps SDK widgets?▼

Yes, you can use React and Fluent UI components to develop MCP Apps SDK widgets. The widget development process leverages these dependencies for UI rendering and requires MCP server configuration to integrate interactive elements into Copilot Chat.

What is the best way to add data visualizations to Copilot Chat?▼

The best way to add data visualizations to Copilot Chat is developing custom widgets using the OpenAI Apps SDK or MCP Apps SDK. This enables users to view and interact with data visualizations, form inputs, and other elements directly within the chat interface.

Do I need to configure an MCP server to develop widgets for Copilot Chat?▼

Yes, MCP server configuration is required when developing widgets for Copilot Chat using the MCP Apps SDK. This configuration supports UI integration, event handling, and data presentation for interactive components within the chat environment.

How does UI rendering work for interactive widgets in Copilot Chat?▼

UI rendering for interactive widgets in Copilot Chat works by utilizing React and Fluent UI components to build the visual interface. The OpenAI Apps SDK or MCP Apps SDK manages the event handling and data presentation within the chat environment.

When should I use the MCP Apps SDK instead of the OpenAI Apps SDK for widget development?▼

Use the MCP Apps SDK for widget development when your Copilot Chat integration requires specific MCP server configurations. Both SDKs support React and Fluent UI components for UI rendering, event handling, and data presentation, providing a seamless way to build interactive components.

Related Skills

Explore More Software Engineering Skills→
hasnahasna

react

Convert JSON UI specifications into React component trees with type-safe catalogs.

Official
Intermediate
jeffpeckyjeffpecky

build-mcp-app

Develop interactive UI widgets for MCP apps rendered inline in conversations.

Community
Advanced
theswerdtheswerd

add-app-to-server

Integrate interactive web-based UIs into server-side tools using the MCP Apps SDK.

Community
Advanced
lucasfthlucasfth

build-mcp-app

Build MCP apps with interactive UI widgets and inline resources.

Community
Advanced