Tutorial: Creación de un bot de chat con Azure App Service y Azure OpenAI (.NET)

En este tutorial, creará una aplicación de inteligencia artificial inteligente mediante la integración de Azure OpenAI con una aplicación Blazor de .NET e implementarla en Azure App Service. Creará una página interactiva de Blazor que envía solicitudes de finalización de chat a un modelo en Azure OpenAI y transmite la respuesta a la página.

En este tutorial, aprenderá a:

Prerrequisitos

• Una cuenta de Azure con una suscripción activa
• Una cuenta de GitHub para usar GitHub Codespaces

1. Creación de un recurso de Azure OpenAI

En esta sección, usará GitHub Codespaces para crear un recurso de Azure OpenAI con la CLI de Azure.

1. Vaya a GitHub Codespaces e inicie sesión con su cuenta de GitHub.

2. Busque la plantilla En blanco de GitHub y seleccione Usar esta plantilla para crear un nuevo espacio de código en blanco.

3. En el terminal de Codespace, instale la CLI de Azure:

   curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
   

4. Inicio de sesión en la cuenta de Azure

   az login
   

   Siga las instrucciones del terminal para autenticarse.

5. Establezca variables de entorno para el nombre del grupo de recursos, el nombre del servicio Azure OpenAI y la ubicación:

   export RESOURCE_GROUP="<group-name>"
   export OPENAI_SERVICE_NAME="<azure-openai-name>"
   export APPSERVICE_NAME="<app-name>"
   export LOCATION="eastus2"
   

   Importante

   La región es fundamental, ya que está vinculada a la disponibilidad regional del modelo elegido. La disponibilidad del modelo y el tipo de implementación varían de región a región. En este tutorial se utiliza gpt-4o-mini, que está disponible en eastus2 bajo el tipo de implementación estándar. Si implementa en otra región, es posible que este modelo no esté disponible o que requiera un nivel diferente. Antes de cambiar las regiones, consulte la tabla de resumen del modelo y la disponibilidad de regiones para comprobar la compatibilidad del modelo en su región preferida.

6. Cree un grupo de recursos y un recurso de Azure OpenAI con un dominio personalizado y agregue un modelo gpt-4o-mini:

   # Resource group
   az group create --name $RESOURCE_GROUP --location $LOCATION
   # Azure OpenAI resource
   az cognitiveservices account create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --custom-domain $OPENAI_SERVICE_NAME \
     --kind OpenAI \
     --sku s0
   # gpt-4o-mini model
   az cognitiveservices account deployment create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --deployment-name gpt-4o-mini \
     --model-name gpt-4o-mini \
     --model-version 2024-07-18 \
     --model-format OpenAI \
     --sku-name Standard \
     --sku-capacity 1
   # Cognitive Services OpenAI User role that lets the signed in Azure user to read models from Azure OpenAI
   az role assignment create \
     --assignee $(az ad signed-in-user show --query id -o tsv) \
     --role "Cognitive Services OpenAI User" \
     --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME
   

Ahora que tiene un recurso de Azure OpenAI, creará una aplicación web para interactuar con él.

2. Creación y configuración de una aplicación web blazor

En esta sección, creará una nueva aplicación web Blazor usando la CLI de .NET.

1. En el terminal de Codespace, cree una nueva aplicación Blazor e intente ejecutarla por primera vez.

   dotnet new blazor -o .
   dotnet run
   

   Debería ver una notificación en GitHub Codespaces que indica que la aplicación está disponible en un puerto específico. Seleccione Abrir en el explorador para iniciar la aplicación en una nueva pestaña del explorador.

2. De nuevo en el terminal codespace, detenga la aplicación con Ctrl+C.

3. Instale los paquetes NuGet necesarios para trabajar con Azure OpenAI:

   dotnet add package Azure.AI.OpenAI
   dotnet add package Azure.Identity
   

4. Abra Components/Pages/Home.razor y reemplace su contenido por el código siguiente para una simple llamada de secuencia de finalización de chat con Azure OpenAI:

   @page "/"
   @rendermode InteractiveServer
   @using Azure.AI.OpenAI
   @using Azure.Identity
   @using OpenAI.Chat
   @inject Microsoft.Extensions.Configuration.IConfiguration _config
   
   <h3>Azure OpenAI Chat</h3>
   <div class="mb-3 d-flex align-items-center" style="margin:auto;">
       <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
       <button class="btn btn-primary" @onclick="SendMessage">Send</button>
   </div>
   <div class="card p-3" style="margin:auto;">
       @if (!string.IsNullOrEmpty(aiResponse))
       {
           <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
       }
   </div>
   
   @code {
       private string? userMessage;
       private string? aiResponse;
   
       private async Task SendMessage()
       {
           if (string.IsNullOrWhiteSpace(userMessage)) return;
   
           // Initialize the Azure OpenAI client
           var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
           var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
           var chatClient = client.GetChatClient("gpt-4o-mini");
   
           aiResponse = string.Empty;
           StateHasChanged();
   
           // Create a chat completion streaming request
           var chatUpdates = chatClient.CompleteChatStreamingAsync(
               [
                   new UserChatMessage(userMessage)
               ]);
   
               await foreach(var chatUpdate in chatUpdates)
               {
                   // Update the UI with the streaming response
                   foreach(var contentPart in chatUpdate.ContentUpdate)
               {
                   aiResponse += contentPart.Text;
                   StateHasChanged();
               }
           }
       }
   }
   

