Inspiration
I was inspired by the growing need for small businesses to provide instant, personalized customer support without the overhead of a 24/7 human support team. Many businesses struggle to maintain consistent communication with their customers across different languages and time zones. I saw an opportunity to create a solution that could automatically learn from a company's website and provide intelligent customer support using Gemini
What it does
ourChatBot is a sophisticated Gemini powered chat bot generator that:
Scrapes websites to automatically extract key business information including:
-Company description and about sections -Contact information (emails, phone numbers) -Social media links -Location details -Existing FAQs and content ---
Uses Gemini to generate:
-An "About" section using AI to summarize company information -FAQs based on website content through Gemini structured output(JSON mode) -Multi-language support with customizable language selection ---
Provides a customizable chat interface with:
-Color theme customization -Embedded widget code that can be easily integrated into any website by pasting one line -Real-time AI responses based on company data
How we built it
We built ourChatBot using:
Next.js for the frontend framework Gemini for generating about sections and FAQs UUID for unique chatbot ids Clerk for user authentication React for building the user interface Supabase for database storage Tailwind CSS and shadcn/ui for styling Axios for API calls on the backend Cheerio to extract website data on the backend
Challenges we ran into
-Web Scraping Complexity: Handling different website structures and ensuring accurate data extraction -AI Response Generation: Creating relevant and accurate About sections and FAQs from scraped content -Multi-language Support: Implementing reliable translation and language-specific responses -State Management: Managing complex state across multiple components and user interaction
Accomplishments that we're proud of
-Created a fully automated system that generates intelligent chatbots from just a URL -Implemented multi-language support for global accessibility -Built a user-friendly interface for customizing and managing chatbots -Developed an efficient scraping system that extracts relevant business information -Created an easy-to-use widget system for website integration
What we learned
-Advanced React state management techniques -Working with AI models for content generation -Web scraping best practices -Real-time database integration -Multi-language support implementation -Widget embedding techniques -User authentication integration
What's next for ourChatBot
-More Customization Options: Add more themes, chat interface styles, and branding options -Analytics Dashboard: Implement detailed analytics for chat interactions and user engagement -Advanced Integration Options: Create plugins for popular CMS platforms -Voice Integration: Add voice chat capabilities -API Access: Develop a public API for developers to integrate ourChatBot programmatically -Enhanced Security: Implement additional security features for sensitive business data
Log in or sign up for Devpost to join the conversation.