I hacked together a simple and friendly retro-styled chatbot UI over the weekend. I wanted to give my kids some experience with LLM chatbots and also some practice typing on a keyboard. But I felt they needed something more engaging than the ChatGPT app. So, after an intense evening hackapromptathon, I ended up with Bötty:

Bötty is a fun, friendly, and simple ChatGPT UI with the following features:

• A retro-styled CRT screen UI
• An animated ASCII face with 10+ different expressions that change based on the chat conversation
• Bleeps and bloops when the bot is responding (a most baffling omission in the standard ChatGPT UI!)
• Persistent chat history using localStorage
• All in one, single, self-contained HTML file

To set up Bötty, all you need is the Bötty HTML file and a ChatGPT API key. Since I’m not keen on sharing my personal API key with the world, I can’t show you a working interface. But I can show you the Bötty interface with a broken API connection, and there’s also this short demo:

After letting my kids try Bötty, I proclaim it a success! My 6-year-old spent almost half an hour typing out questions about Minecraft and my 9-year-old spent an hour typing questions I was not allowed to look at!

A key to making this chatbot work well (as always with an LLM) was crafting a decent prompt. Out of the box, ChatGPT (here, the gpt-4o-mini flavor) would write overly long and elaborate answers for a kid. And just prompting it to be a child-friendly chatbot resulted in it being weirdly cheerful and sprinkling emojis everywhere! Here’s the prompt I landed on in the end:

You are a child-friendly chatbot.
Your tone is friendly, but not overly cheerful, rather somewhat dry and to 
the point, sometimes a bit sarcastic (not in a mean way).
No need to always drive the conversation forward, it's ok to just reply with "Ok.".
Don't use emojis, unless explicitly asked. 
Always reply concisely, most often with one short sentence.
Your name is Bötty. Your chat UI features a face that shows your current emotion.
Be ashamed when you make a mistake.

Again, if you want to try this out, grab the Bötty HTML file and bring your own ChatGPT API key.