A powerful chatbot application that generates well-structured HTML and CSS code within a single file, providing live preview functionality and landing page development.
This chatbot facilitates rapid prototyping by generating complete HTML and CSS code based on user prompts, with real-time preview capabilities. Built with modern web technologies, it serves as an efficient tool for developers and designers to quickly create landing pages and web components.
- AI-Powered Code Generation: Generate complete HTML and CSS code using GenAI API integration
- Live Preview: Real-time rendering of generated code within the chat interface
- Single File Output: Complete HTML and CSS bundled in one downloadable file
- User-Friendly Chat Interface: Intuitive conversation flow for code generation requests
- Secure Authentication: Implemented using NextAuth.js
- Login Options: Email/password login support
- Protected Routes: Secure access to chat functionality
- Framework: Next.js (React-based)
- Language: TypeScript
- Styling: Tailwind CSS + ShadCN UI Components
- Database: PostgreSQL ( NeonDB )
- ORM: Prisma
- Authentication: NextAuth.js
- GenAI Provider: Gemini API Key
- Model: Gemini (configurable)
- Hosting: Render
- Database Hosting: NeonDB
Before running this project, ensure you have:
- Node.js (v18 or higher)
- npm or yarn package manager
- Database account (NeonDB)
- GenAI API key (OpenAI/Google)
- Render account (for deployment)
git clone https://github.com/singhkrishna01/ChatBot
cd ChatBotnpm install
# or
yarn installCreate a .env.local file in the root directory:
# Database
DATABASE_URL="your_database_connection_string"
# NextAuth Configuration
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your_nextauth_secret"
# GenAI API
NEXT_PUBLIC_GEMINI_API_KEY="your_openai_api_key"
# Initialize Prisma (if using Prisma)
npx prisma generate
npx prisma db pushnpm run dev
# or
yarn devThe application will be available at http://localhost:3000
- Sign Up/Login: Create an account or login using email/password
- Access Chat: Navigate to the main chat interface
- Generate Code: Describe your desired webpage or component
- Preview: View the generated HTML/CSS in real-time
- Download: Save the generated code as an HTML file
- "Create a modern landing page for a SaaS product with hero section and pricing"
- "Generate a responsive portfolio website with dark theme"
- "Build a contact form with modern styling and animations"
- "Create a product showcase page with image gallery"
- Live Preview: See your generated code rendered instantly
- Code Download: Get a complete HTML file with embedded CSS
- Responsive Design: All generated code is mobile-friendly
- Modern Styling: Uses contemporary design principles and animations
📁 .next/ → Next.js build output
📁 generated/ → AI-generated files (if used)
📁 node_modules/ → Project dependencies
📁 prisma/ → Prisma schema & migrations
📁 public/ → Static files (images, etc.)
┣ 📁 assets/ → Icons or general assets
📁 src/ → Main source code
┣ 📁 app/ → App routing & pages
┃ ┣ 📁 api/auth/[...nextauth]/ → NextAuth config routes
┃ ┣ 📁 api/auth/register/ → Custom register endpoint
┃ ┣ 📁 auth/signin/ → Sign-in page UI
┃ ┣ 📁 auth/signup/ → Sign-up page UI
┃ ┣ 📁 chat/ → Chat page & logic
┃ ┣ 📄 globals.css → Global styles
┃ ┣ 📄 layout.tsx → App layout wrapper
┃ ┗ 📄 page.tsx → Home/root page
┣ 📁 components/ → Reusable UI components
┃ ┣ 📁 auth/ → Auth-related components
┃ ┣ 📁 chat/ → Chat components (e.g., box, message)
┃ ┣ 📁 providers/ → Context/API providers
┃ ┗ 📁 ui/ → UI elements (e.g., buttons, inputs)
┣ 📁 hooks/ → Custom React hooks
┣ 📁 lib/ → Utility functions
┃ ┣ 📄 auth.ts → Auth logic utils
┃ ┣ 📄 prisma.ts → DB connection setup
┃ ┗ 📄 utils.ts → Utils functionality
┗ 📁 types/ → TypeScript types/interfaces
Support for Prisma ORMs. Database configuration in:
- Prisma:
prisma/schema.prisma
- Connect Repository: Link your GitHub repository to Render
- Environment Variables: Add all environment variables from
.env.local - Build Settings: Vercel will automatically detect Next.js configuration
- Deploy: Trigger deployment from Render dashboard
- Set up production database (NeonDB)
- Update
DATABASE_URLin production environment - Run database migrations
# Run unit tests
npm run test
# Run integration tests
npm run test:integration
# Run E2E tests
npm run test:e2e- Authentication: Secure user authentication with NextAuth.js
- Input Validation: Sanitized user inputs and generated code
- Rate Limiting: API rate limiting to prevent abuse
- CORS Configuration: Proper CORS setup for secure API access
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
For support and questions:
- Create an issue in the GitHub repository
- Check the documentation for common solutions
- Contact the development team
✅ Code Quality: Clean, readable, and well-structured TypeScript code
✅ UI/UX Design: Responsive and user-friendly interface using Tailwind CSS
✅ Tech Stack: All specified technologies implemented correctly
✅ Creativity: Innovative features and modern design patterns
✅ Live Preview: Successful rendering of generated HTML and CSS
Built with ❤️ using Next.js and TypeScript