HackAI frontend

Ok so I finally got back to this project! After HCAI came back online I did some tweaks. Firstly, since nest got abandoned, I switched the DB to use Neon! I could NOT upgrade to AI@6 since the openrouter sdk is behind on it, but I will look into upgrading once they do. I also did everything listed below:

Changelog

feat: model parameters
fix: context token button size -> sm
fix: system prompt size and web search prompt
fix; add: field, slider, spinner
fix: open search citations in a new tab

This devlog actually encompasses over 40 hours of work but I am not sure why it isn’t tracked… hm. Anyways, here’s a rundown:
I began work on a custom frontend for the hackclub ai service after I found out that @mahad had redone most of it to make it viable as a service that people can use.

Step one was figuring out what I even had to do! I’ve had experience with building chat interfaces in the past, and I settled on my personal favorite combo – the Vercel AI SDK + Next.JS. Recently, the AI SDK, in collaboration with shadcn/ui, added a new “AI Elements” component library for building chat interfaces. Perfect, this saved me much work!

Next, I had to design the backend. I rarely do DB stuff, so this was all a bit new to me, but, I decided on using Drizzle ORM + Hackclub Nest’s PostgreSQL instance. I used better-auth and Hackclub’s own OAuth solution to get a user ID I could store in the database. The database also stores your API keys so you can access it anywhere all the time. The DB stores chats too (what a suprise!).

Anyways, that’s about it for the technical side (or what I could recall). The actual application has many features not too dissimilar from a client like ChatGPT or OpenWebUI. It has a sidebar for chats and it uses a model to generate a name for your chats (plus a fun little emoji) on the fly. UI uses shadcn all across the board. Auth and API keys are handled in the bottom left corner. The mobile UI is quite nice IMO. Image gen works pretty well.

NOTE: Currently nonfunctional since hackai is down due to a temporary lack in funding.