Saltar a contenido

Arquitectura del Generador de Prompts con IA

Diagrama de Componentes

┌─────────────────────────────────────────────────────────────────────────────┐
│                            AGENT WIZARD (UI Layer)                          │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                          AgentWizard.razor                             │  │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐   │  │
│  │  │  Paso 1     │  │  Paso 2     │  │  Paso 3     │  │  Paso 4     │   │  │
│  │  │  Template   │→ │  Datos      │→ │  Prompt     │→ │  Confirmar  │   │  │
│  │  └─────────────┘  └─────────────┘  └──────┬──────┘  └─────────────┘   │  │
│  └───────────────────────────────────────────┼───────────────────────────┘  │
│                                              │                               │
│  ┌───────────────────────────────────────────▼───────────────────────────┐  │
│  │                      PromptGenerator.razor                             │  │
│  │  ┌─────────────────────────────────────────────────────────────────┐  │  │
│  │  │  MODAL: Generador de Prompts con IA                              │  │  │
│  │  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │  │  │
│  │  │  │ 1. Descripción  │  │ 2. Opciones     │  │ 3. Preview      │  │  │  │
│  │  │  │    del Agente   │  │    de Tono      │  │    Generado     │  │  │  │
│  │  │  │                 │  │                 │  │                 │  │  │  │
│  │  │  │ [MudTextField]  │  │ [MudSelect]     │  │ [MudMarkdown]   │  │  │  │
│  │  │  │ multiline       │  │ - Profesional  │  │ readonly        │  │  │  │
│  │  │  │                 │  │ - Conciso      │  │                 │  │  │  │
│  │  │  │                 │  │ - Detallado    │  │                 │  │  │  │
│  │  │  └────────┬────────┘  └────────┬────────┘  └────────┬────────┘  │  │  │
│  │  └───────────┼────────────────────┼────────────────────┼───────────┘  │  │
│  │              │                    │                    │               │  │
│  │              ▼                    ▼                    ▼               │  │
│  │  ┌─────────────────────────────────────────────────────────────────┐  │  │
│  │  │  [Botón: Generar con IA] ────────────────────────────────────▶  │  │  │
│  │  │  [Botón: Usar Prompt]                                           │  │  │
│  │  │  [Botón: Cancelar]                                              │  │  │
│  │  └──────────────────────────────────┬──────────────────────────────┘  │  │
│  └─────────────────────────────────────┼─────────────────────────────────┘  │
└────────────────────────────────────────┼─────────────────────────────────────┘
                                         │ HTTP POST (JSON)
┌────────────────────────────────────────▼─────────────────────────────────────┐
│                            API Layer (Orchestrator.Api)                       │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                         AIController.cs                                │  │
│  │  ┌─────────────────────────────────────────────────────────────────┐  │  │
│  │  │  POST /api/ai/generate-agent-prompt                              │  │  │
│  │  │                                                                   │  │  │
│  │  │  Request:                                                         │  │  │
│  │  │  {                                                                │  │  │
│  │  │    "description": "Agente que analiza código C# y detecta...",   │  │  │
│  │  │    "tone": "professional|concise|detailed",                      │  │  │
│  │  │    "templateSlug": "code-reviewer",  // opcional                 │  │  │
│  │  │    "projectId": "guid"               // opcional, para contexto  │  │  │
│  │  │  }                                                                │  │  │
│  │  │                                                                   │  │  │
│  │  │  Response:                                                        │  │  │
│  │  │  {                                                                │  │  │
│  │  │    "generatedPrompt": "...",                                     │  │  │
│  │  │    "suggestedName": "CodeReviewer",                              │  │  │
│  │  │    "suggestedSlug": "code-reviewer",                             │  │  │
│  │  │    "estimatedTokens": 1250,                                      │  │  │
│  │  │    "sections": ["identity", "capabilities", "guidelines", ...]   │  │  │
│  │  │  }                                                                │  │  │
│  │  └─────────────────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────┬─────────────────────────────────────┘
                                         │ DI Injection
