Glowhollow: a private chat app for a small online community
Glowhollow needed messages that arrive in every open window, unread counts per channel, reactions, image attachments, presence and typing indicators, and email for mentions when someone is away. Each of those is a part of Elements, so the agent spent its 22 minutes on the community itself. **What Elements gave the app** - **Live channels and messages.** Channels, memberships and messages are LiveTables. A message appears for everyone in the channel, and a database trigger raises the unread count for every other member, so the sidebar badges move as people talk. - **Reactions in the message row.** Reacting calls an `@rpc`, and a trigger folds the reaction into its message, so the change reaches every open copy of it. - **Presence and typing.** A presence channel records each open window and clears it a few seconds after the window closes, which drives the online roster. A typing channel carries "is typing" pings between members of the same channel. - **Mentions by email.** When a message @mentions someone with no open window, a background job emails them the message. - **Image attachments.** An rpc takes the attachment as a `File`, checks its type and size, and stores it, and a route serves it under its content hash. - **Sessions and roles.** Admins create and archive channels, and removing a member ends every active session they have at once. Three migrations define the schema and seed one admin, three members and three channels with a conversation in each. **What the project server gave the agent** The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building. **What shipped** The app type-checks with zero errors and all 24 tests pass. Every page works on desktop and phone, and live updates arrive across tabs, such as new messages, reactions, unread counts and who is typing.
This is Campfire. It's a real-time chat application with multiple rooms. We built it in about 20 minutes using Elements and Claude Code Opus 5.5 on Medium. Here's the exact prompt I used to build the application.
Let's paste that prompt in and watch some of the highlights in high speed. You're watching the build server state up in the upper right. It'll flip occasionally from OK to error, and that's the server telling Claude how to fix its own issues. And over on the lower right, you're seeing the application user interface come together as the Claude agent drives it, tests each of the pages, and make sure that it works.
And here we are at the end clocking in at about 20 minutes with a full blown chat application. Let's take a couple of minutes and I'll walk you through this application and some of its features. I've got two windows open so we can see the real-time chat, and on the left, I'll log in as Maya. Claude gave us this nice feature that lets us click the seeded login so that we can quickly log in.
And you can see there's a create an account link here. If we needed to create new accounts, we could do that. This is all wired up completely. The email and password authentication is baked in such that you're storing those records in your own database, not using an external service that you'd have to pay for.
Let's go back to sign in, log in as Maya, and then over on the right, I'll log in as Jonas, who's just a regular member. As soon as I start typing, notice on the right it says Maya is typing, so that's the presence indicator. The real-time uh status information is coming down to this other browser, this other connected client. And as soon as I type that message and press enter, it appears just like you would expect in any real-time chat application.
The other cool thing I can do here is I can mouse over and do emojis, so. We'll do a couple here. We're really happy to see that Maya is in the chat room here. And then I can also go over to uh different channels, the announcements channel, uh or the off-topic channel.
And if I'm an administrator, notice that I get a manage link, and over on the right, since this person is not an administrator, I do not see those. OK. Let us try a fun thing, which is first to upload an image. And this is demonstrating the ability to upload a file.
So I'll click the Lakeside Campfire file and upload that and say, here's a nice image. And the file is stored in the database as uh as bytes and we're presenting it here in real time onto the chat application and I'll go ahead and add a nice emoji to that. There we go, that looks good. I've opened up a terminal on the left and I'll use the elements db command to drop me into the Postgres instance.
One of the nice things about working with Elements is you can drive the user interface directly from the user from the database. So if I paste in this SQL query, what it does is it inserts into messages something that says hi from the database, and we see that show up immediately in the user interface on the right. It's really nice for being able to drive interfaces like this, both for testing and also some, there's some real use cases where you'll want to do that even in production. To summarize some of the features we've seen here, first we've got users and user roles and authentication.
You can log in using the email and password of the user, and we can see that some of the users are, are one of the user is an administrator, the others are regular members. Once you're logged in, we can see presence indication over on the right. So the Jonas user, myself, is logged in and the other users are currently logged out.
Real-time messaging we've seen a few times as I type into the message box here, it goes over the wire and gets broadcast to all the connected clients instantly. We're able to connect or add a file and that file goes into our database. And file uploading is really useful for all sorts of use cases. In this case we've demonstrated that we can upload a file, store it in our database, and present it back to the user.
So really cool chat application, and I hope you have a lot of fun. Go ahead and download it and you can use the scaffolding that already exists so that you can start off with this application and then you can customize it to your liking. Have fun building.
Join the community
Get a weekly digest of new posts.
Comments· 0