Vibe Coding a Product in 6 Days
Recently, we launched Hal9 Reply, a Chrome extension powered by the Hal9 Platform. Curious how we built the product, website, and marketing in just six days?
The answer? vibe coding——a fast, AI-driven method we jokingly call the cocaine of prompt engineering. Bonus: this blog post was vibe coded too. Let me walk you through it.
How do we know it took exactly six days? The Hal9 team, especially the founders, track every minute using Clockify: We start the timer when a task begins and stop it when it’s done. That’s how we clocked 16 hours building the extension, 16 hours on the website, and 14 hours on marketing efforts like the Product Hunt launch and Hal9's LinkedIn posts.
Vibe Coding the Product
Market Research
Our journey started with a simple idea: build something for social media managers. That was the extent of our initial creative spark—everything else was vibe coded. We kicked off by asking Grok:
What are the work tasks that people have to do in social media and hate?
The response from Grok (see transcript here), sparked the idea. Social media managers drown in repetitive engagement tasks—responding to comments, messages, and mentions. They hate the grind, especially when overwhelmed. That’s when it hit me: a Chrome extension to lighten the load.
The Grok conversation dug into personas like the “Overworked Manager” and “Big-Name Influencer,” revealing a pain point: too many replies, not enough time. One follow-up question—“When they’re overwhelmed with replies, what Google searches would they do?”—led to insights like “tools to manage social media comments quickly.” Bingo. Hal9 Reply was born: a side panel to display context from the page, helping managers craft faster, smarter replies.
Frontend Code
Next, I needed a starting point. I scoured the web and found a Chrome extension template on GitHub (this side panel sample). Simple HTML, a bit of JS—perfect.
I copied it, pasted it into ChatGPT, and asked:
Make this show the text from 5 levels up when I focus on a textbox.
The development process was iterative—errors like “Extension context invalidated” surfaced—but after adjusting the manifest and adding tab-specific logic, we nailed it. The final version captures context from ancestors and previous siblings, stops at the body tag, and skips hidden elements like scripts. It took about 4 hours to get it running, though unpolished.
The next 12 hours went into testing and refinement. We tested completion across multiple websites, fixed issues as they came up, and polished the UX to perfection. Highlights include a slick animation and a breathing effect during text completion. The result? A flawless product, now live in our Hal9 GitHub repo.
Total time: 14 hours, resulting in an extremely polished final product. But hold on—the backend was still missing, and we had just two hours left!
Backend Code
Need a backend? At Hal9, we’ve got you covered! You can create and deploy a Python chatbot in just 10 seconds. Here’s how: Head to the Hal9 Platform, click the "Create" tab, and then "Create" button. Done! You’ve got a Python chatbot—editable and deployable from GitHub.
This chatbot comes with an API which we hooked into the extension frontend code with the following:
async function completeText(text) {
const url = 'https://api.hal9.com/api/v1/chats/message';
const body = { path: 'apps/chrome', message: text };
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json', apikey: '' },
body: JSON.stringify(body),
});
return (await response.json()).message;
}
But the initial replies? The page context was too long, and the bot struggled to respond accurately. The fix? A quick vibe-code session with a simple RAG (Retrieval Augmented Generation—a method to boost AI accuracy with targeted data retrieval) approach. RAG enhances AI performance using focused Python code. No need to dig through Hal9’s docs—we used this prompt instead:
Create a Hal9 chatbot in Python that takes a page context as input, asks OpenAI to identify the last user comment in that context, then calls OpenAI again to generate a reply to it.
The generated code was solid, but we wanted speed. So, we swapped OpenAI for Groq—yes, with a Q. Groq’s custom AI chip delivers faster LLMs.
Here’s the final code. Feel free to click the 'deploy' button and push it to Hal9 to try it—it’s that easy.
import os
from groq import Groq
client = Groq(base_url="https://api.hal9.com/proxy/server=https://api.groq.com/", api_key = "anykey")
model = "llama3-70b-8192"
context = input()
prompt = f"""Given the following website:
```
{context[-8192:] if len(context) > 8192 else context}
```
What is the conversation about and what was the last comment?
"""
messages = [
{"role": "system", "content": "Your main goal is to reply as a human, you are a human."},
{"role": "user", "content": prompt}
]
completion = client.chat.completions.create(model = model, messages = messages)
last = completion.choices[0].message.content
messages.append({ "role": "assistant", "content": last })
messages.append({ "role": "user", "content": "Given the last comment, what's a reasonable comment that anyone might reply to, related to the last comment only? Reply only with comment in the language of the conversation" })
completion = client.chat.completions.create(model = model, messages = messages)
print(completion.choices[0].message.content)
Vibe Coding the Website
For the website, I wanted something epic—an homage to HAL 9000 from 2001: A Space Odyssey. Picture a 3D background with a glowing, pulsating Hal9000-like shape. But with only 6 days, building that from scratch was out of the question. So, I turned to Grok with this prompt:
Create a single page HTML file with a super cool 3D background built on three.js
The process was iterative brilliance (check the evidence). Grok spat out a Three.js setup with a flat donut (not a torus) and custom shaders for pulsating glow. That shader magic—pumping out a gradient from black edges to a vibrant raspberry color would’ve taken me 4-8 hours alone, at least! With Grok, I nailed it in minutes.
With Grok, we hit a Content Security Policy error blocking Three.js, but Hal9’s platform saved the day by letting me finalize it there.
The result? A fixed-canvas, white-background masterpiece with a breathing donut and glowing particles, all scaling perfectly to the viewport (see it live). I plugged it into our Vue-based main site, added some fade-in animations for product listings (odd left, even right), and called it done—16 hours total.
Vibe Coding the Marketing
With the product and website ready, we needed a marketing video—fast. Our solution? Animate the website, add background music, and throw in a voice-over. Done.
For animations, we used Vue. Here’s a sample fade-in effect from the process (transcript reference):
<transition name="fade">
<span>
<a href="https://www.sciencedirect.com/science/article/abs/pii/S0747563212001203">Studies</a>
show that engaging with your community with quick replies can
<b>strengthen relationships and drive word-of-mouth growth</b>.
</span>
</transition>
<style>
.fade-enter-active {
transition: opacity 1s ease-in-out;
}
.fade-enter {
opacity: 0;
}
</style>
The voice-over came from ElevenLabs with this prompt:
British accent female with upbeat happy and fast voice, a bit sassy
We screencammed the animated website, layered in the voice-over and music, and that became our launch video. From there, vibe coding carried us through the launch. Grok whipped up a Product Hunt page draft, then we used Hal9 Reply to respond to early feedback, and I churned out LinkedIn and Twitter posts.
The final touch? This blog post. I started with a rough draft, fed it to Grok with “Polish this and fill in the TODOs” and iterated until it flowed.
Conclusion
In just 6 days, we turned a vague idea into a launched product, complete with a stunning website and marketing materials—all thanks to vibe coding. Tools like Grok and Hal9 supercharged our workflow, proving that AI can be a game-changer for rapid development. Want to build something fast? Vibe coding might be just what you need.
