Thikana

Thikana (meaning "Destination" or "Home" in Hindi) is a premium AI-powered portfolio assistant designed to provide an interactive way to explore details of your project. Built with modern web technologies, Thikana offers a seamless, conversational interface that acts as a digital twin for your app, answering questions about his experience, skills, and projects in real-time.

Live Working Example in Machine Code Website

Code Implementation

Please add a star once you visit the github repository would be very helpful.

✨ Features

• Multi-Model AI Integration: Leverages the power of Groq (Llama 3.3, 3.1, Open AI, Groq) and Google Gemini (3 Flash, 2.5 Flash) via the Vercel AI SDK.
• Intelligent Fallback Mechanism: If one AI model is unavailable or hits rate limits, the system automatically tries the next best model to ensure zero downtime.
• Dynamic Context Injection: Responds accurately based on a comprehensive professional dataset (experience at Adeptmind, expertise in Go, Python, React, and more).
• Modern UI/UX: Features a sleek, responsive chat interface with glassmorphism effects and smooth micro-animations.
• Persistent Chat History: Remembers your conversation using local storage.

🛠️ Tech Stack

• Frontend: Next.js (App Router), React 19, TypeScript
• Styling: Vanilla CSS (Modern CSS variables, Flexbox/Grid)
• AI Engine: Vercel AI SDK, Groq, Google Generative AI
• Deployment: Optimized for Vercel

🚀 Getting Started

Prerequisites

• Node.js (v18 or later)
• Yarn or NPM
• API Keys for Groq and/or Google Gemini

Installation

2. Install dependencies:

   yarn add thikanaa 

3. Run the development server:

   yarn dev

4. Open the app: Navigate to http://localhost:3000 to see the application in action.

📦 NPM Package Usage

You can now use Thikana as an npm package in your own React/Next.js projects.

Installation

yarn add thikanaa

Usage

import { ChatPopup } from 'thikanaa';
import 'thikanaa/dist/index.css';


const App = () => {
  return (
    <div
      style={{
        position: "fixed",
        bottom: "20px",
        right: "20px",
        zIndex: 1000,
      }}
    >
      <ChatPopup 
        systemPrompt="Your custom system prompt here"
        feedData={"This is Raghu, a software engineer with 5 years of experience in building scalable and performant web applications. He is passionate about using the latest technologies to create innovative and user-friendly solutions."}
        assistantName="Thikana"
        apiUrl="/api/chatbot" // Your backend endpoint
        initialMessage="Hi this is Thikana! How can I help you today?"
        messages={[
          {
            role: 'user',
            content: 'All you list of messages',
          },
        ]}
        onMessageSend={(message) => {
          console.log(message);
        }}
        onMessageReceive={(message) => {
          console.log(message);
        }}
      />
    </div>
  );
};

Props

| Prop | Type | Description | | --- | --- | --- | | systemPrompt | string | Custom instructions for the AI model | | feedData | any | Base context data for the assistant | | apiUrl | string(Optional) | Endpoint to call for AI responses (default: /chatbot) | | assistantName | string | Name shown in the chat (default: Thikana) | | model | string | Specific model ID to use | | messages | Message[](Optional) | List of messages to display in the chat | | onMessageSend | function(Optional) | Callback function to handle message sending | | onMessageReceive | function(Optional) | Callback function to handle message receiving |

Dev by Malay Mishra