BioGPT - AI-Powered Social Media Bio Generator

Generate engaging, personalized social media bios, welcome messages, and improved content with AI-powered suggestions.

Live Demo • Documentation • Contributing

---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Quick Start
• Project Structure
• API Endpoints
• Configuration
• Development
• Deployment
• Contributing
• License

---

Overview

BioGPT is an intelligent web application that helps users create compelling social media bios, welcome messages, and content improvements using advanced AI models. Built with modern web technologies and powered by OpenAI's GPT models and LangChain, it provides a seamless experience for content creators, marketers, and social media enthusiasts.

Key Use Cases

• Social Media Managers: Generate multiple bio variations for different platforms
• Job Seekers: Create professional LinkedIn bios
• Small Business Owners: Write engaging business descriptions
• Content Creators: Enhance and improve existing content
• Marketing Teams: Bulk generate platform-specific content

---

🚀 Features

Core Features

Feature	Description
Bio Generator	Create captivating, personalized social media bios tailored to personality and goals
Welcome Message Creator	Generate personalized welcome messages for various platforms and occasions
Content Enhancer	Improve and refine existing content with AI-driven suggestions
Multi-Platform Support	Optimize content for Twitter, Instagram, LinkedIn, TikTok, and more
Tone Selection	Choose from multiple tone options (Professional, Casual, Playful, etc.)
Real-time Chat	Interactive chat for iterative content refinement
Theme Support	Light/Dark mode with persistent user preferences

Technical Features

• ⚡ Server-Side Rendering (SSR) - Optimized performance with Next.js App Router
• 🔒 Rate Limiting - Built-in protection against abuse with Upstash Redis
• 🌐 RTL Support - Full support for Persian/Farsi and other RTL languages
• 📊 Analytics - Integrated with Vercel Analytics and Speed Insights
• 🎨 Responsive Design - Mobile-first, fully responsive UI
• ♿ Accessibility - WCAG compliant with Radix UI components
• 🚀 Streaming Responses - Real-time AI response streaming for better UX

---

🛠️ Tech Stack

Frontend

Layer	Technology	Version	Purpose
Framework	Next.js	14.2.35	React metaframework with App Router
Language	TypeScript	5.9.3	Type-safe development
Styling	Tailwind CSS	3.4.17	Utility-first CSS framework
Components	Radix UI	Latest	Unstyled, accessible component primitives
Icons	Lucide React	0.303.0	Beautiful SVG icons
Themes	next-themes	0.3.0	Dark/Light mode management
Animations	Tailwind Animate	1.0.7	Smooth animations

Backend & AI

Layer	Technology	Version	Purpose
LLM Framework	LangChain	0.2.2	LLM orchestration and chain management
LLM Providers	OpenAI, AIHUBMIX, OpenRouter	Latest	Multiple LLM providers support
OpenAI	OpenAI SDK	3.2.1	GPT models (gpt-4o, gpt-5)
OpenRouter	@openrouter/sdk	^0.2.0	OpenRouter models and streaming completion
LangChain OpenAI	@langchain/openai	0.0.33	OpenAI integration for LangChain
HTTP Client	Axios	1.4.0	HTTP requests and API calls
SSE Parser	eventsource-parser	0.0.5	Parse Server-Sent Events

Supported LLM Models:

• OpenAI: gpt-4o, gpt-5
• AIHUBMIX Free Models: glm-4.7-flash-free, gemini-2.0-flash-free, mimo-v2-flash-free
• OpenRouter: any OpenRouter model slug, e.g. meta-llama/llama-3.3-70b-instruct:free, nousresearch/hermes-3-llama-3.1-405b:free

Data & Infrastructure

Layer	Technology	Version	Purpose
Caching & Rate Limiting	Upstash Redis	1.36.2	Serverless Redis for rate limiting
Validation	Zod	3.23.8	Runtime schema validation
Form Handling	React Hook Form	-	Performant form management

Analytics & Monitoring

Layer	Technology	Version	Purpose
Analytics	Vercel Analytics	0.1.8	User analytics and insights
Performance	Vercel Speed Insights	1.0.11	Web vitals monitoring

Development

Tool	Version	Purpose
Node.js	18+	JavaScript runtime
Package Manager	Yarn 1.22+	Dependency management
Autoprefixer	10.4.12	CSS vendor prefixes
PostCSS	8.5.6	CSS transformations

---

📁 Project Structure

