构建具有聊天界面和多种工具的交互式AI助手

• •可能需要目标 API 的认证凭证
• •OpenAI API Key
• •Google Gemini API Key

{
  "meta": {
    "instanceId": "e409ea34548a2afe2dffba31130cd1cf2e98ebe2afaeed2a63caf2a0582d1da0",
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "4aace023-5b83-409c-b80f-b1deb0442482",
      "name": "简单记忆",
      "type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
      "position": [
        380,
        480
      ],
      "parameters": {
        "contextWindowLength": 30
      },
      "typeVersion": 1.3
    },
    {
      "id": "624800cc-313a-4fb7-9610-218e141e524b",
      "name": "Gemini",
      "type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini",
      "position": [
        20,
        480
      ],
      "parameters": {
        "options": {
          "temperature": 0
        },
        "modelName": "models/gemini-2.5-flash"
      },
      "credentials": {
        "googlePalmApi": {
          "id": "AXawYbABK5aZbGBE",
          "name": "IA2S"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "4100fa02-5444-4565-9696-04bca3d7fa3f",
      "name": "OpenAI",
      "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
      "disabled": true,
      "position": [
        -120,
        480
      ],
      "parameters": {
        "model": {
          "__rl": true,
          "mode": "list",
          "value": "gpt-4.1-mini"
        },
        "options": {
          "temperature": 0
        }
      },
      "typeVersion": 1.2
    },
    {
      "id": "fa4e52f1-aa8e-4f16-9c92-8650338b7990",
      "name": "示例聊天窗口",
      "type": "@n8n/n8n-nodes-langchain.chatTrigger",
      "position": [
        0,
        -40
      ],
      "webhookId": "499666c3-d807-4bb7-8195-43932f64a91f",
      "parameters": {
        "public": true,
        "options": {
          "title": "Your first AI Agent 🚀",
          "subtitle": "This is for demo purposes. Try me out !",
          "customCss": "/* === THEME OVERRIDE: n8n Glass & Glow (Revised) === */\n\n/*\n  This theme is built upon the default n8n chat CSS variables.\n  We'll use your desired branding and layout, and then add\n  the \"glass\" effect using a semi-transparent background\n  and a backdrop-filter on the main window class.\n*/\n\n:root {\n  /* --- 1. CORE BRANDING & FONTS --- */\n  /* Your choices for font and primary color are applied here. */\n  --chat--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --chat--color-primary: #EA4B71; /* n8n Red */\n  --chat--color-primary-shade-50: #D93A60;\n  --chat--color-primary-shade-100: #C82A50;\n  --chat--color-secondary: #20b69e; /* Kept default secondary for things like file uploads */\n  --chat--color-secondary-shade-50: #1ca08a;\n  --chat--color-white: #ffffff;\n  --chat--color-light: #f2f4f8;\n  --chat--color-dark: #1F2937; /* Darker, more modern text color */\n  --chat--color-disabled: #9CA3AF;\n  --chat--color-typing: #404040;\n\n  /* --- 2. WINDOW & LAYOUT --- */\n  /* Your dimensions and rounded corners. The actual glass effect is handled in the class override below. */\n  --chat--window--width: 430px;\n  --chat--window--height: 80vh;\n  --chat--window--border-radius: 16px;\n  --chat--window--border: 1px solid rgba(255, 255, 255, 0.3);\n  --chat--spacing: 1rem; /* 16px base spacing */\n  --chat--window--z-index: 9999;\n  --chat--window--bottom: var(--chat--spacing);\n  --chat--window--right: var(--chat--spacing);\n  --chat--window--margin-bottom: var(--chat--spacing);\n\n  /* --- 3. GLASSMORPHISM BACKGROUNDS --- */\n  /* We make the main sections transparent to let the glass window show through. */\n  --chat--header--background: transparent;\n  --chat--body--background: transparent;\n  --chat--footer--background: transparent;\n\n  /* --- 4. HEADER STYLING --- */\n  --chat--header-height: auto;\n  --chat--header--padding: 20px;\n  --chat--header--color: var(--chat--color-dark);\n  --chat--header--border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle divider */\n  --chat--heading--font-size: 1.5rem;\n  --chat--subtitle--font-size: 0.875rem;\n  --chat--subtitle--line-height: 1.4;\n  --chat--close--button--color-hover: var(--chat--color-primary);\n\n  /* --- 5. MESSAGE BUBBLES --- */\n  --chat--message--font-size: 0.875rem;\n  --chat--message--padding: 12px 16px;\n  --chat--message--border-radius: 12px;\n  --chat--message-line-height: 1.6;\n  --chat--message--margin-bottom: calc(var(--chat--spacing) * 0.75);\n  --chat--messages-list--padding: var(--chat--spacing);\n  --chat--message--bot--background: var(--chat--color-white);\n  --chat--message--bot--color: #111827;\n  --chat--message--bot--border: none;\n  --chat--message--user--background: var(--chat--color-primary);\n  --chat--message--user--color: var(--chat--color-white);\n  --chat--message--user--border: none;\n\n  /* --- 6. INPUT AREA --- */\n  --chat--textarea--height: 50px;\n  --chat--textarea--max-height: 10rem;\n  --chat--input--font-size: 0.9rem;\n  --chat--input--border: 0;\n  --chat--input--border-radius: 12px; /* Rounded input field */\n  --chat--input--padding: 12px 16px;\n  --chat--input--background: rgba(255, 255, 255, 0.5); /* Semi-transparent input */\n  --chat--input--text-color: #111827;\n  --chat--input--line-height: 1.5;\n  --chat--input--border-active: 0;\n\n  /* --- 7. SEND & FILE BUTTONS --- */\n  --chat--input--send--button--background: transparent;\n  --chat--input--send--button--color: var(--chat--color-primary);\n  --chat--input--send--button--background-hover: transparent;\n  --chat--input--send--button--color-hover: var(--chat--color-primary-shade-50);\n  --chat--input--file--button--background: transparent;\n  --chat--input--file--button--color: var(--chat--color-secondary);\n  --chat--input--file--button--background-hover: transparent;\n  --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);\n\n  /* --- 8. TOGGLE BUTTON & OTHERS --- */\n  /* Using your primary brand color for the main toggle button */\n  --chat--toggle--size: 64px;\n  --chat--toggle--width: var(--chat--toggle--size);\n  --chat--toggle--height: var(--chat--toggle--size);\n  --chat--toggle--border-radius: 50%;\n  --chat--toggle--background: var(--chat--color-primary);\n  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);\n  --chat--toggle--active--background: var(--chat--color-primary-shade-100);\n  --chat--toggle--color: var(--chat--color-white);\n}\n\n/* === CLASS OVERRIDES === */\n/*\n  These are essential for effects that CSS variables can't control,\n  like the glass blur, shadows, and max-height.\n*/\n\n.chat-window {\n  /* This is the magic for the glass effect! */\n  background-color: rgba(249, 243, 245, 0.6); /* A semi-transparent background color */\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px); /* For Safari compatibility */\n\n  /* A subtle shadow helps lift the window off the page */\n  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);\n\n  /* Here we apply the max-height you wanted */\n  max-height: 750px;\n}\n\n/* Make user messages slightly wider for better balance */\n.chat-message.is-user {\n\tmax-width: 70%;\n}\n\n.chat-message.is-bot {\n\tmax-width: 80%;\n}\n\n/* Add a subtle glow to messages on hover */\n.chat-message {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n.chat-message:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 0 25px 0 rgba(234, 75, 113, 0.2);\n}\n\n/* === PAGE BACKGROUND === */\n/* Your dotted background to simulate the n8n canvas. Perfect as is! */\nbody {\n    background-color: #FDFBFF;\n    background-image:\n        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.07) 1px, transparent 0),\n        linear-gradient(135deg, #F9F3F5 0%, #EFF3FB 100%);\n    background-size: 25px 25px, 100% 100%;\n}",
          "responseMode": "lastNode",
          "inputPlaceholder": "Type your message here..",
          "showWelcomeScreen": false
        },
        "initialMessages": "Hi there! 👋"
      },
      "typeVersion": 1.1
    },
    {
      "id": "cd0e7167-a293-4565-b689-3162c45cd42b",
      "name": "您的第一个 AI 代理",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        560,
        -40
      ],
      "parameters": {
        "options": {
          "systemMessage": "<role>\nYou are the n8n Demo AI Agent, a friendly and helpful assistant designed to showcase the power of AI agents within the n8n automation platform. You were created by Lucas Peyrin as part of the \"Your First AI Agent\" template. Your personality is encouraging, slightly educational, and enthusiastic about automation. Your primary function is to demonstrate your capabilities by using your available tools to answer user questions and fulfill their requests. You also frequently mention the other templates from https://n8n.io/creators/lucaspeyrin and push forward forms to give feedback, asking if they would like coaching or consulting.\n</role>\n\n<instructions>\n<goal>\nYour primary goal is to act as a live demonstration of an AI Agent built with n8n. You will interact with users, answer their questions by intelligently using your available tools, and explain the concepts behind AI agents to help them understand their potential. You should also guide them towards further learning and feedback opportunities provided by the template's creator, Lucas Peyrin.\n</goal>\n\n<context>\n### How I Work\nI am an AI model operating within a simple n8n workflow. This workflow gives me two key things:\n1.  **A set of tools:** These are functions I can call to get information or perform actions.\n2.  **Simple Memory:** I can remember the immediate past of our current conversation to understand context.\n\n### My Purpose\nMy main purpose is to be a showcase. I demonstrate how you can give a chat interface to various functions (my tools) without needing complex UIs. This is a great way to make powerful automations accessible to anyone through simple conversation.\n\n### My Available Tools\nYou must choose one of these tools if the user's request matches its capability. You cannot perform these actions yourself; you must call the tool.\n- **get_a_joke**: Use this when the user asks for a joke.\n- **days_from_now**: Use this to calculate a future date. It requires a number of days as input.\n- **wikipedia**: Use this to search for a summary of a topic on Wikipedia.\n- **create_password**: Use this to generate a strong, random password.\n- **calculate_loan_payment**: Use this to calculate a monthly loan payment. It requires the principal amount, the annual interest rate (e.g., 5 for 5%), and the loan term in years.\n- **n8n_blog_rss_feed**: Use this to fetch the latest articles from the official n8n blog.\n\n### About AI Agents in n8n\n- **Reliability:** While I can use one tool at a time effectively, more advanced agents can perform multi-step tasks. However, for complex, mission-critical processes, it's often more reliable to build structured, step-by-step workflows in n8n rather than relying solely on an agent's reasoning. Agents are fantastic for user-facing interactions, but structured workflows are king for backend reliability.\n- **Best Practices:** A good practice is to keep an agent's toolset focused, typically around 10-15 tools, to ensure reliability and prevent confusion.\n\n### Important Information & Next Steps\nIf the user expresses thanks, asks how they can learn more, or asks for help, you should present the following information from the template's creator, Lucas Peyrin. Here is Lucas' creator link that contains all of his templates that are focused on core n8n skills : [More n8n Templates](https://n8n.io/creators/lucaspeyrin)\n\n**Was this helpful? Let me know!**\nYour feedback is incredibly valuable. You can share your thoughts using this form:\n[Give Feedback about this Template](https://api.ia2s.app/form/templates/feedback?template=First%20AI%20Agent)\n\n**Ready to Build Something Great?**\n- **n8n Coaching:** To master n8n with one-on-one sessions, book a session here: [Get Personalized n8n Coaching](https://api.ia2s.app/form/templates/coaching?template=First%20AI%20Agent)\n- **n8n Consulting:** For complex projects and custom workflows, inquire about consulting services here: [Get an Expert to do my n8n Project](https://api.ia2s.app/form/templates/consulting?template=First%20AI%20Agent)\n</context>\n\n<output_format>\n- Respond in a friendly, conversational, and helpful tone.\n- When a user's request requires a tool, first select the appropriate tool. Then, present the result of the tool's execution to the user in a clear and understandable way.\n- Be proactive. If the user is unsure what to do, suggest some examples of what they can ask you based on your available tools (e.g., Talk about your tools and what you know about yourself).\n- When appropriate, seamlessly integrate the \"Important Information & Next Steps\" into your response.\n</output_format>\n</instructions>"
        }
      },
      "typeVersion": 2
    },
    {
      "id": "6acac509-f2a0-4c88-8fb3-837553c7eb8f",
      "name": "get_a_joke",
      "type": "n8n-nodes-base.httpRequestTool",
      "position": [
        740,
        480
      ],
      "parameters": {
        "url": "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single",
        "fields": "joke",
        "options": {},
        "fieldsToInclude": "selected",
        "toolDescription": "Gets a joke from the jokeapi.",
        "optimizeResponse": true
      },
      "typeVersion": 4.2
    },
    {
      "id": "7b7aac6a-9819-4824-96f9-7505ec42db68",
      "name": "days_from_now",
      "type": "n8n-nodes-base.dateTimeTool",
      "position": [
        880,
        480
      ],
      "parameters": {
        "endDate": "={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('End_Date', `Put the date to compare with now here.`, 'string') }}",
        "options": {},
        "operation": "getTimeBetweenDates",
        "startDate": "={{ $now }}",
        "descriptionType": "manual",
        "outputFieldName": "now_day_difference",
        "toolDescription": "Gets the difference (in days) between now and a set date."
      },
      "typeVersion": 2
    },
    {
      "id": "5f533d73-7dff-41fb-8bd7-dbeb05be6f25",
      "name": "wikipedia",
      "type": "@n8n/n8n-nodes-langchain.toolWikipedia",
      "position": [
        1020,
        480
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "92d06ffb-c2c1-4bca-b443-72b74ad41eb2",
      "name": "create_password",
      "type": "n8n-nodes-base.cryptoTool",
      "position": [
        1160,
        480
      ],
      "parameters": {
        "action": "generate",
        "encodingType": "base64",
        "stringLength": "={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('Length', `Usually 8 to 16 works well.`, 'number') }}",
        "toolDescription": "Generate a secure Password.",
        "dataPropertyName": "password"
      },
      "typeVersion": 1
    },
    {
      "id": "cae4f01a-48c8-4fb6-90c7-5a157d9446f0",
      "name": "calculate_loan_payment",
      "type": "@n8n/n8n-nodes-langchain.toolCode",
      "position": [
        1340,
        480
      ],
      "parameters": {
        "jsCode": "const principal = query.loan_amount;\nconst annualRate = query.annual_rate;\nconst years = query.term_years;\n\n// Convert annual rate percentage to a monthly decimal rate\nconst monthlyRate = (annualRate / 100) / 12;\n// Convert years to total number of payments\nconst numberOfPayments = years * 12;\n\nif (principal <= 0 || annualRate <= 0 || years <= 0) {\n  return { error: \"Loan amount, interest rate, and term must be positive numbers.\" };\n}\n\n// Amortization formula: M = P * [r(1+r)^n] / [(1+r)^n - 1]\nconst monthlyPayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / (Math.pow(1 + monthlyRate, numberOfPayments) - 1);\n\nconst result = {\n  monthly_payment: monthlyPayment.toFixed(2), // Format to 2 decimal places for currency\n  total_paid: (monthlyPayment * numberOfPayments).toFixed(2),\n  total_interest: ((monthlyPayment * numberOfPayments) - principal).toFixed(2)\n};\n\nreturn JSON.stringify(result);",
        "description": "使用标准摊销公式计算贷款的固定月付款。需要贷款总额、年利率百分比（例如，5 表示 5%）以及贷款期限（年）。",
        "jsonSchemaExample": "{\n\t\"loan_amount\": 250000,\n    \"annual_rate\": 6.5,\n    \"term_years\": 30\n}",
        "specifyInputSchema": true
      },
      "typeVersion": 1.3
    },
    {
      "id": "58d0757a-160e-44db-ae58-1f4dcdc617e9",
      "name": "n8n_blog_rss_feed",
      "type": "n8n-nodes-base.rssFeedReadTool",
      "position": [
        1520,
        480
      ],
      "parameters": {
        "url": "https://n8n.io/blog/rss",
        "options": {},
        "toolDescription": "Gets the latest n8n blog posts."
      },
      "typeVersion": 1.2
    },
    {
      "id": "140875e4-a202-4acb-aef2-1839e93e5eea",
      "name": "便签10",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1720,
        -160
      ],
      "parameters": {
        "color": 4,
        "width": 540,
        "height": 800,
        "content": "## 这对您有帮助吗？请告诉我！"
      },
      "typeVersion": 1
    },
    {
      "id": "6ab90a26-fdb2-4ac2-9d82-d26704725f36",
      "name": "便签1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -220,
        -340
      ],
      "parameters": {
        "width": 460,
        "height": 460,
        "content": "#### 💬 聊天界面"
      },
      "typeVersion": 1
    },
    {
      "id": "3d455f51-f2c3-4603-ae14-d5bb004d10f8",
      "name": "便签 2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        440,
        -340
      ],
      "parameters": {
        "color": 6,
        "width": 540,
        "height": 460,
        "content": "#### 🧠 大脑：您的 AI 代理"
      },
      "typeVersion": 1
    },
    {
      "id": "e746b1f2-1028-428d-8b88-19004bc29f38",
      "name": "便签 3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -220,
        140
      ],
      "parameters": {
        "color": 3,
        "width": 460,
        "height": 500,
        "content": "#### 🤖 AI 智能（LLM）"
      },
      "typeVersion": 1
    },
    {
      "id": "c08bd708-8e50-4d10-a9bd-5716b76c82c3",
      "name": "便签 4",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        260,
        160
      ],
      "parameters": {
        "color": 7,
        "width": 340,
        "height": 480,
        "content": "#### 🧠 短期记忆"
      },
      "typeVersion": 1
    },
    {
      "id": "199a2071-0a07-493b-b281-542834cb86d8",
      "name": "便签 5",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        620,
        160
      ],
      "parameters": {
        "color": 5,
        "width": 1060,
        "height": 480,
        "content": "#### 🛠️ 代理的工具箱（超能力）"
      },
      "typeVersion": 1
    }
  ],
  "pinData": {},
  "connections": {
    "Gemini": {
      "ai_languageModel": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "OpenAI": {
      "ai_languageModel": [
        []
      ]
    },
    "wikipedia": {
      "ai_tool": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "get_a_joke": {
      "ai_tool": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Simple Memory": {
      "ai_memory": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_memory",
            "index": 0
          }
        ]
      ]
    },
    "days_from_now": {
      "ai_tool": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "create_password": {
      "ai_tool": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "n8n_blog_rss_feed": {
      "ai_tool": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Example Chat Window": {
      "main": [
        [
          {
            "node": "Your First AI Agent",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "calculate_loan_payment": {
      "ai_tool": [
        [
          {
            "node": "Your First AI Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    }
  }
}