Inspiration
I was inspired by a widget called "NotchNook" which basically turns the "notch" of you macbook into a center which can control music, show weather, store files etc. I thought it was cool how this widget turned a ugly looking feature into something more meaningful and made it cool.
What it does
Ghost is an AI integrated "companion" designed to help with accountability and quick assistance. It is a translucent object that patrols the bottom part of you screen and gives wellness reminders and on-click opens a input box which is connected to a LLM. It is a minimal widget that is designed not to be distracting.
How we built it
Started with an electron template, then used html and css to design the basic ghost. Tried to go with the frosted glass look which was recently introduced in the iOS updates. Then I used typescript to integrate motion and OpenRouter into the companion, bridging it with AI.
Challenges we ran into
One part which was hard was making the window in which the ghost floats "click-throughable" which basically means that it doesn't take away from screen estate, while making the ghost a clickable object. Another challenge was integrating AI into the project. This is the first time i've used an AI api to power something so figuring that out was difficult.
Accomplishments that we're proud of
Honestly, my first hackathon, so I'm happy that I stuck to a schedule and made something in a short amount of time without procrastinating. Also, the first project I've built in general that has interactivity and a sort of "life" to it which is valuable to me and makes my screen feel more lively.
What we learned
I learnt a lot about css apart from just basic styling. I also learnt a lot about typescript state management while handling the animation loops with the API calls. I also learnt about integrating API's and how you can give them a personality.
What's next for ghost widget
Right now the integrated AI isn't too good as it is the free version which isn't capable of bearing too much load. If I see promise, I later want to turn it into a full fledged AI companion available on your desktop that is customizable and helpful, sort of like a personified version of Siri.
Built With
- api
- css
- github
- html
- openrouter
- typescript
Log in or sign up for Devpost to join the conversation.