スマートチャットボット
中級
これはMiscellaneous, AI Chatbot, Multimodal AI分野の自動化ワークフローで、13個のノードを含みます。主にChat, Agent, HttpRequestTool, ChatTrigger, LmChatOpenAiなどのノードを使用。 GPT-5-nano、ウェブ検索、対話メモリを使用して、スマートチャットボットを構築
前提条件
- •ターゲットAPIの認証情報が必要な場合あり
- •OpenAI API Key
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"meta": {
"instanceId": "3dd9efe937707b07af3ede5b46321ec0e2a9e49d7ef201e274c4c4aa1a4615a6",
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "3d75673b-dd38-4c8f-81c5-715bec2a432b",
"name": "チャットメッセージ受信時",
"type": "@n8n/n8n-nodes-langchain.chatTrigger",
"position": [
-160,
0
],
"webhookId": "57d8741d-57df-47c7-aaaf-e68cc8ce197b",
"parameters": {
"public": true,
"options": {
"title": "Welcome to Sofia",
"subtitle": "Start a chat. We're here to help you 24/7.",
"customCss": "\n /* Variables CSS para una paleta de colores limpia y fácil de mantener */\n :root {\n --color-background-primary: #F7F5F2; /* Un blanco roto y cálido, como papel */\n --color-background-secondary: #FFFFFF; /* Blanco puro para burbujas de mensaje */\n --color-text-primary: #333333; /* Gris oscuro en lugar de negro puro */\n --color-text-secondary: #888888; /* Gris medio para descripciones */\n --color-border: #E8E8E8; /* Gris muy claro para bordes sutiles */\n --color-accent: #B0B7C6; /* Azul grisáceo para los mensajes del usuario y el botón */\n --color-accent-disabled: #DCDCDC; /* Gris claro para el botón deshabilitado */\n }\n\n /* Reset básico para el cuerpo del chat */\n body {\n margin: 0 !important;\n padding: 0 !important;\n font-family: 'Helvetica Neue', Arial, sans-serif !important;\n background-color: var(--color-background-primary) !important;\n color: var(--color-text-primary) !important;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n /* Contenedor principal del chat */\n #n8n-chat {\n background-color: var(--color-background-primary) !important;\n color: var(--color-text-primary) !important;\n display: flex !important;\n flex-direction: column !important;\n height: 100vh !important;\n width: 100% !important; /* Asegura que ocupe todo el ancho */\n border-radius: 0 !important; /* Elimina bordes redondeados si la app es fullscreen */\n box-shadow: none !important; /* Elimina cualquier sombra global */\n overflow: hidden !important;\n }\n\n .n8n-chat { /* Clase adicional del main */\n background-color: var(--color-background-primary) !important;\n height: 100% !important;\n width: 100% !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n }\n\n /*\n Cabecera del chat: limpia y con alto contraste\n */\n .chat-header {\n background-color: var(--color-background-secondary) !important;\n padding: 24px !important;\n border-bottom: 1px solid var(--color-border) !important;\n text-align: left !important;\n box-shadow: none !important; /* Asegura que no haya sombras extra */\n }\n\n .chat-header h1 {\n font-size: 1.35rem !important; /* Ligeramente más grande */\n font-weight: 500 !important;\n margin: 0 !important;\n color: var(--color-text-primary) !important;\n }\n\n .chat-header p {\n font-size: 0.9rem !important;\n color: var(--color-text-secondary) !important;\n margin-top: 6px !important;\n line-height: 1.4 !important;\n }\n\n /*\n Cuerpo de los mensajes\n */\n .chat-body {\n flex-grow: 1 !important;\n padding: 24px !important;\n overflow-y: auto !important;\n display: flex !important;\n flex-direction: column !important;\n gap: 12px !important;\n background-color: var(--color-background-primary) !important; /* Fondo del área de mensajes */\n }\n\n .chat-messages-list {\n display: flex !important;\n flex-direction: column !important;\n list-style: none !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n /* Estilo de cada burbuja de mensaje */\n .chat-message {\n max-width: 80% !important;\n margin-bottom: 12px !important; /* Espacio entre mensajes */\n }\n\n .chat-message-from-bot {\n background-color: var(--color-background-secondary) !important;\n color: var(--color-text-primary) !important;\n border-radius: 12px 12px 12px 4px !important; /* Bordes suaves, esquina inferior izquierda menos redondeada */\n padding: 14px 18px !important;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; /* Sombra muy sutil */\n align-self: flex-start !important;\n }\n\n .chat-message-from-user { /* Necesitarías una clase para mensajes de usuario si aún no existe */\n background-color: var(--color-accent) !important;\n color: var(--color-background-secondary) !important;\n border-radius: 12px 12px 4px 12px !important; /* Bordes suaves, esquina inferior derecha menos redondeada */\n padding: 14px 18px !important;\n align-self: flex-end !important; /* Los mensajes del usuario se alinean a la derecha */\n margin-left: auto !important; /* Empuja el mensaje a la derecha */\n }\n\n /* Asegura que el contenido markdown dentro de los mensajes se vea bien */\n .chat-message-markdown p {\n margin: 0 !important;\n line-height: 1.5 !important;\n }\n\n /*\n Pie de página y barra de entrada de texto\n */\n .chat-footer {\n background-color: var(--color-background-secondary) !important;\n border-top: 1px solid var(--color-border) !important;\n padding: 16px 24px !important; /* Menos padding vertical para una barra más compacta */\n box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.03) !important; /* Sombra superior sutil */\n }\n\n .chat-input {\n display: flex !important;\n align-items: center !important;\n gap: 12px !important;\n }\n\n .chat-input textarea {\n flex-grow: 1 !important;\n border: 1px solid var(--color-border) !important;\n background-color: var(--color-background-primary) !important;\n border-radius: 24px !important; /* Bordes más redondeados para la caja de texto */\n padding: 12px 20px !important;\n font-size: 1rem !important;\n color: var(--color-text-primary) !important;\n resize: none !important;\n transition: border-color 0.2s !important;\n min-height: 48px !important; /* Altura mínima para la caja de texto */\n box-sizing: border-box !important; /* Asegura que padding no aumente el tamaño total */\n }\n\n .chat-input textarea:focus {\n border-color: var(--color-accent) !important;\n outline: none !important;\n box-shadow: 0 0 0 2px rgba(176, 183, 198, 0.2) !important; /* Efecto de enfoque suave */\n }\n\n .chat-input-send-button {\n background-color: var(--color-accent) !important;\n color: var(--color-background-secondary) !important;\n width: 44px !important; /* Ligeramente más pequeño */\n height: 44px !important; /* Ligeramente más pequeño */\n border-radius: 50% !important;\n border: none !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n cursor: pointer !important;\n transition: background-color 0.2s, transform 0.1s !important;\n }\n\n .chat-input-send-button:hover:not(:disabled) {\n background-color: #9da7bd !important; /* Tono más oscuro al pasar el ratón */\n transform: translateY(-1px); /* Pequeño efecto de elevación */\n }\n\n .chat-input-send-button:disabled {\n background-color: var(--color-accent-disabled) !important;\n color: #a0a0a0 !important; /* Color más oscuro para el ícono deshabilitado */\n cursor: not-allowed !important;\n box-shadow: none !important;\n }\n",
"getStarted": "Nueva conversaicón",
"responseMode": "responseNodes",
"allowedOrigins": "*",
"inputPlaceholder": "Type your question..",
"showWelcomeScreen": true,
"loadPreviousSession": "memory"
},
"initialMessages": "Hi there! 👋\nMy name is Sofia. How can I assist you today?"
},
"typeVersion": 1.3
},
{
"id": "dafed6bb-63f9-4ac9-a807-1b20a951b035",
"name": "チャットへの返信",
"type": "@n8n/n8n-nodes-langchain.chat",
"position": [
768,
0
],
"parameters": {
"message": "={{ $json.output }}",
"options": {}
},
"typeVersion": 1
},
{
"id": "5e6d7308-c187-4faf-bfdb-c184bac6de67",
"name": "AIエージェント",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
272,
0
],
"parameters": {
"options": {
"systemMessage": "You are a helpful assistant"
}
},
"typeVersion": 2.2
},
{
"id": "65dea8d5-968d-46bf-ad23-cf5758c0210e",
"name": "GPT",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
224,
208
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-5-nano",
"cachedResultName": "gpt-5-nano"
},
"options": {
"temperature": 0.7
}
},
"credentials": {
"openAiApi": {
"id": "dfSo8Emt7Jfhxkoj",
"name": "OpenAi account"
}
},
"typeVersion": 1.2
},
{
"id": "8d2527da-6f86-4c74-8adc-7b54a9a9877c",
"name": "IAメモリ",
"type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
"position": [
352,
208
],
"parameters": {
"contextWindowLength": 10
},
"typeVersion": 1.3
},
{
"id": "a24bdbea-eebd-4aff-975b-48e913d6a680",
"name": "検索",
"type": "n8n-nodes-base.httpRequestTool",
"position": [
480,
208
],
"parameters": {
"url": "={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('URL', ``, 'string') }}",
"options": {},
"toolDescription": "Search using Bing example: https://www.bing.com/search?q=example"
},
"typeVersion": 4.2
},
{
"id": "9ca16d28-cc27-4c13-b550-a0752643c734",
"name": "シンプルメモリ",
"type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
"position": [
-160,
208
],
"parameters": {},
"typeVersion": 1.3
},
{
"id": "f3bed1f0-8221-4269-9e5b-107f449d9fd3",
"name": "付箋",
"type": "n8n-nodes-base.stickyNote",
"position": [
-208,
-192
],
"parameters": {
"color": 5,
"width": 352,
"height": 544,
"content": "## Chat\nWhen a chat message is received: Triggers the flow when a user sends a message to the chat. It also manages the appearance and initial setup.\nIt also has session memory, so it remembers up to 5 sessions (this can be increased)."
},
"typeVersion": 1
},
{
"id": "998c0873-b2b2-4590-8a66-b171b98f3017",
"name": "付箋1",
"type": "n8n-nodes-base.stickyNote",
"position": [
192,
-192
],
"parameters": {
"color": 5,
"width": 400,
"height": 544,
"content": "## Agent\nAI Agent: The brain of the chatbot. It uses memory, the GPT model, and Bing's search engine to generate an intelligent and configurable response."
},
"typeVersion": 1
},
{
"id": "53ad233c-41e6-4513-ac4c-e8c00728817c",
"name": "付箋2",
"type": "n8n-nodes-base.stickyNote",
"position": [
640,
-192
],
"parameters": {
"color": 5,
"width": 384,
"height": 544,
"content": "## Response\nRespond to Chat: Sends the AI-generated message back to the user in the chat and stores the conversation in memory."
},
"typeVersion": 1
},
{
"id": "ba192be2-9ccb-4825-9aa4-96371f5c4cfe",
"name": "付箋3",
"type": "n8n-nodes-base.stickyNote",
"position": [
576,
-400
],
"parameters": {
"color": 3,
"width": 448,
"content": "## BY OXSR\nBy OXSR, visit my profile for professional and business workflows \nN8N Acc: https://n8n.io/creators/oxsr11/\nGit: https://github.com/OXSR\nMail: oriolrotllant3@gmail.com"
},
"typeVersion": 1
},
{
"id": "09ca881c-bf3a-4dda-a0c0-fe2846a716e4",
"name": "付箋4",
"type": "n8n-nodes-base.stickyNote",
"position": [
-208,
-400
],
"parameters": {
"color": 3,
"width": 736,
"content": "## Welcome\nEste flujo de trabajo está diseñado para crear un chatbot inteligente y funcional. Al recibir un mensaje, el chatbot utiliza una potente IA con memoria y la capacidad de buscar en la web para generar respuestas precisas y conversacionales. La respuesta se envía de vuelta al usuario con un diseño limpio y minimalista, perfecto para una experiencia de usuario moderna y fluida."
},
"typeVersion": 1
},
{
"id": "8b56a3d0-5990-4c11-b9da-a07c42cc654b",
"name": "付箋5",
"type": "n8n-nodes-base.stickyNote",
"position": [
1072,
-400
],
"parameters": {
"color": 4,
"width": 256,
"height": 752,
"content": "## LICENSE\nThis project is distributed under an open source license. You are free to use, modify, and distribute this work.\n\nKey Terms:\n\nUse: You may use this project for personal, educational, or commercial purposes.\n\nModification: You are permitted to modify the code or content as you wish.\n\nDistribution: You may share copies of the project, both in its original and modified versions."
},
"typeVersion": 1
}
],
"pinData": {
"When chat message received": [
{
"action": "sendMessage",
"chatInput": "hola!",
"sessionId": "06fc7f8d-0710-4f94-b2b8-7a1072021fea"
}
]
},
"connections": {
"65dea8d5-968d-46bf-ad23-cf5758c0210e": {
"ai_languageModel": [
[
{
"node": "5e6d7308-c187-4faf-bfdb-c184bac6de67",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"a24bdbea-eebd-4aff-975b-48e913d6a680": {
"ai_tool": [
[
{
"node": "5e6d7308-c187-4faf-bfdb-c184bac6de67",
"type": "ai_tool",
"index": 0
}
]
]
},
"5e6d7308-c187-4faf-bfdb-c184bac6de67": {
"main": [
[
{
"node": "dafed6bb-63f9-4ac9-a807-1b20a951b035",
"type": "main",
"index": 0
}
]
]
},
"8d2527da-6f86-4c74-8adc-7b54a9a9877c": {
"ai_memory": [
[
{
"node": "5e6d7308-c187-4faf-bfdb-c184bac6de67",
"type": "ai_memory",
"index": 0
}
]
]
},
"9ca16d28-cc27-4c13-b550-a0752643c734": {
"ai_memory": [
[
{
"node": "3d75673b-dd38-4c8f-81c5-715bec2a432b",
"type": "ai_memory",
"index": 0
}
]
]
},
"3d75673b-dd38-4c8f-81c5-715bec2a432b": {
"main": [
[
{
"node": "5e6d7308-c187-4faf-bfdb-c184bac6de67",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は？
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか？
中級 - その他, AIチャットボット, マルチモーダルAI
有料ですか？
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス（OpenAI APIなど）は別途料金が発生する場合があります。
関連ワークフロー
GPT-5 nanoとGoogle Sheetsを使ってウェブサイトをスクレイピングして質問に回答
GPT-5 nanoとGoogle Sheetsでウェブサイトをスクレイピングし、質問に答える
If
Set
Xml
+
If
Set
Xml
44 ノードOriol Seguí
市場調査
Instagramカルーセル広告をAIチャットで自動化
AIとBlotatoを使用して5つのプラットフォームでソーシャルメディアのカルーセルを作成・配信
If
Wait
Merge
+
If
Wait
Merge
29 ノードSabrina Ramonov 🍄
その他
🚀 Shopifyブランドを対象としたAI駆動型WhatsAppカスタマーサポート
Shopify向けのAI駆動WhatsAppカスタマーサポート（LLMエージェント）
Set
Slack
Switch
+
Set
Slack
Switch
30 ノードRuthwik
その他
HTX AIエージェントv1.02
HTX API、GPT-4o、Telegramを使って暗号通貨市場データを分析
Set
Code
Telegram
+
Set
Code
Telegram
35 ノードDon Jayamaha Jr
その他
💥 ChatGPT-5を使って最初のAIエージェントを構築する
GPT-5、Googleカレンダー、およびスプレッドシートを使って知識ベースとスケジュールAIアシスタントを作成
Gmail Tool
Agent
Google Sheets Tool
+
Gmail Tool
Agent
Google Sheets Tool
14 ノードDr. Firas
その他
Google カレンダーとテーブルを使用して AI 駆動のバーチャルリセプションストラフを作成
Googleカレンダーとテーブルを使ってAI駆動のバーチャルリセプションストを作成
Google Sheets
Agent
Google Sheets Tool
+
Google Sheets
Agent
Google Sheets Tool
12 ノードRisper
その他
