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

A developer built a sarcastic AI code reviewer using a free open-source AI model, HTML, CSS, and JavaScript. The tool roasts bad HTML markup with humor and can be built in under 10 minutes without a backend server or paid API keys.

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. 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 https://codepen.io/editor/CoderDecoding/pen/019f6062-dd6e-7285-a249-9bb077792671 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; } js 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"; } } ;