https://neobrutalism.com/es/blocks/ai/ai-chat-assistant-interface
Interfaz de chat con IA
Inteligencia artificial · Código fuente Pro
Una superficie de chat completa en un archivo: una barra de cabecera con título y controles rápidos, un hilo con scroll de burbujas de usuario y asistente que conserva su propia posición de scroll, un indicador de escritura de tres puntos mientras una respuesta está pendiente, y un compositor que envía con Enter y añade una línea nueva con Mayús y Enter. La respuesta está simulada con un temporizador, así que el bloque funciona sin backend y muestra cada estado que necesita una integración real.
Inteligencia artificial
Interfaz de chat con IAAbrir vista previa en directo
- Hero, precios y auth
- Previsualizar cada punto de interrupción
- Copia el código fuente
- MCP listo para instalar
- Radix · Base UI · React Aria
- 158 bloques prefabricados
- Secciones de la página que se envían
- Cuadros de mando y marketing
- Pro desbloquea el código
- Diseños de inserción directa
Adorado por devs, diseñadores
y creadores
Me topé con tu kit de UI y me lo llevé enseguida. Me impresionó ver que es nuevo, se mantiene activo y mejora sin parar. ¡Gran trabajo! 🤘
Ziv Reich, Desarrollador de software Solo quería decir que hiciste un gran trabajo con neobrutalism.com. Me encanta de verdad. Soy un desastre con el diseño, así que esto me vino de maravilla. Lo usé en mi web personal.
Paul Bratslavsky, Creador de Coding With Paul Por fin rehíce mi web personal con Neobrutalism.com — biblioteca divertida y muy fácil de empezar.
Cameron Blackwood, Creador de contenido Neobrutalism.com es una de mis bibliotecas de componentes UI retro favoritas — componentes que de verdad se pueden shippear.
Zhengyang Hou, Indie hacker una de mis bibliotecas de ui favoritas para la web. gran trabajo — espero que llegue muy lejos.
Taseen Tanvir, Fundador y diseñador Acabo de probar Neobrutalism.com Pro — un kit de UI que no se parece a todo lo demás. Los bloques neobrutalistas 🔥 hicieron más rápido prototipar diseños raros y divertidos.
Nitesh Padghan, Redactor fantasma Un diseño de landing page precioso, con un equilibrio y un flujo perfectos. La paleta de color junto con las animaciones crea una experiencia de usuario excepcional.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Estoy muy impresionado con el diseño que entregaron. El producto final coincidió exactamente con lo que había imaginado.
Desmond, Cofundador @ VectorlabsVentures Como dueño de agencia, solía pasar semanas perfeccionando layouts de landing para clientes. Con Neobrutalism.com, meto una plantilla, ajusto el copy y ya estoy listo para publicar.
Duke Opoku Amankwah, Fundador @ Midas Las plantillas no solo son visualmente impactantes: también están increíblemente bien estructuradas. Nos ahorraron semanas de desarrollo.
Abiola Braimah, Desarrollador @ Studio IX Calidad sobresaliente y atención al detalle. El diseño responsive funciona a la perfección en todos los dispositivos.
Acromond X., Cofundador @ VectorlabsVentures Integrar estas plantillas en nuestro flujo ha reducido mucho nuestro ciclo de desarrollo. Excelente trabajo.
Raquib S., Desarrollador backend Estas plantillas se han convertido en nuestro recurso de referencia. El código es limpio, está bien documentado y es fácil de personalizar.
Hallic M., Desarrollador @ AtlasLabs Las plantillas de Neobrutalism.com logran el equilibrio perfecto entre estética y funcionalidad. Un verdadero cambio de juego para nuestros proyectos.
Ibrahim S., Frontend Lead @ ScaleUp Soporte excepcional y plantillas de calidad premium. El ROI de estas plantillas es fenomenal.
Kevin K., CEO @ WebCraft Las plantillas de Neobrutalism.com han transformado por completo cómo abordamos los proyectos de clientes. La calidad del código es excepcional y los diseños son de primer nivel.
Danny G., Fundador de DevStack He usado muchas bibliotecas de plantillas, pero Neobrutalism.com destaca por su atención a la optimización del rendimiento y a una arquitectura de código limpia.
Ian D., CTO en Wavelength Las animaciones y microinteracciones de estas plantillas son absolutamente impresionantes. La mejor inversión para nuestro equipo de diseño.
Ben S., Lead Designer en PixelPerfect Como fundador no técnico, las plantillas de Neobrutalism.com nos ayudaron a lanzar el MVP en tiempo récord sin renunciar a la calidad del diseño. Nuestros inversores se quedaron impactados.
Matthew I., Fundador de startup Aprecio lo modulares y bien documentados que son estos componentes. Hemos podido combinar piezas de distintas plantillas sin fricción.
Garrett P., Frontend Lead en TechFusion El ROI de las plantillas de Neobrutalism.com es increíble. Hemos reducido drásticamente el tiempo de desarrollo y entregamos sitios de más calidad a nuestros clientes.
Xavier C., Dueño de agencia
Preguntas
frecuentes
Cómo se construye el bloque Interfaz de chat con IA, qué puedes cambiar y cuándo usarlo en lugar de los otros diseños aquí.
No. handleSend añade el mensaje del visitante, activa isReplying, y un setTimeout devuelve una línea predefinida 1,5 segundos después. Ese es el punto a sustituir: cambia el temporizador por tu llamada fetch o de streaming y conserva el flag isReplying, ya que el indicador de escritura, el botón de envío deshabilitado y el comportamiento de scroll dependen de él.
Cada mensaje tiene un id, un remitente de tipo user o assistant, el contenido, y tanto una hora visible como un dateTime legible por máquina para el elemento time. La hora se formatea al crear el mensaje y no al renderizar, porque formatear una Date durante el renderizado hace que el servidor y el navegador discrepen sobre la zona horaria y React notifica un desajuste de hidratación al cargar.
El panel es h-[36rem] en móviles y h-[44rem] desde sm en adelante, y el hilo entre la cabecera y el compositor es la única parte que hace scroll. Tanto la cabecera como el compositor son hijos flex de altura fija, así que cambiar la altura del panel solo cambia cuánto hilo es visible. Usa una unidad de viewport como h-[80vh] si quieres que ocupe una página en vez de estar dentro de una sección.
Sí: son tres entradas del array composerActions, cada una con una etiqueta y un icono, así que eliminar una entrada quita el botón. Son cuadrados de 44px porque ese es el tamaño mínimo cómodo para tocar, y cada uno tiene un aria-label con su icono marcado aria-hidden, ya que un icono solo no tiene nombre accesible. Son botones outline a propósito, así que solo el botón de envío se lee como primario.
Una versión anterior los teñía con bg-chart-1, bg-chart-5 y bg-chart-2 e imprimía iconos encima. Los tokens de gráfico tienen valores distintos en claro y oscuro, así que esos iconos eran legibles en un tema y casi invisibles en el otro. Cada superficie de color usa ahora un par de tokens (bg-primary con text-primary-foreground, bg-card con text-card-foreground), lo que mantiene el contraste fijo sea cual sea la paleta.
El hilo es un role log con aria-live polite, así que un lector de pantalla anuncia las llegadas sin interrumpir, y el indicador de escritura lleva una línea Assistant is typing oculta visualmente en lugar de depender de tres puntos animados. El scroll ajusta scrollTop en el propio hilo en vez de llamar a scrollIntoView, y solo después del primer envío: scrollIntoView arrastraría toda la página hasta este bloque al cargar.