Chat with Semantic Kernel and Plugins in SPFx

Chat with Semantic Kernel and Plugins in SPFx

Bring an AI-first chat experience directly into SharePoint Online. In this post, I show a SharePoint Framework (SPFx) web part that chats via Azure Functions and Microsoft Semantic Kernel (SK), streams responses with Server‑Sent Events (SSE), and securely calls Microsoft Graph using Entra ID.

For more details on SK itself, see the Semantic Kernel overview.

At a glance

• Real-time streaming replies with SSE
• Semantic Kernel function calling and plugins (Graph-enabled)
• Backend on Azure Functions (.NET 10)
• Entra ID protected end-to-end
• Modern React UI with Fluent UI

If you want to see it in motion, here’s a short demo:

You can also grab the raw recording: Video

What you’ll build

An SPFx chat web part that connects to Azure Functions. The function app hosts Semantic Kernel, which orchestrates prompts, tools, and Graph plugin calls like reading user profile data, dates, and calendar entries. Results stream back to the web part over SSE for a fluid chat feel.

Architecture overview

• SPFx web part (React) with chat UI and SSE client
• Azure Functions (.NET 10) hosting Semantic Kernel
• SK plugins for Microsoft Graph operations
• Entra ID for auth (delegated permissions)

Prerequisites

• SharePoint Online tenant with App Catalog
• Permissions to create an Entra ID app registration
• Node.js (version per your SPFx setup)
• .NET SDK for Azure Functions (.NET 8/10 depending on your environment)

Setup (minimal path to awesome)

1. Clone the repository and open the solution folder.

2. Prepare local settings and solution variables:

cp azure-function-sk/local.template.json azure-function-sk/local.settings.json
# Edit the files below and fill in values
# - azure-function-sk/local.settings.json
# - config/package-solution.json

3. Create the Entra ID App Registration

• Single-tenant app (e.g., “React-Chat-Sk”)

• Copy Client ID and Tenant ID into:
  • azure-function-sk/local.settings.json (AzureAd__TenantId, AzureAd__ClientId)
  • config/package-solution.json (webApiPermissionRequests.appId)

• API permissions (delegated)

• Expose API
  • Scope: user_impersonation
  • Update azure-function-sk/local.settings.json (AzureAd__Audience, Downstream__Scopes)
  • Update config/package-solution.json (webApiPermissionRequests.scope)

• Create a client secret and update azure-function-sk/local.settings.json (AzureAd__ClientSecret).

4. Install dependencies and run the SPFx workbench

npm install
gulp bundle && gulp package-solution
gulp serve --nobrowser

5. Start the Azure Functions backend in a second terminal

cd azure-function-sk
dotnet run

6. Deploy the SharePoint package and approve API permissions

• Upload the .sppkg to the tenant App Catalog and enable it.

• Open API access for the site and approve the pending requests.

Tip: You can open this sample with VS Code Remote Development. See https://aka.ms/spfx-devcontainer.

How it works

The web part sends messages to Azure Functions. Semantic Kernel composes the response, optionally calls plugins (like Graph) based on the user’s prompt, and streams tokens back to the browser via SSE. Because the function runs with delegated permissions for the signed-in user, Graph calls are scoped to that user’s context and consent.

Compatibility

Wrap-up

This is a clean pattern for bringing AI into SharePoint using SK and Functions: secure, extensible, and fast. From here, add more SK plugins, wire in your enterprise data, and iterate on the prompt engineering for your scenarios.