I Built an AI App to Automate My E-commerce Listings, and It Runs in a Single HTML File

https://github.com/covenant666/AI-Content-Assistant-PRO/blob/main/README.md

As anyone who’s sold anything online knows, writing compelling product descriptions is a grind. It’s repetitive, time-consuming, and frankly, not the most exciting part of the job. I found myself spending hours trying to craft the perfect slogan, list of features, and technical specs for platforms like eBay.

I looked at existing tools, but they were often subscription-based, slow, or too complex for my needs. I wanted something simple, portable, and powerful. So, I decided to build it myself.

Today, I’m excited to share the result: AI Content Assistant PRO.

The Challenge: No Backend, No Build Tools, Just One File

From the start, I gave myself a crazy constraint: could I build this entire application in a single HTML file? No Node.js, no npm install, no complex build process. Just one file you can download and run anywhere, even offline (except for the AI calls, of course).

This meant going back to basics and leveraging the power of the modern browser.

The “stack” is as simple as it gets:

• Vanilla JavaScript (ES6+): No frameworks. This forced me to be disciplined with state management and DOM manipulation.
• HTML5 & CSS3: For structure and a clean, modern dark-mode UI.
• Browser localStorage: For all data persistence. The app saves your templates, chat history, and settings directly in your browser. No data ever leaves your machine.

How Does the AI Work Client-Side?

The core of the app is its ability to generate content. This is powered by the Google Gemini API. Instead of routing requests through my own backend (which would mean server costs and privacy concerns), the app makes direct fetch calls from the user’s browser to the Google API.

The user provides their own free Gemini API key on the welcome screen, which is then stored in localStorage. This architecture makes the tool essentially free to operate and ensures the user’s data and API key remain private.

Key Features I Managed to Pack In

Despite the single-file constraint, I wanted it to be a true “PRO” tool. Here’s what it can do:

• 🤖 AI Content Generation: Fills out entire product templates with one click.
• ✍️ Dual Editors: Separate, tailored editors for eBay (EN) and Aukro (CZ).
• 👁️ Real-Time Preview: An iframe-based preview that updates instantly.
• 🌍 Full UI Translation: Switch between English and Czech on the fly.
• 💬 Integrated AI Chat: A context-aware chat assistant for quick questions.
• 💰 Currency Converter: Using the Frankfurter.app API.
• 📦 Full Backup/Restore: Export and import all application data as a single JSON file.

What Was Hard?

• Prompt Engineering: Getting the AI to reliably return clean, structured JSON was a challenge. It took a lot of trial and error to craft prompts that were robust enough to handle various product names.
• State Management: Keeping the UI, the data model, and the preview iframe in sync without a framework like React or Vue required careful planning of event listeners and data flows.
• CSS Architecture: Building a complex, multi-page layout within a single CSS block without pre-processors like SASS was a fun exercise in using CSS variables and modular class naming.

Check It Out and Let Me Know What You Think!

This has been a passion project, and I’m sure there’s still room for improvement. I’m sharing it with the DEV community because I’d love to get your feedback, ideas, or bug reports.

The entire project is open-source under the MIT license.

• 💻 GitHub Repository: [https://github.com/covenant666/AI-Content-Assistant-PRO/blob/main/README.md]

Thanks for reading!