AI Portfolio Assistant
A production AI assistant connected to a Next.js portfolio through secure n8n webhooks. The workflow receives visitor questions, validates requests, routes messages to an AI agent with memory, returns JSON responses to the website, and sends WhatsApp notifications for lead awareness. It demonstrates real chatbot engineering across frontend UI, server APIs, n8n automation, AI models, and notification systems.
Core Tech Stack
- n8n
- OpenAI
- Next.js API
- Webhooks
- WhatsApp Alerts
Performance
- Webhook response mode returns directly to the frontend
- Concise assistant prompt reduces model latency
- Fallback route avoids a broken user experience if n8n is unavailable
- JSON response body keeps the frontend integration lightweight
- Automation can be updated independently from the website deployment
Security
- Header-based secret validation before running the AI agent
- No public exposure of API keys or webhook secrets
- Server-to-server communication between Next.js and n8n
- Safe local fallback for unavailable automation services
- Private n8n credentials managed outside the public codebase
Key Features
Production webhook-based AI chatbot backend
Secure request validation using header/secret checks
AI Agent powered by OpenAI chat models
Window Buffer Memory for contextual conversations
Arabic and English response behavior based on visitor language
JSON response flow back to the Next.js portfolio frontend
WhatsApp notification after user interactions
Connected to the portfolio's /api/chat route with local fallback behavior
Portfolio-aware system context for recruiter and client questions
Designed for lead capture and instant owner visibility
n8n workflow deployed on a Docker-based VPS environment
Real production execution history reviewed from the live server
Project Architecture
Portfolio Frontend ├── AIChat component sends visitor messages ├── /api/chat route validates input and calls n8n ├── Local safe-mode fallback handles downtime n8n Workflow ├── Webhook receives chat payload ├── Check Secret validates request header ├── AI Agent processes the visitor message ├── OpenAI Chat Model generates the answer ├── Window Buffer Memory keeps context ├── Respond to Webhook returns JSON to the website └── WhatsApp Notification alerts the owner
Engineering Strategies
- Separated the website chat UI from the automation brain through a secure webhook contract
- Used n8n as the orchestration layer so the bot can be changed without redeploying the frontend
- Added request validation before the AI agent to prevent unauthorized webhook usage
- Kept a local fallback inside the Next.js API route for resilience during automation downtime
- Used memory to make visitor conversations more contextual
- Connected notifications to turn chatbot conversations into lead awareness events
- Kept sensitive keys and webhook secrets out of public portfolio content
Visual Interface
