AI Support Chatbot

Project Summary

I custom built a production-ready AI chatbot template. While originally a small side-project/concept that I wanted to implement onto a website, I turned it into a customizable chatbot template. Modify the AI's system prompt and give it the information needed based on what your needs.

Project Goals and Challenges

Primary Goals

• Create an intelligent assistant that can handle simple customer inquiries without human intervention
• Provide accurate and concise information
• Integrate seamlessly with the website
• Maintain high customization options

Key Challenges

• Implementing effective rate limiting to prevent abuse
• Creating custom button interactions that integrate with AI
• Handling AI loading and error states proficiently to enhance user experience

Tech Stack Overview

Frontend

• Next.js 14 with TypeScript
• Next.js custom hooks for state management
• Framer Motion for slight animations
• Tailwind CSS for responsive styling

AI Integration

• Vercel AI SDK @ai-sdk/react
• Google's Gemini 2.5 Flash Lite model
• Custom system prompt engineering for brand-specific responses

Backend & Infrastructure

• Next.js API routes
• Arcjet for rate limiting and bot prevention

Security

• Custom rate limiting with sliding window algorithm
• CSRF protection via referer checking

Core Features

AI Trained Assistant

The chatbot can be trained on your own information. Tell the AI it's purpose, role, company, and give it a small knowledge base if necessary. It's perfect for guiding customers across a website, as it allows for smart conversation flows and external links. Just give it a sitemap with links and descriptions, and it'll give users a link to follow.

Interactive Chatbot

• Custom markdown parser extracts {{choice:Option}} and {{link:URL|Label}} syntax
• Conversation buttons for guided interactions (customizable)
• Link buttons for external actions (customizable)
• Buttons respect rate limiting and provide visual feedback

Security and Rate Limiting

• Rate Limiting: 8 requests per 30 seconds using Arcjet with sliding window
• Bot Detection: Bot prevention using Arcjet
• Content Validation: Message length limits, spam pattern detection, URL blocking
• CSRF Protection: Referer validation to prevent cross-origin abuse

Security methods can be adjusted depending on your usage needs.

User Experience

• Visual feedback during rate limiting with disabled states
• Clear error messages without exposing system details
• Automatic cooldown periods when rate limited
• Responsive design for mobile and desktop

Key Takeaways

In summary, the showcase project was a fun build that allowed me to explore Vercel's AI SDK and its wide range of functionality. Implementing custom extensions on the chatbot (conversation buttons, rate limiting, security) allowed me to created a smooth and safe user experience. Further enhancements include AI analytics that can help the business to understand FAQs, common enquiries, and customer behavior. While Vercel's AI SDK has an experimental telemetry feature, a custom system can also be added to logs anonymized chat inputs and outputs.