# I FINISHED THE MAIN PAGE’S FEATURES!!!

I added a create and remove user function. I also entirely overhauled how they’re stored.

Time for the boring dev talk:
Before, the DB ref was (‘/LighterWebUI/users/’) and now it’s (‘/LighterWebUI/users/${userId}’), meaning I can modify them as I need without having to first fetch the array, modify it and then re-send it to the db.
It’s a TINY bit more efficient, and a lot easier to use.

Also, STATISTICS! I took a few measurements, here are the results.

<100MB idle (about 95MB)
Idling with 10 browser tabs running it took it way up to… 105MB

According to my very thorough single Google search, the average idle for OpenWebUI is 400-650MB, making mine 4-6x less RAM usage!

I also improved some of the logic surrounding the presets for API endpoints.

UX improvements too!

I MASSIVELY improved the UI of certain things like the user profile system, which now doesn’t display the currently selected profile as an option (not super significant, but nice). I also added the option to add new users.

The chats list now (finally) shows which chat you’re active in.

It highlights it in a lighter gray.

I also made it so that when you use the “override model selection”, the options disappear so you don’t have an empty element :)

I fixed the colours and improved continuity across colourful elements (before I had like 4 different blue colours that were basically identical XD)

I feel like the UI is kinda Discord-esque on the user page, which I quite like :D
I also added a lil function to close all menus, which streamlines all the others instead of manually closing every one of them.
As far as I can remember that’s basically it!
OH WAIT NO I added a new settings menu! It’s totally different now. :)

I organised some things and split it into two sides, regular and advanced.

I’m very close to finishing the project! Probably <10 hours left on it.
(I’m gonna fix the weird text spacing soon DW lol)

I’ll also add a ‘cancel’ option to the New User menu.
As usual, if I remember anything else I’ll add it in the comments :D
Thanks for reading guys! <3
Happy hacking!

The grand settings, backend and UX update of ’26!

I added a bunch of backup logic behind the custom route fetching!
It’s working great now! I then also had to fix a bunch of things with the guest route, because that was all messed up from the settings stuff.

I added a new tool! The AI can now run endChat() to stop the user and delete the chat if they ask/say something harmful. I would like to stop it before it reaches my API provider, but I don’t think HC would appreciate me putting a “slurs.txt” file into my repo
When the AI calls the function, it fetches the current chat and simply deletes it. It also notifies the user through a simple error system I’ve made. From there, the user can currently create a new chat. I’m prepared to keep it this way for now, since I don’t want to limit other people from using their own local models for whatever they might want. I’m also considering providing the option to rely solely on the model’s guardrails.

I’ve just gotta hope nobody wants to test that feature upon shipping…
Speaking of which, I’ve massively changed my mind on how I’ll handle that! It’s NOT going to be hosted on-device for the ship, which I know sounds ironic (and frankly, is, given it’s a local AI client), but I don’t want any users saying “this local 0.5B AI is terrible, it must be a bad project!”, and will thus use Ollama’s official cloud API.
Also, if my Pi were to receive multiple prompts at once, it would likely… Die. This would A: suck, because I’d need to restart it frequently and B: prevent any users from rating it while it’s off. If it dies at midnight, I won’t know until I wake up!

Ollama’s Cloud API has seemingly good uptime (I couldn’t find any stats online, but it seems decent!) and provides me with much larger models, up to 120B (and likely higher) without having to pay. That brings me to one of the largest things I had to figure out!

If a user selects an unavailable model (Kimi K2.6, for instance), the server returns an error (which was surprisingly difficult to actually parse/decode!) and fails.
I created a system to return that the prompt failed, then check that the fallback model is different from the current model. If so, it warns the user, then goes to the fallback model and regenerates by itself, automatically. The default fallback is Gemma4:31B, since it’s a free Ollama model. I’m providing my own key, so users don’t need to enter their own.
If the fallback is the SAME as the current, it’ll show an unexpected error.

I also added auto scrolling, although I couldn’t figure it out, so I debugged using Gemini and managed to fix it.
It’s a ChatGPT-style scrolling system! It binds you to the bottom while it’s generating, but if you scroll up, it’ll sever that binding, letting you scroll freely. If you want to continue following the AI’s text stream, simply scroll back down!

