⚡ KAIZEN.AI ⚡

🚀 The AI-Powered LinkedIn Post Generator That Actually Slaps 🚀

Write viral LinkedIn posts in seconds, not hours. Powered by 11 AI models. Built different. 🔥

⭐ Star this repo • 🏁 Quick Start • ✨ Features • 🛠️ Tech Stack

---

🤔 What is Kaizen.AI?

Kaizen (改善) means "continuous improvement" in Japanese. 🇯🇵

Kaizen.AI takes that philosophy and applies it to your LinkedIn game. It's a gorgeous, neo-brutalist AI writing tool that helps you craft viral LinkedIn posts with the power of 11 different AI models — from Meta's Llama 4 to OpenAI's GPT-OSS 120B. 🧠✨

💡 Stop staring at a blank screen. Start generating bangers.

---

🎬 How It Works

📝 You type a topic  →  🤖 AI generates a killer post  →  ✏️ You refine it  →  🚀 Post goes viral

It's literally that simple:

1. 🎯 Pick your audience — Who are you writing for?
2. 💬 Type your topic — AI autocomplete helps as you type!
3. 🎨 Choose your vibe — Professional? Storyteller? Super Chill 🤙?
4. ⚡ Hit Generate — Watch the magic happen with smooth word-by-word streaming
5. ✂️ Refine & Edit — Shorten, add hashtags, emojis, CTA, or select specific text to rewrite
6. 📋 Copy & Post — One click to clipboard, paste on LinkedIn, watch the likes roll in 🎉

---

✨ Features

🤖 11 AI Models at Your Fingertips

Category	Models	Description
⭐ Popular	Llama 3.3 70B, Llama 3.1 8B, Kimi K2	Best balance of quality & speed
🦙 Meta Llama	Llama 4 Maverick 17B, Llama 4 Scout 17B	Cutting-edge Llama 4 family
🧠 Open Models	GPT-OSS 120B, GPT-OSS 20B, Qwen3 32B	OpenAI open-source + Alibaba
🔮 Experimental	Kimi K2 0905, ALLaM 2 7B	Latest experimental models

🎨 Post Customization

Feature	Options
📏 Post Length	🔥 Short (3-5 lines) · 📝 Medium (8-12 lines) · 📖 Long (15-20 lines)
🎣 Hook Styles	Bold Statement · Question · Stat/Number · Mini Story · Contrarian · Auto ✨
🎭 Tones	💼 Professional · 📖 Storyteller · 🔥 Contrarian · 🎯 Direct · 🤙 Super Chill

⚡ Smart Features

• 🔮 AI Autocomplete — Ghost text suggestions appear as you type your topic (press Tab to accept!)
• ✂️ Selection Editing — Select any text in the output → type custom instructions → AI rewrites just that part
• 🎬 Word-by-Word Streaming — Smooth 15ms/token animation with a sleek blinking cursor
• ⏭️ Skip Animation — Sticky skip button at the top if you're impatient (we get it 😄)
• 📊 Engagement Score — Real-time scoring (0-100) with color-coded ratings
• 📈 Word Count & Read Time — Know exactly how long your post is
• 📋 One-Click Copy — Copy the entire post to clipboard instantly

✏️ 6 Quick Edit Actions

Action	What it does
✂️ Shorten	Trim the fat, keep the impact
✨ Refine	Polish and improve the writing
🔄 Retry	Generate a completely new version
#️⃣ Hashtags	Add relevant trending hashtags
😎 Add Emoji	Sprinkle in some personality
📣 Add CTA	Add a call-to-action that drives engagement

📚 Post History

• 💾 Auto-saved — Every generated post is saved locally (up to 10)
• 🗑️ Individual delete — Remove posts you don't need
• 📋 Copy from history — One-click copy any past post
• 🔍 Search history — Find that banger you wrote last week
• 🏷️ Badges — See tone & audience at a glance
• ⏰ Timestamps — Know exactly when each post was created

🛡️ Smart Validation

• 🚫 Gibberish detection — Catches random keyboard mashing
• 🎯 Topic relevance — Keeps posts LinkedIn-appropriate
• 🔒 Profanity filter — Keeps it professional
• 📏 Length enforcement — Min 10, max 500 characters for topics
• 💡 Helpful suggestions — Tells you exactly how to fix invalid input

📱 Fully Responsive

• 🖥️ Desktop — Beautiful two-column layout (form + preview)
• 📱 Mobile — Smart tab system (Create ↔ Preview) with touch-optimized controls
• 👆 Touch Selection — Select text on mobile to edit, just like desktop

---

🛠️ Tech Stack

Layer	Technology	Why?
⚛️ Framework	Next.js 16.1.6 (App Router + Turbopack)	Blazing fast builds, React Server Components
🎨 UI	React 19 + Tailwind CSS 4	Latest React with utility-first CSS
🎬 Animations	Framer Motion 12	Buttery smooth 60fps animations everywhere
🤖 AI	Groq SDK (LPU Inference)	Lightning-fast AI inference — sub-second responses
🔤 Icons	Lucide React	Beautiful, consistent icon set
🍞 Toasts	React Hot Toast	Gorgeous notification toasts
📝 Language	TypeScript 5	Full type safety, zero anys
🎨 Design System	Neo-Brutalist	Bold borders, hard shadows, vibrant colors

🎨 Design Language

🟩 Primary:    #BEF264 (Lime Green)
🟡 Secondary:  #FDE047 (Yellow)
🟠 Accent:     #FB923C (Orange)
⬛ Text:       #111827 (Near Black)
⬜ Background: #FFFDF7 (Warm White)