einbiogpt/
├── app/                           # Next.js App Router directory
│   ├── api/                       # API route handlers
│   │   ├── chat/                  # Chat endpoint for interactive refinement
│   │   ├── generate/              # Content generation endpoints
│   │   └── langchain/             # LangChain integration endpoints
│   ├── layout.tsx                 # Root layout with providers
│   ├── page.tsx                   # Main application page
│   ├── error.tsx                  # Error boundary component
│   ├── not-found.tsx              # 404 page
│   ├── robots.ts                  # SEO robots configuration
│   └── sitemap.ts                 # XML sitemap generation
│
├── components/                    # React components
│   ├── ui/                        # Shadcn/Radix UI components
│   │   ├── button/
│   │   ├── input/
│   │   ├── select/
│   │   ├── tabs/
│   │   └── ...other UI components
│   ├── theme/                     # Theme provider and utilities
│   │   └── ThemeProvider.tsx
│   ├── providers/                 # Application providers
│   │   └── Providers.tsx
│   ├── bio-generator/             # Bio generation components
│   │   └── BioForm.tsx
│   ├── Header.tsx                 # Application header
│   ├── Footer.tsx                 # Application footer
│   ├── OutputPanel.tsx            # Results display component
│   ├── PlatformSelector.tsx       # Platform selection UI
│   └── ToneSelector.tsx           # Tone selection UI
│
├── lib/                           # Utility functions and helpers
│   ├── constants/                 # Application constants
│   ├── hooks/                     # Custom React hooks
│   ├── Langchain.ts               # LangChain configuration
│   ├── OpenAIStream.ts            # Streaming response handler
│   ├── OpenAiCompletaions.ts      # OpenAI completion utilities
│   ├── llm-provider.ts            # LLM provider setup and configuration
│   ├── rate-limit.ts              # Rate limiting logic
│   ├── get-ip.ts                  # IP extraction for rate limiting
│   ├── theme-no-flash.ts          # Theme script to prevent flash
│   └── utils.ts                   # General utility functions
│
├── styles/                        # Global styles
│   └── globals.css                # Tailwind CSS and CSS variables
│
├── public/                        # Static assets
│   ├── fonts/
│   ├── images/
│   └── ...other static files
│
├── docs/                          # Additional documentation
├── .github/                       # GitHub configuration
│   └── workflows/                 # CI/CD workflows
├── next.config.js                 # Next.js configuration
├── tailwind.config.js             # Tailwind CSS configuration
├── tsconfig.json                  # TypeScript configuration
├── package.json                   # Project dependencies
├── AGENTS.md                      # AI agent guidelines
├── LICENCE                        # MIT License
├── Makefile                       # Docker build commands
├── dev.Dockerfile                 # Development Docker image
├── prod.Dockerfile               # Production Docker image
└── docker-compose.*.yml           # Docker Compose configurations

Directory Descriptions

Directory	Purpose
app/	Contains all routes and layouts using Next.js App Router
components/	Reusable React components organized by feature
lib/	Utility functions, hooks, and configuration
styles/	Global CSS and Tailwind CSS configuration
public/	Static assets served directly by the web server

---

🔌 API Endpoints

Bio Generation

POST /api/generate

Generate new social media bios based on user input.

Request Body:

{
  "bio": "string (user's current bio or description)",
  "platform": "twitter | instagram | linkedin | tiktok | facebook",
  "tone": "professional | casual | playful | humorous | inspirational",
  "keywords": "string[] (optional keywords to include)"
}

Response:

{
  "suggestions": [
    {
      "text": "Generated bio text",
      "platform": "twitter",
      "tone": "professional"
    }
  ],
  "timestamp": "ISO 8601 timestamp"
}

Status Codes:

• 200 - Success
• 400 - Invalid input
• 429 - Rate limit exceeded
• 500 - Server error

---

Content Chat

POST /api/chat

Interactive chat for iterative content refinement.

Request Body:

{
  "message": "string (user message or request)",
  "context": "object (previous conversation context)",
  "contentType": "bio | welcome | enhancement"
}

Response: Server-Sent Events (SSE) stream with real-time responses:

data: {"content": "streamed response text..."}

Features:

• Real-time streaming response
• Conversation context preservation
• Support for follow-up refinements

---

Rate Limiting

All API endpoints implement rate limiting using Upstash Redis.

Endpoint	Limit	Window
/api/generate	10 requests	1 hour
/api/chat	30 requests	1 hour

Rate Limit Response (429):

{
  "error": "Too many requests",
  "retryAfter": 3600
}

---

⚙️ Configuration

Environment Variables

Create a .env.local file in the project root with the following variables:

LLM Model Selection

# Choose one of: gpt-4o, gpt-5, glm-4.7-flash-free, gemini-2.0-flash-free, mimo-v2-flash-free
# or any AIHUBMIX model (default: mimo-v2-flash-free)
NEXT_LLM_MODEL=gpt-4o