I am considering adding a button to do so as well, since that could be a very easy feature to add and improve overall UX.

Oh right, I also fixed the displaying of when the AI uses tools! I found out that the Vercel AI SDK has a new system for it in the newest version and used that instead.

I think I added some more stuff, but I can’t really remember it all right now! Most of the time spent was debugging the things I broke while adding new features. I’ll add anything I remember as a comment on this devlog!

Also check the changelog if you wanna see more stuff (and specifics!) :)

I acknowledge that this is my longest devlog so far, but I just wanted to be thorough! If you have any questions, I’d love to answer them in the comments!!!

URL UPDATEEEE!

I FINALLY added custom URLs!

I mentioned wanting to do that in the last devlog, but now you CAN!
I finished the settings page’s content, including adding an entire auth system (painful) and trying to make the UX nicer (also painful), alongside encountering a TON of other bugs and having to fix those.

I also made a system to generate passwords randomly to access the admin controls.

It OFFICIALLY works with other APIs!
Simply enter the route (e.g, https://ollama.com/api) and your API key and it’ll handle the rest.

This is just the main feature I added, but I added a TON of other things too!

ANYWAY!

Still on the “//TODO:” list:

A TON OF STUFF!
I plan to add customisable temperature next, then the into/“welcome” screens, then all the scrolling and animation stuff.

I think I can do this in time though, which is a great feeling having coded less recently.

Hey!

Added web search integration, a settings menu, and I’m working on an admin page!

I also added text formatting, which was a pain to test with the 0.5B model because of how disobedient it can be

I plan to allow the user to change the API route (and key) through a locked admin page.

I’m working through security issues with that, and spent a fair amount of time thinking of how to fix that.

My current plan is:
Generate a secret “key” during setup that unlocks the admin page.

When the user visits the page, ask them for the key to submit the changes.

If the user hasn’t been authenticated, do not allow them to change settings. The main concern is that they could use devtools to just toggle the variable, hence fetching it directly within the function.

I think it’ll work, but I’ll need to do some testing. :)

I also added a little icon if the user hasn’t got a Tavily API key for web search functionality.

The image currently shows the route editable within the client side. I might go with that and have the same logic behind it on the home page instead of a separate /admin page.

In all honesty, I’m kinda overwhelmed. This is the biggest project I’ve ever made, and I feel like I keep accidentally switching features and missing stuff out.

Anyway, it’s still really fun, so I’m still going for that Flipper Zero and TRMNL kit! :D

Thanks for reading!!!

MASSIVE overhaul of the backend!

As you may recall, I previously spent a few hours trying (and failing) to implement tool calling.

I did a bit of research (Google Gemini helped with the research portion!) and found that the Vercel AI SDK has the ability to stream text while tool calling, with WAY less code than doing it manually!

The great conversion of ’26…

That SUCKED!!! It worked great until I noticed that the database no longer worked…
Anyway, as of 5 minutes ago, I just fixed that!

I completely removed my local “messages” array and replaced it with chat.messages.

I LOVE THE VERCEL AI SDK!! It’s amazing.
I just need some tool ideas of what to add..

(Currently, there’s just a short pause and a gap above the messages to indicate a tool was used, but I plan to replace that with a nice “Tool used: ____” now!

I also did a TON of other things, including fixing many bugs with the new user system, but that seems to OFFICIALLY be working now!!
Only took me 20+ hours to get a working AI client T_T

But now I can start getting it NICE! :)

I’ll improve UI, add a TON of pages, etc!
If you have any default tool suggestions, please do give them.

I FINISHED THE USER SYSTEM after a ton of uhh.. Pain and suffering! :D

JK, it wasn’t too bad. I did, however encounter a loop of failing code that I couldn’t figure out! Turns out, my localStorage thingy was broken! I accidentally set it wrong!
Anyway, after finally fixing that, I kept going!
I removed the DB from github too lol.
Unfortunately I’ve made no UI changes yet, so there’s really nothing interesting to see.

AI usage:
I debugged a few errors using Gemini, finding the solution. Still no AI code was used.
I found that I could use return functions with $effect runes, which I somehow missed before! That came in handy with the fancy system I added to not entirely break the website if you leave during a stream. :)

