Forem: Talha Kazmi

How I Built a "Living" AI Chatbot with Next.js, Mistral, and Framer Motion

Talha Kazmi — Thu, 19 Feb 2026 04:50:01 +0000

🚀 The Introduction
Most AI chatbots are boring. They are usually just a static box in the corner of the screen. When I was building the AI assistant for Trainlytic, I wanted something different. I wanted a bot that felt "alive",an assistant that acknowledges your presence before you even start typing.

In this post, I’ll show you how I built a futuristic, robot-faced AI coach using Mistral AI, Next.js, and some clever Framer Motion math to make its eyes follow your cursor.

🤖 The Vision: A Bot with Personality
I didn't want a "wrapper." I wanted a UI that felt like the year 3026. The goal was to combine Glassmorphism, Neon accents, and Interactive Animation to create a high-fidelity user experience.

Key Features:
Cursor Tracking: Eyes follow the user's mouse movement.

Natural Blinking: Randomized double-blinks to mimic biological behavior.

Mistral AI Integration: Specialized fitness and nutrition coaching.

👁️ The "Eye" Logic: Mathematical Cursor Tracking
The standout feature is the eye-tracking. The eyes don't just move; they calculate the distance between your cursor and the center of the bot's face using a limited "visor" range.

I used useEffect to listen for mouse movements. Here is the core logic:

TypeScript
// Cursor tracking for eyes
useEffect(() => {
  const handleMouseMove = (e: MouseEvent) => {
    if (!robotRef.current || isOpen) return;

    const rect = robotRef.current.getBoundingClientRect();
    const robotCenterX = rect.left + rect.width / 2;
    const robotCenterY = rect.top + rect.height / 2;

    const deltaX = e.clientX - robotCenterX;
    const deltaY = e.clientY - robotCenterY;

    // Limit eye movement range (max 4px offset for natural movement)
    const maxOffset = 4;
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
    const normalizedDistance = Math.min(distance / 300, 1);

    const offsetX = (deltaX / (Math.abs(deltaX) + 100)) * maxOffset * normalizedDistance;
    const offsetY = (deltaY / (Math.abs(deltaY) + 100)) * maxOffset * normalizedDistance;

    setEyeOffset({ x: offsetX, y: offsetY });
  };

  window.addEventListener("mousemove", handleMouseMove);
  return () => window.removeEventListener("mousemove", handleMouseMove);
}, [isOpen]);

⚡ The Brain: Mistral AI & Streaming
For the "brain," I chose Mistral AI. It’s incredibly fast and perfect for the specific fitness and nutrition prompts I use to help guys reach their goals.

To prevent a clunky user experience, I implemented Streaming Responses. Instead of waiting for the full response, the text "flows" into the bubble using a ReadableStream.

🎨 UI/UX: Natural Blinking
I wrote a performDoubleBlink function that triggers at random intervals. This small detail makes the bot feel less like an icon and more like an entity.

TypeScript
const performDoubleBlink = () => {
  setIsBlinking(true); // First blink
  setTimeout(() => {
    setIsBlinking(false);
    setTimeout(() => {
      setIsBlinking(true); // Second rapid blink
      setTimeout(() => setIsBlinking(false), 100);
    }, 150);
  }, 100);
};

💡 Conclusion
Building this taught me that UX engineering is just as important as the AI itself. People stay on the page longer just to play with the bot's eyes!

Check it out live at Trainlytic.net and let me know what you think of the design in the comments!

How I Hacked My Cortisol to Lose 26kg and Escape the "Skinny Fat" Trap The High-Intensity Mistake

Talha Kazmi — Wed, 18 Feb 2026 12:38:27 +0000

The High-Intensity Mistake
On May 6, 2025, I started my journey at 100kg. Like most people, I thought the answer was "eat nothing and hit the gym hard." I was losing weight, but I was losing my muscle right along with the fat. I ended up in constant physical pain, unable to recover, and trapped in a "skinny fat" physique despite the scale moving down. My nutrition was non-existent, and my body was failing to keep up with the stress of a 12-hour work shift and high-intensity training.