OpenAI Configuration

# Required only if using gpt-4o or gpt-5 models
# Get from: https://platform.openai.com/api-keys
NEXT_OPENAI_API_KEY=sk_your_key_here

OpenRouter Configuration

# Required only if using OpenRouter models
# Get from: https://openrouter.ai
OPENROUTER_API_KEY=your_openrouter_key_here
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
OPENROUTER_DEFAULT_MODEL=meta-llama/llama-3.3-70b-instruct:free
OPENROUTER_HTTP_REFERER=https://your-site.example
OPENROUTER_APP_NAME=BioGPT

AIHUBMIX Configuration (for free models)

# Required for: glm-4.7-flash-free, gemini-2.0-flash-free, mimo-v2-flash-free
# Get from: https://aihubmix.com
AIHUBMIX_API_KEY=your_aihubmix_key_here
AIHUBMIX_API_BASE_URL=https://aihubmix.com/v1

Rate Limiting Configuration

# Upstash Redis for production rate limiting (optional - falls back to in-memory if not set)
REDIS_URL=https://...                          # Redis connection URL
REDIS_TOKEN=xxxxx                              # Redis authentication token

# Rate limiting parameters
RATE_LIMIT_WINDOW=60000                        # Window duration in milliseconds
RATE_LIMIT_MAX=10                              # Maximum requests per window per IP

Client-side Settings

# Cooldown between requests (seconds)
NEXT_PUBLIC_COOLDOWN_TIME=10

Quick Start

1. Using GPT-4o (requires OpenAI key):

   NEXT_LLM_MODEL=gpt-4o
   NEXT_OPENAI_API_KEY=sk_...

2. Using free models (requires AIHUBMIX key):

   NEXT_LLM_MODEL=glm-4.7-flash-free
   AIHUBMIX_API_KEY=...

For detailed setup instructions, see docs/ENV_VARIABLES.md

Tailwind Configuration

The project uses Tailwind CSS with custom CSS variables for theming:

/* Light theme (default) */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.6%;
  /* ... other color variables */
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 0 0% 3.6%;
    --foreground: 0 0% 98%;
    /* ... other color variables */
  }
}

RTL Support

The application supports RTL (Right-to-Left) languages:

<html dir="rtl" lang="fa">
  {/* content */}
</html>

To disable RTL, remove the dir="rtl" attribute from the root layout.

---

🚀 Quick Start

Prerequisites

• Node.js: 18 or higher
• Package Manager: Yarn 1.22+ or npm 9+
• OpenAI Account: With API access and credits
• Upstash Account: (Optional, for rate limiting in production)

Installation

1. Clone the repository:

   git clone https://github.com/ehsaghaffar/einbiogpt.git
   cd einbiogpt

2. Install dependencies:

   yarn install
   # or
   npm install

3. Set up environment variables:

   cp .env.example .env.local
   # Edit .env.local with your API keys

4. Start the development server:

   yarn dev
   # or
   npm run dev

5. Open your browser: Navigate to http://localhost:3000

---

👨‍💻 Development

Available Commands

Command	Description
yarn dev	Start development server on port 3000
yarn build	Build for production
yarn start	Start production server
yarn run clean	Remove dependencies and reinstall

Development Workflow

1. Start the development server:

   yarn dev

2. Make changes to components, styles, or API routes

3. Hot reload automatically applies changes (no restart needed)

4. Test your changes in the browser at http://localhost:3000

Code Style

The project follows these conventions:

• Components: PascalCase file names (e.g., BioGenerator.tsx)
• Utilities: camelCase file names (e.g., utils.ts)
• Imports: Organized in groups (React → third-party → internal → types)
• Styling: Tailwind CSS utility classes + cn() for conditionals
• TypeScript: Strict mode enabled, full type coverage expected

See AGENTS.md for detailed coding guidelines.

Key Technologies

• App Router: Next.js 14 App Router for file-based routing
• Server Actions: Use for form submissions and data mutations
• TypeScript: Full type safety throughout the codebase
• Tailwind CSS: Utility-first styling approach

---

🐳 Docker

Development with Docker

Build and run using Docker Compose:

# Build Docker image
make build

# Start containers
make start

# View logs
make logs

# Stop containers
make stop

Or use Docker Compose directly:

docker-compose -f docker-compose.dev.yml up --build

Production Deployment

Build the production Docker image:

docker build -f prod.Dockerfile -t biogpt-prod .
docker run -p 3000:3000 \
  -e OPENAI_API_KEY=sk_xxx \
  -e UPSTASH_REDIS_REST_URL=https://... \
  -e UPSTASH_REDIS_REST_TOKEN=xxxxx \
  biogpt-prod

