A chat app with channels and presence, built by Claude Code on Elements
Channels with unread counts, image attachments, emoji reactions, presence and typing indicators, and @mentions that email offline members, all live.
How it's built
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.
- 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 (opens in a new tab) 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.
Why Elements
Elements is an integrated full-stack app framework and a project server. The project server checks the agent's work as it builds: it type-checks the server and browser code, analyzes the program, applies migrations and runs the tests, then reports the results to the agent. A security mistake, such as calling a server-only function from the browser, is a compile error. The agent reads the report and fixes its own mistakes before it tells you a feature is done. The same checks run on every feature you ask for next.
Run it yourself
- 1 Sign up
Already have an account? Sign in
- 2 Install and run the demo One prompt to paste into your agent.
The prompt
What Claude was given to build this app.
Build a private chat app named glowhollow for a small online community. Two kinds of accounts: member and admin. Anyone can sign up with an email and password. No ID or phone verification. MEMBER - Sign up, log in, pick a display name. - Sidebar of channels with unread counts. - Open a channel to read and post messages. - Attach an image to a message. - React to a message with an emoji. - See who is online in the channel and who is typing. - Mention someone with @name. A mentioned member who is offline gets an email. ADMIN - Create, rename and archive channels. - Delete any message. - Remove a member. Seed one admin, three members, three channels (general, announcements, off-topic) and a short conversation in each. Show the seeded logins on the sign-in page. Messages, reactions, unread counts, presence and typing all update in real time.