Uso de AI Foundry con .NET MAUI: Integrando Inteligencia Artificial en tus Aplicaciones

¡Imagina una aplicación de tareas pendientes que no solo te ayuda a organizarte, sino que también *piensa* por ti! Gracias a la integración de la Inteligencia Artificial, esto es ahora una realidad al alcance de los desarrolladores .NET MAUI. Este artículo explora cómo, utilizando la biblioteca `Microsoft.Extensions.AI` y la potencia de Azure AI Foundry, podemos infundir capacidades de IA en nuestras aplicaciones móviles y de escritorio. El objetivo es simple pero impactante: cuando un usuario crea un nuevo proyecto en nuestra aplicación de ejemplo, la IA generará automáticamente un conjunto de tareas iniciales, impulsando la productividad desde el primer momento.

La promesa es clara: dotar a las aplicaciones .NET MAUI de una inteligencia contextual y proactiva. Para ilustrarlo, tomaremos nuestra aplicación de contenido de muestra en .NET MAUI y la transformaremos para que sea ‘inteligente’. Veremos cómo, al ingresar el nombre de un nuevo proyecto, la IA sugiere tareas relevantes, eliminando la barrera inicial del «qué hago ahora».

### Primeros Pasos: Conectando con la Inteligencia Artificial

Para empezar este viaje hacia la IA en tus aplicaciones, necesitarás dos componentes esenciales: una cuenta de servicio de Azure donde puedas configurar tu agente de modelo en AI Foundry, y una aplicación .NET MAUI lista para consumir este servicio.

**Paso 1: Configuración en Azure AI Foundry**

El corazón de nuestra funcionalidad de IA reside en Azure AI Foundry.
1. **Acceso y Creación de Agente**: Dirígete a ai.azure.com e inicia sesión. Una vez dentro, haz clic en **»Create an agent»** (Crear un agente). Asigna un nombre a tu proyecto y créalo con las configuraciones predeterminadas. Al abrir los detalles del proyecto, encontrarás los diversos *endpoints* que podrás utilizar para interactuar con tu agente.
2. **Selección y Configuración del Modelo**: Por defecto, se te asignará el modelo `gpt-4o`. Puedes verificarlo navegando a **»My Assets > Models + endpoints»** desde el menú. Si bien `gpt-4o` es un excelente punto de partida, AI Foundry ofrece un catálogo de modelos que puedes explorar para encontrar uno que se adapte mejor a tus necesidades específicas. Sin embargo, para este tutorial, nos mantendremos con el modelo predeterminado.
3. **Guardar Credenciales**: Es crucial que anotes tu *primary endpoint* y tu *API key*. Estas serán tus credenciales para que tu aplicación .NET MAUI pueda comunicarse con el agente de IA.

**¡Advertencia de Seguridad Importante!**
Nunca, bajo ninguna circunstancia, incluyas tus API keys o credenciales sensibles directamente en el código fuente de tu aplicación. Hacerlo expone tus secretos a cualquiera que acceda al código compilado, especialmente al distribuirlo en tiendas de aplicaciones públicas. En entornos de producción, la práctica recomendada es utilizar un servicio web intermedio donde autentiques al usuario y gestiones las llamadas a la IA de forma segura en la nube. Para este ejemplo rápido en una aplicación de escritorio, utilizaremos variables de entorno, que son una solución práctica y relativamente segura para el desarrollo local.

**Paso 2: Preparando tu Aplicación .NET MAUI**

