{"id":30899904,"url":"https://github.com/dedevsclub/create-next-chatbot","last_synced_at":"2025-09-09T04:12:04.724Z","repository":{"id":313572018,"uuid":"1051880318","full_name":"DeDevsClub/create-next-chatbot","owner":"DeDevsClub","description":"Template for creating your very own AI Support Chatbot interface.","archived":false,"fork":false,"pushed_at":"2025-09-07T04:05:48.000Z","size":798,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-07T06:06:47.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ai-support-chatbot-rouge.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DeDevsClub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"bunsdev","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"thanks_dev":null,"custom":null}},"created_at":"2025-09-06T23:11:47.000Z","updated_at":"2025-09-07T04:05:52.000Z","dependencies_parsed_at":"2025-09-07T06:06:55.810Z","dependency_job_id":"72e6e2d4-f151-4799-884b-a7bc7cce937c","html_url":"https://github.com/DeDevsClub/create-next-chatbot","commit_stats":null,"previous_names":["dedevsclub/ai-support-chatbot","dedevsclub/create-next-chatbot"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/DeDevsClub/create-next-chatbot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fcreate-next-chatbot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fcreate-next-chatbot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fcreate-next-chatbot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fcreate-next-chatbot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DeDevsClub","download_url":"https://codeload.github.com/DeDevsClub/create-next-chatbot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fcreate-next-chatbot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274243032,"owners_count":25248148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-09T04:12:02.409Z","updated_at":"2025-09-09T04:12:04.713Z","avatar_url":"https://github.com/DeDevsClub.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bunsdev"],"categories":[],"sub_categories":[],"readme":"# AI Support Chatbot Template\n\nA modern, customizable AI chatbot built with Next.js 15, Vercel AI SDK, and Google Gemini. Features a beautiful dark theme, rate limiting, bot protection, and seamless integration capabilities with a powerful CLI for easy deployment.\n\n## ✨ Features\n\n- 🤖 **AI-Powered**: Google Gemini 2.5 Flash integration with streaming responses\n- 🎨 **Modern Dark UI**: Beautiful gradient backgrounds with glass-morphism effects\n- 🛡️ **Security First**: Arcjet protection with rate limiting and bot detection\n- 📱 **Responsive Design**: Works perfectly on desktop and mobile\n- ⚡ **Real-time Streaming**: Live response streaming with typing indicators\n- 🔧 **Highly Customizable**: Easy configuration and theming\n- 🚀 **Production Ready**: Built with Next.js 15 and React 19\n- 💬 **Interactive Elements**: Support for clickable choices and external links\n- 🛠️ **CLI Integration**: Powerful command-line tool for seamless integration into existing projects\n\n## 🚀 Quick Start\n\n### Option 1: Using the CLI (Recommended)\n\nThe fastest way to get started is using our CLI tool:\n\n```bash\n# Install the CLI globally\nnpm install -g create-next-chatbot\n\n# Create a new chatbot project\nai-chatbot init my-chatbot --framework nextjs\n\n# Or install into existing project\ncd my-existing-project\nai-chatbot install --interactive\n```\n\n### Option 2: Manual Setup\n\n### 1. Clone and Install\n\n```bash\ngit clone https://github.com/DeDevsClub/create-next-chatbot.git\ncd create-next-chatbot\npnpm install\n```\n\n### 2. Environment Setup\n\nCreate a `.env.local` file and add your API keys:\n\n```env\n# Arcjet key from https://app.arcjet.com\nARCJET_KEY=your_arcjet_key_here\n\n# Google Gemini API key from https://aistudio.google.com/app/apikey\nGOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here\n\n# Next.js app URL (for production)\nNEXT_PUBLIC_APP_URL=http://localhost:3000\n```\n\n### 3. Run Development Server\n\n```bash\npnpm dev\n```\n\nVisit `http://localhost:3000` to see your chatbot in action!\n\n## 🔧 Integration Instructions\n\n### Option 1: Use as Standalone Application\n\nThe chatbot works out-of-the-box as a complete Next.js application with a landing page and integrated chat interface.\n\n### Option 2: Integrate into Existing Project\n\n#### Step 1: Copy Core Components\n\nCopy these essential files to your project:\n\n```\ncomponents/chatbot/\n├── index.tsx           # Main chatbot wrapper\n├── conversation.tsx    # Chat conversation display\n├── message.tsx         # Individual message components\n└── prompt-input.tsx    # Input field and controls\n\nlib/\n├── config.ts          # Chatbot configuration\n└── arcjet.ts          # Security configuration\n\napp/api/chat/\n└── route.ts           # Chat API endpoint\n```\n\n#### Step 2: Install Dependencies\n\n```bash\nnpm install @ai-sdk/google @ai-sdk/react @arcjet/next framer-motion use-stick-to-bottom react-markdown @iconify/react\n```\n\n#### Step 3: Add Environment Variables\n\n```env\nARCJET_KEY=your_arcjet_key\nGOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key\nNEXT_PUBLIC_APP_URL=your_app_url\n```\n\n#### Step 4: Import and Use\n\n```tsx\nimport ChatBotWrapper from '@/components/chatbot'\n\nexport default function YourPage() {\n  return (\n    \u003cdiv\u003e\n      {/* Your existing content */}\n      \u003cChatBotWrapper /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Option 3: Customize Integration\n\n#### Programmatic Control\n\n```tsx\nimport { ChatBot } from '@/components/chatbot'\n\nexport default function CustomIntegration() {\n  const [isOpen, setIsOpen] = useState(false)\n  \n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e setIsOpen(true)}\u003e\n        Open Chat\n      \u003c/button\u003e\n      \n      {isOpen \u0026\u0026 (\n        \u003cChatBot onClose={() =\u003e setIsOpen(false)} /\u003e\n      )}\n    \u003c/\u003e\n  )\n}\n```\n\n#### Custom Trigger Button\n\n```tsx\nimport { useState } from 'react'\nimport { ChatBot } from '@/components/chatbot'\nimport { MessageSquareIcon } from 'lucide-react'\n\nexport default function CustomTrigger() {\n  const [isOpen, setIsOpen] = useState(false)\n  \n  return (\n    \u003c\u003e\n      {/* Your custom trigger */}\n      \u003cdiv className=\"fixed bottom-4 right-4\"\u003e\n        \u003cbutton \n          onClick={() =\u003e setIsOpen(!isOpen)}\n          className=\"bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700\"\n        \u003e\n          \u003cMessageSquareIcon className=\"w-6 h-6\" /\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \n      {isOpen \u0026\u0026 \u003cChatBot onClose={() =\u003e setIsOpen(false)} /\u003e}\n    \u003c/\u003e\n  )\n}\n```\n\n## ⚙️ Configuration\n\n### Basic Configuration\n\nEdit `lib/config.ts` to customize your chatbot:\n\n```typescript\nexport const chatbotConfig = {\n  // Basic info\n  name: \"AI Assistant\",\n  \n  // Welcome message (supports {{choice:}} and {{link:}} syntax)\n  welcomeMessage: \"Hello! I'm your AI Assistant. What can I help you with today?\",\n  \n  // UI customization\n  ui: {\n    windowTitle: \"AI Assistant\",\n    inputPlaceholder: \"Type your message...\",\n    avatarImage: \"/avatar.png\",\n    avatarFallback: \"AI\",\n  },\n  \n  // Rate limiting\n  rateLimit: {\n    capacity: 10,        // Bucket maximum capacity\n    refillRate: 2,       // Tokens refilled per interval\n    interval: 10,        // Refill interval in seconds\n    minTimeBetweenMessages: 1000, // Min ms between messages\n    maxMessageLength: 1000,       // Max characters per message\n  },\n  \n  // AI configuration\n  api: {\n    model: \"gemini-2.0-flash-exp\",\n    systemPrompt: \"You are a helpful AI assistant. Be concise and friendly.\",\n  },\n  \n  // Security settings\n  security: {\n    enableBotDetection: true,\n    enableShield: true,\n    allowedBots: [], // Empty array blocks all bots\n  },\n};\n```\n\n### Advanced Customization\n\n#### Interactive Elements\n\nThe chatbot supports special syntax for interactive elements:\n\n```typescript\n// Clickable choices\nwelcomeMessage: \"How can I help? {{choice:Get Support}} {{choice:Learn More}} {{choice:Contact Sales}}\"\n\n// External links\nwelcomeMessage: \"Check out our {{link:https://docs.example.com|Documentation}} or {{link:https://github.com/example|GitHub}}\"\n```\n\n#### Custom System Prompt\n\nModify the `systemPrompt` in `lib/config.ts` to change AI behavior:\n\n```typescript\nsystemPrompt: `You are a customer service assistant for [Your Company]. \nBe helpful, professional, and friendly. When appropriate, use:\n- {{choice:Option Name}} for clickable choices\n- {{link:https://url.com|Button Text}} for external links\n\nAlways end responses with relevant next steps.`\n```\n\n#### Rate Limiting Configuration\n\nFine-tune rate limiting in `lib/config.ts`:\n\n- **capacity**: Maximum requests in burst (default: 10)\n- **refillRate**: Tokens added per interval (default: 2)\n- **interval**: Refill frequency in seconds (default: 10)\n- **minTimeBetweenMessages**: Minimum ms between messages (default: 1000)\n- **maxMessageLength**: Maximum characters per message (default: 1000)\n\n#### Security Settings\n\nConfigure Arcjet security features:\n\n- **enableBotDetection**: Block automated bots\n- **enableShield**: Protect against common attacks  \n- **allowedBots**: Specify allowed bot categories (empty array blocks all)\n\n## 🎨 UI Customization\n\n### Dark Theme Styling\n\nThe chatbot features a modern dark theme with:\n- **Background**: `from-gray-950 to-black` gradients\n- **Cards**: Glass-morphism effects with `backdrop-blur-sm`\n- **Text**: High contrast white text (`text-gray-100`)\n- **Interactive Elements**: Consistent hover states\n\n### Key Styling Files\n\n```\napp/globals.css              # Global styles and CSS variables\ncomponents/ui/               # Shadcn UI components\ncomponents/chatbot/\n├── index.tsx               # Main chatbot with dark theme\n├── message.tsx             # Message bubbles and avatars\n├── conversation.tsx        # Chat container and scroll\n└── prompt-input.tsx        # Input field styling\n```\n\n### Custom Avatar\n\n1. Add your avatar image to the `public/` folder\n2. Update the path in `lib/config.ts`:\n\n```typescript\nui: {\n  avatarImage: \"/your-avatar.png\",\n  avatarFallback: \"AI\", // Fallback text if image fails\n}\n```\n\n### Theming\n\nCustomize colors by modifying Tailwind classes in components:\n\n```tsx\n// Example: Change accent color from gray to blue\nclassName=\"bg-blue-950 text-blue-100 hover:bg-blue-900\"\n```\n\n## 🔧 Technical Details\n\n### Architecture\n\n- **Frontend**: Next.js 15 with App Router and React 19\n- **AI**: Vercel AI SDK with Google Gemini 2.0 Flash\n- **Security**: Arcjet for rate limiting and bot protection\n- **Styling**: Tailwind CSS with Shadcn UI components\n- **Animations**: Framer Motion for smooth transitions\n- **Icons**: Iconify React for consistent iconography\n\n### Key Features\n\n- ✅ **Streaming Responses**: Real-time AI response streaming\n- ✅ **Rate Limiting**: Token bucket algorithm with Arcjet\n- ✅ **Bot Protection**: Automated bot detection and blocking\n- ✅ **Mobile Responsive**: Adaptive UI for all screen sizes\n- ✅ **Dark Theme**: Modern glass-morphism design\n- ✅ **TypeScript**: Full type safety throughout\n- ✅ **Error Handling**: Graceful error recovery and retry logic\n- ✅ **Interactive Elements**: Clickable choices and external links\n- ✅ **Accessibility**: ARIA labels and keyboard navigation\n\n### File Structure\n\n```\n├── app/\n│   ├── api/chat/route.ts    # Chat API endpoint with Arcjet protection\n│   ├── page.tsx             # Main landing page\n│   ├── layout.tsx           # Root layout with metadata\n│   └── globals.css          # Global styles and Tailwind\n├── components/\n│   ├── chatbot/\n│   │   ├── index.tsx        # Main chatbot wrapper and logic\n│   │   ├── conversation.tsx # Chat display and scroll management\n│   │   ├── message.tsx      # Individual message components\n│   │   └── prompt-input.tsx # Input field and submit controls\n│   ├── ui/                  # Shadcn UI components (Button, Card, etc.)\n│   ├── bento-grid.tsx       # Feature showcase grid\n│   ├── features-grid.tsx    # Features section\n│   └── landing.tsx          # Landing page component\n├── lib/\n│   ├── config.ts            # Chatbot configuration\n│   ├── arcjet.ts            # Security and rate limiting setup\n│   ├── features.tsx         # Feature definitions\n│   └── utils.ts             # Utility functions\n└── public/                  # Static assets (AI avatar image)\n```\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\n1. Push your code to GitHub\n2. Connect your repository to Vercel\n3. Add environment variables in Vercel dashboard:\n   - `ARCJET_KEY`\n   - `GOOGLE_GENERATIVE_AI_API_KEY`\n   - `NEXT_PUBLIC_APP_URL`\n4. Deploy automatically!\n\n### Other Platforms\n\nThe chatbot works on any platform that supports Next.js:\n\n- **Netlify**: Add build command `pnpm build` and publish directory `out`\n- **Railway**: Connect GitHub repo and add environment variables\n- **DigitalOcean App Platform**: Use Node.js buildpack\n- **AWS Amplify**: Connect repository and configure build settings\n\n## 🛠️ Development\n\n### Local Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Start production server\npnpm start\n\n# Lint code\npnpm lint\n```\n\n### Environment Variables\n\nRequired for development:\n\n```env\n# Development\nARCJET_KEY=ajkey_test_...                    # Test key for development\nGOOGLE_GENERATIVE_AI_API_KEY=AIza...         # Your Gemini API key\nNEXT_PUBLIC_APP_URL=http://localhost:3000    # Local development URL\n```\n\n### Testing\n\n```bash\n# Run type checking\npnpm type-check\n\n# Format code\npnpm format\n\n# Check formatting\npnpm format:check\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Vercel AI SDK](https://sdk.vercel.ai/) for AI integration\n- [Google Gemini](https://ai.google.dev/) for the AI model\n- [Arcjet](https://arcjet.com/) for security and rate limiting\n- [Shadcn UI](https://ui.shadcn.com/) for beautiful components\n- [Tailwind CSS](https://tailwindcss.com/) for styling\n- [Framer Motion](https://www.framer.com/motion/) for animations\n\n## 📞 Support\n\n- 📧 Email: [support@dedevs.com](mailto:support@dedevs.com)\n- 🐛 Issues: [GitHub Issues](https://github.com/DeDevsClub/create-next-chatbot/issues)\n- 💬 Discussions: [GitHub Discussions](https://github.com/DeDevsClub/create-next-chatbot/discussions)\n- 🌐 Website: [DeDevs.com](https://dedevs.com)\n\n---\n\nMade with 🩷 and ☕ by [DeDevs](https://dedevs.com)\n\nMIT License - feel free to use this template for your projects!\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📞 Support\n\nIf you have questions or need help:\n- Open an issue on GitHub\n- Review the example configuration\n\n---\n\n**Happy coding!** 🎉","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedevsclub%2Fcreate-next-chatbot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdedevsclub%2Fcreate-next-chatbot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedevsclub%2Fcreate-next-chatbot/lists"}