Create and Deploy custom copilot to SharePoint Site (Part 2)

 

Custom Copilot as a canvas control on SharePoint site:

This post is an extension to Part 1 to deploy the custom Copilot to SharePoint site. Before proceeding further please refer to the Part 1 as we are leveraging the custom Copilot and Service Principal created in the previous post.

Deploying custom Copilot requires an additional app registration(this is different than the one created in the Part 1 for enabling authentication) to register SharePoint site as a canvas app to host copilot and handle single sign on flow.

Create App Registration for SharePoint App:

Login to https://portal.azure.com -> Microsoft Entra ID -> Create New App Registration

Select 'Single page application' for platform and the SharePoint URL where the copilot is to be hosted and accessed

Select API permissions blade and add custom API permission which was created in part 1

Save the Application(client Id) and the tenant id these will be used in SharePoint canvas app

Deploy SharePoint SPFx App on the SharePoint site:

Now, we need to upload a SharePoint app and configure it using the PowerShell. SharePoint component is a custom action which allows to integrate SharePoint site with custom Copilot. 

Download the SharePoint Canvas component app(SPFx app) and a PowerShell script from below URLs. 

pva-extension-sso.sppkg - This is a pre-built SPFx app from Copilot Studio Samples

Configure-McsForSite.ps1 - PowerShell script to configure the custom action parameters

Upload the .sppkg to SharePoint app catalog 

Add the SPFx app to a SharePoint site where the custom copilot should be available to users. In this case, we are adding the app to root SharePoint site. This url is same as the Redirect URI of an app registration we created at the start of this post.

Navigate to root SharePoint site -> Settings -> Add an App

Now, execute the PowerShell script with the below parameters. Make sure you have PnP.PowerShell module is installed. 

Parameters:

siteURL: Root SharePoint site URL where the copilot should be available to users

botURL: Copilot Studio Bot token end point. Get this URL from Settings -> Channels -> Mobile App -> Token Endpoint

botName: SharePoint Copilot

greet: $True

customScope: Custom API scope created in the Part 1 post eg: api://2aa5b-e33b-4091-b2c4-5f98d2b061/SharePoint

clientID: Application(client id) Id of App Registration created in this post

authority: https://login.microsoftonline.com/<tenantname>.onmicrosoft.com

buttonLabel: <Name>

Chat with copilot in SharePoint site:

A button with the label configured above should appear at the bottom on all pages of the SharePoint site. Chat window with the custom copilot should be opened when clicked on this button as below.