For some reason, the page is UNBELIEVABLY slow to initially load on development mode, so that sucks… It works instantly on release though, so that’s great!
I added a few new messages to the main screen. Some backups too, one of which is visible below. It tells you instantly what profile you’re on.
I’ll consider varying that each time like most AI websites do, but I’ll make sure to keep it as small as possible.
I have a LOT to do on my Trello board still, which is ironic. The more work I do, the more issues I find! The board gets longer each devlog T_T

Somewhat interesting update:
I’m gonna add some docs (likely on Github, unless I feel inclined to code them!) in which there’ll be an error code section. I’m making my own error codes, specific to the website. :)

Currently got:
A1: user error (not logged in, corrupt data, etc.)
U1: unknown error
M1: unavailable model
P1: invalid prompt

I plan to maybe add profanity filtering to the prompt validity checker (which I’ve also yet to implement)!

I can also make a nice customisable theme across pages.

Exciting devlog, because now I can get back onto the FUN STUFF!!!
No more ‘why account no work T_T’ stuff!

Thanks for reading, happy coding!

More work! :D

As the image shows, I just finished implementing ‘guest’ mode and have started on the user profile system (on the right)
I plan to:
Finish adding it, fixing the UI, etc.
Add it to the setup process :O

Anyway, other things (massively summarised to fit a devlog… If you want to know more, check the repo!)

I designed an icon! That wasn’t logged for time. :) I implemented the logo (it doubles as a guest profile picture thing on the top right!)
It’s a bit generic, very “AI company”-esque, but still - pretty nice for my first Inkscape logo :D

I’ve added some nice icons, as you can see in the sidebar.
I forced alignment of the title, so that’s fixed! :)
I fixed the bug where the user could enter a prompt without having a user object assigned to them.
For Guest detection, I basically just say “if(!user.userId)”, since the Guest is the only profile that will NEVER have an automatically assigned user ID.

I’ve totally revamped the user system:
It’s now a JSON object called user, with various items like userName, userId, and userPlainNum. PlainNum is for ordering, and I was pretty sure I had something in mind, but I can’t remember why I added it so it might be removed.
I’m at 571 lines of code!
I made several new JS backend files for this user system, so I’m very excited to introduce it! I am posting this devlog only part of the way through coding that system.

Suffice to say my Trello board is FULL!

Also, heh… Embarrassing story:
I kinda committed the database :)

BUT! It wasn’t public anyway, so it’s just my debugging “uhhh… hello? HELLO??? Are you there?” prompts. Nothing secret.

Also probably best that it happens during development and before I have users!
Anyway, since I’m HORRIBLE with Git commands, I used Gemini to help fix it. Hopefully that worked. As I said in the AI declaration thingy, none of the code is copy-pasted from AI, and is all Capy-written :D
(PS, I probably skipped over 500 tiny bug fixes and a few bigger features, but we’d both be here for a while if I hadn’t.)
Thanks so much for reading my devlog! Happy coding!

I added a BUNCH of stuff!

I was so locked in that I forgot to make a devlog!

Let’s make this one shorter:
I added the left panel
I added multiple new backend files for the DATABASE!!!
I added a database (AceBase!)
I improved the UI
I’m testing with another AI model for now

Okay, onto the detailed stuff. AceBase! It’s a really nice database package thingy! It has FireStore-like syntax but without the annoying stuff. :) I’ll definitely use it in future projects too! Anyway, using that I made a system to create, fetch, etc new chats! Now they’re stored in the database alongside their associated crypto-UUID key. That’s passed as a search parameter (kinda like YouTube videos!) and fetched, then the messages are loaded. I did way more that honestly can’t fit into this devlog, so that’s the main stuff out of the way. :)

To do:
UI! It’s still got some smaller issues (the title is off-centre :O)
Fix a BUNCH of backend bugs
Add auto-chat naming (just the first few words of the user’s prompt for now :D)
Add a user profile system (like Netflix :O)
Add a “guest mode” account.
Make the URL customisable (in case someone’s hosting at a different address)
Make a customisable system prompt!
Decide what models are suitable for release.
Add some nice (lucide.dev) icons!
And a BUNCH more! Thanks for reading! :D Happy coding!

Devlog #2!

