Getting Started with React Hooks

Build Your Own Cuely-Style AI Assistant on Windows (Step-by-Step Tutorial)

Published: December 01, 2024

Build Your Own Cuely-Style AI Assistant on Windows (Step-by-Step Tutorial)

In this post, I’ll show you how to build your own **Cuely-style personal AI assistant** for Windows. This assistant will pop up instantly, read your screen, and help you with answers and suggestions using AI – just like popular AI tools but completely private and customizable. Best part? It’s **open-source**, and I’ve uploaded the complete code for you to use and modify. 👉 my-cuely GitHub Project

What This AI Assistant Can Do

Here’s a quick overview of the features you’ll get: -> Pop up using a shortcut (Ctrl + \\). -> Read your screen text using OCR (Optical Character Recognition). -> Use OpenAI API (GPT-4o or GPT-4) to answer questions or suggest solutions. -> Disappear instantly with the same shortcut. -> Stay invisible during screen sharing (perfect for interviews or online meetings).

What You’ll Need

To follow this tutorial, make sure you have: 1. A Windows PC (you can adapt it for macOS or Linux later). 2. Node.js installed for Electron. 3. An OpenAI API key to access GPT models. 4. Basic knowledge of how to install software and run commands.

Step 1: Clone the Open-Source Project

First, clone my GitHub repository and install the dependencies:
git clone https://github.com/dharuna457/my-cuely.git 
cd my-cuely
npm install

Step 2: Add Your OpenAI API Key

Inside the project folder, create a file called .env and add your API key:
OPENAI_API_KEY=your-api-key-here

Step 3: Setup OCR for Screen Reading

This assistant uses Tesseract.js for OCR (Optical Character Recognition). Run this to download the necessary data files:
npm run setup-ocr

Step 4: Run the AI Assistant

Now start the Electron app:
npm start
Press Ctrl + \\ to toggle the assistant on and off.

How It Works (Behind the Scenes)

When you trigger the assistant: 1. It takes a screenshot of your screen. 2. Extracts text using Tesseract.js. 3. Sends the extracted text + your question to the OpenAI API. 4. Shows you the AI response in a simple popup window.

Customizing the Shortcut

You can change the default shortcut by editing main.js: 
globalShortcut.register('Control+\\', toggleWindow)
You can change it to Alt + Space or any shortcut you prefer.

Making it Invisible During Screen Sharing

This is perfect for interviews or online meetings. In main.js, make sure your BrowserWindow settings include: 
const win = new BrowserWindow({
  transparent: true,
  frame: false,
  skipTaskbar: true
})
This keeps the assistant hidden when you’re sharing your screen.

Extra Customizations

Here are some things you can try: -> Change the UI by editing index.html and style.css. -> Add voice support using the Web Speech API. -> Integrate your own knowledge base (like PDFs or notes) to answer personal questions. -> Build the project as an .exe so it auto-starts with Windows:
npm run build
🔗 Related: My Full Tech Journey Blog – How I started building projects like this from scratch.

Why This Project is Perfect for Beginners

I built this project keeping beginners in mind. It teaches you: 1. How to use Electron to build Windows apps. 2. How to work with OpenAI APIs. 3. How OCR (screen reading) works in real-time. 4. How to build projects that are both useful and fun. And most importantly – you’ll have a personal assistant that’s private and runs fully on your PC.

Final Words

If you’ve been wanting to build something exciting with AI, this project is perfect. 👉 Check out the full open-source code here: my-cuely GitHub Project Thanks for reading! If you make your own version, share it with me – I’d love to see it.

Comments