Are you constantly switching tabs trying to figure out why your code isn’t working? Or maybe you need quick coding solutions without digging through long threads on Stack Overflow?

Introducing Dhanian AI — a clean and simple AI-powered chatbot built entirely with HTML, CSS, and JavaScript, and powered by the OpenAI GPT API.

✅ No frameworks

✅ Smart debugging help

✅ Clean dark-mode UI

🔗 Live Demo + Full Source Code on CodePen

💾 Browse My Coding Ebooks & Tools on Gumroad

💬 What Is Dhanian AI?

Dhanian AI is a beginner-friendly chatbot assistant that responds to programming questions, helps debug JavaScript/HTML/CSS issues, and suggests working solutions — all using the power of AI.

You can ask:

  • “How do I fix a ReferenceError?”
  • “Why won’t my CSS flexbox center items?”
  • “What does this error mean in React?”

It’s like having a coding partner always ready to help.

🧰 Technologies Used

  • ✅ HTML – Chat layout structure
  • ✅ CSS – Clean dark theme UI
  • ✅ JavaScript – Core logic and API calls
  • ✅ OpenAI GPT API – AI engine behind the bot

⚙️ How It Works

  1. The user types in a coding question or error message.
  2. JavaScript sends this prompt to the OpenAI API.
  3. The GPT engine replies with a suggested solution or explanation.
  4. The response is shown in the chat window in real-time.

🖥️ Code Breakdown (Live Version)

👉 Instead of pasting a bunch of code here, I’ve shared the complete source in a single playground.

✅ View & Fork the Full Project on CodePen:

📎 https://codepen.io/Code-WithDhanian/pen/azzboGL

Inside, you’ll find:

  • HTML: Markup structure of the chatbot UI
  • CSS: Styling for dark mode, chat bubbles, input field, and layout
  • JavaScript: Handles user input, fetches AI response, and updates the DOM

🔑 Replace your-openai-api-key in script.js with your actual OpenAI API key.

🧠 Features You Can Add Next

Dhanian AI is intentionally simple, but here are some enhancements you could explore:

  • 📚 Code highlighting with Prism.js
  • 💾 Save chat history using localStorage
  • 🎙️ Add voice input with the Web Speech API
  • 🧩 Expand to support other languages or frameworks like Python, React, or PHP

💡 Why I Built This

I wanted something lightweight, beginner-friendly, and fast to integrate into any project — whether you're a student or a full-time dev. AI is powerful, and using it to debug code saves hours of time.

And hey, building your own AI assistant looks cool in a portfolio!

🙌 Final Thoughts

Dhanian AI is a great mini project to:

  • Learn how APIs work
  • Use OpenAI in web projects
  • Build a useful tool for yourself or other devs

Give it a spin and fork your own version on CodePen!

☕ Want More Dev Resources?

I create coding ebooks, cheat sheets, and dev tools.

Check them out here 👉 codewithdhanian.gumroad.com

You’ll find:

  • 🧠 JavaScript Roadmaps
  • 💡 CSS & Frontend Handbooks
  • ⚡ Real-world Projects for Portfolio

Thanks for reading — and happy debugging with Dhanian AI!

Have questions? Drop them below or connect with me on Twitter @e_opore.