This one was a challenge… I started by spending an hour or two trying to figure out a nice system for function calling, before coming to the sad realisation that it wouldn’t be very useful. I then experimented with AI models, and realised that SmoLLM is a nice balance between intelligence and size! I also discovered that Ollama (by default) doesn’t allow two prompts at once. I plan to keep this functionality, despite its obvious drawbacks. If I didn’t have it in place, two users using different (or even the same) models could totally crash the Pi. That would leave the site down for hours on end if I’m not available to fix it. With Ollama’s prevention, worst case scenario: one user waits a few extra seconds. Anyway, I also started working on the UI! I’ve also implemented a nice system that fetches the available models, which seems to work great! I’m currently getting a nice input box. The images of UI from the last devlog were the Figma designs, but now it’s time to actually make them in HTML and CSS! I’ve done a lot of other backend stuff, playing around with various experiments, but now I’m back to working on the frontend for now. One last thing: I’m still deciding how the website will work. I might add Firebase authentication. This would allow easy saving of chats. It would also, however make the development experience more complicated and the app itself less streamlined. Another concern is that people run local AI for security, so posting everything they’ve said off to Google is a little pointless. I’ve got two other options: local JSON (or SQL :P) database, and no storage at all. I think the SQL database will have to be made. :) Thanks so much for reading the devlog! Sorry I made it so long… Also! A feature I’m super proud of! The title card at the top of the image isn’t just a title! Each word lights up when you hover. If you click, it takes you to a page detailing the feature of the site. (E.g, ‘lighter’ will take you to the page describing how I made the site efficient and lightweight!)
Thanks for reading!

First devlog! I FINALLY got the text streaming working! Unfortunately, Wakatime didn’t work for the first almost 2 hours of coding! Oh well! Not much I can do XD I am really happy with it! Currently running Qwen 2.5 coder 3B, which works great! This is all running on my Raspberry Pi 5 4gb (which I got from the last Hackclub event!!!), so I’m super grateful that my projects could get me such amazing hardware, thank you Hackclub! ❤️

Did a LOT of work! I officially added authentication, and a full user system. :) I’ve started working on the design page. The UI is below… I spent about 30 minutes designing it in Lapse, but I’m personally not a fan I think I need to redesign it… Anyway! Added the JUCIEST animation on the Home Screen, so that’s great. :D I also added an icon switcher to display the user’s icon, and if it’s not there, the capybara is instead. The top left button still does nothing on the home page, but I plan to add that soon. I fixed a lot of issues, and have (I think) finished designing the backend plan. :) Basically, when the user saves, it stores a ‘map’ (an object (FireStore terms are weird…)) of the project, containing the name, the titles, subheadings, etc all within their own arrays. This allows the user to add as many as they’d like. I hope I can figure this all out and get it working, but it might be a challenge, especially since I’m very new to using FireBase. Anyway, I would love your feedback on the background render, since I find it a bit distracting. I might make a ‘friendlier’ one later and compare. I love the one I’ve got on the home page, so I think I just need to keep that style consistent.

First Devlog! (PS, for some reason I can’t switch lines in the updated devlog menu, so sorry for the weird layout!) I started by making a design for the app, which seems to have failed to log for some reason… I spent about an hour on it combined, and then recreated it (I’d like to say) accurately in CSS and HTML! Added no functionality yet, but that’s on my to-do list on my Trello board. (I’ve linked an image of the site.) During that first design hour (before I started coding) I also made the Blender render in the background! I really like this way to make it look more detailed, and - despite having under 15 lines of HTML content, it looks quite high-effort! I added a logo in the top right (to link to a page about me :D) but I’m concerned that it might be misleading, as the app will (likely) have an account system. On the topic, I haven’t really decided how I’ll handle authentication yet! I’m considering a basic email + password thing, but it’ll have to be secure! If you’re curious, I’m using FireStore for the backend. I’ve also attached an image of the main app (Figma design), although I haven’t made that yet and still intend to once I’ve figured everything out. :D (please ignore the stupid placeholder text, I was really tired XD) Thanks for reading! Hope the layout wasn’t too much of an issue.

Final Devlog!

I (once again) redesigned the settings page, and I’m super happy with the outcome. I also adapted several other pages and made some smaller improvements. I made a README file showcasing some images of the project.

I think this will be the last devlog before I ship, so see you guys in the next project, and thanks for reading!

Now on Stardance!

