🤖 Failed AI Chatbot Integration via Webhook
A basic implementation of an AI-powered chatbot connected to a website using webhooks. The chatbot workflow is created with n8n and communicates with the ChatGPT API to provide interactive responses on a web page.
🌐 Live Website
https://mitrandier.github.io/Aichatbot/
✨ Technologies
HTML CSS n8n Webhook n8n Workflow ChatGPT API
🚀 Features
Basic AI chatbot integrated into a webpage Connected via n8n webhook to handle incoming messages Uses a workflow to process user inputs and send responses from ChatGPT API Minimal frontend design with HTML and some CSS for layout Demonstrates the concept of integrating an AI assistant into a website
📍 The Process
This project was created as an introductory exercise to connect a chatbot to a web page. The focus was on understanding:
- How to use webhooks to connect frontend and backend workflows
- Setting up n8n workflows to process user messages
- Interfacing with the ChatGPT API to generate AI responses
- Displaying the chatbot on a simple HTML/CSS page
This is a beginner-level prototype to explore AI integration in web projects without complex backend coding.
🚦 Running the Project
- Deploy the n8n workflow and obtain the webhook URL
- Add the webhook URL to the frontend JavaScript code
- Open the HTML page in a browser
- Start interacting with the chatbot — responses are generated via ChatGPT API