The latest articles on DEV Community by Kevin (@kevinhui98). https://dev.to/kevinhui98 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3051444%2Feab093c1-9f92-4829-b6af-6f62aed951fd.png https://dev.to/kevinhui98 en Kevin Tue, 15 Apr 2025 02:47:26 +0000 https://dev.to/kevinhui98/how-i-built-a-travel-assistant-chat-app-using-gpt-and-jetpack-compose-o7c https://dev.to/kevinhui98/how-i-built-a-travel-assistant-chat-app-using-gpt-and-jetpack-compose-o7c <h1> How I Built a Travel Assistant Chat App Using GPT and Jetpack Compose </h1> <p>In a world where AI is changing the way we plan and explore, I wanted to create something fun and practical — a mobile travel assistant powered by an LLM that helps you plan your next trip through natural conversation.</p> <p>This is how I built <strong>Travel Guide Chat</strong>, a Jetpack Compose Android app that lets users chat with an LLM about travel plans, save conversations, and revisit them later.</p> <h2> 🧠 Why I Built It </h2> <p>I’m passionate about combining <strong>AI</strong>, <strong>mobile UX</strong>, and <strong>real-world use cases</strong>. Travel Guide Chat is my attempt to blend these into one product:</p> <ul> <li>A sleek, real-time <strong>chat interface</strong> </li> <li> <strong>OpenRouter-powered LLM</strong> for smart responses</li> <li>Persistent chat <strong>session history</strong> </li> <li>Auto-generated chat <strong>titles based on content</strong> </li> <li>Markdown rendering for clean, readable answers</li> </ul> <h2> 🔧 The Tech Stack </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Layer</th> <th>Stack</th> </tr> </thead> <tbody> <tr> <td>UI</td> <td>Jetpack Compose</td> </tr> <tr> <td>State Mgmt</td> <td>ViewModel + StateFlow</td> </tr> <tr> <td>API</td> <td>OpenRouter (ChatGPT-compatible)</td> </tr> <tr> <td>Networking</td> <td>Ktor</td> </tr> <tr> <td>Storage</td> <td>JSON File (simple local persistence)</td> </tr> </tbody> </table></div> <p>Jetpack Compose gave me the flexibility to rapidly build a clean UI, while OpenRouter’s LLM API gave me access to powerful GPT-style responses.</p> <h2> 💬 Key Features </h2> <h3> ✈️ Chat with an AI Travel Assistant </h3> <p>Users can ask about destinations, get itinerary suggestions, or plan a day trip — all via natural conversation.</p> <h3> 📚 Chat History </h3> <p>Each session is stored locally with an auto-generated title (like “Weekend in Tokyo”) and can be reloaded later.</p> <h3> 🔁 Rename, Re-engage, Repeat </h3> <p>Long press to rename chats, tap to resume any past session, and continue where you left off.</p> <h3> 📝 Markdown Rendering </h3> <p>LLM responses are rendered in Markdown for clean formatting — helpful for lists, bolded places, etc.</p> <h2> 💡 Challenges &amp; Solutions </h2> <h3> 1. Persisting Chat State </h3> <p>I needed a lightweight solution, so I used <strong>JSON file storage</strong> rather than Room DB. This kept things fast and simple.</p> <h3> 2. Auto-Titling </h3> <p>Instead of hardcoding titles, I generated them using the <strong>first user message</strong> and <strong>LLM response</strong> heuristics — giving each session a meaningful identity.</p> <h3> 3. Compose UI Bugs </h3> <p>Some scroll issues popped up in the chat window, but were solved with <strong><code>LazyColumn</code> + <code>LaunchedEffect(scrollState)</code></strong> to keep the view anchored at the bottom.</p> <h2> 📸 Screenshots </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FDo8q2Nv.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FDo8q2Nv.gif" alt="Travel Guide Chat Walkthrough" width="372" height="854"></a></p> <h2> 🧪 What’s Next </h2> <p>I plan to extend this with:</p> <ul> <li> <strong>RAG (Retrieval-Augmented Generation)</strong> using Pinecone</li> <li><strong>Searchable conversations</strong></li> <li> <strong>Cloud sync</strong> so chats persist across devices</li> <li> <strong>UI improvements</strong> like avatars, emojis, etc.</li> </ul> <h2> ✍️ Final Thoughts </h2> <p>This project helped me level up my Compose skills, explore LLM integration, and think more deeply about UX in AI apps. I built something I’d actually use — and that’s what makes coding exciting.</p> <p>You can check out the repo here:<br><br> 👉 <a href="https://github.com/kevinhui98/travel-guide-chat" rel="noopener noreferrer">github.com/kevinhui98/travel-guide-chat</a></p> <p>Follow me for more projects on <a href="https://github.com/kevinhui98" rel="noopener noreferrer">GitHub</a>!</p>