iTranslated by AI
[Antigravity] Building a Coffee Chat Topic Generator from a Single Doodle
I recently decided to host an online chat session at work, so I built a web app where an AI generates casual conversation topics to help keep things flowing. 🪄◝*ෆ
I decided to let the trending "Antigravity" handle the development this time, and including minor tweaks, I was able to get it deployed in about an hour and a half ⭑.ᐟ
About Antigravity
It is an IDE released by Google in November 2025:
I don't know all the technical details, but it describes itself as an "AI-agent-led coding environment," allowing you to code while leveraging models like Gemini and Claude Sonnet ⸝⋆
༝༚༝༚…🖋️ These articles provided a clear overview:
About what I built
It is a tool where Gemini (Gemini 2.5 Flash) generates chat topics based on the following rules 🧸💭
prompt:
You are an assistant tasked with livening up an online casual chat session (once a week, 30 minutes, IT company, judgment-free open space).
Please provide exactly one "casual chat topic" that is fun and encourages sharing thoughts, allowing participants to relax while holding a cup of coffee.
Return only the text of the topic (e.g., in a question format like "How about...?"), and no greetings are necessary.
- When "Give me a random topic!" is selected: Think of a completely random and unexpectedly interesting topic.
- When a category is selected: Think of a topic related specifically to the "xxx" theme that is easy for people in the IT industry to answer.
- When a topic is specified by the user: A keyword "xxx" has been provided by a participant. Based on this keyword, think of a positive topic that is easy for everyone to join in.
༝༚༝༚…🖋️ I had the details on the technologies used written out in the README, so please refer to that
The initial doodle
When you're ready to do some "vibe coding," you might want to give instructions like:
🦥< Hey, build me xxx
But this time, I started by sketching out an image of what I wanted the tool to look like⋆ 𖦆 💭
I just drew it roughly in Windows Paint, thinking "something like this would be nice."
The point here
At this stage, having at least a rough idea of:
- What I want to do (I want to make a tool like this⭑.ᐟ)
- User flow
- Design concept
made the subsequent process feel much smoother ꒰*ੈ🌙
Of course, AI can build things with just a simple prompt like:
🦥< Hey, build me xxx
But it often ends up being "not quite what I had in mind..." Correcting from that "different" state is quite difficult, and repeated deployments can often lead to errors... so I felt it was important to solidify the image of what I really wanted to achieve ⸝⸝ ˚. 🌙
Expanding on the UI image
I had a general idea of the UI, but I used Stitch to clean up the doodle above and flesh out the concept:
This is also a tool released by Google (technically acquired by them), specialized in AI-generated UI design
I fed my doodle into Stitch and explained the kind of web app I wanted to build, and it came up with this design ५✍️
Developing with Antigravity
Now that I had a rough idea of the image, it was time for the actual development ┊꒷⛏️⑅
1. The Prompt
I provided the following as an initial prompt 🪄︎︎◝✩
*I ran this in "Planning" mode.
I want to build a web app that generates conversation topics for online casual chat sessions.
Assumptions for the online chat session:
- Once a week, 30-minute sessions
- Connect online
- It is a judgment-free open space where we can talk
- Since it is an IT company, they might enjoy IT-related topics
What I have in mind:
- Use Gemini AI (I have the API key ready)
- For the top page UI, refer to the image at the path below:
xxxxx/xxxx.png
- User flow:
1. The user selects either [Think from scratch] or [Choose from topics].
2. If [Think from scratch] is selected, the AI generates a chat topic from scratch.
3. [Choose from topics] allows the user to select from themes like "Movies," "Weekend outings," "Gourmet," "IT news," etc., and the AI generates a topic for conversation based on that choice.
- UI suggestions:
・I want the menu items like [Think from scratch] to have a playful English tone (something like "give me a xxx").
・Since it's a "coffee chat" theme, a coffee motif would be nice.
・If there is a loading state, using a Lottie animation would be good (if we could animate the cat itself, that would be great!).
2. Refining the Plan
Once Gemini finishes thinking, it creates an Implementation Plan 🧾.
You can review what the construction looks like here and add comments for anything you want to address ५✍🏻
When you click the [Review] button, Gemini checks your comments and updates the plan. You repeat this a few times, and when you press the [Proceed] button, it advances the implementation to a state where it runs locally 👟ˊ˗
3. Making Tweaks Until Satisfied
I checked the behavior locally, and for the parts I didn't like, I added instructions in the chat ✒️ᝰꪑ
However, this time I only had to add/change a few things:
- Animation settings (Initially it was an animation of emojis floating around, but I used a cute Lottie animation instead)
- Font settings (Specified Google Fonts)
- Category settings (Adjusted after actually seeing them)
- Added Basic Authentication to the page
- Handling for when the Gemini rate limit is reached (Decided to return pre-prepared themes)
Since I am just giving instructions in words for these changes, I didn't have to rewrite code by hand ๋⭑🛸๋⭑
4. Deploying to Vercel
I was satisfied with the behavior, so I deployed it using Vercel and ta-da! It is complete 🐾✧˖°.
Thoughts
From a vague doodle to a working web app, it happened in the blink of an eye!
Actually, writing this article probably took more time... 🤧ˎˊ˗
Compared to GitHub Copilot
Regarding other AI-powered IDEs I have used, there is GitHub Copilot which runs inside VS Code: Compared to that, I felt that Antigravity's ability to show:
- Task
- Implementation Plan
- Walkthrough
was quite impressive *⋆✈️💭 Since it clearly displays the flow of progress and what the implementation will look like, it is easy to avoid getting lost.
༝༚༝༚…🖋️ These appear to be what are called Artifacts generated in Planning mode:
Also, since Antigravity is a fork of VS Code, the workflow of the editor and chat with AI is mostly the same.
Conclusion
I hope this was a little helpful 🪽₊˚.ꪆ.
Discussion