I Built an AI-Powered 'Sarcastic Code Reviewer' (And how you can too!)

Remember my last article on defeating the dreaded "Div Soup" and writing beautiful Semantic HTML?

Well, I decided that simply telling people to write cleaner code wasn't enough. I needed reinforcements. So, I built an AI assistant.

But not just any helpful, polite AI. I built a sassy, coffee-deprived Senior Frontend Developer whose sole purpose in life is to roast bad markup. If you paste nested <div> tags, it will destroy your confidence. If you write beautiful semantic HTML, it will praise you with heavy, dry sarcasm.

And the best part? We are going to build this together in under 10 minutes using raw HTML, CSS, and a free open-source AI model! No backend server or paid API keys required.

---

🛠️ The Interactive Playground

Before we dive into the code, you can test the live app right here on my CodePen! Try pasting some nested <div> tags to see what happens:

👉 https://codepen.io/editor/CoderDecoding/pen/019f6062-dd6e-7285-a249-9bb077792671

---

🏗️ Step 1: The Clean Layout (HTML)

First, we need a clean, semantic structure for our terminal interface. We'll use a <header> for our title, a <main> area for the tool, and <section> tags to split our text editor from the AI's feedback.

<header>
  <div class="logo">🤖 Sarcastic AI Code Reviewer</div>
</header>

<main>
  <h2>Submit Your Code for a "Gentle" Review</h2>
  <p>Paste your HTML below and let our AI senior developer roast your markup choices.</p>

  <section class="editor-section">
    <textarea id="codeInput" placeholder="Paste your HTML here... (e.g., <div><div><div class='nav'>Item</div></div></div>)"></textarea>
    <button id="roastBtn">Analyze My Code</button>
  </section>

  <section class="review-section">
    <h3>The Verdict:</h3>
    <div id="aiResponse" class="response-box">Waiting for code to destroy...</div>
  </section>
</main>

text

body {
  background-color: #0d1117;
  /* your CSS styles... */
}
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main {
  width: 100%;
  max-width: 800px;
  background-color: #161b22;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #30363d;
}

textarea {
  width: 100%;
  height: 180px;
  background-color: #010409;
  color: #39ff14; /* Neon Green */
  border: 1px solid #30363d;
  padding: 15px;
  font-family: 'Courier New', monospace;
  resize: vertical;
}

button {
  width: 100%;
  background-color: #238636;
  color: white;
  border: none;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
}

button:hover {
  background-color: #2ea043;
}

.response-box {
  background-color: #010409;
  border-left: 4px solid #ff7b72; /* Sassy red warning border */
  padding: 20px;
  border-radius: 4px;
}

const codeInput = document.getElementById('codeInput');
const roastBtn = document.getElementById('roastBtn');
const aiResponse = document.getElementById('aiResponse');

const API_URL = "[https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-7B-Instruct](https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-7B-Instruct)";

roastBtn.addEventListener('click', async () => {
  const codeToRoast = codeInput.value.trim();

  if (!codeToRoast) {
    aiResponse.innerText = "🤖 [ERROR] You submitted... absolutely nothing. Is your keyboard broken, or is your brain still compiling?";
    return;
  }

  roastBtn.disabled = true;
  roastBtn.innerText = "Consulting the angry senior developer...";
  aiResponse.innerText = "Analyzing your digital sins...";

  // Defining the AI's personality
  const systemPrompt = `You are a sassy, coffee-deprived Senior Frontend Web Developer who despises bad HTML. 
If they submit 'Div Soup' (nested divs), mock them hilariously. 
If they use beautiful Semantic HTML, praise them with dry, heavy sarcasm. 
Keep your review short (under 4 sentences), punchy, and use emojis.`;

  const userMessage = `Here is my HTML code. Please review it:\n\n\`\`\`html\n${codeToRoast}\n\`\`\``;

  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        inputs: `<|im_start|>system\n${systemPrompt}<|im_end|>\n<|im_start|>user\n${userMessage}<|im_end|>\n<|im_start|>assistant\n`,
        parameters: { max_new_tokens: 180, temperature: 0.8 }
      })
    });

    const data = await response.json();

    if (data && data[0] && data[0].generated_text) {
      aiResponse.innerText = data[0].generated_text.replace(/<\|im_end\|>/g, "").trim();
    } else {
      throw new Error();
    }
  } catch (error) {
    aiResponse.innerText = "🤖 [SYSTEM ERROR] The AI was so overwhelmed by your code that its API crashed. Try again!";
  } finally {
    roastBtn.disabled = false;
    roastBtn.innerText = "Analyze My Code";
  }
});

---

---

✍️ About the Author

• Written by: CoderDecoding
• Copyright: © 2026 CoderDecoding. All rights reserved.
• License: Code samples are shared under the MIT License *

Comments

[Alex Shev]

The fun wrapper makes the example approachable, but the serious lesson is the boundary between feedback and authority.

A playful reviewer can help developers notice messy structure, repeated patterns, or unclear intent. It should still leave the final judgment to the person who knows the product constraints.

[Dedicated Coder]

Spot on, Alex! You hit the nail on the head. The main goal of the project was to make learning structure engaging, but at the end of the day, AI tools are assistants, not dictators. A human developer always has the ultimate context of what the product actually needs. Thanks for the fantastic perspective!

[Alex Shev]

That is a fair way to keep the example useful. The fun wrapper lowers the barrier, but the serious part is the contract underneath: who is allowed to act, what gets checked, and what happens when the automation is wrong. Without that, the wrapper is doing more work than the system.

[Dedicated Coder]

Well said, Alex. If the fallback contract isn't clear when automation is wrong, the tool loses all its utility. Designing those solid structural guardrails underneath the fun wrapper is where the real engineering happens. Thanks for keeping the discussion so insightful

[Alex Shev]

Exactly. The fun wrapper is useful because it gets people to try the idea, but the fallback contract is what decides whether it can be trusted. A reviewer that is funny when right and clear when wrong is much more valuable than one that only optimizes for personality.

[Frank]

How did you handle nested "div soup" cases, did you use a specific algorithm or library to parse the HTML structure? I'm following your work for more insights on this, would love to swap ideas on optimizing the AI model for tougher code reviews.

[Dedicated Coder]

Hey Frank! No heavy parsing libraries here—I kept it super lightweight . The system prompt does all the heavy lifting, and structure on its own. THANKS !!