SPOサイトごとに別のCopilot Studioで作成したエージェントをSharePointにサイドパネルとして設置する。

お待ちかね！　前回記事でできなかったSPOサイトごとに別のエージェントを紐づける方法に関する記事です。

この記事バズッた。

Copilot StudioにはSharePointチャネルでの公開方法が用意されていますが、M365 Copilotライセンスを持つユーザーしか利用できないという制約があります。この記事で紹介したOSSをインストールすると、ライセンスを持たないユーザーでも使えるBOTをSharePointサイトに配置できるようになります。

iFrameを使わず、SharePointアプリとしてサイト上で動作し、その裏側でCopilot Studioで作成したエージェントに接続する仕組みです。

インストールするnode.jsのバージョンに気を付けなくてはいけない以外は割とすんなりと動作しましたので、まだチャレンジしていない方はぜひお試しを。

ただし、この方法はあくまでサンプルなので上記のとおり実用にはSharePointチャネルを使いましょうね、ということです。

本当にテナントに１種類しか設置できないの？

この記事を公開した当時、SPFxでSharePointサイトにBOTを配置できる仕組みが分かっていなかったので、「テナントに１つだけ配置できる」のが残念と書いてました。

理想としては、サイトAではBOT-A、サイトBではBOT-Bのように配置したいのだけれどその方法がわかっていなかったのです。

当時は、まあ仕方ないよね。ぜいたくは言えないか、とあきらめていたのですが。

このプログラムの前身として公開されている別のOSSにヒントがありました。それがこちらです。

こちらは、サイドパネルではなく画面の中央にエージェントが表示されるタイプですが、以下のとおりすでに開発は中止されており、README.mdにも記載されているとおり、後身のサイドパネル版に後継をゆずっています。

ヒントとなったのは、この旧版に付属しているPowerShellスクリプトです。もともと旧版ではPowerShellを使ってSharePointアプリをインストールしたサイトごとに紐づくエージェントの情報などを上書きして書き換えることができたのです。

その仕組みは単純で、PnP PowerShellでサイトに接続をして「Get-PPCustomAction」というコマンドで読み取った設定情報を「Update」コマンドを使って上書きするというものでした。

新版も同じ仕組みなのでは？

旧版を試していてこの仕組みはわかっていたので、もしかして新版も同じ領域に設定を持っているのではないかと思い確認してみることにしました。

PnP PowerShellを常用している方はご存じだと思いますが、サンプルのスクリプトには書いていない -ClientIdを加えないと少し前から接続できなくなっています。このあたりの事情とAzure ADアプリ登録に付与するべき権限についてはこちらが参考になります。

アプリ登録ができたら接続してみます。

PowerShell

#Install-Module -Name PnP.PowerShell -Scope CurrentUser //必要ならモジュールをインストール
$siteUrl = "<YOUR-SITE-URL>"
Connect-PnPOnline -Url $siteUrl -Interactive -ClientId "<YOUR-APPLICATION-ID>"
Get-PnPCustomAction

実行してみると、何か記録されているのが見えます。

さらに詳しく見るために、全項目を開いてみます。

PowerShell

Get-PnPCustomAction | select *

ClientSideComponentProperties　という項目に、いかにも設定らしい内容が記録されていることがわかります。

これって、まさにこちらの操作で設定したBOTとアプリIDとテナントの情報なんですよね。ビンゴ！

旧版のPowerShellスクリプトを新版用に書き換えた

ここまで分かれば、新しいサイドパネル版のClientSideComponentPropertiesを書き換えるスクリプトを作成すればOKです。

以下のスクリプトを「設定上書き.ps1」として保存します。
は利用可能なものに差し替えてください。

設置上書き.ps1

param (
    [Parameter(Mandatory = $true)]
    [string]$siteUrl,

    [Parameter(Mandatory = $true)]
    [string]$appClientId,

    [Parameter(Mandatory = $true)]
    [string]$tenantId,

    [Parameter(Mandatory = $true)]
    [string]$environmentId,

    [Parameter(Mandatory = $true)]
    [string]$agentIdentifier,

    [Parameter(Mandatory = $true)]
    [string]$directConnectUrl,

    # ← 文字列ではなくブール値として受け取る（true/false）
    [Parameter(Mandatory = $true)]
    [bool]$showTyping,

    # ← 背景色は文字列で渡す（例: "white"）
    [Parameter(Mandatory = $true)]
    [string]$headerBackgroundColor,

    # ← エージェントの表示名も文字列
    [Parameter(Mandatory = $true)]
    [string]$agentTitle
)

