1. Introducción contextual

En los últimos dos años la adopción de modelos de lenguaje grande (LLMs) ha pasado de ser una curiosidad académica a una herramienta productiva en equipos de ingeniería. Según el informe State of AI in Software Development de GitHub 2024, más del 38 % de los desarrolladores utilizan alguna forma de IA para generar código, documentación o pruebas. El impulso proviene de dos fuerzas convergentes: la necesidad de acelerar el time‑to‑market y la presión constante de los Core Web Vitals, que penalizan cualquier exceso de peso o latencia en la página.

Sin embargo, el entusiasmo también trae riesgos. Un LLM no “entiende” el dominio del proyecto; simplemente predice la siguiente token basándose en patrones de entrenamiento. Cuando la salida se incorpora sin revisión, se abre la puerta a vulnerabilidades de seguridad, código espagueti y pérdida de trazabilidad. En entornos regulatorios (fintech, salud) la falta de control puede traducirse en incumplimientos legales y multas millonarias.

Resolver este dilema es crítico hoy porque:

1. Escala del código – Los monolitos tradicionales están siendo reemplazados por micro‑frontends y funciones serverless que multiplican la superficie de código.
2. Coste de la deuda técnica – Cada línea de código sin pruebas o sin revisión incrementa el coste de mantenimiento en un 15 % anual, según Accelerate 2023.
3. Competitividad – Los equipos que logran combinar IA con procesos de calidad ganan entre 2‑3 meses de desarrollo frente a sus pares.

En este artículo describo, paso a paso y con código listo para producción, cómo he integrado IA en mi flujo de desarrollo manteniendo el control total sobre la calidad, la seguridad y la trazabilidad. Cada sección responde a una pregunta que el título plantea: ¿Cómo usar IA sin perder el control?

2. Fundamentos y Arquitectura

2.1 Conceptos clave

2.2 Decisiones de diseño

1. Modelo vs API – Opté por OpenAI GPT‑4o en modo API para la mayor parte del código, pero mantengo un fallback local con Llama‑3‑8B‑Instruct para entornos sin conectividad externa o con requisitos de datos sensibles.
   Ventaja: rapidez de iteración y acceso a la última capacidad de razonamiento.
   Desventaja: dependencia de costos y latencia de red.

2. Prompt como código – Los prompts se versionan en Git bajo prompts/ y se tipan con TypeScript (PromptTemplate). Esto permite que los cambios de prompt pasen por el mismo proceso de revisión que cualquier otro artefacto.

3. Middleware de validación – Cada respuesta del LLM pasa por un pipeline de seguridad (lint, static analysis, pruebas unitarias). Solo si supera todos los checks se crea el Pull Request (PR).

4. Persistencia y auditoría – Se almacena cada interacción en una tabla PostgreSQL (ai_requests) con campos prompt, response, tokens_used, cost_usd, status. Esto habilita dashboards de costo/beneficio y auditorías regulatorias.

2.3 Diagrama conceptual (descrito en texto)

1. Developer escribe código o abre un issue en GitHub.
2. GitHub Action dispara el Agent IA (ai-agent.ts).
3. El agente recupera contexto (archivos relevantes, especificaciones) mediante una búsqueda en Supabase Vector.
4. Construye un PromptTemplate y llama a la API de LLM.
5. La respuesta pasa por el Middleware de Validación (eslint, sonarqube, pruebas unitarias).
6. Si todo es verde, el agente crea un branch y abre un PR etiquetado ai‑generated.
7. Observabilidad registra la transacción en ai_requests.

Este flujo garantiza que la IA actúe como asistente y no como autoridad sin supervisión.

3. Implementación práctica

A continuación muestro la evolución de cinco componentes críticos, cada uno con un ejemplo naïve y su versión optimizada. Todo el código es ejecutable en un proyecto Next.js / Node / Python con Supabase y Docker.

3.1 Generador de componentes React con LLM

3.1.1 Versión básica (naïve)

// file: scripts/generate-component.ts
import { Configuration, OpenAIApi } from "openai";
import * as fs from "fs";
import * as path from "path";

/**
 * Genera un componente React a partir de un prompt simple.
 * No hay manejo de errores ni control de calidad.
 */
async function generateComponent(componentName: string) {
  const config = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
  const openai = new OpenAIApi(config);

  const prompt = `Crea un componente React llamado ${componentName} que muestre un botón y un contador. Usa hooks.`;

  const response = await openai.createChatCompletion({
    model: "gpt-4o",
    messages: [{ role: "user", content: prompt }],
    temperature: 0.7,
  });

  const code = response.data.choices[0].message?.content ?? "";
  const filePath = path.join(process.cwd(), "components", `${componentName}.tsx`);
  fs.writeFileSync(filePath, code);
  console.log(`✅ Componente creado: ${filePath}`);
}

// Uso rápido desde CLI
generateComponent(process.argv[2] ?? "MyButton");

Problemas:

• No valida que la respuesta sea código válido.
• No controla el número de tokens ni el coste.
• No incluye pruebas ni lint.

3.1.2 Versión optimizada

// file: scripts/generate-component.ts
import { Configuration, OpenAIApi, ChatCompletionRequestMessage } from "openai";
import * as fs from "fs/promises";
import * as path from "path";
import { z } from "zod";

/**
 * Prompt tipado y versionado.
 */
interface PromptTemplate {
  name: string;
  description: string;
  content: string;
}

/**
 * Esquema Zod para validar que la salida sea código TypeScript válido.
 */
const tsComponentSchema = z.string().refine(
  (code) => /export\s+default\s+function/.test(code),
  { message: "El código no contiene una exportación de función." }
);

/**
 * Middleware de observabilidad y control de costes.
 */
