How I built a free AI Regex Generator using Hugging Face + Next.js (no API costs)

🚀 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