Nikhil AI Kit 🧠

Building an AI app? Don't make it look boring.

Most AI applications today are powerful but look... standard. A text box, a loading spinner, maybe a markdown renderer.

I built Nikhil AI Kit because I wanted my AI projects to feel different. I wanted them to feel futuristic, responsive, and alive. This isn't just a component library; it's a design system for the Age of Intelligence.

Why use this?

1. Instant "Hollywood" Aesthetic: Drop in a <VoiceOrb /> or <NeonBorder /> and your app immediately looks like it's from 2030.
2. Voice Made Simple: Interacting with speech APIs in the browser is pain. useSpeechToText and useTextToSpeech make it a one-liner.
3. Performance First: Animations are handled by Framer Motion and optimized for 60fps. No jank.

Installation

npm install nikhil-ai-kit framer-motion clsx tailwind-merge

The Toolkit

🎤 Voice Interface

Give your AI a voice and ears in seconds.

import { useSpeechToText, useTextToSpeech, VoiceOrb } from 'nikhil-ai-kit';

export function Assistant() {
  const { isListening, startListening } = useSpeechToText();
  const { speak } = useTextToSpeech();

  return (
    <div>
      <VoiceOrb listening={isListening} />
      <button onClick={startListening}>Talk to me</button>
      <button onClick={() => speak("Hello human.")}>Reply</button>
    </div>
  );
}

🔮 Visual Components

• StreamingText: Renders text with a typewriter effect that feels "thoughtful", not robotic. Includes a glowing cursor.
• NeonBorder: A beautiful, animated gradient border that makes any card pop.
• HolographicCard: A glassmorphic container with subtle lighting effects. Perfect for displaying AI insights.

Author

Nikhil Jangid

• Building the future of frontend.
• Follow me on GitHub

License

MIT © 2025 Nikhil Jangid