This content originally appeared on DEV Community and was authored by Rama Pandu Cheti
🚀 Intro
For years, I’ve hated writing regex 😅 — every time I needed to validate an email or extract a substring, I ended up Googling and testing patterns endlessly.
So, I built Dev Brains AI
— a free collection of small AI tools that help developers generate regex and SQL queries instantly using open models from Hugging Face.
No API keys. No OpenAI costs. Just fast, simple AI utilities.
🧩 The Tech Stack
Here’s the exact stack behind the project:
Layer Tech
Frontend Next.js 14, Tailwind CSS
Backend Serverless API routes
AI inference Hugging Face open models (google/flan-t5-small)
Deployment Vercel
Auth/DB None — fully static
Monetization Google AdSense (planned)
🧠 How the AI works (Hugging Face API)
Instead of using GPT or paid APIs, I wanted to make this fully free.
Here’s how the inference request works:
import { HfInference } from "@huggingface/inference";
const client = new HfInference(process.env.HF_TOKEN);
export async function generateRegex(prompt) {
const result = await client.textGeneration({
model: "google/flan-t5-small",
inputs: Generate a regex for: ${prompt},
parameters: { max_new_tokens: 60 },
});
return result.generated_text;
}
This simple call hits the Hugging Face inference router, returning a lightweight model output — perfect for quick tasks like regex or SQL generation.
⚙️ The Next.js API route
Each AI call runs through a serverless API endpoint to hide the API key:
// pages/api/regex.js
import { HfInference } from "@huggingface/inference";
const client = new HfInference(process.env.HF_TOKEN);
export default async function handler(req, res) {
const { prompt } = JSON.parse(req.body);
try {
const output = await client.textGeneration({
model: "google/flan-t5-small",
inputs: Generate a regex for: ${prompt},
parameters: { max_new_tokens: 60 },
});
res.status(200).json({ result: output.generated_text });
} catch (err) {
res.status(500).json({ error: err.message });
}
}
Simple, secure, and free to deploy.
🎨 The UI
I used Tailwind CSS for fast prototyping and clean visuals.
AI Regex Generator
Generate Regex
Minimal, responsive, and instantly loads on mobile too.
⚡ Deployment
The whole site runs on Vercel’s free plan.
Build command:
npm run build
Output directory:
.next
Once connected to GitHub, every push automatically redeploys.
Vercel also handles HTTPS + caching automatically.
💡 Lessons learned
Small models are surprisingly good for structured tasks like regex or SQL.
SSR is your friend — pre-render content for faster Google indexing.
No API cost = real scalability for free projects.
Focus on value-first UI — users love tools that “just work.”
🔮 What’s next
I’m adding:
JSON formatter + beautifier with AI explanations
Code comment generator
AI-based log analyzer
👉 You can try it here: https://dev-brains-ai.com
❤️ If you’d like to build similar tools
If you’re interested, I can publish a tutorial repo showing:
Full Next.js setup
Hugging Face integration
SEO + AdSense-ready deployment on Vercel
Let me know in the comments 👇
TL;DR:
Built an AI Regex Generator using free Hugging Face models + Next.js
→ Runs fast, costs $0/month, and is deployed on Vercel.
👉 Try it live
This content originally appeared on DEV Community and was authored by Rama Pandu Cheti
Rama Pandu Cheti | Sciencx (2025-11-10T17:18:16+00:00) How I built a free AI Regex Generator using Hugging Face + Next.js (no API costs). Retrieved from https://www.scien.cx/2025/11/10/how-i-built-a-free-ai-regex-generator-using-hugging-face-next-js-no-api-costs-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.