Una vez configurado AI Foundry, es el turno de nuestra aplicación .NET MAUI.
1. **Creación del Proyecto**: En .NET 9, se introdujo una nueva opción de plantilla para aplicaciones de «tareas pendientes» que incluye una serie de bibliotecas populares para construir aplicaciones modernas, como el nuevo Syncfusion Toolkit para .NET MAUI, el .NET MAUI Community Toolkit, y el MVVM Toolkit. Para comenzar con esta plantilla, selecciona la casilla de verificación «sample content» en Visual Studio (o la opción equivalente en Visual Studio Code). También puedes usar la línea de comandos:
«`console
dotnet new maui -n Telepathy –sc
«`
2. **Verificación y Adición de NuGet**: Después de asegurarte de que la aplicación se restaura y se ejecuta correctamente (presionando F5), procede a añadir la última versión del paquete NuGet `Microsoft.Extensions.AI`. Puedes hacerlo a través del administrador de paquetes NuGet de tu preferencia o, nuevamente, desde la línea de comandos:
«`console
dotnet add package Microsoft.Extensions.AI
«`

### Integrando el Cliente de Chat de IA

Ahora que tenemos nuestro proyecto .NET MAUI y el paquete de IA instalado, es hora de escribir el código que permitirá a nuestra aplicación interactuar con AI Foundry.

**Creando el Cliente de Chat**

`Microsoft.Extensions.AI` facilita la creación de una instancia de `IChatClient`, la interfaz que utilizaremos para enviar *prompts* (instrucciones) a nuestro *endpoint* de AI Foundry y recibir respuestas fuertemente tipadas. Esta misma flexibilidad se aplica a otros modelos como OpenAI, Ollama e incluso ONNX para modelos locales.
Abre el archivo `MauiProgram.cs` y añade el siguiente código para instanciar un nuevo cliente de chat y añadirlo a la colección de servicios de tu aplicación. Esto asegurará que el cliente esté disponible para inyección de dependencias en toda tu aplicación.

«`csharp
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder().UseMauiApp();

// Recupera el endpoint y la clave API de las variables de entorno por seguridad.
var endpoint = Environment.GetEnvironmentVariable(«AI_Foundry_Endpoint»);
var apiKey = Environment.GetEnvironmentVariable(«AI_Foundry_ApiKey»);

// Crea una instancia de AzureOpenAIClient con las credenciales.
var foundryClient = new AzureOpenAIClient(new Uri(endpoint), new System.ClientModel.ApiKeyCredential(apiKey));

// Obtiene un cliente de chat específico para el modelo ‘gpt-4o’ y lo convierte a IChatClient.
var chatClient = foundryClient.GetChatClient(«gpt-4o»).AsIChatClient();

// Registra el cliente de chat en la colección de servicios para inyección de dependencias.
builder.Services.AddChatClient(chatClient);

return builder.Build();
}
}
«`
Este código se encarga de configurar el cliente de IA al inicio de la aplicación, haciendo que el `IChatClient` esté disponible para cualquier componente que lo necesite a través de la inyección de dependencias.

### Enviando el Prompt, Recibiendo la Inteligencia

Con el cliente de chat configurado, el siguiente paso es integrar la lógica en la interfaz de usuario para enviar *prompts* y mostrar las recomendaciones de la IA. Utilizaremos las páginas `ProjectDetailPage` y `ProjectDetailPageModel` de nuestra aplicación de ejemplo.

**Escuchando la Interacción del Usuario**

Queremos que la IA genere tareas cuando el usuario termine de introducir el título de un nuevo proyecto. Para ello, escucharemos el evento `Unfocused` del control `Entry` donde se introduce el nombre del proyecto. Esto indicará al *view model* que puede proceder a recuperar las tareas.

En el archivo XAML de `ProjectDetailPage`, suscribe el evento `Entry.Unfocused` utilizando un `EventToCommandBehavior` conveniente del .NET MAUI Community Toolkit:

«`xml





«`
Este fragmento de código asocia el evento de pérdida de foco del campo de texto con un comando en nuestro *view model*.

**Implementando el Comando en el ViewModel**

El contexto de enlace de datos para esta página es `ProjectDetailPageModel`. Aquí, añadiremos un comando para implementar `NameUnfocusedCommand`. Para esto, emplearemos el `RelayCommand` del .NET Community MVVM Toolkit, que simplifica la implementación de comandos.

