Implementation:Microsoft Semantic kernel CloudEvents App

Knowledge Sources	Microsoft_Semantic_kernel
Domains	React, CloudEvents, gRPC, Fluent_UI, Process_Framework
Last Updated	2026-02-11 00:00 GMT

Overview

Concrete root React component for the CloudEvents Process demo application, provided by the ProcessWithCloudEvents sample.

Description

App.tsx is the root React functional component for the CloudEvents demo client. It serves as the application shell that orchestrates cloud technology selection, application page routing, gRPC client communication, and state management for document generation workflows. The component accepts an optional GrpcDocumentationGenerationClient prop for communicating with the backend gRPC service.

Key responsibilities include:

• Cloud technology selection -- A Fluent UI Dropdown lets the user choose between communication technologies (defaulting to gRPC).
• Application page selection -- A second Dropdown lets users pick which demo page to display (defaulting to Document Generation).
• gRPC document lifecycle -- The component wraps gRPC client calls for creating documents (userRequestFeatureDocumentation), submitting reviews (userReviewedDocumentation), and subscribing to server-streaming responses for document review (requestUserReviewDocumentation) and published documents (receivePublishedDocumentation).
• Error handling -- Displays a Fluent UI MessageBar warning when gRPC connection errors occur.
• State management -- Tracks generated documents, published documents, selected cloud technology, selected page, and gRPC error state via React useState hooks.

Usage

This file is the entry point component rendered by the React application. It is used when running the CloudEvents demo client locally or in a deployed environment. Developers modify this file to add new cloud technology backends, new application pages, or to change the gRPC client integration.

Code Reference

Source Location

• Repository: Microsoft_Semantic_kernel
• File: dotnet/samples/Demos/ProcessWithCloudEvents/ProcessWithCloudEvents.Client/src/App.tsx
• Lines: 1-306

Signature

interface AppProps {
    grpcDocClient?: GrpcDocumentationGenerationClient;
}

const App: React.FC<AppProps> = ({ grpcDocClient }) => {
    const [selectedCloudTech, setSelectedCloudTech] = useState<CloudTechnology>(
        CloudTechnology.GRPC
    );
    const [selectedAppPage, setSelectedAppPage] = useState<AppPages>(
        AppPages.DocumentGeneration
    );
    const [generatedDocuments, setGeneratedDocuments] = useState<NewDocument[]>([]);
    const [publishedDocuments, setPublishedDocuments] = useState<NewDocument[]>([]);
    const [hasGrpcError, setHasGrpcError] = useState(false);

    const onCreateDocumentRequest = (document: NewDocument): Promise<string> => { /* ... */ };
    const onUserReviewedDocument = (userReview: DocumentReview): Promise<boolean> => { /* ... */ };
    const subscribeReceiveDocumentForReview = async (processId: string) => { /* ... */ };
    const subscribeToReceivePublishedDocument = async (processId: string) => { /* ... */ };
    const subscribeToSpecificProcessId = async (processId: string) => { /* ... */ };

    return ( /* JSX layout */ );
};

export default App;

Import

import App from "./App";

I/O Contract

Inputs

Name	Type	Required	Description
grpcDocClient	GrpcDocumentationGenerationClient	no	Optional gRPC client instance for communicating with the document generation backend service

Outputs

Name	Type	Description
JSX.Element	React component	Full application UI with cloud technology selector, page selector, error bar, and active page content
gRPC calls	network requests	Unary and server-streaming gRPC calls to the document generation backend

Usage Examples

Rendering the App with a gRPC Client

import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
import { GrpcDocumentationGenerationClient } from "./services/grpc/gen/documentGeneration.client";
import App from "./App";

const transport = new GrpcWebFetchTransport({
    baseUrl: "https://localhost:5001",
});

const grpcClient = new GrpcDocumentationGenerationClient(transport);

ReactDOM.createRoot(document.getElementById("root")!).render(
    <App grpcDocClient={grpcClient} />
);

gRPC Document Creation Flow

// Inside App component -- creating a document via gRPC
const onCreateDocumentRequest = (document: NewDocument): Promise<string> => {
    if (selectedCloudTech == CloudTechnology.GRPC && grpcDocClient) {
        return grpcDocClient
            .userRequestFeatureDocumentation({
                processId: document.processId,
                content: document.title ?? "",
                title: document.title ?? "",
                userDescription: "",
            })
            .then((result) => result.response.processId)
            .catch((error) => {
                console.error("[GRPC] Error requesting document generation", error);
                setHasGrpcError(true);
                return "";
            });
    }
    return Promise.resolve("");
};

Related Pages

• Environment:Microsoft_Semantic_kernel_DotNet_SDK_Environment
• Microsoft_Semantic_kernel_CloudEvents_GenerateDocumentsChat -- Child component rendered for document generation page
• Microsoft_Semantic_kernel_CloudEvents_Grpc_DocumentGeneration -- Auto-generated gRPC TypeScript types used by the client
• Microsoft_Semantic_kernel_CloudEvents_PackageLock -- npm lock file for this client project
• Microsoft_Semantic_kernel_SignalR_GenerateDocumentsChat -- Equivalent component in the SignalR demo variant