Chatbots personalizados con Laravel & OpenAI

En esta lección introductoria, te mostraré la aplicación de chatbots terminada que construiremos a lo largo del curso. Exploraremos sus principales características y cómo Laravel y OpenAI se combinan para crear chatbots personalizados.

Conoce los cursos previos necesarios para aprovechar al máximo el curso avanzado de chatbots con Laravel y OpenAI. Completa los fundamentos en Laravel, Inertia y Jetstream, disponibles en Aprendible, y prepárate para desarrollar chatbots personalizados.

Aprende a instalar y configurar una aplicación Laravel avanzada utilizando Inertia y Jetstream. Sigue este tutorial paso a paso para establecer el entorno ideal para desarrollar proyectos modernos con autenticación y una interfaz dinámica.

En esta lección, nos aseguraremos de que tanto el código PHP como el JavaScript que escribimos mantengan un estilo de código (code style) consistente en toda la aplicación.

En esta lección, exploramos las ventajas de usar UUIDs en lugar de IDs incrementales y cómo configurarlos en Laravel.

En esta lección creamos el modelo Chatbot con todos sus archivos relacionados.

En esta lección personalizamos el layout de Jetstream, añadiendo enlaces de navegación tanto para móvil como para escritorio, facilitando el acceso al listado de chatbots.

En esta lección desarrollamos componentes reutilizables en Vue utilizando la Composition API para crear y presentar un listado dinámico y organizado de chatbots.

En esta lección veremos cómo usar Day.js, una alternativa superligera y poderosa a Moment.js, para formatear y manipular fechas del lado del cliente.

En esta lección modificamos los botones que nos trae Jetstream para que se puedan utilizar como links y como botones según tus necesidades.

En esta lección creamos un componente Botón Base que podamos reutilizar en los diferentes tipos de botones que requiera nuestra aplicación.

En esta lección aprendemos a instalar y utilizar la librería Heroicons que se integra perfectamente con Vue3 y TailwindCSS

En esta lección implementamos la página de detalle de un chatbot.

En esta lección implementamos la página edit utilizando el componente Form Section que nos provee Laravel Jetstream.

En esta lección utilizamos el composable useForm para definir los campos reutilizables del chatbot.

En esta lección unificamos la validación de los chatbots para tener un solo Request que podamos reutilizar.

En esta lección persistimos los cambios del chatbot en la base de datos y modificamos el formulario para mostrar feedback al usuario.

En esta lección creamos la pagina de creación de Chatbots basándonos en la pagina de editar Chatbots.

En esta lección extraemos el formulario de editar y crear chatbots para que sea mas fácil de reutilizar y mantener

En esta lección creamos un componente textarea reutilizable y de altura auto-ajustable para el System Prompt de los chatbos.

En esta lección creamos otro componente reutilizable, esta vez para los campos Select.

En esta lección preparamos los archivos necesarios para almacenar las fuentes de contenido que utilizarán los chatbots para responder.

En esta lección aprendemos a crear y utilizar ventanas modales utilizando los componentes base que nos trajo Breeze y Jetstream.

En esta lección modificamos el modal para que contenga el formulario de creación de fuentes de conocimiento.

En esta lección continuamos con la creación del formulario para agregar fuentes de conocimiento, implementando las funciones necesarias en el frontend.

En esta lección agregamos las reglas de validación dependiendo de si el usuario selecciona pdf o website para la fuente de conocimiento.

En esta lección explicamos cómo subir archivos pdf utilizando las herramientas que nos provee Inertia.

En esta lección mejoramos el aspecto del campo de entrada para seleccionar pdfs en el formulario de fuentes de conocimientos.

En esta lección creamos un botón que nos permita quitar un archivo pdf ya seleccionado y así poder seleccionar otro fácilmente.

En esta lección aprenderás a precargar las fuentes de conocimiento de tus chatbots para mostrarlas automáticamente en su vista de detalle.

En esta lección aprenderás a aplicar clases de Tailwind CSS para diseñar y optimizar visualmente una lista de conocimientos, logrando un diseño limpio, responsivo y con soporte para dark mode.

En esta lección aprenderás a mejorar la experiencia del chatbot mostrando correctamente las fuentes de conocimiento, ya sean archivos PDF o sitios web, utilizando Laravel y Storage::response para una entrega optimizada.

En esta lección aprenderás a implementar un botón con modal de confirmación para eliminar fuentes de conocimiento, garantizando una experiencia segura y controlada para el usuario.

En esta lección creamos el Job que se encargará de despachar la extracción de la fuente de conocimiento, ya sea desde un website o desde un pdf.

En esta lección aprenderás a actualizar Inertia.js 2 junto con el composable usePoll en Vue.js para actualizar datos en tiempo real en tu aplicación Laravel, sin necesidad de recargar la página.

