Copilot UX component
Lists and items on a site
The tutorial project that shows the lists on a SharePoint site, and the items in the list the user selects, from a site URL the agent passes to the tool.
- Updated
- October 4, 2026
- Built with
- No framework
- SPFx version
- 1.24.0-beta.5
- Products
- SharePoint, Microsoft Copilot
Overview
What this sample demonstrates
The finished project for the tutorial Connect your Copilot UX component to SharePoint data. It's the my-copilot-app project from Build your first SharePoint Copilot App with the tutorial changes applied.
The agent passes a site URL to the MyCopilotAppTool tool in the siteUrl parameter. The MyCopilotApp component uses spHttpClient to show the lists on that site and the first 25 items of the list the user selects. It handles a missing URL, a URL that isn't a site, a site the user can't access, and a site that doesn't exist. The component uses no framework, and all code runs in the browser.
Gallery
See the component in action
Documentation
Setup and implementation
Summary
This sample is the finished project for the tutorial Connect your Copilot UX component to SharePoint data. It's the my-copilot-app project from Build your first SharePoint Copilot App with the changes from the tutorial applied.
Compatibility
Applies to
Get your own free development tenant by subscribing to the Microsoft 365 developer program
Contributors
Version history
| Version | Date | Comments |
|---|---|---|
| 1.0 | October 4, 2026 | Initial release |
Prerequisites
- The Node.js version in the
enginesfield ofpackage.json - Permission to deploy to the tenant app catalog
Minimal path to awesome
- Clone this repository (or download this solution as a .ZIP file then unzip it)
- From your command line, change your current directory to the directory containing this sample (
tutorial-connect-to-sharepoint-data, located undersamples) - In the command line run:
npm installnpx heft start --nobrowser
- Go to the Copilot Workbench at
https://<tenant>.sharepoint.com/_layouts/15/copilotworkbench.aspxand accept the loading of debug manifests. - Activate the component and select Fire turn with the properties
{"siteUrl":"https://<tenant>.sharepoint.com/sites/<site>"}.
To deploy the sample to Microsoft 365 Copilot:
- In the command line run
npm run build. - Upload
sharepoint/solution/my-copilot-app.sppkgto the tenant app catalog and select Enable app. - In the app catalog, select the app and select Add to Teams.
- In Microsoft 365 Copilot, find the agent and add it. A new agent can take some time to appear; signing out and in again can help.
Features
The MyCopilotApp component shows the lists on a SharePoint site and the first 25 items of the list the user selects. The agent passes the site to the MyCopilotAppTool tool in the siteUrl parameter.
All code runs in the browser. The solution package is the only thing to deploy.
This sample illustrates the following concepts:
- defining a tool parameter with a Zod schema and describing it so Copilot fills it in from the prompt
- describing the tool and the agent instructions so Copilot calls the tool from a natural prompt
- calling the SharePoint REST API with
spHttpClientfrom a Copilot UX component built with no framework - handling a missing URL, a URL that isn't a site, a site the user can't access, and a site that doesn't exist
- testing the component in the Copilot Workbench with tool properties
Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
You can try looking at issues related to this sample to see if anybody else is having the same issues.
If you encounter any issues using this sample, create a new issue.
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.