Summer Chang walks through four versions of a language travel-agent UI, starting with a circular play button and animated globe. Version 3 adds chat and phrase-saving. Version 4 brings user authentication via Supabase so the agent remembers dietary restrictions and allergies without you repeating them.
Chapters
Lovable Hackathon Part 2. Right now I'm in Lovable interface. I want to show you 4 versions of the language travel agent interface. I start with looking at some inspiration. I went to 21st that day. I find this inspiration I really like. It's just a circle with like play button, convert to speech. So I want to use this Circle to start as a base, and then this will be like a pause and someone talking back to me kind of feeling. So this globe will be animated. Interface version 1 in Lovable. So I just find a globe because the one previously in v0 couldn't import it here. I just say, oh, this create an interface like this. So then it created this interface and added some animation, did the ElevenLabs widget. Kind of missing something here. So I'm going into the second version. So the second version, I'm trying something a little bit different to see if I can just prompt a link, copy and paste from the V0 inspiration. So can you build this interface? And then it came out with this. Yeah, it's actually pretty nice. So then I continue to work, work on it a little bit more. So this is what I got for version 2, adding some fun interactive movement. Version 3, I'm thinking it's missing something here. What if you can practice your conversation, you can save some of the conversation useful phrases, And you can talk to it. So this is my version 3 interface with the chat functionality. So I try to move the ElevenLabs next to the send icon here. It wasn't successful. And this is version 4. Basically a little bit different here is you see I can sign in as a user. So you can create your own profile. So Then you can log in, sign in here, sign up here. So right here I connected with Supabase. Then this has more choices in the categories and the food. This is not working right now, but basically it has a login, a conversation, the 11 labs. Sometimes it's showing up, sometimes doesn't show up. So This is version number 4. Version number 4 has a user login feature. Agent will be able to remember the user's preference, the food, the dietary restrictions, the allergies and stuff. So the user doesn't need to repeat. There's database for the agent to search. Yeah.