Build a Simple Chat UI for Your AI Agent¶

In this lab, you will learn how to integrate an AI Agent into your own application.

The example app is built using a .NET backend API and a React-based chat UI. It walks through a basic scenario of a Technical Support Agent that can answer user questions to demonstrate the core concepts.

The goal is to provide a view of the end-to-end data flow between the frontend, backend, and Azure AI services.

How It Works¶

The AI agent is set up in Azure AI Foundry. It can answer IT questions, help with support tickets, and more.
The .NET backend API connects the chat website to the agent and handles the following requests:
Calls the AI agent to answer user prompts
Create Agent and chat threads
Get chat history for the thread
The agent has tools (stubs) to do things like set up Office 365 accounts or fix network issues.
The React frontend is a simple chat page. It sends your messages to the backend and shows the full chat history of the thread.

Build the Application¶

The code for the backend and frontend is in the src/ folder of the repository.

Refer to the file /src/backend/ai-agent-api/Controllers/ChatController.cs for the details of the API endpoints that the frontend uses.

It has the following endpoints:
- GET /api/agent
  Gets information about the chat agent (name, display name, description).
- POST /api/chat/send
  Sends a chat message to the agent and returns the agent thread id.
- GET /api/chat/history?agentId={agentId}&threadId={threadId}
  Retrieves the chat message history for a given thread.

Update the TechSupportAgentConfig class.

The file src/backend/ai-agent-api/Agents/TechSupportAgentConfig.cs already exists.

Add or update the following method overrides to define the agent's display name, description, and system message:

Info

The setup uses a simple Factory pattern to create the agent configuration. In real applicaitons you would store the agent configuration in a database or a configuration file and load it dynamically.

public override string GetAgentDisplayName()
{
    return "Technical Support Agent";
}

public override string GetDescription()
{
    return "This agent provides IT and technical support for the company. " +
            "It assists users with troubleshooting, technical queries, and problem resolution. " +
            "The agent utilizes the `TechSupportTools` to effectively address and resolve technical issues.";
}

public override string GetSystemMessage()
{
    return "You are a technical support agent. " +
            "Your role is to assist users with IT and technical issues, providing solutions and troubleshooting steps. " +
            "Use the tools available to you to resolve problems efficiently.";
}

Review the source code in the file src/backend/ai-agent-api/Services/AzureAIAgentService.cs to understand how the backend API interacts with the Azure AI Agent.

Warning

Some API methods from the Semantic Kernel SDK are in preview and may change in future releases.

Check the official docs for updates.
Build the backend API to ensure it compiles correctly. If the build completes without errors, you are ready to proceed to deployment.
```
dotnet build src/backend/ai-agent-api/AIAgent.API.sln
```

Deploy the Application¶

The Azure resources were already created in a previous lab (with azd up).
Run the following command. This will build the backend and frontend applications and deploy them to Azure.
```
azd deploy
```
Note

If you want to run the app locally, you can use dotnet run for the backend and npm start for the frontend. Make sure you have the required environment variables set up.
The backend and the frontend applications are hosted in Azure App Service.

You can find the URLs in the Azure portal or in the azd output.
You can find the url of the chat UI in the .env file with the variable FRONTEND_APP_URL.

Copy the URL and open it in your browser to access the chat UI.

The Agent has access to the tools defined in the src/backend/ai-agent-api/KernelTools/TechSupportTools.cs file. These methods are stubs and simulate the actions that the agent can perform for an IT support scenario.
Now start chatting with the agent!

You can ask the agent questions like:
- Reset the password for John Doe
- Create a new Office 365 account for John Doe
- Send a Welcome email to John Doe

Code Challenges¶

Test your understanding and extend the solution with these challenges:

Add a Knowledge Tool
Enhance the agent by integrating a file search tool. This tool should allow the agent to read a file and answer user questions based on its content.
Execute Tasks via OpenAI Spec
Use the OpenAI Spec tool to execute tasks by calling external APIs. For example, expose an API that allows the agent to create a new support ticket in an external system.
Create a New Agent Scenario
Design and implement a new agent for a different use case.

For example, integrate the ContosoInventoryAgent we built in a previous lab.