AzureFeeds

You know the drill. You’re stuck in a support chat, typing “agent” like it’s a secret password. The bot doesn’t get it. You repeat yourself. You wonder if anyone is actually listening.
We built this demo to show how easy it can be to fix that experience—with the right tools.
This is a working example of how Azure Communication Services and Azure OpenAI can come together to create a customer support chat that’s fast, helpful, and human when it needs to be.

The Goal: Show, Don’t Just Tell

The goal was to create a lightweight, modular customer support experience that feels modern and responsive—without requiring a massive engineering lift. The demo includes:

• A Customer Chat Widget where users can send messages and get responses instantly.


• An Agent Portal where support agents can monitor conversations, take over when needed, and get up to speed quickly.


• A Bot Service that uses Azure OpenAI to generate responses and manage the conversation flow.


• A Summary Service that creates quick recaps of conversations, so agents don’t have to scroll through every message.


• And at the center of it all, Azure Communication Services, which handles all the real-time messaging, notifications, and chat thread management.

The result is a full customer support flow that feels modern, responsive, and human-friendly.

What Happens When a Customer Sends a Message

Here’s the flow, step by step:

1. The customer types a message in the chat widget and hits send.


2. This message is sent to Azure Communication Services, which handles real-time delivery.


3. The bot service picks it up, adds it to the conversation history, and sends it to Azure OpenAI.


4.  Azure OpenAI returns a response, which the bot sends back through Azure Communication Services to the customer.


5. The message appears in both the customer’s chat and the agent’s dashboard.


6. If needed, the agent can click “Take Over” to jump in and continue the conversation directly.


7. At any point, the agent can click “Summarize” to get a quick recap of the conversation so far, powered by Azure OpenAI.

It’s a clean loop, and it’s built entirely on services that are already part of the Azure ecosystem. The diagram below provides further detail and visual clarity on the demo flow.

An architectural diagram showing the flow of data and requests in the customer support demo.

Azure Communication Services at the Core

We used Azure Communication Services because it gave us everything we needed for real-time communication—chat threads, participant management, typing indicators, message delivery, and more. It’s reliable, scalable, and easy to integrate into both the frontend and backend.

No custom socket servers. No polling hacks. Just real-time messaging that works.

Why OpenAI Made It Better

The AI assistant isn’t just there to answer questions—it’s there to make the whole experience smoother. It understands context, keeps track of the conversation, and knows when to step aside.

We used Azure OpenAI to:

• Generate responses based on a system prompt and full conversation history.


• Create summaries that help agents get up to speed instantly.


• Keep the tone consistent and helpful across the entire interaction.

Built for handoff, not just automation

One of the most important parts of this demo is the agent handoff. We designed it so that the bot knows when to stop talking and let a human take over. When the agent clicks “Take Over,” the bot steps back, and the agent picks up the thread—no awkward transitions, no lost context.

And because the summary service is always running in the background, the agent doesn’t have to scroll through the entire chat to figure out what’s going on. They get a quick, AI-generated recap that brings them up to speed in seconds.

What this demo proves

This demo was a focused build to prove a point: you can create a smart, real-time customer support experience using ACS and Azure OpenAI without a massive engineering lift.

We wanted to show:

• How easy it is to wire up Azure Communication Services for real-time messaging.


• How OpenAI can enhance—not replace—the human support experience.


• How a little structure (like summaries and handoff logic) goes a long way.

Try it yourself!

The full demo is available now. You can clone the repo, run it locally, and see how Azure Communication Services and Azure OpenAI work together in a real-world customer support scenario.

Once you have the required Azure resources, getting this demo running is simple:

1. Clone the repository


2. Add your credentials to a .env file


3. Run npm start

Here’s what your .env file should look like:

A screenshot of the .env file with required keys and placeholder values required for the demo to successfully run.

That’s it. No scaffolding. No boilerplate. Just a working customer support experience you can run locally in minutes.

The GitHub repo includes everything you need to get started, including how to generate tokens, configure your environment, and run the app.

We’d love to hear what you build with it. Or better yet, fork it and show us.