Construye un chatbot AI-Powered

Sep 16, 2025

Cómo

An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.

[dieciséis]

Inteligencia artificial (AI) nos permite crear nuevas formas de ver los problemas existentes, de repensar estrategias ambientales a cómo aprendemos. Sus proyectos, ya sean aplicaciones, sitios web o juegos, pueden aprovechar AI para que sean más atractivos, más fáciles de usar y tener resultados más valiosos. Uno de estos métodos implica crear un chatbot de lenguaje natural para ayudar a los usuarios a interactuar con su sitio.

Para crear su primer chatbot, usaremos el nuevo conjunto de herramientas de flujo de diálogo de Google. Aprovecha el poderoso aprendizaje de la máquina, así como el habla a texto. Puede incorporarse directamente a su sitio web como un widget o personalizado a sus necesidades.

Si está en el proceso de planificar un nuevo sitio, necesitará consejos sobre todo, desde lo ideal. Creador de sitios web a la que Alojamiento web Servicio para elegir, así que echa un vistazo a nuestros guías. ¿Creando un nuevo sistema de diseño? Guardarlo de forma segura en almacenamiento en la nube Así que es accesible para todo su equipo. Ahora sobre cómo crear un chatbot ...

01. Crea una cuenta

Ir dialogflow.com y crea tu cuenta. Regístrese y acepte los permisos para habilitar el flujo de diálogo para tener acceso a su cuenta.

02. Crea un agente

DialoGFLOW utiliza el término 'agente' para representar instancias de su AI. Piense en el agente como la inteligencia virtual que está creando. Podrías tener muchos agentes que trabajan para usted, cada uno con su propia personalidad y propósito.

Haga clic en el botón 'Crear agente' e ingrese un nombre para su agente: 'Hal 9000'.

03. Crea una intención

Primero, necesitas crear una intención. Estamos definiendo la 'intención' de las entradas del usuario. Haga clic en 'Crear intento' y nombrarlo 'puertas abiertas'. Presione 'Guardar'.

04. Entrena a la AI para esta intención.

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'.

Entrena a la AI para esta intención al proporcionar frases que un usuario pueda usar. El NLP AI usará estas y las variaciones derivadas para entrenar al agente. Agregue las siguientes frases de entrenamiento en la ventana 'Frases de capacitación' y agregue tuya como lo desee:

'Abre las puertas de la bahía del pod, Hal'.
'Abre las puertas.'
'¡Déjame entrar, Hal!'

05. Añadir respuestas

A continuación, debe agregar algunas respuestas con las que responderá el agente. Usted ingresa en la ventana 'Respuestas'. Prueba algo así:

'Me temo que no puedo hacer eso, Dave'.
'No puedo hacer eso ahora mismo'.

Luego, presione 'Agregar respuestas' y 'Guardar' en la parte superior nuevamente. Verá notificaciones de que el agente está siendo entrenado y luego está listo.

06. Probar el Chatbot

En el lado derecho de la pantalla hay una herramienta de prueba. El Chatbot utilizará el servicio de voz a texto de Google para traducir su voz al texto si lo intentas. Debe ver los resultados de su solicitud y la respuesta seleccionada el Agente de AI. ¡Muy genial!

07. Crea y usa una entidad.

Las entidades son conceptos que se pueden definir y reutilizar en las respuestas del agente como variables. Vamos a entrenar el AI para comprender cuando un usuario está expresando una emoción, luego use eso en su respuesta al usuario.

En el menú de la izquierda, haga clic en 'Entidades'. Escriba 'emoción' para el nombre de su nueva entidad. Mantenga a 'Definir Sinónimos' revisado. Haga clic en la siguiente tabla y escriba 'enojado' como la primera emoción. Luego haga clic a la derecha de eso y agregue sinónimos como 'MAD', 'Molesto', y así sucesivamente. Luego, agregue otra entrada para 'asustado' y usar los sinónimos 'miedo', 'aterrorizado', etc., que le guste. Presione 'Guardar' cuando termine.

Esto ha capacitado al agente para comprender que 'enojado' y 'asustado' son emociones que un usuario puede comunicarse. Todos aquellos sinónimos son variaciones que pueden ocurrir. El AI también generará algunos.

08. Crea una nueva intención.

Ahora vamos a crear una nueva intención de usar la entidad 'emoción' que hemos creado. Llame a esta intención 'Emociones' y haga clic en 'Guardar'.

