Principle:Microsoft Semantic kernel Process Framework Frontend

Overview

Pattern for building React-based frontend applications that interact with Semantic Kernel Process Framework backends through real-time communication protocols. This principle covers the architectural approach of using SignalR (WebSocket) and gRPC-Web to enable interactive, event-driven user interfaces for AI-powered document generation workflows.

Description

The Semantic Kernel Process Framework orchestrates multi-step AI workflows on the backend. To provide interactive user experiences, the framework includes React TypeScript frontends that communicate with .NET backends in real time. These frontends demonstrate document generation workflows where users can initiate processes, review intermediate outputs, and approve or reject AI-generated content.

Communication Protocols

Two real-time communication approaches are supported:

SignalR (WebSocket)

SignalR provides a WebSocket-based connection between the React frontend and the .NET backend. It enables bidirectional communication where:

The frontend can invoke backend methods to start or control processes.
The backend can push updates (process state changes, generated content, status messages) to the frontend in real time.

import { HubConnectionBuilder } from "@microsoft/signalr";

const connection = new HubConnectionBuilder()
  .withUrl("/processHub")
  .withAutomaticReconnect()
  .build();

// Receive real-time updates from the backend
connection.on("DocumentGenerated", (document: DocumentResult) => {
  setGeneratedDocument(document);
});

// Invoke a backend method to start the process
await connection.invoke("StartDocumentGeneration", {
  topic: "Quarterly Report",
  style: "formal"
});

gRPC-Web

gRPC-Web provides a strongly-typed RPC communication channel between the frontend and backend. It uses Protocol Buffers for message serialization, offering:

Type-safe request and response messages generated from .proto definitions.
Server streaming for receiving incremental process updates.
Efficient binary serialization compared to JSON.

import { DocumentGenerationClient } from "./generated/document_generation_grpc_web_pb";
import { GenerationRequest } from "./generated/document_generation_pb";

const client = new DocumentGenerationClient("https://localhost:5001");

const request = new GenerationRequest();
request.setTopic("Quarterly Report");

// Server streaming for real-time updates
const stream = client.generateDocument(request);
stream.on("data", (response) => {
  updateDocumentState(response.toObject());
});

Frontend Architecture

The frontend applications are built with:

React with TypeScript for type-safe component development.
Fluent UI (Microsoft's design system) for consistent, accessible UI components.
Event-driven state management where backend process events drive UI updates.

The typical frontend workflow follows this pattern:

User initiates a document generation process through the UI.
The frontend sends a request to the backend via SignalR or gRPC.
The backend orchestrates the AI process (content generation, review, revision).
Process events are streamed back to the frontend in real time.
The UI updates progressively as each process step completes.
The user reviews the generated document and can approve, reject, or request revisions.

Chat-Based Interaction Pattern

The document generation demos use a chat-based interaction pattern where the process appears as a conversation between the user and the AI system. Messages in the chat represent process steps, generated content sections, and user decisions. This pattern makes complex multi-step AI workflows intuitive and transparent to users.

interface ChatMessage {
  role: "user" | "assistant" | "system";
  content: string;
  processStep?: string;
  timestamp: Date;
}

// Messages are rendered as a chat thread
const ChatThread: React.FC<{ messages: ChatMessage[] }> = ({ messages }) => (
  <div className="chat-thread">
    {messages.map((msg, i) => (
      <ChatBubble key={i} message={msg} />
    ))}
  </div>
);

Usage

Use the Process Framework Frontend pattern in the following scenarios:

Building Interactive AI Applications: When creating user-facing applications that need to visualize and control multi-step AI workflows orchestrated by the SK Process Framework.
Real-Time Process Monitoring: When users need to see intermediate results as they are produced, rather than waiting for a complete response.
Human-in-the-Loop Workflows: When AI-generated content requires human review and approval before proceeding to the next workflow step.
Choosing a Communication Protocol: Use SignalR when simplicity and broad browser compatibility are priorities; use gRPC-Web when strong typing and efficient serialization are important.

Theoretical Basis

Real-Time Web Communication Patterns (SignalR/WebSocket, gRPC-Web)

Traditional HTTP request-response patterns are insufficient for real-time process visualization. WebSocket (via SignalR) establishes a persistent, full-duplex connection that allows both client and server to send messages at any time, eliminating the overhead of repeated HTTP handshakes. gRPC-Web adapts the gRPC protocol for browser environments, supporting server-side streaming where the server pushes a sequence of messages to the client over a single connection.

Both patterns support the publish-subscribe communication model where the frontend subscribes to process events and the backend publishes updates as they occur.

Event-Driven Frontend Architecture

The frontend follows an event-driven architecture where the UI state is derived from a stream of events received from the backend. Each process event (document section generated, review requested, approval received) triggers a state transition in the frontend, which React re-renders into updated UI components. This approach naturally handles the asynchronous, non-deterministic nature of AI workflows where step completion times are unpredictable.

Process Orchestration Visualization

The frontend provides a visual layer over the Process Framework's orchestration logic. Each process step is represented in the UI, allowing users to understand where they are in the workflow, what has been completed, and what actions are available. This visualization transforms an opaque backend process into a transparent, controllable interaction, which is essential for building trust in AI-generated outputs and enabling effective human-AI collaboration.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment