La web estática está muerta

Desde la invención de HTML, el paradigma ha sido:

El desarrollador diseña un diseño (encabezado, contenido, pie de página).
El desarrollador escribe código.
Página de visitas de usuarios.
El usuario ve exactamente lo que diseñó el desarrollador.

Esta es IU estática. Idealmente, se adapta al 80% de los usuarios. El otro 20% simplemente se ocupa de ello. Si un usuario pregunta “Muéstrame vuelos a París”, le mostramos una lista. Si un usuario pregunta “Compare el tiempo en París y Londres”, le mostramos una respuesta de texto. ¿Por qué? Porque no diseñamos un “Widget de comparación del clima”. Sólo diseñamos un “Widget de lista de vuelos”. Estamos limitados por lo que predijimos que querría el usuario.

IU generativa supera este límite. La IA decide en tiempo de ejecución qué componentes renderizar. Usuario: “Comparar el clima”. AI: Decide renderizar dos componentes <WeatherCard /> uno al lado del otro. Usuario: “Reservar un vuelo”. AI: Decide representar un <FlightBookingForm />. La Interfaz se adapta a la Intención.

Por qué Maison Code analiza esto

En Maison Code, estamos obsesionados con el futuro “Zero UI”. Creemos que el máximo lujo es una interfaz que se anticipe a sus necesidades. Para nuestros clientes de conserjería de alto nivel, un panel estático no es suficiente. Si un cliente VIP solicita “Un itinerario de fin de semana en Kyto”, no debería recibir un bloque de texto. Deberían obtener un mapa, una lista de reservas de hotel y un widget del tiempo, generados al instante. Implementamos Vercel AI SDK y React Server Components (RSC) para crear estas experiencias adaptativas. Hablamos de ello porque este es el mayor cambio en la ingeniería frontend desde el propio React.

La tecnología: Vercel AI SDK (RSC)

El SDK de Vercel AI (específicamente el modo allow-rsc) permite que el LLM transmita componentes de React como parte de la respuesta.

Cómo funciona (El Flujo)

Consulta de usuario: “Muéstrame el precio de las acciones de Apple”.
Acción del servidor: envía un mensaje a GPT-4.

Llamada de funciones: Proporcionamos herramientas para GPT-4.

herramientas: {
  mostrar_stock: {
    descripción: "Mostrar un gráfico de cotizaciones bursátiles",
    parámetros: z.object({ símbolo: z.string() })
  }
}

Decisión LLM: GPT-4 dice “Llame a show_stock con el símbolo AAPL”.

Ejecución del servidor: el servidor ejecuta la función. Pero en lugar de devolver JSON, devuelve un Componente React.

// servidor/acciones.tsx
función asíncrona show_stock({ símbolo }) {
  datos constantes = esperar fetchStock(símbolo);
  devolver <datos de StockChart={datos} color="verde" />;
}

Transmisión: La interfaz de usuario transmite <StockChart /> al cliente. El cliente lo renderiza al instante.

Ejemplo de código: creación de un chat generativo

// aplicación/acción.tsx
importar {createAI, getMutableAIState, renderiza} desde "ai/rsc";
importar {z} desde "zod";

constante ai = crearAI({
  acciones: {
    enviarUserMessage: async (contenido: cadena) => {
      "usar servidor";
      const aiState = getMutableAIState();
      
      const ui = esperar renderizado({
        modelo: "gpt-4-turbo",
        proveedor: openai,
        mensajes: [{ rol: "usuario", contenido }],
        herramientas: {
          get_crypto_price: {
            descripción: "Obtener el precio de una criptomoneda",
            parámetros: z.object({ moneda: z.string() }),
            renderizar: función asíncrona* ({ moneda }) {
              producir <Spinner/>; // Estado de carga instantánea
              precio constante = await fetchPrice(coin);
              return <CryptoCard moneda={moneda} precio={precio} />; // interfaz de usuario final
            }
          }
        }
      });
      
      return {id: Date.now(), pantalla: ui};
    }
  }
});

Observe el rendimiento <Spinner />. Esto es asombroso. La IA reconoce la intención (“Estoy obteniendo el precio”) y muestra una interfaz de usuario antes de que los datos estén listos. Luego reemplaza la ruleta con la tarjeta. Esta es IU de transmisión.

Casos de uso para el comercio electrónico

Comparación de productos: Usuario: “¿Cuál es mejor para correr, las Air Max o las Pegasus?” IA: Genera una <ComparisonTable productos={[A, B]} /> destacando el peso y la amortiguación.
Guía de tallas: Usuario: “Mido 6 pies de altura, ¿qué talla?” AI: Representa un <SizeChart resaltado="L" /> personalizado.
Creador de paquetes: Usuario: “Necesito un outfit para una gala”. AI: presenta un <LookBook items={[Traje, corbata, zapatos]} /> con un botón “Agregar todo al carrito”.

El desafío del diseño

La interfaz de usuario generativa es una pesadilla para los diseñadores. No se puede diseñar “La Página”. No hay ninguna página. Debe diseñar un Sistema de componentes. Tú diseñas los “Átomos” (Tarjetas, Gráficos, Tablas, Listas). La IA actúa como “Creador de páginas”. Esto requiere un Sistema de diseño estricto (consulte Diseño atómico) para garantizar que todo lo que la IA ensambla parezca coherente. Si no se aplican márgenes y tipografía perfectamente estandarizados, el diseño generado por IA se verá roto.

La visión del escéptico

“Esto es un exceso de ingeniería. Sólo muéstrame el texto”. Contrapunto: el texto es difícil de analizar. “Apple ha subido un 5% a 150 dólares” es más difícil de leer que un gráfico verde subiendo. El cerebro procesa imágenes 60.000 veces más rápido que el texto. La interfaz de usuario generativa trata sobre densidad de información. Nos permite transmitir datos complejos (tablas, gráficos) en una interfaz conversacional sin abrumar al usuario.

Preguntas frecuentes

P: ¿Es lento? R: Sí, GPT-4 es lento. Por eso utilizamos Streaming. El texto/spinner aparece instantáneamente. El componente pesado de la interfaz de usuario se carga 1 segundo después. Se siente receptivo.

P: ¿Puede alucinar la IU? R: Puede alucinar argumentos (por ejemplo, pasar una cadena a un accesorio que necesita un número). Sin embargo, la implementación de la validación del esquema Zod evita fallos en el tiempo de ejecución. Si la IA genera datos incorrectos, los detectamos y mostramos un mensaje de error en lugar de bloquear la interfaz de usuario.

Conclusión

Estamos pasando de “apuntar y hacer clic” a “describir y recibir”. La interfaz de usuario generativa es el puente. Combina la flexibilidad del Chat con la usabilidad de la GUI. Es el futuro de la interacción del software.

¿Listo para construir el futuro?

Si desea integrar Generative UI en su aplicación utilizando Vercel AI SDK, Maison Code es el socio experto que necesita. Construimos interfaces inteligentes que se adaptan a tus usuarios.

¿UI que se dibuja sola?

Creamos experiencias de interfaz de usuario generativa utilizando Vercel AI SDK y React Server Components. Contrata a nuestros Arquitectos.