Kirin AI

Transparent Desktop Intelligence Overlay

Kirin is a transparent AI assistant designed to live on top of a desktop workflow. I quickly built the project after receiving an awesome 2-in-1 laptop as a gift from Intel Corporation! The tablet capabilities have led me to start taking digital notes. Using Kirin, I can quickly gain OCR + AI insight while studying problems (I've been using it a bit for LeetCode study flows).

Demo

---

Key Features

• Transparent Overlay: A UI that stays "Always on Top" but never blocks your view.
• Context-Aware OCR: Capture any part of your screen (code, math problems, diagrams) and send it to the AI.
• Real-Time Streaming: Token streaming for reduced latency responses.
• Dynamic Resizing: The window physically shrinks and expands based on use, ensuring you can click through to your desktop when the assistant is collapsed.
• Global Hotkey: Spawn or hide Kirin instantly with Ctrl + Space.

---

Getting Started

Prerequisites

• Node.js (Latest LTS recommended)
• A Gemini API Key (Get one from the Google AI Studio)

Installation & Setup

1. Clone the Repository

git clone https://github.com/yourusername/kirin.git
cd kirin

2. Install Dependencies

npm install

3. Configure Environment Variables Create a .env file in the root directory:

MAIN_VITE_GEMINI_API_KEY=your_api_key_here

4. Run in Development Mode

npm run dev

---

Usage

1. Make Kirin Appear: Press Ctrl + Space at any time to toggle the assistant's visibility.
2. Capture Context: Click Take Screenshot. Kirin will automatically hide itself, snap the screen, and reappear (Windows Snipping Tool).
3. Ask & Analyze: * Type a custom prompt or use the Quick Actions.

• Analyze Question: Deep-dive into the fundamentals of the problem on screen.
• Code Implementation: Get a clean Python implementation and logic breakdown (for code problems).

4. Stay Focused: Use the Collapse button to keep Kirin's toolbar visible while freeing up screen real estate.

---

Tech Stack

• Framework: Electron (Main process & IPC)
• Bundler: Electron-Vite
• Frontend: React with TypeScript
• Styling: Tailwind CSS
• AI Engine: Google Gemini Vision (via google-generative-ai)
• Markdown: react-markdown for AI response rendering.

---

Learning Notes (Project Background)

I pursued this project primarily to explore IPC (Inter-Process Communication) patterns in Electron. It implements:

• Async Generators for streaming AI data.
• Functional State Updates in React to handle high-frequency token arrival.
• Native Window Syncing using useEffect to manage OS-level window boundaries dynamically.