Added article: SignalR with Open AI #33448

kevinguo-ed · 2024-08-27T08:31:45Z

Internal previews

📄 File	🔗 Preview link
aspnetcore/toc.yml	aspnetcore/toc
aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md	aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat

mikekistler

I don't think this content really works as a tutorial. This is more an explanation of the sample project. Can you move this down to the Samples section?

IEvangelist

A few nits

aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md

Rick-Anderson

Wow, this looks like a really great article. It just needs a little work and we can help you make the changes.

Rick-Anderson · 2024-09-05T20:47:52Z

aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md

+We use OpenAI for generating intelligent, context-aware responses and SignalR for delivering the response to users in a group. You can find the complete code [in this repo](https://github.com/microsoft/SignalR-Samples-AI/tree/main/AIStreaming).
+
+## Dependencies
+You can use either Azure OpenAI or OpenAI for this project. Make sure to update the `endpoint` and `key` in `appsetting.json`. `OpenAIExtensions` reads the configuration when the app starts and they are required to authenticate and use either service.


This needs to be

Update the endpoint and key in appsetting.json file as shown in the following code:

After this PR merges, we can move the code to a sample folder and display the appsetting.json with the changes highlighted.

kevinguo-ed · 2024-09-11T08:23:23Z

@kevinguo-ed please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
@dotnet-policy-service agree [company="{your company}"]
Options:

(default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@dotnet-policy-service agree
(when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@dotnet-policy-service agree company="Microsoft"
Contributor License Agreement

@dotnet-policy-service agree company="Microsoft"

wadepickett · 2024-10-07T19:33:54Z

I don't think this content really works as a tutorial. This is more an explanation of the sample project. Can you move this down to the Samples section?

I agree with both of Mike's points above.

@BrennanConroy
This looks like the sample itself from https://github.com/microsoft/SignalR-Samples-AI/tree/main/AIStreaming would be a candidate to go here with the existing SignalR samples:
https://github.com/aspnet/SignalR-samples

Then per Mike's point above, the content for that sample in this PR here (after another edit round which I will help with) would go in a README for the sample. It is more of a description of the sample, rather than a tutorial.

Thoughts?

wadepickett · 2024-10-18T01:20:39Z

@BrennanConroy, thoughts? See suggestion above.

wadepickett · 2025-02-07T20:33:34Z

I don't think this content really works as a tutorial. This is more an explanation of the sample project. Can you move this down to the Samples section?

(I've been assigned to finish this up.)

Thanks @mikekistler , you mentioned moving this down to the "Samples section"

I assume you meant moving it down in the TOC menu to "Real-time apps > Samples "

...that points directly to the sample repo here.
https://github.com/aspnet/SignalR-samples

Were you thinking the content in this PR should move to the SignalR-samples repo, or were you envisioning sub links under the Real-time apps > Samples TOC? If the latter, then I will create two sub items to "Samples" in the TOC, one for the samples repo (and make it more clear that is where it points to) and another for this topic.

Also,
The code sample for the doc in the PR is located here:
https://github.com/microsoft/SignalR-Samples-AI/tree/main/AIStreaming

It is not clear to me if the intent was that the samples code for this topic stays in that repo. I'm unaware of the history on that. I'll assume it does rather than moving it to the sample to the SignalR-samples repo unless I hear otherwise.

Thanks for any clarification.

mikekistler · 2025-02-08T14:25:34Z

Moving this to the SignalR-samples repo was what I had in mind, but sadly that repo is archived now, so we probably need some other solution. I don't have any strong opinion on this -- only that we should differentiate tutorials and samples for the benefit of users.

…at.md Will be pulling all commits into a new PR. Commiting suggestions here before that transfer starts. Co-authored-by: Luke Latham <[email protected]>

…at.md Co-authored-by: David Pine <[email protected]>

IEvangelist

Awesome! A few nits and FYIs, otherwise

IEvangelist · 2025-03-21T18:43:35Z

aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md

+# [OpenAI](#tab/open-ai)
+To build this application, you will need the following:
+* ASP.NET Core: To create the web application and host the SignalR hub.
+* [SignalR](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client): For real-time communication between clients and the server.
+* [OpenAI Client](https://www.nuget.org/packages/OpenAI/2.0.0-beta.10): To interact with OpenAI's API for generating AI responses.
+
+# [Azure OpenAI](#tab/azure-open-ai)
+To build this application, you will need the following:
+* ASP.NET Core: To create the web application and host the SignalR hub.
+* [SignalR](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client): For real-time communication between clients and the server.
+* [Azure OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/2.0.0-beta.3): Azure.AI.OpenAI
+---


I believe the added space helps with readability...and not that it really matters, but I've found myself trying to avoid tabs with H1's, you're free to use any heading value so long as the #tab bookmark/syntax is in place. Also, removed versions from the packages as stable releases are now available. See microsoft/SignalR-Samples-AI#5, where I just did a PR to upgrade these in the source.

Suggested change

# [OpenAI](#tab/open-ai)

To build this application, you will need the following:

* ASP.NET Core: To create the web application and host the SignalR hub.

* [SignalR](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client): For real-time communication between clients and the server.

* [OpenAI Client](https://www.nuget.org/packages/OpenAI/2.0.0-beta.10): To interact with OpenAI's API for generating AI responses.

# [Azure OpenAI](#tab/azure-open-ai)

To build this application, you will need the following:

* ASP.NET Core: To create the web application and host the SignalR hub.

* [SignalR](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client): For real-time communication between clients and the server.

* [Azure OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/2.0.0-beta.3): Azure.AI.OpenAI

---

### [OpenAI](#tab/open-ai)

To build this application, you will need the following:

* ASP.NET Core: To create the web application and host the SignalR hub.

* [SignalR](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client): For real-time communication between clients and the server.

* [OpenAI Client](https://www.nuget.org/packages/OpenAI): To interact with OpenAI's API for generating AI responses.

### [Azure OpenAI](#tab/azure-open-ai)

To build this application, you will need the following:

* ASP.NET Core: To create the web application and host the SignalR hub.

* [SignalR](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client): For real-time communication between clients and the server.

* [Azure OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI): `Azure.AI.OpenAI`

---

IEvangelist · 2025-03-21T18:50:24Z

aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md

+
+### Data flow 
+
+:::image type="content" source="./sequence-diagram-ai-powered-group-chat.png" alt-text="sequence diagram for the AI-powered group chat":::


Just an idea, not something that you need to do, but since we still do not have native support from the Learn platform for mermaid diagrams-I've been using mermaid.live and its share feature, that lets you encode/share diagrams. You can build this out, create the share, and embed the share as a comment in the Markdown (which hides it from the end user) but the content developer can use it as a source of truth for future edits, re-exporting it as an image to update the image itself.

For example:



Check out this link.

IEvangelist · 2025-03-21T18:51:06Z

aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md

+
+The `CompleteChatStreamingAsync()` method streams responses from OpenAI incrementally, which allows the app to send partial responses to the client as they are generated. 
+
+The code uses a `StringBuilder` to accumulate the AI's response. It checks the length of the buffered content and sends it to the clients when it exceeds a certain threshold (e.g., 20 characters). This approach ensures that users see the AI’s response as it forms, mimicking a human-like typing effect. 


Suggested change

The code uses a `StringBuilder` to accumulate the AI's response. It checks the length of the buffered content and sends it to the clients when it exceeds a certain threshold (e.g., 20 characters). This approach ensures that users see the AI’s response as it forms, mimicking a human-like typing effect.

The code uses a <xref:System.Text.StringBuilder> to accumulate the AI's response. It checks the length of the buffered content and sends it to the clients when it exceeds a certain threshold (e.g., 20 characters). This approach ensures that users see the AI’s response as it forms, mimicking a human-like typing effect.

BrennanConroy · 2025-03-21T23:58:09Z

aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-chat.md

+        id,
+        totalCompletion.ToString());
+
+    lastSentTokenLength = totalCompletion.Length;


nit: This is something I don't like about bing chat, it sends the entire message every update. Really it should just append the new content on the client side, saves bandwidth and memory usage on the server.

wadepickett · 2025-03-23T22:14:40Z

Closing this PR since commits were merged through a new one.

The commits here were moved into a new PR by request, which included all changes asked for at the time, plus some updates per review at #34848 and that merged after approval.

However, I didn't realize that two more suggestions were made on this PR just before I merged to main.

@IEvangelist, I added your suggested StringBuilder link just now with Minor, xref link fix. #35029
@BrennanConroy, for: "nit: This is something I don't like about Bing chat, it sends the entire message every update. Really it should just append the new content on the client side". It wasn't clear to me if there was an design change to be made here in the example to accommodate the problem, in which case I will create a new issue for it, or if you were just noting a Bing chat design problem, no sample change needed.

kevinguo-ed added 3 commits August 27, 2024 16:30

Added article: SignalR with Open AI

40b9e13

Added missing images and fixed formatting issues

9a5ed0c

Added more details about managing chat history

cb9ddee

mikekistler requested changes Sep 4, 2024

View reviewed changes

IEvangelist reviewed Sep 5, 2024

View reviewed changes

Rick-Anderson suggested changes Sep 5, 2024

View reviewed changes

Rick-Anderson mentioned this pull request Feb 4, 2025

Finish PR: SignalR with Open AI #34636

Closed

wadepickett and others added 8 commits February 25, 2025 12:36

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

e77a973

…at.md Will be pulling all commits into a new PR. Commiting suggestions here before that transfer starts. Co-authored-by: Luke Latham <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

82f01f5

…at.md Co-authored-by: David Pine <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

dabdfd6

…at.md Co-authored-by: David Pine <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

c43892e

…at.md Co-authored-by: David Pine <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

d9db275

…at.md Co-authored-by: David Pine <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

ab6d9ad

…at.md Co-authored-by: David Pine <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

cb2b291

…at.md Co-authored-by: David Pine <[email protected]>

Update aspnetcore/tutorials/ai-powered-group-chat/ai-powered-group-ch…

6d533d5

…at.md Co-authored-by: David Pine <[email protected]>

wadepickett mentioned this pull request Feb 27, 2025

SignalR with Open AI: Finish as Sample Guide #34848

Merged

IEvangelist approved these changes Mar 21, 2025

View reviewed changes

BrennanConroy reviewed Mar 22, 2025

View reviewed changes

wadepickett closed this Mar 23, 2025


		### Data flow

		:::image type="content" source="./sequence-diagram-ai-powered-group-chat.png" alt-text="sequence diagram for the AI-powered group chat":::


		The `CompleteChatStreamingAsync()` method streams responses from OpenAI incrementally, which allows the app to send partial responses to the client as they are generated.

		The code uses a `StringBuilder` to accumulate the AI's response. It checks the length of the buffered content and sends it to the clients when it exceeds a certain threshold (e.g., 20 characters). This approach ensures that users see the AI’s response as it forms, mimicking a human-like typing effect.

	The code uses a `StringBuilder` to accumulate the AI's response. It checks the length of the buffered content and sends it to the clients when it exceeds a certain threshold (e.g., 20 characters). This approach ensures that users see the AI’s response as it forms, mimicking a human-like typing effect.
	The code uses a <xref:System.Text.StringBuilder> to accumulate the AI's response. It checks the length of the buffered content and sends it to the clients when it exceeds a certain threshold (e.g., 20 characters). This approach ensures that users see the AI’s response as it forms, mimicking a human-like typing effect.

Added article: SignalR with Open AI #33448

Added article: SignalR with Open AI #33448

Uh oh!

Conversation

kevinguo-ed commented Aug 27, 2024 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Internal previews

Uh oh!

mikekistler left a comment

Choose a reason for hiding this comment

Uh oh!

IEvangelist left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Rick-Anderson left a comment

Choose a reason for hiding this comment

Uh oh!

Rick-Anderson Sep 5, 2024

Choose a reason for hiding this comment

Uh oh!

kevinguo-ed commented Sep 11, 2024

Uh oh!

wadepickett commented Oct 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wadepickett commented Oct 18, 2024

Uh oh!

wadepickett commented Feb 7, 2025

Uh oh!

mikekistler commented Feb 8, 2025

Uh oh!

IEvangelist left a comment

Choose a reason for hiding this comment

Uh oh!

IEvangelist Mar 21, 2025

Choose a reason for hiding this comment

Uh oh!

IEvangelist Mar 21, 2025

Choose a reason for hiding this comment

Uh oh!

IEvangelist Mar 21, 2025

Choose a reason for hiding this comment

Uh oh!

BrennanConroy Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wadepickett commented Mar 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

kevinguo-ed commented Aug 27, 2024 •

edited by github-actions bot

Loading

wadepickett commented Oct 7, 2024 •

edited

Loading

BrennanConroy Mar 21, 2025 •

edited

Loading

wadepickett commented Mar 23, 2025 •

edited

Loading