5. En el terminal, recupere el punto de conexión de OpenAI:

   az cognitiveservices account show \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --query properties.endpoint \
     --output tsv
   

6. Vuelva a ejecutar la aplicación agregando AZURE_OPENAI_ENDPOINT con su valor a partir de la salida de la CLI:

   AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> dotnet run
   

7. Seleccione Abrir en el explorador para iniciar la aplicación en una nueva pestaña del explorador.

8. Escriba un mensaje en el cuadro de texto y seleccione "Enviar" y proporcione a la aplicación unos segundos para responder con el mensaje de Azure OpenAI.

La aplicación usa DefaultAzureCredential, que usa automáticamente la CLI de Azure que inició sesión en el usuario para la autenticación de tokens. Más adelante en este tutorial, implementará la aplicación Blazor en Azure App Service y la configurará para conectarse de forma segura al recurso de Azure OpenAI mediante la identidad administrada. El mismo DefaultAzureCredential en su código puede detectar la identidad administrada y utilizarla para la autenticación. No se necesita código adicional.

3. Implementación en Azure App Service y configuración de la conexión de OpenAI

Ahora que la aplicación funciona localmente, vamos a implementarla en Azure App Service y configurar una conexión de servicio a Azure OpenAI mediante la identidad administrada.

1. En primer lugar, implemente la aplicación en Azure App Service mediante el comando az webapp upde la CLI de Azure. Este comando crea una nueva aplicación web e implementa el código en ella:

   az webapp up \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --name $APPSERVICE_NAME \
     --plan $APPSERVICE_NAME \
     --sku B1 \
     --os-type Linux \
     --track-status false
   

   Este comando puede tardar unos minutos en completarse. Crea una nueva aplicación web en el mismo grupo de recursos que el recurso de OpenAI.

2. Una vez implementada la aplicación, cree una conexión de servicio entre la aplicación web y el recurso de Azure OpenAI mediante la identidad administrada:

   az webapp connection create cognitiveservices \
     --resource-group $RESOURCE_GROUP \
     --name $APPSERVICE_NAME \
     --target-resource-group $RESOURCE_GROUP \
     --account $OPENAI_SERVICE_NAME
     --connection azure-openai \
     --system-identity
   

   Este comando crea una conexión entre la aplicación web y el recurso de Azure OpenAI mediante:

   • Generación de una identidad administrada asignada por el sistema para la aplicación web.
   • Agregando el rol de Colaborador de OpenAI de Cognitive Services a la identidad administrada del recurso de Azure OpenAI.
   • Añadiendo la configuración de la aplicación AZURE_OPENAI_ENDPOINT a tu aplicación web.

   La aplicación ahora está implementada y conectada a Azure OpenAI con identidad administrada. Lee la configuración de la aplicación AZURE_OPENAI_ENDPOINT a través de la inserción de IConfiguration.

3. Abra la aplicación web implementada en el explorador. Busque la dirección URL de la aplicación web implementada en la salida del terminal. Abra el explorador web y vaya a él.

   az webapp browse
   

4. Escriba un mensaje en el cuadro de texto y seleccione Enviar y proporcione a la aplicación unos segundos para responder con el mensaje de Azure OpenAI.

   

Preguntas más frecuentes

• ¿Qué ocurre si quiero conectarse a OpenAI en lugar de Azure OpenAI?
• ¿Puedo conectarse a Azure OpenAI con una clave de API en su lugar?
• ¿Cómo funciona DefaultAzureCredential en este tutorial?

¿Qué ocurre si quiero conectarse a OpenAI en lugar de Azure OpenAI?

Para conectarse a OpenAI en su lugar, use el código siguiente:

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

Para más información, consulte Autenticación de API de OpenAI.

Al trabajar con secretos de conexión en App Service, debe usar referencias de Key Vault en lugar de almacenar secretos directamente en el código base. Esto garantiza que la información confidencial permanece segura y se administra de forma centralizada.

¿Puedo conectarse a Azure OpenAI con una clave de API en su lugar?

Sí, puede conectarse a Azure OpenAI mediante una clave de API en lugar de una identidad administrada. Este enfoque es compatible con los SDK de Azure OpenAI y el kernel semántico.

• Para obtener más información sobre el uso de claves de API con kernel semántico en C#, consulte el inicio rápido de C# del kernel semántico.
• Para más información sobre el uso de claves de API con la biblioteca cliente de Azure OpenAI: Guía rápida: Comience a utilizar las finalizaciones de chat con el servicio Azure OpenAI.

Al trabajar con secretos de conexión en App Service, debe usar referencias de Key Vault en lugar de almacenar secretos directamente en el código base. Esto garantiza que la información confidencial permanece segura y se administra de forma centralizada.

¿Cómo funciona DefaultAzureCredential en este tutorial?

Simplifica DefaultAzureCredential la autenticación seleccionando automáticamente el mejor método de autenticación disponible:

• Durante el desarrollo local: después de ejecutar az login, usa las credenciales de la CLI de Azure local.
• Cuando se implementa en Azure App Service: usa la identidad administrada de la aplicación para la autenticación segura sin contraseña.

Este enfoque permite que el código se ejecute de forma segura y sin problemas en entornos locales y en la nube sin modificaciones.

Más recursos

• Tutorial: Creación de una generación aumentada de recuperación con Azure OpenAI y Azure AI Search (.NET)
• Tutorial: Ejecutar el bot de chat en App Service con una extensión sidecar Phi-4 (ASP.NET Core)
• Creación e implementación de un recurso de Azure OpenAI Service
• Más información sobre la identidad administrada en App Service