All Field Notes
Field Notes7:36

I gave AI a WhatsApp screenshot. It built me an app.

Dave turns a WhatsApp announcement list into a mobile cue-card app, then improves the swipe interaction so he can use it while presenting. He explains browser-local storage and link-based sharing.

Watch on YouTube

Show notes

Field note

Dave needed to deliver seven church announcements without losing his place on a small phone screen. He gave his bot the WhatsApp list and asked for large cue cards with a list editor that could reorder the items.

A second prompt made the card movement more obvious when swiping with a thumb. Dave says the initial useful app took two prompts and about five minutes; the later appearance and sharing changes were separate additions.

What this covers

  • Building a small tool for a specific real-world task.
  • Making the interaction easier to understand while presenting.
  • Keeping list data in the local browser.
  • Sharing a copy through a URL rather than a live-synchronised cloud document.

The share link contains the list, so treat it as containing the information you entered.

The official video description links to the app and its source code. The browser-storage and sharing behaviour is Dave's explanation in the supplied transcript, not an independent security audit.

Transcript
If you're using your OpenAI dot or your Grok bot as a glorified search agent, you are missing the point, my friend. This week I went full Jarvis, full Tony Stark, Iron Man, build me a thing, and I did, which helped me when I had to do this. Welcome to Field Notes, the show where we share tips, tricks, things we've done this week with our AI tools that might inspire, enlighten, and educate you to do more in this world of AI as you attempt to navigate all the ins and outs. So this week, what am I talking about? What is even happening here? Well, I have the privilege of service leading. That means sort of MC-ing services at my church from time to time, and one of the things you have to do is notices. And so here I am doing notices, and you can see me looking directly at my phone. Now, if I'm MC-ing, why am I staring at my phone? Well, let's see what I say next Uh, now, technology's everywhere. I'm using it to manage my notices this morning, but Myles has used it I'm using it to manage the notices this morning. What does that mean? Well, we had seven different notices that I had to get through, and there's a lot of information that you've gotta remember to pass on to the audience, and what, what are your options? You either memorize everything and hope not to forget anything, or you have a piece of paper and you write a list, or maybe you have a list written on your phone just in Apple Notes or something. I wanted something a little bit easier 'cause even then you have little text, it's hard to know, what are you looking at? Uh, and when we, uh, when I was thinking about how am I gonna structure this? How am I gonna order all these things in my head? I was like, "Hmm, I have robots. I can build a tool to help me do this better." So that's what I did. I opened up Demo Monkey, our friend Grok Bot that we used a few weeks ago here on the show, and said, "Hey, Demo Monkey, I need a quick micro app that lets me save lists and then have them on my mobile as large cards per item that I can swipe through with my thumb. It's for MCing, so I can get through all the announcements. The list editor needs to let me reorder items before loading the card view. Here's the initial list." And then, you know, Grok Bot got a bit confused with the order it put the bubbles in. There's the list, and then I said, "Push it to Here Now." And so this is just a, a list on WhatsApp of all the different announcements that weren't particularly necessarily in the exact order that I wanted to present them in. So that was the prompt. I gave that to Demo Monkey, and Demo Monkey used our, the Here Now tool that we looked at a few weeks ago and presented me with this. One prompt, one shot, and a screenshot, and I got this tool where I could come in on my phone, I could reorder the list, I could rearrange things, and if I hit present, I got this. And I was like, "Oh." But then as I swiped, it was a bit boring, and when you're busy doing things and you're, you're there and you're trying to talk and not look at your phone too much, you need it to be easy and simple. And so there's sort of no particular understanding of whether it was really what was happening. You just swiped and hoped it changed. There wasn't much visual there. I went back to Demo Monkey and said, "Without editing the list as I've made changes," 'cause I started reordering things, "can you make the card be more like a card that pops off the page and is discarded versus a no affordance swipe?" Now, an affordance, what is an affordance? That's a, a design term. Basically means is there something that makes it obvious how you should use something? So think about walking up to a door. If you walk up to a swinging door and it's got a plate, that affordance tells you it's probably a push. If it's got a handle, it means it's probably a pull. Now, have you ever seen a push door with a handle and you've you pulled the push door? That is a bad affordance. The affordance should make it clear what is happening. Uh, and so I, uh, gave that prompt to Demo Monkey, and Demo Monkey came back to me with this. What? Now we have swipey, swipey cards, and if we go to the mobile view of it, this is what I had in my hand as I presented. Look, bang, bang, bang, swipe left, right, swipe. So beautiful. So I could f- see at a glance under my thumb that I'd grabbed a card and flicked it to the next one. This was two prompts. Two prompts in about five minutes, and I w- I went from having this unstructured list and, and not knowing how to present it in order and, and worrying that I was gonna forget things, to having this micro app. Like I said, full Jarvis. I just said, "You know what? Grok Bot, build me a thing," and it did. And I even knew. I, because I'd used HereNow, I knew where to set it up so I could open it up in my mobile web browser. It was super easy. Barely an inconvenience, as my favorite Canadian, Ryan George, would say. This was... This is the future. Micro utility apps. Like I said, if you are just using your bots as glorified search engines to rewrite emails and to look up information on the internet, that's great, and I'm sure you're getting some productivity gains from that. But what are these little micro apps that you could be building for yourself to help make the things you do easier, better, more complete? These sort of little quality-of-life hacks Now, if you ever do any kind of public speaking, if you ever do any presenting, you can use this tool. I will share the link to the, to my Heydon Now site, and you can go and use this exact one. I've got a setup with some dummy data now, and you can go in and you can just use that. And all the data that you put in there is just saved in your local browser. I never see your list. There's no cloud save, anything like that. All of that information is just stored in your local browser. I've also, if you wanna host your own version and make sure that it's really your own, I've put it up on GitHub as well, uh, under my Dave's Agenda, organization MC cards, and I'll put that link in the description as well. But this is one of those, like, quick, easy, interesting ideas that I had, and it was just a massive boon. And I'm gonna use this every time I'm up for service later. I've shared this with the other service leaders. It's just such a quick and easy hack. Now, after the service, I went back and made a few extra changes to it. And so the current version that you can get now, uh, it lets you change the colors. There's a light mode, there's a dark mode. You can change those accent colors, and there's a sharing button. Now, the interesting thing about the sharing button, like I said, there's no cloud save. It's just in your browser. So the Share button, if you need to send a list, if you need to organize a list for someone and send it to them, the Share button just embeds your list in the URL. And then when they open it up, then it saves it in their browser, and they have that list. If you make changes, they won't get them unless you share them again. Remember, this is just operating. There's no cloud server here. I'm not operating a, a, a full cue card SaaS product here. This is just one of those little micro apps to help you move faster, to give you that quality of life, and to inspire you. What are the micro apps in your life? What are those little, those little five-minute builds that a bot could build for you that are gonna make things easier and better for you? So that's, that's Field Notes for this week. Uh, what are you doing with your bots? What is the most creative thing you've done with your bots that isn't just, you know, reading your emails and summarizing things? Have you built micro apps? What have you seen out there? What's inspired you? Uh, let us know in the comments. Make sure if you like these kinds of quick tips, these field notes, like and subscribe, tell all your friends, and we'll see you next time.