Saltar a contenido

Prompt para Rediseñar el Agent Wizard

Contexto del Proyecto

Estoy trabajando en Nexus Platform, una plataforma de orquestación de agentes IA basada en Claude. Necesito rediseñar el wizard de creación de agentes (AgentWizard.razor) para hacerlo más intuitivo, potente y con capacidad de generar prompts usando la API de Anthropic.

Stack Tecnológico

  • Backend: .NET 9, ASP.NET Core Web API
  • Frontend: Blazor Server con MudBlazor
  • Base de datos: PostgreSQL
  • IA: Claude API (Anthropic) - ya integrado en el sistema
  • Herramientas: PowerShell scripts para notificaciones (WhatsApp, Email)

Arquitectura de Agentes (Resumen)

Agent (Agente)
├── slug: identificador único (ej: "log-reviewer")
├── name: nombre descriptivo
├── model: claude-sonnet-4, claude-opus-4, claude-haiku-3.5
├── systemPrompt: instrucciones base del comportamiento
├── skills[]: habilidades asociadas
└── triggers[]: patrones de activación

ScheduledTask (Tarea)
├── agentId: agente asociado
├── cronExpression: programación
├── manualPrompt: instrucciones específicas
└── notifications: WhatsApp/Email config

Objetivo

Rediseñar el AgentWizard.razor con las siguientes mejoras:

1. Generación de Prompts con Claude API

Agregar un botón "Generar con IA" en el paso del System Prompt que: - Pida al usuario una descripción en lenguaje natural de lo que quiere que haga el agente - Llame a la API de Claude para generar un system prompt profesional - Muestre el resultado editable - Permita regenerar o refinar

Endpoint a usar: POST /api/copilot/generate (ya existe) 

{
  "prompt": "Genera un system prompt para un agente que revise logs de PostgreSQL...",
  "systemContext": "Eres un experto en diseño de prompts para agentes IA..."
}

2. Mejoras de UX/UI

Paso 0 - Selección de Plantilla

  • Cards más visuales con iconos grandes y descripción clara
  • Preview del prompt al hacer hover o click
  • Categorías colapsables: DevOps, Security, Development, Reporting
  • Búsqueda de plantillas

Paso 1 - Datos Básicos

  • Auto-generación de slug desde el nombre
  • Validación en tiempo real de slug único (debounce 500ms)
  • Selector de proyecto mejorado con búsqueda
  • Opción de clonar agente existente

Paso 2 - System Prompt (CRÍTICO)

  • Editor de código con syntax highlighting para markdown
  • Sidebar con secciones predefinidas que se pueden arrastrar
  • Botón "Generar con IA" prominente
  • Variables disponibles (mostrar qué variables puede usar el agente)
  • Preview en tiempo real del prompt renderizado
  • Contador de tokens estimado
  • Templates de sección: Rol, Contexto, Objetivos, Instrucciones, Output, Restricciones

Paso 3 - Skills y Configuración

  • Grid de skills con iconos y descripciones
  • Dependencias automáticas (ej: si selecciona "postgresql" sugiere "sql")
  • Configuración de tarea inline más compacta
  • Preview de próximas ejecuciones basado en cron

Paso 4 - Resumen y Confirmación (NUEVO)

  • Vista previa completa del agente
  • Test rápido del prompt (ejecutar con input de prueba)
  • Estimación de costos por ejecución
  • Checklist de verificación

3. Nuevas Características

Generador de Prompt IA

<MudButton Color="Color.Secondary" Variant="Variant.Filled"
           OnClick="GeneratePromptWithAI"
           StartIcon="@Icons.Material.Filled.AutoAwesome">
    Generar con IA
</MudButton>