Borders:  3px solid black
Shadows:  5px 5px 0px #000 (hard shadow)
Radius:   rounded-xl (12px)
Font:     System sans-serif, font-black for headings

---

🏁 Quick Start

Prerequisites

• 📦 Node.js 18+ installed
• 🔑 A free Groq API key from console.groq.com

Installation

# 1️⃣ Clone the repo
git clone https://github.com/StarDust130/kaizen_ai.git

# 2️⃣ Navigate into the project
cd kaizen_ai

# 3️⃣ Install dependencies
npm install

# 4️⃣ Create your environment file
# Create a .env.local and add your Groq API key:
echo "GROQ_API_KEY=gsk_your_api_key_here" > .env.local

# 5️⃣ Start the dev server 🚀
npm run dev

Now open http://localhost:3000 and start generating bangers! 🎉

🔑 Environment Variables

Create a .env.local file in the root:

GROQ_API_KEY=gsk_your_api_key_here

🆓 Get your free API key at console.groq.com — it's instant and totally free!

📜 Available Scripts

Command	Description
npm run dev	🚀 Start dev server (Turbopack — super fast!)
npm run build	📦 Create production build
npm run start	🌐 Start production server
npm run lint	🔍 Run ESLint checks

---

📂 Project Structure

kaizen_ai/
├── 📄 app/
│   ├── 🏠 page.tsx                  # Main page — wires everything together
│   ├── 🎨 layout.tsx                # Root layout with metadata
│   ├── 💅 globals.css               # Global styles + custom scrollbar
│   │
│   ├── 🧩 components/
│   │   ├── Header.tsx               # 🧭 Nav bar with logo, portfolio & GitHub links
│   │   ├── PostForm.tsx             # 📝 Form: audience, topic (+ autocomplete), tone, options
│   │   ├── PostPreview.tsx          # 👁️ Output: streaming text, edit toolbar, selection edit
│   │   ├── PostHistory.tsx          # 📚 History panel with search, delete, copy, badges
│   │   ├── MobileTabs.tsx           # 📱 Create ↔ Preview tabs for mobile
│   │   ├── ValidationModal.tsx      # 🚨 Beautiful error modal for invalid input
│   │   ├── CharCounter.tsx          # 🔢 Character count ring indicator
│   │   ├── FloatingDecorations.tsx  # ✨ Animated background shapes
│   │   └── icons.tsx                # 🎨 Custom SVG icons (GitHub, etc.)
│   │
│   ├── 🪝 hooks/
│   │   └── usePostGenerator.ts      # 🧠 All state: generation, streaming, history, editing
│   │
│   ├── 📚 lib/
│   │   ├── constants.ts             # ⚙️ Tones, models, templates, lengths, hooks
│   │   ├── types.ts                 # 📐 TypeScript interfaces & types
│   │   └── validation.ts            # 🛡️ Multi-layer input validation engine
│   │
│   └── 🔌 api/
│       ├── generate/route.ts        # 🤖 POST → AI post generation
│       ├── edit/route.ts            # ✏️ POST → AI post editing & selection rewrites
│       └── suggest/route.ts         # 🔮 POST → AI autocomplete suggestions
│
├── 📦 package.json
├── ⚙️ next.config.ts
├── 🎨 postcss.config.mjs
├── 📝 tsconfig.json
└── 🚀 README.md                    # You are here! 👋

---

🧠 Architecture Highlights

🔄 Streaming Animation Engine

Posts don't just appear — they stream word-by-word at 15ms/token with a smooth blinking cursor. The streaming uses setInterval with token splitting that preserves whitespace. Skip it anytime with the sticky ⏭️ button at the top.

🔮 AI Autocomplete Pipeline

As you type your topic (600ms debounce), the app fires off a request to Llama 3.1 8B (ultra-fast model) which returns 2-4 word completions. Ghost text appears inline — press Tab on desktop or tap the green button on mobile to accept. Suggestions only appear when the input is focused. 🎯

✂️ Selection Edit Flow

1. 🖱️ Select any text in the generated post
2. 📝 An edit bar slides up from the bottom
3. ✍️ Type your instruction (e.g., "make this more dramatic")
4. 🤖 AI rewrites ONLY the selected portion
5. 🔄 The original text is surgically replaced — rest stays untouched!

🛡️ Validation Engine

Multi-layer input validation that catches:

• 🔤 Consonant clusters (checked per-word, not across boundaries)
• 🔁 Character repetition patterns
• 🎲 Known gibberish sequences
• 📋 Off-topic content (with smart LinkedIn-exempt keywords)
• 🤬 Profanity (normalized for bypass attempts like $h!t)

---

🌟 Why Kaizen.AI?

Others 😴	Kaizen.AI ⚡
Plain textarea output	Word-by-word streaming with cursor animation 🎬
One AI model	11 models across 4 categories 🤖
Generate and done	6 edit actions + selection-level rewrites ✂️
No autocomplete	AI ghost-text autocomplete as you type 🔮
Desktop only	Fully responsive with touch selection 📱
No history	Auto-saved history with search & badges 📚
Generic UI	Neo-brutalist design that actually looks fire 🔥

---

🤝 Contributing

Contributions are welcome! Feel free to:

1. 🍴 Fork the repo
2. 🌿 Create a feature branch (git checkout -b feature/amazing-thing)
3. 💻 Make your changes
4. ✅ Run npm run build to verify everything works
5. 📤 Push and open a PR

---

📄 License

This project is open source and available under the MIT License.

---

Built with 💚 and way too much ☕ by StarDust130

🐙 GitHub • 🌐 Portfolio

---

⚡ If Kaizen.AI helped you write a banger post, drop a ⭐ on the repo! ⚡

改善 — Continuous Improvement, one post at a time. 🚀