# 1) 対話接続（自前の Entra ID アプリを指定する場合は -ClientId に置き換え）
Connect-PnPOnline -Url $siteUrl -Interactive -ClientId "<PnPPowerShell-App-ID>"

# 2) 既存の CustomAction を Title で取得
$action = (Get-PnPCustomAction | Where-Object { $_.Title -eq "SidebarAgent" })[0]
if (-not $action) {
    throw "CustomAction 'SidebarAgent' が見つかりません。Title を確認してください。"
}

# 3) JSON（文字列）を作成して代入
#    ConvertTo-Json の結果は「文字列」。SPFx は JSON 文字列を期待します。
$action.ClientSideComponentProperties = (
    [ordered]@{
        appClientId           = $appClientId
        tenantId              = $tenantId
        environmentId         = $environmentId
        agentIdentifier       = $agentIdentifier
        directConnectUrl      = $directConnectUrl
        showTyping            = $showTyping               # ← true/false
        headerBackgroundColor = $headerBackgroundColor    # ← "white" 等
        agentTitle            = $agentTitle               # ← "Copilot Studio Agent" 等
    } | ConvertTo-Json -Depth 5 -Compress
)

# 4) 反映
$action.Update()
Invoke-PnPQuery

Write-Host "ClientSideComponentProperties を更新しました。" -ForegroundColor Green

このスクリプトに対して、オプションを与えて実行します。各値はこちらの記事を参考にして差し替えてください。

PowerShell

.\設定上書き.ps1 `
  -siteUrl "<YOUR-SITE-URL>" `
  -appClientId "<YOUR-APP-CLIENT-ID>" `
  -tenantId "<YOUR-TENANT-ID>" `
  -environmentId "<YOUR-ENVIRONMENT-ID>" `
  -agentIdentifier "<YOUR-AGENT-IDENTIFIER>" `
  -directConnectUrl "<YOUR-DIRECT-CONNECT-URL>" `
  -showTyping $true `
  -headerBackgroundColor "<YOUR-HEADER-BACKGROUND-COLOR>" `
  -agentTitle "<YOUR-AGENT-TITLE>"

Get-PnPCustomAction | select *　で取得したClientSideComponentPropertieの各値に差し替えて実行してみます。とりあえずの部分だけ名前を変えてみます。

Copilot Studio Agent2 の２が付きました！更新成功です！

もちろん、インストール済みのほかのサイトの設定には影響を与えていません。PnP PowerShellで更新したのはサイト単位のCustom Action領域の値だけだからです。

サイトごとに別のエージェントを配置できた！

SharePointサイトにはCustom Action領域があり、PnP PowerShellで閲覧・更新できることが分かりました。

これで、M365 Copilotライセンスや従量課金のSharePoint Copilotを使わなくても、SPFxを利用してエージェントを配置できます。

以前の記事でも書いた通り、エージェントはMicrosoft認証をつかうので、手動認証では利用できないセマンティック検索が利用できます。つまり賢いボットになります。

手動認証だとCopilot Studioで作成したエージェントごとに設定が必要ですし、シークレットの管理も行わなければいけませんが、こちらであればそれも不要です。

PnP PowerShellを利用するので、ユーザーが気軽にというわけにはいきませんが、これも見方によればガバナンスが効くので良いかもしれません。

GitHubに作者の方が書いていらっしゃるとおり、実稼働させるにはCopilot Studioに用意されているSharePointチャネルを使うべきですが、とても有用なサンプルですので活用するとよいと思います。

大晦日最後の投稿

この記事は2025年の大晦日に書いています。今年もPower Platform界隈のみなさまに感謝です。

来年もQiitaへの投稿を続けますので、ぜひ「いいね！」やフォローをお願いします。
良いお年を！

こんな人が書いてます。

こちらの記事はランゲルハンス島のDDさんが紹介しました。ブログでクラウドフローのTIPSのようなものを書いたり、Qiita記事を書いたりしていますのでご贔屓に。
フォローやいいねいただけると嬉しいです。
関西のPowerPlatform系の勉強会にときどき出没しますので、気軽に声をかけていただけると喜びます！