En esta lección aprenderás a extraer texto de archivos PDF utilizando Laravel, como parte del flujo de trabajo para alimentar a tu chatbot con información personalizada.

Aprende a implementar un scraper web en Laravel usando el componente Symfony Crawler. En este tutorial te muestro cómo extraer eficientemente todo el texto de elementos <p> de cualquier página web y convertirlo en un string listo para procesar con OpenAI.

En esta lección, construimos el modelo Chat en Laravel con UUID, definimos sus relaciones (User y Chatbot) y preparamos la migración con claves foráneas. Base esencial para integrar chats en sistemas con OpenAI más adelante.

Aprende paso a paso cómo implementar la edición "inline" del título de un chat usando Laravel, Inertia y Vue. Mejora la experiencia del usuario permitiendo cambios rápidos directamente desde la interfaz.

En esta lección aprenderás a implementar el listado de conversaciones asociadas a un chatbot específico, funcionalidad esencial para visualizar y gestionar los chats acumulados por cada chatbot.

En esta lección creamos el componente ChatInput usando Vue, que renderiza un textarea funcional para enviar mensajes al backend con Laravel y OpenAI. Aprenderás a capturar el input del usuario y manejar el envío de datos de forma eficiente.

En esta lección conectamos el componente ChatInput a la vista del chat utilizando Vue 3 y Laravel. Aprenderás cómo estructurar la interfaz con Tailwind CSS, renderizar el input del usuario y preparar el área para mostrar los mensajes enviados.

En esta lección mejoramos la experiencia del usuario en el formulario de chat implementando una lógica personalizada con Vue 3 que detecta cuándo se presiona Enter para enviar el formulario, y Shift+Enter para crear un salto de línea. Ideal para apps con funcionalidad tipo chatbot.

En esta lección creamos el modelo Message en Laravel junto a su controlador, definimos rutas anidadas RESTful y establecemos la relación entre el modelo Chat y Message para estructurar correctamente nuestro chatbot con OpenAI.

En esta lección aprenderás qué es OpenAI, cómo funciona su API, qué son los tokens y cómo se calculan los precios al usar los modelos más modernos.

Aprende de forma sencilla y rápida a crear tu API Key en OpenAI para comenzar a integrar inteligencia artificial en tus proyectos con Laravel y otros entornos.

En esta lección aprenderás a realizar tu primera petición a la API de OpenAI desde Laravel utilizando el facade Http. Configuraremos las cabeceras necesarias, enviaremos un mensaje al modelo y mostraremos la respuesta en pantalla con dd(). Este es el primer paso esencial para construir chatbots personalizados con Laravel y OpenAI.

En esta lección aprenderás a instalar y configurar el paquete comunitario openai-php/laravel, una integración que facilita el uso de la API de OpenAI dentro de tus proyectos Laravel.

En esta lección reemplazamos la integración directa con OpenAI por Laravel Prism, utilizando Provider::OpenAI y un flujo más limpio para construir chatbots personalizados con respuestas dinámicas.

En esta lección modificamos la validación del system_prompt, actualizamos la lista de modelos a GPT-5, optimizamos los botones de acción de los chatbots y mejoramos la experiencia del usuario al interactuar con los chats.

En esta lección aprenderás a mejorar tus chatbots en Laravel integrando los modelos de OpenAI mediante Enums. Veremos cómo validar con Rule::enum y pasar la lista de modelos a los formularios de creación y edición para una experiencia más flexible y segura.

En esta lección utilizamos la información del chatbot en la petición a la API de OpenAI: definimos el modelo de OpenAI desde la base de datos, personalizamos el system prompt y ajustamos la temperatura para controlar la creatividad de las respuestas.

En esta lección implementamos la funcionalidad que permite al chatbot acceder automáticamente a la información almacenada en knowledgeSources, concatenando el extracted_content al prompt del sistema para generar respuestas más precisas y contextualizadas usando OpenAI y Laravel.

En esta lección aprenderás a almacenar las respuestas generadas por la IA en la base de datos y mostrarlas dinámicamente en la interfaz de tu aplicación. Conectarás el backend y el frontend para que cada mensaje quede registrado y visible en el flujo de conversación.

En esta lección mejoramos la vista de chats reemplazando el renderizado básico de mensajes por el nuevo componente ChatMessage. Con esta integración conseguimos un diseño más claro, organizado y profesional, que sienta las bases para un frontend sólido en tu chatbot.

En esta lección mejoramos la interfaz de usuario de los chats: extraemos el título a un nuevo componente ChatTitle.vue, ajustamos el layout de los mensajes con flex w-full y optimizamos el ancho de la vista con max-w-7xl, logrando un diseño más claro, escalable y fácil de mantener.