AI Content Generator

An AI content engine that adapts to your brand and automates your workflow across platforms — powered by your own AI credentials.

🚀 Project Overview

A next-generation SaaS platform for content creators, marketers, and businesses. Built with Next.js 16, React 19, TypeScript, Tailwind CSS, and shadcn/ui.

Core Differentiators

• BYOK (Bring Your Own Key): Users provide their own OpenAI/Anthropic API keys - no markup fees
• Brand Voice Training: AI learns and replicates unique brand tones and styles
• Multi-Platform Publishing: One-click to WordPress, LinkedIn, Medium
• Serverless Architecture: Built on Vercel and Supabase for infinite scalability

🛠 Tech Stack

• Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS v4
• UI Components: shadcn/ui (Radix UI primitives)
• Backend: Next.js API Routes (serverless)
• Database: Supabase (PostgreSQL + Auth + Storage)
• Caching: Upstash Redis
• AI Integration: OpenAI, Anthropic Claude, Groq
• Deployment: Vercel

📋 Prerequisites

• Node.js 20.11+ (recommend upgrading to 20.17+ for best compatibility)
• npm or yarn
• Git

🏃 Getting Started

1. Clone the repository

git clone <your-repo-url>
cd ai-content-generator

2. Install dependencies

npm install

3. Set up environment variables

Copy the example environment file:

cp .env.local.example .env.local

Update .env.local with your credentials:

# Supabase (create account at https://supabase.com)
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Upstash Redis (create account at https://upstash.com)
UPSTASH_REDIS_REST_URL=your-upstash-redis-url
UPSTASH_REDIS_REST_TOKEN=your-upstash-redis-token

# Encryption (generate with: openssl rand -base64 32)
ENCRYPTION_MASTER_KEY=your-encryption-master-key

# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run the development server

npm run dev

Open http://localhost:3000 to view the application.

📁 Project Structure

ai-content-generator/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Protected dashboard routes
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Landing page
│   └── globals.css        # Global styles with design system
├── components/            # React components
│   ├── ui/                # shadcn/ui components
│   └── features/          # Feature-specific components
├── lib/                   # Utility functions
│   ├── api-client.ts      # API wrapper
│   └── utils.ts           # Helper functions
├── hooks/                 # Custom React hooks
├── stores/                # State management (Zustand)
├── types/                 # TypeScript type definitions
└── project-docs/          # Comprehensive documentation

📚 Documentation

Comprehensive documentation is available in the /project-docs folder:

1. 00_Documentation_Summary.txt - Overview of all documentation
2. AI_Content_Generator_PRD.txt - Complete product requirements
3. System_Architecture.txt - Technical architecture and design
4. Implementation_Roadmap.txt - Week-by-week development plan
5. API_Design_Specification.txt - API reference and specifications
6. Design_System_UI_Guidelines.txt - Design system and UI patterns

🎨 Design System

The project uses a modern, premium design system with:

• Primary Color: Purple (#8B5CF6) - Creativity and intelligence
• Accent Color: Indigo (#6366F1) - Highlights and badges
• Dark Mode First: Optimized for long content creation sessions
• Responsive: Mobile-first approach
• Accessible: WCAG 2.1 AA compliant

🧪 Development Workflow

Code Quality

# Lint code
npm run lint

# Format code with Prettier (when configured)
npm run format

Building for Production

npm run build
npm run start

🚢 Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Configure environment variables in Vercel dashboard
4. Deploy!

📝 Development Roadmap

Phase 1: MVP Core (Weeks 1-8) - IN PROGRESS

• Week 1: Project initialization and setup
• Week 2: Database & Authentication
• Week 3-4: AI Integration & Core UI
• Week 5-6: Templates & Brand Voice
• Week 7-8: Content Management & Polish

Phase 2: Publishing & Collaboration (Weeks 9-12)

Phase 3: Advanced Features (Weeks 13-18)

See project-docs/Implementation_Roadmap.txt for detailed breakdown.

🤝 Contributing

This is a solo development project following the roadmap in the documentation. Contributions, issues, and feature requests are welcome!

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide
• Fonts: Inter & JetBrains Mono from Google Fonts

---

Status: Week 1 Complete ✅ | Next: Database & Authentication Setup

For questions or support, please refer to the comprehensive documentation in /project-docs.