The Pivot: Lowering Stress to Burn Fat
On December 31, 2025, I made a radical choice: I left the gym. I realized that as a senior developer working 12 hours a day, my cortisol levels were likely through the roof, causing my body to hold onto fat. I shifted my entire focus to a precision diet and exactly 60 minutes of brisk walking per day. No home workouts, no extra supplements, just consistent, low-impact movement and high-quality nutrition.

The Result: Data Doesn't Lie
The shift was immediate. On January 1, 2026, I weighed 80.6kg. By February 18, 2026, I hit 74.6kg. That is a 6kg loss in just 49 days, and unlike my first attempt, this was pure fat loss. My muscle is retained, my energy is high, and for the first time, I am on the correct path for my body type. I plan to continue this cut until April 1st before transitioning into a lean bulk.

Final Thoughts
I was always the type of person who gained fat easily but lost it with extreme difficulty. Finally, I’m on the right path. By moving from a "work harder" mindset to a "recover smarter" mindset, I transformed my health without sacrificing my career performance.

How I Automated SEO-Ready Blogs Across Next.js and Laravel Using a Custom "Shadcn-Style" Library

Talha Kazmi — Wed, 18 Feb 2026 09:49:11 +0000

The "Why" (Paragraph 1: The Bottleneck)

In the high-stakes world of agency development, the request "we need a blog for SEO" sounds simple but usually triggers a 20-hour manual setup. Recently, I was tasked with revamping six legacy projects to get them "ad-ready," which meant implementing robust, SEO-optimized blog systems from scratch for every single one. Even with existing headless CMS options, the repetitive cycle of configuring API routes, setting up dynamic slugs, and building accessible UI components across different tech stacks was a massive drain on developer velocity.

The Solution (Paragraph 2: The "Super-Admin" Architecture)

I realized I didn't need a new CMS, I needed a standardized distribution engine. I engineered a centralized "Super-Admin" hub live on Vercel. In this ecosystem, each project is treated as a "Normal Admin" instance identified by a unique Organization ID. By centralizing the content management and API key distribution, I created a single source of truth that could feed blogs to any frontend, whether it was a modern Next.js app or a robust Laravel backend.

The Transformation (Paragraph 3: From 20 Hours to 10 Minutes)

To make this integration seamless, I built a custom CLI-driven library inspired by the shadcn/ui philosophy. Instead of manual configuration, a developer simply initializes the library in their project. The CLI guides them through selecting a theme and template, then hooks into the Organization ID to automatically scaffold the dynamic /blog and /[slug] routes. What used to be a grueling 20-hour architectural task is now a 5-minute initialization. Once published in the central hub, blogs are immediately fetched and rendered, allowing the team to focus on content instead of configuration.

Technical Deep Dive: The Client-Side Engine

// Core logic for fetching blogs from the centralized CMS
async getBlogs(options?: {
page?: number;
limit?: number;
search?: string;
}): Promise<BlogListResponse> {
const url = this.getUrl('/public/blogs', {
organizationId: this.config.organizationId,
page: options?.page?.toString() || '1',
limit: options?.limit?.toString() || '10',
search: options?.search || '',
});
return this.fetch<BlogListResponse>(url);
}

"The core of the library is a specialized CMSClient. By abstracting the fetch logic and organization scoping, the library ensures that no matter which project is calling the API, the data remains consistent and type-safe across the board."

The Standard: From Logic to High-Fidelity UI

"A library is only as good as the interfaces it enables. To ensure my cms-renderer could handle more than just text, I stress-tested the design logic against complex, data-heavy layouts. Below are examples of the UI standards I maintain across my full-stack projects, including my fitness platform, Trainlytic.net. The same principles of clean component architecture and efficient data fetching power these data-rich interfaces."

Final Thoughts

"Standardizing the 'boring' parts of development, like setting up an SEO blog for the sixth time, is how we unlock the time to build complex products like Trainlytic. This library started as a way to save my own time, but it’s become a blueprint for how I approach scalable frontend architecture.

Are you building internal tools to speed up your workflow? Let’s talk in the comments!"