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 building an AI assistant solution for Contoso Bike Store that demonstrates the use of MCP (Model Context Protocol) tools with Azure AI Foundry Agents.

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.
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 access to MCP tools to help it answer questions.
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 ContosoBikeStoreAgentConfig class.

The file src/backend/ai-agent-api/Agents/ContosoBikeStoreAgentConfig.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 "Contoso Bike Store Agent";
}

public override string GetDescription()
{
    return "This agent provides customer support for Contoso Bike Store. " +
            "It assists users with product inquiries, order status, and store information. " +
            "The agent utilizes the `MCP` tools to effectively address and resolve customer questions.";
}

public override string GetSystemMessage()
{
    return "You are a customer support agent for Contoso Bike Store. " +
            "Your role is to assist users with product information, order status, and store details. " +
            "Use the tools available to you to provide accurate and helpful responses.";
}

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.
Now start chatting with the agent!

You can ask the agent questions like:
- What are the available bike models?
- Can you help me track my order #12345?
- I want to place a new order for a mountain bike. Could you assist me with that?

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, create a Policy Agent that can answer questions about company policies and procedures.