---

🌐 Deployment

Prerequisites for Deployment

• OpenAI API key with sufficient credits
• Upstash Redis URL and token (for production rate limiting)
• Deployment platform account (Vercel, Netlify, Railway, etc.)

Vercel Deployment (Recommended)

1. Push to GitHub:

   git push origin main

2. Connect to Vercel:

   • Go to https://vercel.com
   • Import your GitHub repository
   • Add environment variables in project settings

3. Deploy:

   vercel

Environment Variables in Vercel:

• OPENAI_API_KEY
• UPSTASH_REDIS_REST_URL
• UPSTASH_REDIS_REST_TOKEN
• NEXT_PUBLIC_APP_URL

Other Deployment Options

Railway

1. Connect GitHub repository
2. Add environment variables
3. Deploy

Docker/Self-Hosted

1. Build Docker image: docker build -f prod.Dockerfile -t biogpt-prod .
2. Run container with environment variables
3. Use reverse proxy (nginx) for production setup

Performance Optimization

• Vercel Analytics enabled for monitoring
• Speed Insights integrated for Web Vitals tracking
• Image optimization with Next.js
• CSS minification via Tailwind
• Code splitting for optimal bundle size

---

📊 Performance Considerations

Optimization Strategies

1. API Response Streaming: Uses Server-Sent Events (SSE) for real-time streaming
2. Rate Limiting: Prevents abuse and ensures fair resource usage
3. Caching: Redis integration for efficient data caching
4. Code Splitting: Next.js automatic code splitting
5. Image Optimization: Tailwind CSS and optimized assets

Monitoring

• Vercel Analytics: Track user behavior and engagement
• Speed Insights: Monitor Core Web Vitals
• Error Tracking: Built-in error boundaries and error pages

---

🔐 Security Features

• API Key Protection: Environment variable isolation
• Rate Limiting: Upstash Redis-based protection
• CORS Configuration: Restrictive CORS policies
• Input Validation: Zod schema validation
• XSS Prevention: React's built-in escaping
• Type Safety: TypeScript strict mode

---

Contributing

Contributions are welcome! Please follow these guidelines:

Getting Started

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Test thoroughly
5. Commit with clear messages: git commit -m 'feat: add amazing feature'
6. Push to your fork: git push origin feature/amazing-feature
7. Open a Pull Request

Development Guidelines

• Follow the code style in AGENTS.md
• Write TypeScript with strict type checking
• Use Tailwind CSS for styling
• Test changes locally before submitting PR
• Update documentation as needed
• Keep commits atomic and descriptive

PR Requirements

• Clear description of changes
• Related issue numbers (if applicable)
• Screenshots for UI changes
• Tests for new features (if applicable)

---

📄 License

This project is licensed under the MIT License - see the LICENCE file for details.

---

👤 Author

Ehsan Ghaffar

• GitHub: @ehsaghaffar
• Email: [contact information]

---

🔗 Resources & Documentation

• Next.js Documentation
• Tailwind CSS Documentation
• OpenAI API Documentation
• LangChain Documentation
• Radix UI Documentation
• TypeScript Documentation

---

🐛 Troubleshooting

Common Issues

Issue: "API key not found"

• Solution: Ensure .env.local contains OPENAI_API_KEY
• Verify the key is valid and has available credits

Issue: "Rate limit exceeded"

• Solution: Wait for the cooldown period or upgrade your Redis plan
• Check UPSTASH_REDIS_REST_URL configuration

Issue: "Port 3000 already in use"

• Solution: yarn dev --p 3001 (use different port)
• Or kill process: lsof -i :3000 | grep LISTEN | awk '{print $2}' | xargs kill -9

Issue: "Styling not applied"

• Solution: Rebuild Tailwind CSS cache: rm -rf .next && yarn dev
• Ensure CSS is imported in root layout

Getting Help

1. Check the Issues page
2. Review existing documentation
3. Create a detailed bug report with reproduction steps

---

📈 Roadmap

Future enhancements planned:

• Multi-language support for content generation
• User authentication and saved bios
• Batch processing for multiple bios
• Custom tone options
• Browser extension
• Mobile app
• API for third-party integration
• Analytics dashboard

---

📝 Changelog

See CHANGELOG.md for version history and updates.

---

🙏 Acknowledgments

• OpenAI for GPT models
• LangChain for LLM orchestration
• Vercel for hosting and analytics
• Radix UI for accessible components
• Tailwind CSS for utility-first styling

---

⬆ Back to Top