┌────────────────────────────────────────▼─────────────────────────────────────┐
│                           Service Layer (Shared.Admin)                        │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                      AIGeneratorService.cs                             │  │
│  │  ┌─────────────────────────────────────────────────────────────────┐  │  │
│  │  │  GenerateAgentPromptAsync(request) : AgentPromptResult          │  │  │
│  │  │                                                                   │  │  │
│  │  │  1. Construir System Prompt para generación                      │  │  │
│  │  │  2. Incluir ejemplos de prompts bien estructurados               │  │  │
│  │  │  3. Aplicar tone/estilo según request                            │  │  │
│  │  │  4. Llamar a Claude API via IAIProviderService                   │  │  │
│  │  │  5. Parsear respuesta estructurada                               │  │  │
│  │  │  6. Calcular tokens estimados                                    │  │  │
│  │  │  7. Retornar AgentPromptResult                                   │  │  │
│  │  └─────────────────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────┬───────────────────────────────────┘  │
│                                      │                                        │
│  ┌───────────────────────────────────▼───────────────────────────────────┐  │
│  │                       IAIProviderService                               │  │
│  │  ┌─────────────────────────────────────────────────────────────────┐  │  │
│  │  │  ResolveProviderAsync(userId, orgId) : AIProviderConfig         │  │  │
│  │  │  StreamCompletionAsync(config, messages) : IAsyncEnumerable     │  │  │
│  │  └─────────────────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────┬─────────────────────────────────────┘
                                         │ HTTP (HTTPS)
┌────────────────────────────────────────▼─────────────────────────────────────┐
│                          External API (Anthropic)                             │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                         Claude claude-sonnet-4-20250514                              │  │
│  │                                                                        │  │
│  │  System Prompt:                                                        │  │
│  │  "Eres un experto en diseño de prompts para agentes de IA.            │  │
│  │   Tu tarea es crear system prompts profesionales y efectivos          │  │
│  │   siguiendo las mejores prácticas de prompt engineering..."           │  │
│  │                                                                        │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────────────────┘

Flujo de Generación de Prompts

┌──────────────────────────────────────────────────────────────────────────────┐
│                           FLUJO DE USUARIO                                    │
└──────────────────────────────────────────────────────────────────────────────┘

     Usuario                UI Component              API                  AI
        │                        │                     │                    │
        │ 1. Click "Generar      │                     │                    │
        │    con IA"             │                     │                    │
        │───────────────────────▶│                     │                    │
        │                        │                     │                    │
        │                        │ 2. Abrir Modal      │                    │
        │                        │    PromptGenerator  │                    │
        │                        │◀───────────────────│                    │
        │                        │                     │                    │
        │ 3. Describe lo que     │                     │                    │
        │    debe hacer el agente│                     │                    │
        │───────────────────────▶│                     │                    │
        │                        │                     │                    │
        │ 4. Selecciona tono     │                     │                    │
        │    (Profesional)       │                     │                    │
        │───────────────────────▶│                     │                    │
        │                        │                     │                    │
        │ 5. Click "Generar"     │                     │                    │
        │───────────────────────▶│                     │                    │
        │                        │                     │                    │
        │                        │ 6. POST /api/ai/    │                    │
        │                        │    generate-agent-  │                    │
        │                        │    prompt           │                    │
        │                        │────────────────────▶│                    │
        │                        │                     │                    │
        │                        │                     │ 7. Build prompt    │
        │                        │                     │    with context    │
        │                        │                     │───────────────────▶│
        │                        │                     │                    │
        │                        │                     │ 8. Stream response │
        │                        │                     │◀───────────────────│
        │                        │                     │                    │
        │                        │ 9. Return generated │                    │
        │                        │    prompt + metadata│                    │
        │                        │◀────────────────────│                    │
        │                        │                     │                    │
        │ 10. Mostrar preview    │                     │                    │
        │     del prompt         │                     │                    │
        │◀───────────────────────│                     │                    │
        │                        │                     │                    │
        │ 11. Click "Usar        │                     │                    │
        │     Prompt"            │                     │                    │
        │───────────────────────▶│                     │                    │
        │                        │                     │                    │
        │                        │ 12. Cerrar modal,   │                    │
        │                        │     insertar prompt │                    │
        │                        │     en editor       │                    │
        │◀───────────────────────│                     │                    │
        │                        │                     │                    │

Interfaces de Entrada/Salida

Request DTO

public record GenerateAgentPromptRequest
{
    /// <summary>
    /// Descripción en lenguaje natural de lo que debe hacer el agente.
    /// </summary>
    public required string Description { get; init; }

    /// <summary>
    /// Tono del prompt generado.
    /// </summary>
    public PromptTone Tone { get; init; } = PromptTone.Professional;

    /// <summary>
    /// Template base (opcional) para usar como referencia.
    /// </summary>
    public string? TemplateSlug { get; init; }

    /// <summary>
    /// Proyecto para contexto adicional (opcional).
    /// </summary>
    public Guid? ProjectId { get; init; }

    /// <summary>
    /// Idioma del prompt generado.
    /// </summary>
    public string Language { get; init; } = "es";
}

public enum PromptTone
{
    Professional,  // Formal, estructurado, completo
    Concise,       // Directo, mínimo, eficiente
    Detailed       // Extenso, con ejemplos, muy explicativo
}

Response DTO

public record AgentPromptResult
{
    /// <summary>
    /// El prompt completo generado.
    /// </summary>
    public required string GeneratedPrompt { get; init; }

    /// <summary>
    /// Nombre sugerido para el agente.
    /// </summary>
    public required string SuggestedName { get; init; }

    /// <summary>
    /// Slug sugerido (URL-friendly).
    /// </summary>
    public required string SuggestedSlug { get; init; }

    /// <summary>
    /// Tokens estimados del prompt.
    /// </summary>
    public int EstimatedTokens { get; init; }

    /// <summary>
    /// Secciones identificadas en el prompt.
    /// </summary>
    public List<string> Sections { get; init; } = [];

    /// <summary>
    /// Sugerencias de mejora adicionales.
    /// </summary>
    public List<string> Suggestions { get; init; } = [];
}

Componentes de Procesamiento

1. PromptGenerator.razor (UI Component)

┌─────────────────────────────────────────────────────────────┐
│                   PromptGenerator.razor                      │
├─────────────────────────────────────────────────────────────┤
│  @inject HttpClient Http                                     │
│  @inject ISnackbar Snackbar                                  │
│                                                              │
│  [Parameter] public EventCallback<AgentPromptResult>         │
│              OnPromptGenerated { get; set; }                 │
│                                                              │
│  [Parameter] public string? TemplateSlug { get; set; }       │
│  [Parameter] public Guid? ProjectId { get; set; }            │
├─────────────────────────────────────────────────────────────┤
│  Estado:                                                     │
│  - Description (string)                                      │
│  - SelectedTone (PromptTone)                                 │
│  - IsGenerating (bool)                                       │
│  - GeneratedResult (AgentPromptResult?)                      │
│  - ShowPreview (bool)                                        │
├─────────────────────────────────────────────────────────────┤
│  Métodos:                                                    │
│  - GenerateAsync()                                           │
│  - UseGeneratedPrompt()                                      │
│  - Reset()                                                   │
└─────────────────────────────────────────────────────────────┘

2. AIGeneratorService.cs (Service Layer)

┌─────────────────────────────────────────────────────────────┐
│                   AIGeneratorService.cs                      │
├─────────────────────────────────────────────────────────────┤
│  Dependencias:                                               │
│  - IAIProviderService _providerService                       │
│  - IAgentService _agentService                               │
│  - ILogger<AIGeneratorService> _logger                       │
├─────────────────────────────────────────────────────────────┤
│  Métodos públicos:                                           │
│  + GenerateAgentPromptAsync(request) : AgentPromptResult     │
│  + GenerateAgentAsync(request) : AgentGenerationResult       │
│  + GeneratePluginAsync(request) : PluginGenerationResult     │
├─────────────────────────────────────────────────────────────┤
│  Métodos privados:                                           │
│  - BuildSystemPromptForGeneration(tone) : string             │
│  - BuildUserPromptFromDescription(desc) : string             │
│  - ParseGeneratedResponse(text) : AgentPromptResult          │
│  - EstimateTokenCount(text) : int                            │
│  - ExtractSections(prompt) : List<string>                    │
│  - GenerateSuggestedSlug(name) : string                      │
└─────────────────────────────────────────────────────────────┘

System Prompt para Generación

# System Prompt del Generador

Eres un experto en diseño de System Prompts para agentes de IA en la plataforma Calmia Nexus.

## Tu Tarea
Crear system prompts profesionales, efectivos y bien estructurados basándote en la descripción proporcionada por el usuario.

## Estructura del Prompt a Generar
Todo prompt debe incluir estas secciones:

### 1. IDENTIDAD
- Nombre del rol/agente
- Descripción breve de quién es
- Ámbito de responsabilidad

### 2. CAPACIDADES
- Lista de lo que PUEDE hacer
- Herramientas y accesos disponibles
- Límites de autoridad

### 3. DIRECTRICES
- Cómo debe comportarse
- Tono de comunicación
- Prioridades

### 4. PROCESO
- Pasos para completar tareas
- Flujo de trabajo típico
- Puntos de decisión

### 5. RESTRICCIONES
- Lo que NO debe hacer
- Límites de seguridad
- Escalación

## Tonos Disponibles

### Professional
- Formal y estructurado
- Secciones claramente delimitadas
- Lenguaje corporativo

### Concise
- Mínimo necesario
- Bullet points
- Sin redundancia

### Detailed
- Extenso y explicativo
- Incluye ejemplos
- Casos de uso

## Formato de Respuesta
Responde SIEMPRE en formato JSON:
{
  "name": "Nombre sugerido del agente",
  "slug": "nombre-sugerido",
  "prompt": "El system prompt completo aquí...",
  "sections": ["identidad", "capacidades", ...],
  "suggestions": ["sugerencia 1", "sugerencia 2"]
}

Integración con Sistema Existente

Archivos a Modificar

Archivo Cambios
AgentWizard.razor Agregar botón "Generar con IA" en paso 3, integrar PromptGenerator
AIController.cs Agregar endpoint POST /api/ai/generate-agent-prompt
AIGeneratorService.cs Agregar método GenerateAgentPromptAsync

Archivos a Crear

Archivo Propósito
PromptGenerator.razor Componente modal para generación con IA
GenerateAgentPromptRequest.cs DTO de request
AgentPromptResult.cs DTO de response

Flujo de Datos

AgentWizard.razor
       │ [Click "Generar con IA"]
PromptGenerator.razor (Modal)
       │ [POST /api/ai/generate-agent-prompt]
AIController.cs
       │ [DI]
AIGeneratorService.cs
       │ [Call Claude API]
IAIProviderService → Anthropic API
       │ [Response]
AgentPromptResult → PromptGenerator → AgentWizard

Categoría de Logging

Usar categoría: AI (ya definida en LogCategories)

using (LogContext.PushProperty("Category", LogCategories.AI))
using (LogContext.PushProperty("RequestType", "GenerateAgentPrompt"))
{
    _logger.LogInformation("Generating agent prompt for: {Description}", request.Description);
    // ...
}

Estimación de Tokens

Para calcular tokens estimados del prompt generado:

private int EstimateTokenCount(string text)
{
    // Aproximación: ~4 caracteres por token en español
    // Más preciso: usar tiktoken o similar
    return (int)Math.Ceiling(text.Length / 4.0);
}

Plan de Implementación

  1. Fase 1: Crear DTOs (Request/Response)
  2. Fase 2: Implementar GenerateAgentPromptAsync en AIGeneratorService
  3. Fase 3: Agregar endpoint en AIController
  4. Fase 4: Crear componente PromptGenerator.razor
  5. Fase 5: Integrar en AgentWizard.razor
  6. Fase 6: Tests y ajustes