async function logRequest(
  prompt: string,
  response: string,
  usage: { total_tokens: number; prompt_tokens: number; completion_tokens: number },
  costUsd: number
) {
  const sql = `
    INSERT INTO ai_requests (prompt, response, tokens_used, cost_usd, status)
    VALUES ($1, $2, $3, $4, $5)
  `;
  // Supabase client (assume initialized)
  await supabase.rpc("execute_sql", { sql, params: [prompt, response, usage.total_tokens, costUsd, "completed"] });
}

/**
 * Genera y guarda un componente React con validaciones, lint y pruebas.
 */
export async function generateComponent(template: PromptTemplate) {
  const config = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
  const openai = new OpenAIApi(config);

  const messages: ChatCompletionRequestMessage[] = [
    { role: "system", content: "Eres un asistente experto en React y TypeScript." },
    { role: "user", content: template.content },
  ];

  const response = await openai.createChatCompletion({
    model: "gpt-4o",
    messages,
    temperature: 0,
    max_tokens: 800,
  });

  const rawCode = response.data.choices[0].message?.content ?? "";
  // Validación estructural
  const parsed = tsComponentSchema.safeParse(rawCode);
  if (!parsed.success) {
    throw new Error(`Validación de código falló: ${parsed.error.message}`);
  }

  const componentPath = path.join(process.cwd(), "components", `${template.name}.tsx`);
  await fs.writeFile(componentPath, rawCode, "utf8");
  console.log(`✅ Componente ${template.name} creado en ${componentPath}`);

  // Generar pruebas unitarias automáticamente
  await generateTests(template.name, rawCode);

  // Registro de observabilidad
  const usage = response.data.usage!;
  const costUsd = (usage.total_tokens / 1_000_000) * 0.03; // precio hipotético $0.03 / 1M tokens
  await logRequest(template.content, rawCode, usage, costUsd);
}

/**
 * Genera un archivo de pruebas Jest para el componente creado.
 */
async function generateTests(componentName: string, componentCode: string) {
  const testTemplate = `
    import { render, screen, fireEvent } from "@testing-library/react";
    import ${componentName} from "../components/${componentName}";

    describe("${componentName}", () => {
      it("debe incrementar el contador al hacer click", () => {
        render(<${componentName} />);
        const button = screen.getByRole("button");
        fireEvent.click(button);
        expect(screen.getByText(/Count:/)).toHaveTextContent("Count: 1");
      });
    });
  `;
  const testPath = path.join(process.cwd(), "__tests__", `${componentName}.test.tsx`);
  await fs.writeFile(testPath, testTemplate.trim(), "utf8");
  console.log(`🧪 Prueba generada en ${testPath}`);
}

// Ejemplo de uso
const template: PromptTemplate = {
  name: "CounterButton",
  description: "Botón con contador usando useState",
  content: `
    Crea un componente React llamado CounterButton que:
    - Use useState para manejar un contador.
    - Renderice un botón que al hacer click incremente el contador.
    - Muestre el texto "Count: X" donde X es el valor actual.
    - Usa TypeScript y exporta la función por defecto.
    - Incluye PropTypes para la futura extensibilidad.
  `,
};

generateComponent(template).catch((err) => {
  console.error("❌ Error al generar el componente:", err);
  process.exit(1);
});

Mejoras introducidas

3.2 Refactor automático de funciones Node.js

3.2.1 Enfoque inicial

// file: scripts/refactor.js
const { Configuration, OpenAIApi } = require("openai");
const fs = require("fs");
const path = require("path");

/**
 * Refactoriza una función usando IA sin validar el resultado.
 */
async function refactor(file) {
  const code = fs.readFileSync(file, "utf8");
  const prompt = `Refactoriza el siguiente código JavaScript para que sea más legible y siga las mejores prácticas de Node.js:\n\n${code}`;

  const openai = new OpenAIApi(new Configuration({ apiKey: process.env.OPENAI_API_KEY }));
  const resp = await openai.createChatCompletion({
    model: "gpt-4o",
    messages: [{ role: "user", content: prompt }],
    temperature: 0.5,
  });

  const newCode = resp.data.choices[0].message.content;
  const outPath = path.join(path.dirname(file), "refactored", path.basename(file));
  fs.writeFileSync(outPath, newCode);
  console.log(`✅ Refactorizado guardado en ${outPath}`);
}

// Ejecutar contra src/utils/helpers.js
refactor(path.resolve("src/utils/helpers.js"));

Problemas:

• No verifica que el código siga ESLint.
• No controla el número de tokens.
• Sobrescribe sin revisión.

3.2.2 Versión robusta

// file: scripts/refactor.ts
import { Configuration, OpenAIApi, ChatCompletionRequestMessage } from "openai";
import { promises as fs } from "fs";
import * as path from "path";
import { ESLint } from "eslint";
import { z } from "zod";

/**
 * Esquema para validar que la respuesta sea código JavaScript/TypeScript.
 */
const jsCodeSchema = z.string().refine(
  (c) => /module\.exports|export/.test(c),
  { message: "El código no contiene una exportación válida." }
);

/**
 * Ejecuta ESLint en modo “--fix” y devuelve los diagnostics.
 */
async function lintAndFix(source: string, filePath: string): Promise<string> {
  const eslint = new ESLint({ fix: true, cwd: process.cwd() });
  const results = await eslint.lintText(source, { filePath });
  const fixed = results[0]?.output ?? source;
  await ESLint.outputFixes(results);
  return fixed;
}

/**
 * Persiste la interacción en la base de datos.
 */
async function persistRequest(prompt: string, response: string, usage: any, cost: number) {
  const sql = `
    INSERT INTO ai_requests (prompt, response, tokens_used, cost_usd, status)
    VALUES ($1, $2, $3,