POLITICA DE COOKIES

Q2BSTUDIO.COM utiliza cookies técnicas, analíticas, de sesión y de publicidad con la finalidad de prestar un mejor servicio. No obstante, necesitamos su consentimiento explícito para poder utilizarlas. Así mismo puede cambiar la configuración de las cookies u obtener más información aquí .

Creando un Analizador de Reseñas con Vercel AI SDK y React 19

Creando un Analizador de Reseñas con Vercel AI SDK y React 19

Publicado el 30/08/2025

En esta guía aprenderás a crear un analizador de reseñas de comercio electrónico que permite pegar una reseña de producto y obtener información sobre el sentimiento y los temas clave

Utilizaremos el Vercel AI SDK para realizar llamadas a modelos de IA y obtener respuestas en formato JSON tipado, lo que facilita integrar varios proveedores de modelos usando una única API

El flujo principal consiste en ejecutar las llamadas a la IA en el servidor dentro de una React Server Function y validar la respuesta con Zod en el servidor, manteniendo el bundle del cliente ligero

También usaremos el hook useActionState de React para gestionar el estado del formulario de forma sencilla y Tailwind CSS para una interfaz atractiva y responsive

Configuración del proyecto y dependencias iniciales Ejecuta los siguientes comandos en la terminal dentro de la carpeta donde quieras crear el proyecto

npx create-next-app@latest review-analyser --typescript --tailwind --app --eslint --src-dir --turbopack --no-import-alias

cd review-analyser

npm install ai zod @ai-sdk/openai

Configuración de entorno Guarda tu clave de OpenAI en un archivo .env.local en la raíz del proyecto con la variable OPENAI_API_KEY igual a tu clave de OpenAI

Construcción de la Server Function Crea un archivo en src/actions/analyse-review.ts que exporte una función de servidor llamada analyseReview usando la directiva use server para asegurar que se ejecute solo en el servidor

Define un esquema Zod llamado reviewAnalysisSchema que describa la respuesta esperada de la IA con campos para sentiment categories y summary. Un ejemplo de estructura incluye sentiment con valores positive negative mixed, cuatro categorías product_quality shipping customer_service value_for_money con valores good bad neutral y summary con main_complaint main_praise recommendation

La función analyseReview recibe el estado previo y el FormData enviado por el formulario. Extrae content desde FormData y valida su longitud con Zod requiriendo al menos 3 caracteres y un máximo de 4000; si falla la validación la función devuelve un estado con success en false y los errores

Llamada a la IA Para pedir el análisis a la IA usa generateObject del paquete ai junto al adaptador openai del paquete @ai-sdk/openai y proporciona reviewAnalysisSchema como schema para forzar una respuesta tipada. Por ejemplo llama al modelo gpt-4o-mini con un prompt que incluya la reseña del cliente y pida analizar sentimiento general categorías y un resumen con queja principal elogio principal y una recomendación accionable. Si una categoría no se menciona en la reseña se puede marcar como neutral

El método generateObject usa la clave OPENAI_API_KEY en el servidor por lo que la clave no se expone en el código del cliente

Componente cliente y gestión del formulario Crea un componente cliente en src/components/review-analysis-form.tsx que declare use client y utilice useActionState pasando la Server Function analyseReview y un estado inicial con success en false

useActionState devuelve un array con state formAction e isPending. Vincula formAction al atributo action del formulario para que al enviar éste se serialice FormData se ejecute la Server Function y se actualice el estado automáticamente

El formulario debe incluir un textarea para content y un botón submit. Mientras isPending es true deshabilita textarea y botón para evitar envíos concurrentes. Muestra errores de validación cuando correspondan y conserva el contenido en state.content para que el usuario no pierda lo tecleado

Componente de visualización Crea un componente ReviewAnalysisDisplay que reciba el tipo ReviewAnalysis desde la Server Function y muestre el sentimiento global las categorías y las ideas clave

Muestra el sentimiento general con un indicador visual y coloreado según sea positive negative o mixed. Despliega la tabla de categorías iterando sobre analysis.categories y muestra para cada categoría su nombre icono y valor good bad neutral con estilos de color apropiados

Debajo muestra las ideas clave incluyendo main_praise main_complaint y la recomendación de negocio como un bloque independiente y destacado para facilitar la lectura

Página principal Integra ReviewAnalysisForm en app/page.tsx y renderiza el formulario dentro de un main para que el usuario pueda acceder desde la raíz de la aplicación

Ejecución Ejecuta npm run dev y abre la aplicación en la dirección https://localhost:3000 pega una reseña y envía el formulario. En las herramientas del desarrollador en la pestaña Network verás la petición POST con FormData y la respuesta por streaming desde el servidor

Beneficios de esta arquitectura Al mantener la lógica de IA y la validación en el servidor se evitan fugas de la clave de API y se garantiza una respuesta tipada mediante Zod y generateObject. El uso de Server Functions en combinación con useActionState simplifica el manejo del estado del formulario y mejora la experiencia de desarrollo con seguridad y tipos

Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones tecnológicas modernas. Ofrecemos servicios de software a medida aplicaciones a medida inteligencia artificial e ia para empresas ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio agentes IA y power bi entre otros. Nuestro equipo diseña e implementa integraciones con APIs de IA, pipelines seguros en la nube y paneles de business intelligence para convertir datos en decisiones accionables

Por qué trabajar con Q2BSTUDIO Contamos con experiencia desarrollando soluciones personalizadas que combinan IA y prácticas robustas de ciberseguridad para empresas que necesitan automatizar procesos optimizar costes y escalar en la nube. Nuestros servicios cloud incluyen despliegues en AWS y Azure diseño de arquitecturas seguras migraciones y monitorización

Servicios destacados aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi

Conclusión Con esta guía tienes un flujo claro para construir un analizador de reseñas potenciado por IA que es escalable seguro y fácil de mantener. Si deseas externalizar el desarrollo o acelerar tu proyecto en IA contacta con Q2BSTUDIO y te ayudamos a diseñar la solución a medida incluida la integración con modelos de lenguaje despliegue en la nube y paneles de inteligencia de negocio con power bi

Palabras clave aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi
Fin del artículo, inicio de la diversión
Construyendo software juntos

Dando vida a tus ideas desde 2008

Diseñamos aplicaciones móviles y de escritorio innovadoras que cumplen con tus requisitos específicos y mejoran la eficiencia operativa.
Más info
Cuéntanos tu visión
Sea cual sea el alcance, podemos convertir tu idea en realidad. Envíanosla y charlemos sobre tu proyecto o una colaboración futura.
Contáctanos
artículos destacados
Live Chat
Enviado correctamente.

Gracias por confiar en Q2BStudio