«`csharp
[RelayCommand]
async Task NameUnfocused()
{
// Solo se activa si es un proyecto nuevo y no hay tareas existentes
if (_project != null && _project.IsNullOrNew() && !string.IsNullOrWhiteSpace(Name) && (Tasks == null || Tasks.Count == 0))
{
await GetRecommendationsAsync(Name);
}
}
«`
Este comando se ejecuta cuando el usuario deja de editar el nombre del proyecto. La lógica `if` asegura que las recomendaciones solo se generen para proyectos nuevos que aún no tienen tareas asignadas, evitando llamadas innecesarias a la IA.

**La Llamada Mágica a AI Foundry**

Finalmente, estamos listos para realizar la «llamada mágica» a AI Foundry desde el método `GetRecommendationsAsync`. El `chatClient` que configuramos previamente se inyecta en el constructor de `ProjectDetailPageModel`, y podemos especificar el tipo de objeto que esperamos como respuesta (en este caso, `RecommendationResponse`) al llamar a `GetResponseAsync`.

«`csharp
partial class ProjectDetailPageModel : ObservableObject
{
IChatClient _chatClient; // Se inyecta el cliente de chat

public ProjectDetailPageModel(IChatClient chatClient)
{
_chatClient = chatClient;
}

private async Task GetRecommendationsAsync(string projectName)
{
try
{
// Opcional: Obtener títulos de categorías existentes para contextualizar el prompt.
var categoryTitles = Categories?.Select(c => c.Title).ToList() ?? new List();

// Construir el prompt para la IA.
var prompt = $»Dado un proyecto llamado ‘{projectName}’, y estas categorías: {string.Join(«, «, categoryTitles)}, elige la categoría que mejor se adapte y sugiere entre 3 y 7 tareas para este proyecto.»;

// Realizar la llamada asíncrona a la IA y obtener una respuesta tipada.
var response = await _chatClient.GetResponseAsync(prompt);

if (response?.Result != null)
{
var rec = response.Result;

// Convertir las tareas sugeridas por la IA en objetos ProjectTask.
var recommendedTasks = new List();
foreach (var t in rec.Tasks)
{
recommendedTasks.Add(new ProjectTask { Title = t, IsRecommendation = true });
}
RecommendedTasks = recommendedTasks; // Asignar las tareas recomendadas.
}
}
catch (InvalidOperationException ex)
{
// Manejo de errores: Cliente de chat no inicializado o clave API faltante.
_errorHandler.HandleError(new Exception(«El cliente de chat no está inicializado. Por favor, añade tu clave API de OpenAI en la configuración.», ex));
}
catch (Exception ex)
{
// Manejo general de otras excepciones.
_errorHandler.HandleError(ex);
}
finally
{
IsBusy = false; // Restablecer el estado de ocupado.
}
}
}
«`
Una vez que las tareas son generadas y procesadas, en la `ProjectDetailPage` se pueden renderizar las `RecommendedTasks` para que el usuario las acepte, edite o rechace, brindando una experiencia fluida y asistida por IA.

### Recursos Adicionales y Conclusión

Para aquellos interesados en profundizar aún más o ver una implementación completa con más características de IA, Microsoft ha proporcionado un proyecto de ejemplo llamado Telepathy. Además, pueden ver la sesión de Microsoft Build 2025 titulada «AI infused mobile and desktop app development with .NET MAUI» para obtener una visión más detallada y demostraciones prácticas.

En resumen, este artículo ha detallado cómo integrar Azure AI Foundry con tus aplicaciones .NET MAUI utilizando la biblioteca `Microsoft.Extensions.AI`. Siguiendo estos pasos, puedes dotar a tus aplicaciones móviles y de escritorio de funcionalidades inteligentes y proactivas impulsadas por modelos de lenguaje grandes. La era de las aplicaciones intuitivas y asistentes personales integrados en cada experiencia de software ya está aquí. ¡Es el momento perfecto para empezar a experimentar con la IA en tus aplicaciones .NET MAUI y desbloquear un nuevo nivel de interacción y eficiencia!

Author: Enagora

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *