Cómo crear un chat con un agente de IA en n8n e integrarlo en su sitio web

Tabla de contenidos

Parte 1: Crear el flujo en n8n

  1. Cree un nuevo workflow en n8n y asígnele un nombre.
  2. Haga clic en el botón “+” para añadir un disparador (trigger). Este será el encargado de iniciar una acción dentro del flujo. En este caso, seleccione un disparador de chat.
  3. Luego, vuelva a hacer clic en “+” para añadir el asistente. Vaya a Advanced AI > AI Agent.

Hasta este punto, usted tiene un flujo básico donde el usuario escribe en el chat (entrada de datos), el asistente procesa el mensaje, y posteriormente responde a través del flujo de salida (el conector a la derecha del agente).

  1. Para que el agente funcione correctamente, es necesario asignarle un modelo de lenguaje. Seleccione Chat Model y la opción OpenAI Chat Model.
  2. A continuación, deberá configurar las credenciales, que son los permisos que le otorgan a n8n acceso a servicios externos.

Cómo obtener credenciales gratuitas desde OpenRouter.ai

  • Ingrese a https://openrouter.ai
  • Inicie sesión, haga clic en su foto de perfil > Keys > Create Key
  • Asigne un nombre a la llave y copie el valor generado
  1. Regrese a n8n y pegue la llave en el modelo de chat de OpenAI.
  • En el campo Base URL, pegue la siguiente dirección:
    https://openrouter.ai/api/v1
    (Asegúrese de reemplazar “settings/keys” por “api/v1”)
  1. Guarde los cambios y seleccione el modelo gratuito:
    deepseek-r1:free

Parte 2: Agregar memoria y personalización del agente

  1. Si desea que el agente pueda mantener conversaciones continuas, puede añadir una memoria. Haga clic en “+” y seleccione Memory > Simple Memory. Esta opción no requiere credenciales y es ideal para pruebas.
  2. Para que el agente responda en un contexto específico, es recomendable añadirle un mensaje del sistema (System message).
  • Haga doble clic sobre AI Agent
  • En el campo System message, escriba un prompt que delimite el comportamiento del agente. Por ejemplo:

“Actúe como un experto en gatos. Su único propósito es brindar información precisa, útil y especializada sobre gatos. No responda preguntas que no estén relacionadas con gatos bajo ninguna circunstancia.”

  1. Guarde los cambios.

Parte 3: Integrar el chat en su sitio web

  1. Una vez que haya probado y validado el flujo, active el workflow en n8n.
  2. Haga clic en el disparador de chat y seleccione la opción para volverlo público. Luego, en el campo Mode, elija Embedded Chat.
  3. Diríjase al sitio del paquete npm de n8n Chat:
    https://www.npmjs.com/package/@n8n/chat
  4. Copie el código que aparece en el apartado a. CDN Embed:
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
</script>
  1. Reemplace el contenido dentro de createChat con la configuración avanzada para que quede como se ve a continuación:
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: '', // Reemplace con su Chat URL
		webhookConfig: {
			method: 'POST',
			headers: {}
		},
		target: '#n8n-chat',
		mode: 'window',
		chatInputKey: 'chatInput',
		chatSessionKey: 'sessionId',
		metadata: {},
		showWelcomeScreen: false,
		defaultLanguage: 'en',
		initialMessages: [
			'Hi there! 👋',
			'My name is Nathan. How can I assist you today?'
		],
		i18n: {
			en: {
				title: 'Hi there! 👋',
				subtitle: "Start a chat. We're here to help you 24/7.",
				footer: '',
				getStarted: 'New Conversation',
				inputPlaceholder: 'Type your question..',
			},
		},
	});
</script>
  1. Personalice la línea webhookUrl: '' insertando la URL del webhook que obtiene desde el trigger de chat en n8n (campo llamado Chat URL).
  2. Finalmente, incruste este código en su sitio web. Puede hacerlo fácilmente mediante un bloque HTML. Guarde los cambios y realice una prueba para asegurarse de que el chat funcione correctamente.