Cómo estoy usando IA en mi flujo de desarrollo sin perder el control

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

Concepto	Qué es	Por qué importa en el flujo de desarrollo
LLM (Large Language Model)	Modelo de deep learning entrenado con billones de tokens.	Genera código, pruebas y documentación a partir de prompts estructurados.
RAG (Retrieval‑Augmented Generation)	Técnica que combina búsqueda en un índice de documentos con generación.	Permite que el modelo “recuerde” especificaciones internas (API contracts, guías de estilo).
Agent	Programa que toma decisiones autónomas usando un LLM como motor cognitivo.	Orquesta tareas como “generar PR → ejecutar CI → solicitar revisión”.
Prompt Engineering	Diseño deliberado del texto de entrada para guiar la salida del LLM.	Mejora la precisión y reduce la necesidad de post‑edición.
Observabilidad IA	Registro estructurado de prompts, respuestas, métricas de coste y métricas de calidad.	Hace posible auditorías, trazabilidad y métricas de ROI.

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

Aspecto	Naïve	Optimizado
Tipado de prompt	Cadena interpolada	PromptTemplate tipado
Validación de salida	Ninguna	Zod + expresión regular
Observabilidad	Ninguna	Registro en ai_requests
Coste estimado	No calculado	Cálculo basado en tokens
Pruebas automáticas	No genera	generateTests crea Jest test
Seguridad	Ninguna	Lint y pruebas antes del merge
Manejo de errores	No captura	catch global y mensaje claro

---

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,