{"slug": "i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too", "title": "I Built an AI-Powered 'Sarcastic Code Reviewer' (And how you can too!)", "summary": "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.", "body_md": "Remember my last article on defeating the dreaded \"Div Soup\" and writing beautiful Semantic HTML?\n\nWell, I decided that simply telling people to write cleaner code wasn't enough. I needed reinforcements. So, I built an AI assistant.\n\nBut 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 `
`\n\ntags, it will destroy your confidence. If you write beautiful semantic HTML, it will praise you with heavy, dry sarcasm.\n\nAnd 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.\n\nBefore we dive into the code, you can test the live app right here on my CodePen! Try pasting some nested `
`\n\ntags to see what happens:\n\nšŸ‘‰ [https://codepen.io/editor/CoderDecoding/pen/019f6062-dd6e-7285-a249-9bb077792671](https://codepen.io/editor/CoderDecoding/pen/019f6062-dd6e-7285-a249-9bb077792671)\n\nFirst, we need a clean, semantic structure for our terminal interface. We'll use a `
`\n\nfor our title, a `
`\n\narea for the tool, and `
`\n\ntags to split our text editor from the AI's feedback.\n\n```\n
\n
šŸ¤– Sarcastic AI Code Reviewer
\n
\n\n
\n

Submit Your Code for a \"Gentle\" Review

\n

Paste your HTML below and let our AI senior developer roast your markup choices.

\n\n
\n \n \n
\n\n
\n

The Verdict:

\n
Waiting for code to destroy...
\n
\n
\n```\n\ntext\n\n```\nbody {\n background-color: #0d1117;\n /* your CSS styles... */\n}\n font-family: 'Courier New', Courier, monospace;\n margin: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\nmain {\n width: 100%;\n max-width: 800px;\n background-color: #161b22;\n padding: 30px;\n border-radius: 8px;\n border: 1px solid #30363d;\n}\n\ntextarea {\n width: 100%;\n height: 180px;\n background-color: #010409;\n color: #39ff14; /* Neon Green */\n border: 1px solid #30363d;\n padding: 15px;\n font-family: 'Courier New', monospace;\n resize: vertical;\n}\n\nbutton {\n width: 100%;\n background-color: #238636;\n color: white;\n border: none;\n padding: 15px;\n font-family: 'Courier New', monospace;\n font-weight: bold;\n cursor: pointer;\n border-radius: 6px;\n}\n\nbutton:hover {\n background-color: #2ea043;\n}\n\n.response-box {\n background-color: #010409;\n border-left: 4px solid #ff7b72; /* Sassy red warning border */\n padding: 20px;\n border-radius: 4px;\n}\njs\nconst codeInput = document.getElementById('codeInput');\nconst roastBtn = document.getElementById('roastBtn');\nconst aiResponse = document.getElementById('aiResponse');\n\nconst 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)\";\n\nroastBtn.addEventListener('click', async () => {\n const codeToRoast = codeInput.value.trim();\n\n if (!codeToRoast) {\n aiResponse.innerText = \"šŸ¤– [ERROR] You submitted... absolutely nothing. Is your keyboard broken, or is your brain still compiling?\";\n return;\n }\n\n roastBtn.disabled = true;\n roastBtn.innerText = \"Consulting the angry senior developer...\";\n aiResponse.innerText = \"Analyzing your digital sins...\";\n\n // Defining the AI's personality\n const systemPrompt = `You are a sassy, coffee-deprived Senior Frontend Web Developer who despises bad HTML. \nIf they submit 'Div Soup' (nested divs), mock them hilariously. \nIf they use beautiful Semantic HTML, praise them with dry, heavy sarcasm. \nKeep your review short (under 4 sentences), punchy, and use emojis.`;\n\n const userMessage = `Here is my HTML code. Please review it:\\n\\n\\`\\`\\` html\\n${codeToRoast}\\n\\`\\`\\``;\n\n try {\n const response = await fetch(API_URL, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n inputs: `<|im_start|>system\\n${systemPrompt}<|im_end|>\\n<|im_start|>user\\n${userMessage}<|im_end|>\\n<|im_start|>assistant\\n`,\n parameters: { max_new_tokens: 180, temperature: 0.8 }\n })\n });\n\n const data = await response.json();\n\n if (data && data[0] && data[0].generated_text) {\n aiResponse.innerText = data[0].generated_text.replace(/<\\|im_end\\|>/g, \"\").trim();\n } else {\n throw new Error();\n }\n } catch (error) {\n aiResponse.innerText = \"šŸ¤– [SYSTEM ERROR] The AI was so overwhelmed by your code that its API crashed. Try again!\";\n } finally {\n roastBtn.disabled = false;\n roastBtn.innerText = \"Analyze My Code\";\n }\n});\n```\n\n", "url": "https://wpnews.pro/news/i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too", "canonical_source": "https://dev.to/coderdecoding/i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too-7mm", "published_at": "2026-07-14 12:02:22+00:00", "updated_at": "2026-07-14 12:31:09.151445+00:00", "lang": "en", "topics": ["artificial-intelligence", "large-language-models", "developer-tools"], "entities": ["Hugging Face", "Qwen2.5-Coder-7B-Instruct", "CodePen"], "alternates": {"html": "https://wpnews.pro/news/i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too", "markdown": "https://wpnews.pro/news/i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too.md", "text": "https://wpnews.pro/news/i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too.txt", "jsonld": "https://wpnews.pro/news/i-built-an-ai-powered-sarcastic-code-reviewer-and-how-you-can-too.jsonld"}}