Hi everyone! Welcome to Stardance!
I can’t wait to start seeing everyone’s amazing projects, and to start coding my own! I actually have a few ideas boiling in the pot, many of which I’ve already created projects for. Good coding to everyone!

About School Manager

The development of the app will be continued in Stardance!
There aren’t many updates since the last devlog in Flavortown, I’m trying to organize my ideas and clean some code before continuing development.
Have fun everyone!

WOW! Lot of work done!

I’ll go through them quickly:

1: Capybara 404 page
2: Added GPS geolocation (no more IP :D)
3: Added a fancy new icon! (3 lines of AI code for the meta tags!!!)

Speedrun time!

Fixed small-screen layout issues, added a ‘hide location’ button in settings, totally revamped settings and customisation, fixed an inconsistency across the starting page and the customisation page, removed a useless button, added a ‘docs’ page talking about the project, spent a while debugging a ‘rogue import’ issue (XD), put default at the top for fonts, improved saving logic and ADDED 5 NEW FONTS! :D

They all look great!
Everybody welcome:
Pliant, Montserrat, Oswald, Roboto Slab, and Pixelify Sans!

This gives you up to 49 new combinations! :D

Sorry for the long devlog and any mistakes, thanks for reading!

BIG devlog!

A bunch of really nice features!

In reverse order of my preference:

Fixed bugs on Safari
Some nice outlines for visibility if the user decides on light accent colours.
I added a font sizing option in customisation!
Added font customisation for both large and small text.
Also updated the font styling to work across various screen sizes!
And finally… FINALLY!
I added ANIMATIONS!

They’re really fluid and smooth.

Plans:

Improve reliability across browsers.
Add a font sizing option to smaller text.
I’m considering adding PWA detection, but not sure.
Also considering some fun documentation for the user/tester to read regarding screen burn protection and the idea of the app.
Add more pages!
Improve UI.

Thanks for reading!

(Sorry for any grammar/spelling issues, I type all my devlogs manually lel)

2h devlog.

So I fixed the bugs mentioned at the end of the last devlog, which is great :D

I also redesigned the concept of the settings, now there are separate pages for customisation and actual settings.
I also implemented that new settings menu, featuring control over storage (locally held variables) and input for lat/lon, which is currently entirely manual to avoid any privacy concerns.

I made sure not to add this to the intro, as it helps the user learn about the settings. :D

I also improved the screen burn protection, and experimented a bit with that.

The last (and largest) improvement I made was the UI of the ‘info’ page, and I plan to do a similar thing to all other pages. There’s a screenshot below.

Plans:
Total overhaul of other pages, general UI and ANIMATIONS!

Also, I plan to add a ‘reading’ section, kinda like a blog based on the work I’ve done and my idea behind it, with the screen-burn protection. Thanks for reading!

Added a bunch more stuff!
I implemented the other pages, added a ‘customisation’ page (settings) where the user can change the styling and screen, and added a bunch more improvements across pages.
This isn’t all I added, but I’m trying to keep the devlog short to not be boring.

Plans:

Fix some things with Safari, fix the location fetching for weather data, and revamp the UI for the customisation page.
Also add tons more screens and animations (I still haven’t! XD).

I also need to fix a bug where the dark mode is somewhat inconsistent.
Thanks for reading, happy coding!

I added tons of cool stuff! I modified and improved the ‘intro’ experience, adding styling pages, alongside a tutorial page for customisation!

I also added a system for styling, which looks really nice IMHO! I’d love to hear your feedback on it.

I very slightly modified the icons on the first page, but not significantly aside from adding the actual views, rather than placeholders.

I added an image of the final page showing the user how to enter the customisation menu, although I plan to modify that a LOT! XD

After you click on that, it takes you to the main home page, where I added a CSS-based system protecting against screen burn! (I chose CSS because it’s more reliable against memory leaks and animations are widely supported with very little overhead! :D)

There’s a LOT I plan to add still! I want to make the customisation menu, massively improve the UI, and add tons of nice animations and details (like I said I’d do in the previous entry)

If you’re interested, I’m using a Trello board to keep track of things! I find it really helpful to organise everything into an ‘ideas’, ‘to-do’, ‘improve’ and ‘done’. :D

Thanks for reading my (probably excessively long) devlog! Happy hacking! :)