Ir al contenido
Volver a Escritos

Construyendo Site 4 That: Una plataforma de herramientas con IA para la vida real

Byte Smith · · 5 min de lectura

La mayoría de las herramientas de IA en internet ahora caen en dos campos: productos empresariales que cuestan cientos al mes y wrappers de demostración sobre ChatGPT que se rompen al menor problema. Yo quería algo intermedio — herramientas prácticas y accesibles que ayuden con las cosas que la gente enfrenta todos los días. Esa idea se convirtió en Site 4 That, una plataforma con más de 40 herramientas impulsadas por IA que abarcan gestión de TDAH, relaciones, productividad, bienestar, crianza y trabajo.

Este artículo cubre la arquitectura, las decisiones que importaron y las herramientas en sí.

El problema que vale la pena resolver

Todos tienen ese amigo que dice “simplemente usa ChatGPT para eso.” Y claro, puedes hacer prompts a un LLM para que te ayude a planificar tu día o escribir una carta de presentación. Pero la mayoría de la gente no quiere escribir prompts. Quieren abrir una herramienta, llenar algunos campos y obtener un resultado útil. Ese es el vacío que llena Site 4 That — herramientas curadas y diseñadas con buenos valores por defecto, límites sensatos y formatos de salida adaptados a cada tarea.

La plataforma cubre siete categorías:

Cada herramienta tiene un prompt de sistema cuidadosamente escrito, campos de entrada estructurados y formato de salida ajustado para su caso de uso específico.

Decisiones de arquitectura

El stack es Next.js 15 con App Router, React 19, TypeScript, PostgreSQL en Neon, Stripe para pagos y Claude de Anthropic para la generación con IA. Corre en AWS App Runner dentro de un contenedor Docker.

Herramientas data-driven

La decisión arquitectónica más importante fue hacer las herramientas basadas en datos. Cada herramienta se define completamente por un archivo de configuración JSON — no se necesita código React personalizado. La configuración especifica el nombre de la herramienta, campos de entrada, prompt del sistema, formato de salida, contenido de la guía PDF y metadatos SEO. La plataforma lee la configuración, renderiza un formulario genérico, transmite la respuesta de Claude vía SSE y muestra el resultado.

Esto significa que lanzar una nueva herramienta es solo escribir un archivo JSON y una migración de base de datos. Sin código frontend, sin despliegue específico para la herramienta. La página de herramientas la detecta automáticamente.

Herramientas interactivas

Algunas herramientas necesitan una interfaz personalizada más allá de un formulario. El Temporizador de Enfoque es un temporizador visual tipo Pomodoro con seguimiento de sesiones — eso no puede ser un formulario. Las herramientas interactivas tienen su propio componente React registrado en un registry simple, pero aún pueden llamar al mismo endpoint de generación IA si necesitan la ayuda de Claude. Las herramientas interactivas son un superconjunto de las herramientas data-driven, no un sistema separado.

Respuestas en streaming

Cada generación IA se transmite vía Server-Sent Events. El cliente recibe fragmentos data: {"text": "..."} mientras Claude genera, para que los usuarios vean los resultados apareciendo en tiempo real. Esto importa para las salidas más largas como planificadores diarios o planes de comida donde esperar la respuesta completa se sentiría roto.

Rate limiting respaldado por base de datos

El rate limiting está respaldado por PostgreSQL con upserts atómicos y bloqueo a nivel de fila. Esto lo hace seguro en múltiples instancias sin necesitar Redis. Los usuarios gratuitos obtienen un número limitado de generaciones por ventana de 30 días, aplicado del lado del servidor. El cliente muestra un contador de uso, pero el servidor es la autoridad.

El modelo de monetización

Los precios son deliberadamente simples:

  • Nivel gratuito — tres generaciones IA en todas las herramientas dentro de una ventana de 30 días. Suficiente para probar y ver si una herramienta es útil.
  • Guía PDF — una compra única de $3 por herramienta que te da una guía PDF descargable más una prueba gratuita de 7 días con acceso ilimitado. El PDF se genera con React PDF y cubre estrategias y consejos relevantes para la categoría de esa herramienta.
  • Suscripción — $10 al mes para acceso ilimitado a todas las herramientas, más descargas gratuitas de PDFs.

La compra del PDF cumple doble función. Es un punto de entrada de bajo compromiso para personas que no están listas para una suscripción, y el período de prueba les permite experimentar la plataforma completa antes de decidir.

Lo que haría diferente

Si empezara de nuevo, construiría el pipeline de generación de PDFs antes. Generar PDFs al vuelo durante un webhook de Stripe añade latencia y modos de fallo que la pre-generación evita. El sistema ahora pre-genera los PDFs y los almacena en S3, pero llegar ahí requirió varias iteraciones.

También empezaría con la arquitectura de herramientas data-driven desde el primer día. Las primeras herramientas tenían componentes personalizados antes de darme cuenta de que el patrón era lo suficientemente genérico para extraer. Esa refactorización se pagó sola inmediatamente — cada herramienta después de eso se lanzó en una fracción del tiempo.

Pruébalo

Toda la plataforma está activa en site4that.com. El nivel gratuito no requiere cuenta ni tarjeta de crédito. Si lidias con TDAH, quieres mejorar tus relaciones o simplemente necesitas un plan de comidas para la semana, probablemente hay una herramienta para eso.