<!-- Modal para descripción -->
<MudDialog @bind-IsVisible="_showAIGenerator">
    <DialogContent>
        <MudTextField @bind-Value="_promptDescription"
                      Label="Describe qué quieres que haga el agente"
                      Lines="5"
                      Placeholder="Ejemplo: Un agente que revise los logs de PostgreSQL cada día, identifique errores críticos, y me notifique por WhatsApp si encuentra problemas..." />

        <MudSelect @bind-Value="_promptTone" Label="Tono">
            <MudSelectItem Value="@("professional")">Profesional y técnico</MudSelectItem>
            <MudSelectItem Value="@("concise")">Conciso y directo</MudSelectItem>
            <MudSelectItem Value="@("detailed")">Detallado y exhaustivo</MudSelectItem>
        </MudSelect>

        <MudSelect @bind-Value="_outputFormat" Label="Formato de salida preferido">
            <MudSelectItem Value="@("markdown")">Markdown con tablas</MudSelectItem>
            <MudSelectItem Value="@("json")">JSON estructurado</MudSelectItem>
            <MudSelectItem Value="@("report")">Informe ejecutivo</MudSelectItem>
        </MudSelect>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="GeneratePrompt" Color="Color.Primary">
            Generar Prompt
        </MudButton>
    </DialogActions>
</MudDialog>

Método de Generación

private async Task GeneratePrompt()
{
    _generating = true;
    try
    {
        var systemContext = @"
Eres un experto en diseño de prompts para agentes de IA basados en Claude.
Tu tarea es crear system prompts profesionales y efectivos.

REGLAS:
1. Usa formato markdown con secciones claras
2. Incluye siempre: Rol, Contexto, Objetivos, Instrucciones, Formato de Salida
3. Sé específico sobre herramientas disponibles
4. Define restricciones de seguridad
5. Incluye ejemplos cuando sea útil

HERRAMIENTAS DISPONIBLES EN NEXUS:
- Base de datos PostgreSQL con tabla system_logs
- API de Sentry para errores
- Scripts PowerShell: send-whatsapp.ps1, send-email.ps1
- Acceso a repositorio git

FORMATO DE SALIDA ESPERADO:
Genera SOLO el system prompt, sin explicaciones adicionales.
Usa markdown con headers ##.
";

        var userPrompt = $@"
Genera un system prompt para un agente con las siguientes características:

DESCRIPCIÓN:
{_promptDescription}

TONO: {_promptTone}
FORMATO DE SALIDA PREFERIDO: {_outputFormat}
SKILLS RELACIONADOS: {string.Join(", ", _selectedSkills)}

Genera el system prompt completo y profesional.
";

        var response = await Http.PostAsJsonAsync("api/copilot/generate", new
        {
            prompt = userPrompt,
            systemContext = systemContext,
            model = "claude-sonnet-4-20250514",
            maxTokens = 2000
        });

        if (response.IsSuccessStatusCode)
        {
            var result = await response.Content.ReadFromJsonAsync<GenerateResponse>();
            _systemPrompt = result?.Content ?? "";
            Snackbar.Add("Prompt generado exitosamente", Severity.Success);
        }
    }
    finally
    {
        _generating = false;
        _showAIGenerator = false;
    }
}

4. Diseño Visual Mejorado

Colores por Categoría

private Color GetCategoryColor(string category) => category switch
{
    "DevOps" => Color.Info,
    "Security" => Color.Warning,
    "Development" => Color.Primary,
    "Reporting" => Color.Success,
    "Database" => Color.Tertiary,
    _ => Color.Default
};

Iconos por Template

private string GetTemplateIcon(string templateId) => templateId switch
{
    "log-reviewer" => Icons.Material.Filled.BugReport,
    "sentry-analyzer" => Icons.Material.Filled.Error,
    "security-auditor" => Icons.Material.Filled.Security,
    "db-optimizer" => Icons.Material.Filled.Storage,
    "code-reviewer" => Icons.Material.Filled.Code,
    "pm-reporter" => Icons.Material.Filled.Assessment,
    "custom" => Icons.Material.Filled.AutoFixHigh,
    _ => Icons.Material.Filled.SmartToy
};

5. Validaciones y Feedback

