DEV Community

Cover image for Briefen.me - AI-Powered URL Shortener That Actually Makes Sense
Ifihanagbara Olusheye
Ifihanagbara Olusheye

Posted on

Briefen.me - AI-Powered URL Shortener That Actually Makes Sense

#devchallenge #muxchallenge #showandtell #video

DEV's Worldwide Show and Tell Challenge Submission 🎥

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

What I Built

Briefen.me is an AI-powered URL shortener that generates readable, meaningful short links instead of random character strings. Instead of getting bit.ly/x7k9p2, you get briefen.me/flask-authentication-guide - a link that actually tells you where it leads.

The app uses Google Gemini to analyze webpage content and suggest intelligent slug options, giving users the power of choice while eliminating the mental overhead of coming up with creative short links.

My Pitch Video

stream.mux.com

Demo

Testing Instructions:

  1. Visit the live site
  2. Paste any URL (try a news article or blog post)
  3. Watch the AI analyze the content in real-time
  4. Pick your favorite slug from 3 AI-generated options
  5. Your smart short link is ready!

No login required - anonymous link creation is supported.

The Story Behind It

The Problem

We've all been there: you need to share a link, so you head to a URL shortener. You paste your long URL and get back... xyz.co/a8f2kp.

What does that even mean? Nothing. It's just random noise.

Or maybe you want something memorable, so you try to think of a custom slug. You sit there for five minutes trying to come up with something clever, only to find it's already taken. Then you settle for something generic like my-link-123.

The real problem isn't shortening URLs - it's making them meaningful without the cognitive burden.

The Solution

What if AI could do the thinking for you?

Briefen.me scrapes the webpage content, feeds it to Google Gemini, and generates contextually relevant slug suggestions. The AI understands what the page is about and proposes slugs that are:

  • Descriptive and memorable
  • SEO-friendly
  • Actually available (it checks the database)

You get 3 options to choose from, so you're in control without doing the mental heavy lifting.

Why I Built This

As a developer, I share links constantly - to documentation, tutorials, GitHub repos, Stack Overflow answers. I wanted my shared links to be self-documenting. When someone sees briefen.me/react-hooks-explained, they know exactly what they're clicking before they click it.

Technical Highlights

The Architecture 

User submits URL
       ↓
   URL Validation (SSRF protection, tracking param removal)
       ↓
   Web Scraping (with Twitter/X fallback via Nitter)
       ↓
   AI Analysis (Gemini 2.0 Flash)
       ↓
   Slug Generation (5 candidates per batch)
       ↓
   Availability Check (filter taken slugs)
       ↓
   User Selection (pick from 3 options)
       ↓
   Short Link Created
Enter fullscreen mode Exit fullscreen mode

Real-Time Streaming with Server-Sent Events

One of the most satisfying parts of the UX is watching the AI "think" in real-time. This is powered by Server-Sent Events (SSE):

Backend (Flask):

def generate():
    yield f"data: {json.dumps({'status': 'progress', 'message': 'Fetching webpage...'})}\n\n"
    # ... scrape content ...
    yield f"data: {json.dumps({'type': 'thinking', 'message': 'Analyzing content...'})}\n\n"
    # ... AI generates slugs ...
    yield f"data: {json.dumps({'status': 'success', 'slugs': slugs})}\n\n"

return Response(stream_with_context(generate()), mimetype="text/event-stream")
Enter fullscreen mode Exit fullscreen mode

Frontend (Vanilla JS):

const response = await fetch('/api/generate-slugs', { method: 'POST', body: formData });
const reader = response.body.getReader();

while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // Parse SSE chunks and update UI in real-time
}
Enter fullscreen mode Exit fullscreen mode

Smart Web Scraping with Fallbacks

Not all websites play nice. Twitter/X, for example, requires JavaScript to render content. Briefen.me handles this gracefully:

  1. Primary: Direct fetch with BeautifulSoup
  2. Twitter Fallback: Nitter mirror (no JS required)
  3. Last Resort: Jina's text-proxy service 
def _is_js_blocked(self, soup):
    indicators = ["enable javascript", "javascript is required", "js-disabled"]
    text = soup.get_text().lower()
    return any(indicator in text for indicator in indicators)
Enter fullscreen mode Exit fullscreen mode

Security-First URL Validation

URL shorteners can be abused for SSRF attacks. Briefen.me blocks:

  • Private IP ranges (127.x, 10.x, 192.168.x, 172.16-31.x)
  • Localhost patterns
  • File:// and other dangerous schemes

It also strips 40+ tracking parameters (utm_*, fbclid, gclid, etc.) to keep your links clean.

AI-Powered Slug Generation

The Gemini integration uses a carefully crafted prompt:

prompt = f"""Generate 5 unique, SEO-friendly URL slugs for this webpage.

Title: {title}
Description: {description}
Content: {content[:500]}

Rules:
- Max 50 characters
- Lowercase letters, numbers, hyphens only
- Descriptive and memorable
- Each slug should be semantically different
"""
Enter fullscreen mode Exit fullscreen mode

The AI generates 5 candidates per batch, and if all are taken, it retries up to 3 times with instructions to generate different options.

Chrome Extension

For power users, there's a Chrome extension that adds a right-click context menu: "Shorten with Briefen.me". It uses JWT authentication to sync with your web account and streams the same real-time progress updates.

Tech Stack

Layer Technology
Backend Flask (Python)
Database SQLite / PostgreSQL
AI Google Gemini 2.0 Flash
Frontend Vanilla HTML/CSS/JS
Auth Flask-Login + JWT
Streaming Server-Sent Events
Extension Chrome Manifest V3

Top comments (0)