Copilot Components - UX in Copilot canvas

Explore the Copilot Components gallery

This repository contains Microsoft and community provided samples that demonstrate how to build, extend, and customize Copilot experiences for Microsoft Copilot. The goal is to provide a curated, open collection of reusable SPFx Copilot components that help you get started faster when building Copilot UX components in the Microsoft Copilot canvas.

See more details from the announcement blog post at Going beyond text in Microsoft 365 Copilot – Introducing SharePoint Copilot Apps.

Note

This repository is a community effort, maintained together with the Microsoft 365 & Power Platform Community. Samples are provided as is and are not officially supported products. See SUPPORT.md for details.

Fast path to testing

Ready-built packages. Several samples include a ready-built .sppkg file under sharepoint/solution/. Follow that sample's README to upload the package to your tenant App Catalog and deploy the scenario without building it from source first. Sample-specific setup, permissions, and data prerequisites still apply.

No Microsoft Copilot add-on is required during public preview. You can build, deploy, and run Copilot UX components without a Microsoft Copilot add-on license or configuring consumption-based Copilot billing. An eligible Microsoft 365 user license, a SharePoint tenant, and the required deployment permissions are still needed. Optional services used by an individual sample, such as Microsoft Graph, external APIs, added knowledge sources, or Copilot Studio capabilities, can have separate licensing or usage costs. See the official Copilot UX components preview guidance.

Get moving

• Try - Test and demo Copilot UX components in minutes - in any Microsoft 365 tenant
• Explore - Copilot Just Got a Body: Real Enterprise Apps, Live Inside the Canvas
• Build - Creating your first Copilot UX component - Tutorial

What you'll find here

Each sample lives in its own self-contained folder under the samples directory and includes:

• A clear README.md describing what the sample does and how to run it.
• The complete source code required to build and deploy the sample.
• A mandatory assets folder containing a sample.json metadata file and at least one locally stored image referenced by its thumbnails collection. The first image by ascending order is used as the gallery preview; its filename can be chosen to fit the sample.

Using the samples

To build and run these samples, you'll need to clone the repository and work within an individual sample folder.

Clone this repository:

git clone https://github.com/pnp/spfx-copilot-components.git

Navigate into the cloned repository:

cd spfx-copilot-components

Move into the sample you want to use, replacing sample-folder-name with the name of the sample:

cd samples
cd sample-folder-name

Each sample folder contains its own README.md with the exact prerequisites, build steps, and deployment instructions for that specific sample. Always follow the instructions in the sample's own README.md, as requirements may differ between samples.

Contributing

These samples come directly from Microsoft and the broader community. We welcome your contributions, issue reports, and suggestions for new samples.

Before submitting a pull request, please review the Contribution Guidance so we can process your contribution as quickly as possible. You can use the assets in the templates folder as a starting point for your own sample.

All contributors on this repository will be acknowledged with special Copilot UX components Credly badge.

Have issues or questions?

Before submitting an issue, determine whether it is a general SharePoint or SharePoint Framework issue, or an issue with a specific sample in this repository:

• For a general question or challenge with SharePoint Copilot Apps or the SharePoint Framework, submit the issue to the SharePoint developer documentation issue tracker. Do not submit generic issues to this repository.
• For an issue with a specific sample in this repository, use the sample issue form. Include the affected sample, exact reproduction steps, expected and actual behavior, and relevant environment details.

Additional resources

• Going beyond text in Microsoft 365 Copilot – Introducing Copilot UX components
• Build agents for Microsoft Copilot
• Overview of the SharePoint Framework
• SharePoint Framework development tools and libraries
• Set up your Microsoft 365 development environment

Code of Conduct

This repository has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Sharing is caring!