private async Task<bool> ValidateSlug(string slug)
{
    if (string.IsNullOrWhiteSpace(slug)) return false;
    if (!Regex.IsMatch(slug, @"^[a-z0-9\-]+$")) return false;

    // Check if slug exists
    var response = await Http.GetAsync($"api/agents/by-slug/{slug}");
    return !response.IsSuccessStatusCode; // True if not found (available)
}

6. Estructura de Archivos a Modificar/Crear

Components/Pages/Agents/
├── AgentWizard.razor          (MODIFICAR - wizard principal)
├── AgentWizard.razor.cs       (CREAR - code-behind)
├── AgentWizard.razor.css      (CREAR - estilos específicos)
├── Components/
│   ├── PromptEditor.razor     (CREAR - editor de prompts)
│   ├── PromptGenerator.razor  (CREAR - generador IA)
│   ├── TemplateCard.razor     (CREAR - card de plantilla)
│   └── SkillSelector.razor    (CREAR - selector de skills)

Instrucciones para el Copilot

  1. Lee la documentación completa en docs/AGENTS-ARCHITECTURE.md
  2. Revisa el wizard actual en Components/Pages/Agents/AgentWizard.razor
  3. Examina los endpoints disponibles en Orchestrator.Api/Controllers/
  4. Implementa las mejoras en este orden:
  5. Primero: Generador de prompts con IA
  6. Segundo: Mejoras de UI (cards, editor)
  7. Tercero: Paso de confirmación/test

  8. Cuarto: Validaciones y feedback

  9. Mantén compatibilidad con el código existente

  10. Usa MudBlazor para todos los componentes UI
  11. Prueba cada cambio antes de continuar

Endpoints Disponibles

// Agentes
GET    /api/agents                    - Listar agentes
POST   /api/agents                    - Crear agente
GET    /api/agents/by-slug/{slug}     - Obtener por slug
POST   /api/agents/{id}/skills        - Agregar skill

// Tareas
POST   /api/tasks                     - Crear tarea
GET    /api/cron/describe             - Describir expresión cron

// Copilot (para generar prompts)
POST   /api/copilot/generate          - Generar texto con Claude
POST   /api/copilot/sessions/{id}/ask - Preguntar en sesión

// Proyectos
GET    /api/projects                  - Listar proyectos

Ejemplo de Resultado Esperado

Vista del Wizard Mejorado

┌─────────────────────────────────────────────────────────────────────┐
│  Wizard de Agentes                               Paso 2 de 4        │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ○───────○───────●───────○                                         │
│  Plantilla  Datos  Prompt  Finalizar                               │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  System Prompt                    [Editar] [Vista Previa]           │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ # Rol                                                        │   │
│  │ Eres un experto DevOps especializado en análisis de logs... │   │
│  │                                                              │   │
│  │ # Contexto                                                   │   │
│  │ Trabajas con el sistema Nexus que tiene:                    │   │
│  │ - Tabla PostgreSQL `system_logs`...                         │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  [+ Contexto] [+ Objetivos] [+ Output] [+ Restricciones]           │
│                                                                     │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ ✨ Generar con IA                                            │   │
│  │ Describe lo que quieres que haga el agente y generamos      │   │
│  │ un prompt profesional automáticamente.                       │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  Tokens estimados: ~450 | Longitud: 2,340 caracteres               │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│  [Cancelar]                          [← Anterior] [Siguiente →]     │
└─────────────────────────────────────────────────────────────────────┘

Notas Adicionales

  • El wizard actual funciona pero es básico
  • La integración con Claude API ya está disponible via /api/copilot/generate
  • Las herramientas de notificación (WhatsApp, Email) están en tools/
  • Usa el pattern de "code-behind" para separar lógica de UI en archivos .razor.cs
  • Considera crear componentes reutilizables para el editor de prompts

¡Implementa estas mejoras paso a paso y muéstrame los cambios antes de proceder al siguiente paso!