Implementación de frontend para interacción con prompts

Tipo de lección: Video

Concepto clave

La implementación de frontend para interacción con prompts es el puente entre la interfaz de usuario y los sistemas de inteligencia artificial. Imagina que estás construyendo un panel de control para un piloto de avión: los prompts son los controles que el piloto manipula, y el frontend es la cabina que traduce esos movimientos en instrucciones precisas para el motor (la API de GPT o Claude).

En aplicaciones full stack, este frontend no solo muestra resultados, sino que gestiona el flujo completo: desde la captura de entradas del usuario hasta la presentación estructurada de respuestas. Un buen frontend para prompts debe ser reactivo (responde inmediatamente a cambios), validativo (previene errores antes de enviar a la API) y modular (permite reutilizar componentes en diferentes partes de la aplicación).

Cómo funciona en la práctica

Vamos a construir un componente de frontend para un sistema de generación de contenido. Paso a paso:

1. Diseñamos la interfaz con campos para tipo de contenido, tono, longitud y palabras clave
2. Implementamos validación en tiempo real que verifica que los prompts no excedan límites de tokens
3. Configuramos el envío asíncrono a la API con manejo de estados (cargando, éxito, error)
4. Mostramos la respuesta formateada con opciones para copiar o regenerar
5. Implementamos historial local para que el usuario pueda volver a prompts anteriores

La clave está en separar la lógica de presentación de la lógica de negocio. El frontend se comunica con un servicio que maneja la comunicación con la API, manteniendo el código limpio y mantenible.

Código en acción

Componente React básico para entrada de prompts:

import React, { useState } from 'react';
import PromptService from '../services/PromptService';

const PromptInput = () => {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');
  const [loading, setLoading] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!prompt.trim()) return;
    
    setLoading(true);
    try {
      const result = await PromptService.generateContent({
        prompt: prompt,
        model: 'gpt-4',
        temperature: 0.7
      });
      setResponse(result.content);
    } catch (error) {
      console.error('Error:', error);
      setResponse('Error al generar contenido');
    } finally {
      setLoading(false);
    }
  };
  
  return (