A continuación, agregue nuevas frases de entrenamiento, como "Me está asustando", "Me está enojado", y "Estoy muy enojado", usando variaciones de palabras clave enojadas y asustadas. Esto capacitará al agente para comprender las diversas formas en que un usuario puede expresar esta declaración emocional.

Notarás que el sistema resalta las palabras asustadas y enojadas para ti. Ya está marcando estas como entidades. También ha agregado una entrada en la ventana 'Acciones y parámetros'. Esto le permite usar estas entidades en sus respuestas, también.

09. Añadir una respuesta usando la nueva 'emoción' entidad

En la ventana Respuestas, agregue nuevas respuestas que usen esta nueva entidad. Tenga en cuenta los '$' para denotar la entidad '$ emoción'. Intenta agregar estas respuestas:

"Lamento que estés sintiendo $ emoción, Dave".
'Sentir $ Emotion es una respuesta humana, Dave'.

Haga clic en 'Agregar respuestas' y presione el botón 'Guardar' en la parte superior de la pantalla para guardar la intención completa.

10. Pon a prueba tu chatbot de nuevo

Trate de decir o escribiendo las siguientes frases en la herramienta de prueba.

'Me estás haciendo muy enojado Hal'.
'Usted me está volviendo loco.'

Observe cómo respondió usando 'asustado' con el segundo? Utilizó nuestro sinónimo, 'asustado' para saber que queríamos estar asustados. Muy genial.

Siéntase libre de jugar con esto, además de agregar más efectos y respuestas que le guste y luego agregaremos esto a una página web.

11. Activar la integración web.

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot.

Para agregarlo a su página web, haga clic en 'Integraciones' en el menú de la izquierda. Luego haga clic en la casilla 'Demo web' para encender esa opción.

Aparecerá una ventana emergente que le muestra un enlace directo para que pueda usar para probar su integración de inmediato. También mostrará un fragmento de código que puede usar para soltar el widget en su propio sitio web. Copie ese fragmento en el portapapeles para que pueda pegarlo en su sitio.

12. Crea una página web básica y agrega el fragmento.

Cree una página HMTL básica e incluya ese fragmento de código Siguiente. Pruebe el siguiente código y carguelo a su servidor o ejecútelo en su servidor local. Reemplace el fragmento de abajo con el que copió desde su agente de flujo de diálogo:

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; net - ai chatbot & lt; / title & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; iframe
    Permitir = "Micrófono"; ancho = "350" altura = "430" src = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85A5-C373575A33AAAAA" & GT;
& lt; / iframe & gt;
& lt; / body & gt;
& lt; / html & gt;

Este artículo se publicó originalmente en el número 312 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 312 o suscribirse a la red .

¿Qué disposición de obtener más información sobre cómo puede traer AI a sus sitios y aplicaciones?

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'.

¿Con ganas de obtener más información sobre cómo puede traer AI a sus diseños? Josh Clark, fundador de Big Medium, le dará a su nota clave 'ai es su nuevo material de diseño' en Generar New York el 25 de abril, en el que le enseñará a usar contenido generado por la máquina, una percepción e interacción como un material de diseño en Tu trabajo cotidiano.

Generar carreras de Nueva York desde el 24 al 25 de abril. Obtenga sus boletos ahora !

Artículos relacionados:

Una guía para la visión de la nube de Google.
7 enormes tendencias tecnológicas en 2019 que los diseñadores necesitan saber
¿Los diseñadores serán reemplazados por robots?

Construye un chatbot AI-Powered

01. Crea una cuenta

02. Crea un agente

03. Crea una intención

04. Entrena a la AI para esta intención.

05. Añadir respuestas

06. Probar el Chatbot

07. Crea y usa una entidad.

08. Crea una nueva intención.

09. Añadir una respuesta usando la nueva 'emoción' entidad

10. Pon a prueba tu chatbot de nuevo

11. Activar la integración web.

12. Crea una página web básica y agrega el fragmento.

¿Qué disposición de obtener más información sobre cómo puede traer AI a sus sitios y aplicaciones?

Cómo - Artículos más populares

Cómo tomar una captura de pantalla en una MAC

Cómo convertir WordPress en un constructor visual

Cómo codificar efectos de texto inteligentes con CSS

5 Nuevas características CSS calientes y cómo usarlas

Construye aplicaciones móviles multiplataformas con el aleteo de Google

Comienza con difuso

Prototipos perfectos y diseños de mano con Marvel

Haz un compuesto en Photoshop

Categorías