🔥 RoastBot

A playful AI-powered web app that roasts your bios, tweets, or any text with style and humor. Built with Next.js, Firebase AI Logic SDK, and Google's Gemini 2.5 Flash model.

✨ Features

• AI-Powered Roasts: Get creative, witty roasts generated by Google's Gemini 2.5 Flash model
• Adjustable Intensity: Choose from soft, medium, or hard roast levels
• Animated Response: Watch your roast appear with a smooth typewriter effect
• Shareable Cards: Download beautiful roast cards as images to share on social media
• Copy to Clipboard: Easily share roasts with a single click
• Responsive Design: Optimized for both desktop and mobile devices
• Edge Runtime: Fast OG image generation using Next.js Edge Runtime

🤖 The "Chaos Gremlin" Persona

RoastBot isn't just a generic AI; it's prompted to act as a "chaos gremlin with a PhD in stylish burns." It is designed to be:

• Sharp and dramatic.
• Unreasonably confident.
• Stupidly funny.
• Safety First: It refuses to generate hate speech, slurs, or threats, deflecting unsafe requests with playful refusals.

🌐 Deployment

Deployed on Vercel for optimal performance and scalability. Check out the live app here.

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• Firebase project with AI services enabled
• Google AI API access
• Follow the Firebase AI Logic Getting Started Guide to set up Firebase AI SDK in your project

Installation

1. Clone the repository:

git clone <your-repo-url>
cd roastbot

2. Install dependencies:

npm install

3. Create a .env file in the root directory with your Firebase credentials:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser

🏗️ Project Structure

roastbot/
├── app/
│   ├── api/
│   │   └── og/
│   │       └── route.tsx          # OG image generation endpoint
│   ├── components/
│   │   ├── Header.tsx             # App header with logo
│   │   ├── InputForm.tsx          # Text input and difficulty selector
│   │   ├── ResponseBox.tsx        # Roast display with animations
│   │   ├── RoastMachine.tsx       # Main component orchestrating the app
│   │   └── ui/                    # Reusable UI components
│   ├── utils/
│   │   ├── downloadRoast.ts       # Download functionality
│   │   ├── firebaseConfig.ts      # Firebase initialization
│   │   └── roastGenerator.ts      # AI roast generation logic
│   ├── globals.css                # Global styles
│   ├── layout.tsx                 # Root layout
│   └── page.tsx                   # Home page
├── public/                        # Static assets
└── package.json

🎨 Tech Stack

• Framework: Next.js 16+
• Styling: Tailwind CSS
• AI/ML: Firebase AI Logic SDK with Google Gemini 2.5 Flash
• Icons: React Icons (Feather Icons)
• Font: Montserrat (Google Fonts)
• Image Generation: Next.js OG Image Generation
• Runtime: Edge Runtime for OG images

🔧 Key Components

RoastGenerator

Uses gemini to generate roasts with customizable intensity levels:

• Soft: Gentle, playful roasts
• Medium: Moderate burn level
• Hard: Maximum roast intensity

OG Image Generation

Dynamically creates shareable roast cards with:

• Dark neutral background for Developer Aesthetics
• Logo integration
• Text wrapping for readability
• Professional typography with Montserrat font

Responsive Design

• Mobile-first approach
• Adaptive backgrounds for different screen sizes
• Touch-friendly interface elements

📝 Environment Variables

Variable	Description
NEXT_PUBLIC_FIREBASE_API_KEY	Firebase API key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN	Firebase auth domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID	Firebase project ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET	Firebase storage bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID	Firebase messaging sender ID
NEXT_PUBLIC_FIREBASE_APP_ID	Firebase app ID

🛠️ Development

Build for Production

npm run build

Start Production Server

npm start

Linting

npm run lint

🤝 Contributing

Contributions are welcome! Feel free to submit a Pull Request.

1. Fork the Project

2. Create your Feature Branch (git checkout -b feature/AmazingFeature)

3. Commit your Changes (git commit -m 'Add some AmazingFeature')

4. Push to the Branch (git push origin feature/AmazingFeature)

5. Open a Pull Request

👨‍💻 Author

Built with 🔥 by Subhajit Roy

🙏 Acknowledgments

• Google Gemini AI for powering the roasts
• Firebase for AI backend infrastructure
• Next.js for the amazing framework
• Vercel for OG image generation capabilities and hosting

---

Disclaimer: RoastBot is meant for entertainment purposes only. All roasts are AI-generated and should be taken in good humor. The app is designed to avoid hate speech, slurs, and sensitive content.