SPFx Copilot components: build and deploy interactive UX

Key insights

• An SPFx package can include both JavaScript UI components and a declarative agent definition.
• Copilot components can render inline or in a full-screen view.
• The demonstrated deployment uses the SharePoint app catalog and the Add to Teams action.
• Copilot Workbench provides a place to test components against a tenant before packaging.
• The demonstration describes Copilot components as being in preview at the time it was recorded.

SharePoint Framework (SPFx) Copilot components let developers put interactive web interfaces, such as forms and charts, directly in the Copilot canvas instead of returning only text. This approach is aimed at developers building agents and business experiences for Microsoft 365 users. Microsoft demonstrates the development and deployment flow, including a travel-expense agent, in a presentation by Vesa Juvonen.

What's new

A Copilot component is a JavaScript-based user interface that an agent can bring into a conversation when the user’s request calls for an interactive experience. The interface can appear inline or expand to a full-screen view. Users can work with a form, map, chart, or other custom interface without being sent to a separate page just to complete the interaction.

The approach combines the user interface with a declarative agent definition in an SPFx solution package. The agent describes the capability and helps Copilot identify when to invoke its component; the component supplies the experience the user sees. In the travel-expense example, the agent presents a form for logging an expense, while an employee example uses a component to prepare a time-off request from information supplied in the conversation.

For developers, this means the interaction can be designed as an application rather than as a sequence of text responses and links. A component can collect information, display data, and support a business action. The demonstrated examples also show how an experience can shift between inline and full-screen layouts.

Who it is for and what you need

This is a pro-code development approach for SharePoint and Microsoft 365 developers who build SPFx solutions and declarative agents. The demonstration uses React, but describes components as being buildable with React or other JavaScript libraries. Developers create the interface and package it together with the agent configuration.

The demonstrated workflow tests the component against a tenant in Copilot Workbench, then packages the solution as an SPFx .sppkg file. Deployment goes through the tenant’s SharePoint app catalog. The demo calls the feature a preview and says that, during that preview, the presenter could build and test in a tenant without a Copilot license. Microsoft’s research notes describe Copilot UX components as generally available with SPFx 1.24, so the preview-specific licensing statement should not be treated as current licensing guidance.

The practical starting point is an SPFx project containing one or more components and a declarative agent. The sample repositories for Zava Employee Agent and Zava IT Concierge offer examples to explore. The feature is most relevant to teams that already develop SharePoint solutions or want to create custom interfaces for agent-led tasks.

How it works

The key development task is to create the component and describe the agent capability that should call it. In the travel-expense example, the agent maps a user’s request to a component for entering an expense. The package includes the UI assets and agent definition, so they can be deployed as one solution.

1. Build the component and define the agent experience that should invoke it. The example includes a form for logging an expense and a second component for reviewing annual expenses.
2. Test the user experience against a tenant in Copilot Workbench. This lets the developer check how the component renders before deploying the package.
3. Package the solution as an .sppkg file. The demonstrated package contains JavaScript files, assets, images, and the declarative agent definition.
4. Upload and enable the solution in the SharePoint app catalog. The demonstrated flow then uses Add to Teams to synchronize the agent into the tenant’s agent catalog.
5. Find the agent in the agent experience and invoke it from a prompt. The first use of the demonstrated form requires the user to grant permission to invoke the component.

After deployment, the component’s assets are hosted within the customer tenant, as described in the demonstration. The presenter shows the package extracted under the app catalog and explains that the JavaScript files provide the user interface. A user can then ask the agent to open the travel-expense form, interact with it inline, or switch to full screen.

Limitations and alternatives

The deployment flow shown uses the SharePoint app catalog. The presenter says Microsoft was looking into moving deployment to the centralized Microsoft 365 catalog, but the demonstrated method at that time was the SharePoint catalog. That distinction matters for teams planning where they will publish and manage the solution.

The interface is custom code, so developers remain responsible for the experience they build. The examples illustrate that the component can collect and present information, but an agent does not automatically supply a finished business application. The travel-expense interface is described as a basic example, while the IT concierge example is presented as a more developed experience.

The demonstration also notes that the experience can connect to external systems, including HR, SAP, and line-of-business systems. Teams should consider how their component will handle its own business scenario and integrations, and test the intended prompts and user interaction before deployment. Inline and full-screen presentation are both shown as options; the appropriate layout depends on the task.

Sources

• Microsoft
• Microsoft demonstration of SPFx Copilot components
• Zava Employee Agent sample
• Zava IT Concierge sample

Frequently asked questions

What is an SPFx Copilot component?

It is a JavaScript-based user interface that an agent can render in the Copilot canvas. It can provide an interactive experience such as a form, map, or chart.

How do you deploy an SPFx Copilot component?

Package the component and declarative agent in an .sppkg file, upload and enable it in the SharePoint app catalog, then use Add to Teams to synchronize the agent into the tenant’s agent catalog.

Can an SPFx Copilot component run inline and full screen?

Yes. The demonstrated components can appear inline in the Copilot canvas or open in a full-screen view.

Do SPFx Copilot components require a Copilot license?

The demonstration says no Copilot license was required to build and test during the preview. Microsoft’s research notes describe the feature as generally available with SPFx 1.24, so the preview statement is not current licensing guidance.