Great news! QZ-L.com has officially passed 300 active short-link redirects — a big milestone for our lightweight and fast link-management service.
Whether you're using QZ-L.com for product launches, personal projects, or API testing, every redirect is powered by our optimized infrastructure designed for speed, reliability, and simplicity.
Thank you to everyone using QZ-L. More improvements, analytics, and developer tools are coming soon! ๐
Checkout https://qz-l.com
Learn how qz-l.com's new AI chat assistant works using Gemini 2.5 Flash Lite, Next.js API routes, and function calling --- all free on the Google AI tier.
I recently added a new feature to qz-l.com: an AI-powered chat assistant that can shorten URLs, show analytics, search blog posts, and help users navigate the service --- all through natural language.
This post explains how the assistant works under the hood using the modern @google/genai SDK and the free-tier model gemini-2.5-flash-lite, which runs entirely at zero cost within Google's usage limits.
qz-l's mission is simple: privacy-first URL shortening with analytics.
But users often ask:
Instead of building a whole help UI, I added a chat interface that can perform real actions using function calling.
The assistant uses:
Why this model?
Inspired by this resource list: https://github.com/cheahjs/free-llm-api-resources
The assistant lives inside a Next.js App Router API route:
/api/chat
High-level flow:
User Message
↓
Next.js API (/api/chat)
↓
Gemini LLM (with system prompt + tools)
↓
If function call → server executes logic
↓
LLM formats final Markdown response
↓
Chat UI displays answer (links, QR codes, etc.)
import { GoogleGenAI } from "@google/genai";
const ai = new GoogleGenAI({ apiKey });
const result = await ai.models.generateContent({
model: "gemini-2.5-flash-lite",
contents,
config: {
temperature: 0.7,
maxOutputTokens: 1024,
systemInstruction: {
role: "system",
parts: [{ text: SYSTEM_PROMPT }],
},
tools: [
{
functionDeclarations: [
shortenUrlDeclaration,
getUrlAnalyticsDeclaration,
listRecentUrlsDeclaration,
deleteUrlDeclaration,
searchBlogPostsDeclaration,
],
},
],
},
});
const shortenUrlDeclaration = {
name: "shortenUrl",
description: "Generate a shortened URL",
parameters: {
type: "object",
properties: {
longUrl: { type: "string" },
},
required: ["longUrl"],
},
};
Example function call return:
{
"functionCall": {
"name": "shortenUrl",
"args": { "longUrl": "https://google.com" }
}
}
You don't need expensive models to build production AI features --- just solid architecture and a good system prompt.
If you want to add a clean, GitHub-powered comment system to your website, Giscus is one of the best options.
This guide walks you step-by-step through everything required:
Creating a comments repository
Enabling Discussions
Installing the Giscus GitHub App
Getting your repoId and categoryId via GitHub GraphQL
Configuring the <Giscus /> component in your site
By the end, you’ll have a fully working comment system—powered entirely by GitHub Discussions.
Create a new GitHub repository dedicated to comments:
This is where all the comments from your website will be stored as GitHub Discussions.
Go to:
Settings → General → Features → Discussions → ✔ Enable
Without Discussions enabled, Giscus cannot store or load comments.
Giscus relies on its GitHub App to read and write discussions.
Install it here:
https://github.com/apps/giscus
During installation:
Select your GitHub account or organization
Select the comments repo (e.g., Q-Z-L-Corp/giscus-comments)
Grant required permissions (Discussions, Contents, Metadata)
Once installed, Giscus is authorized to create and read discussion threads.
Giscus requires the GraphQL repository ID, not the repo name.
To query it, you need a GitHub personal access token (PAT) with:
public_repo (for public repos)
or repo (for private repos)
Then send this GraphQL query:
Your repoId is:
Your repo must have at least one discussion category.
Giscus typically uses something like “Blog Comments”.
Get your category ID with this query:
Your categoryId is:
Now you can embed Giscus into your website.
Here’s a working example:
This will automatically create a discussion for each page and load all comments.
You’ve now completed all required steps:
✔ Created comment repo
✔ Enabled Discussions
✔ Installed Giscus GitHub App
✔ Retrieved repoId
✔ Retrieved categoryId
✔ Embedded Giscus configuration
Your website now has a GitHub-powered commenting system with:
zero backend
no user accounts to manage
spam-resistant GitHub authentication
clean UX
One of the most powerful features of a URL shortener is the ability to track and analyze how your links perform. Today, we're sharing how we built qz-l's comprehensive analytics dashboard—a system that gives users instant insights into their traffic patterns, audience demographics, and referral sources.
When we started building the analytics feature, we knew we needed:
The foundation is a single link_visits table that captures everything about each visit:
CREATE TABLE link_visits (
id BIGSERIAL PRIMARY KEY,
short_link_id BIGINT REFERENCES short_links(id),
ip_address INET,
user_agent TEXT,
referrer TEXT,
language TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
CREATE INDEX ON link_visits(short_link_id);
CREATE INDEX ON link_visits(created_at);
Every time someone clicks a shortened link, we capture:
Instead of running queries sequentially, we use Promise.all() to fetch all analytics data in parallel:
const [
totalVisits,
uniqueVisitors,
topReferrers,
topUserAgents,
languages,
dailyVisits,
hourlyVisits
] = await Promise.all([
query(`SELECT COUNT(*) as count FROM link_visits WHERE short_link_id = $1`, [linkId]),
query(`SELECT COUNT(DISTINCT ip_address) as count FROM link_visits WHERE short_link_id = $1`, [linkId]),
query(`SELECT referrer, COUNT(*) as count FROM link_visits WHERE short_link_id = $1 GROUP BY referrer ORDER BY count DESC LIMIT 20`, [linkId]),
// ... more queries
]);
This parallel approach means the entire analytics dashboard loads in ~200ms regardless of how many queries we need.
Raw user agent strings look like this:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
That's useful for debugging, but not for business analytics. We built a parser that extracts meaningful information:
export function parseUserAgent(ua: string): UserAgentInfo {
const osMatch = ua.match(/Windows|Macintosh|Linux|iPhone|iPad|Android/);
const browserMatch = ua.match(/Chrome|Firefox|Safari|Edge|Opera/);
const deviceMatch = ua.match(/Mobile|Tablet|Desktop/);
return {
os: extractOS(ua),
browser: extractBrowser(ua),
device: detectDevice(ua),
label: `${extractBrowser(ua)} on ${extractOS(ua)}`
};
}
Now those cryptic strings become: "Chrome on macOS", "Safari on iOS", "Firefox on Windows"—much better for understanding your audience!
We use Recharts for professional, responsive visualizations:
Shows visitor growth over the past month with a smooth line chart. Perfect for spotting trends and seasonal patterns.
Horizontal scrolling column chart showing which hours get the most traffic. Helps determine when your audience is most active.
See where your traffic comes from: direct links, specific websites, social media platforms, etc. Shows domain names clearly with color-coded bars.
At a glance, see what devices and browsers your visitors use. This helps prioritize which platforms to support.
Every analytics view displays four primary metrics:
<StatsCard label="Total Views" value={analytics.totalVisits} icon="๐️" />
<StatsCard label="Unique Visitors" value={analytics.uniqueVisitors} icon="๐ฅ" />
<StatsCard label="Conversion Rate" value={`${conversionRate}%`} icon="๐" />
Building analytics for mobile is tricky. Charts need space, but mobile screens are limited. Here's how we solved it:
On mobile, we don't overwhelm users with 10 data points—we show 5:
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
setIsMobile(window.innerWidth < 768);
const handleResize = () => setIsMobile(window.innerWidth < 768);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
const limit = isMobile ? 5 : 10;
const displayData = data.slice(0, limit);
Different charts need different strategies:
Horizontal Bar Charts (Referrers)
Pie Charts (Platforms)
Line Charts (30-Day Trend)
The killer issue on mobile is horizontal scrollbars. We prevent them with:
<main className="max-w-7xl mx-auto px-4 sm:px-6 py-8 overflow-x-hidden">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Charts wrapped in overflow-hidden */}
<div className="overflow-hidden">
<ReferrersChart />
</div>
</div>
</main>
Users can search by either short code or original URL:
const handleSearch = async (e) => {
const searchParam = searchInput.includes("/")
? `originalUrl=${encodeURIComponent(searchInput)}`
: `shortCode=${encodeURIComponent(searchInput)}`;
const response = await fetch(`/api/analytics?${searchParam}`);
};
This flexibility means users don't need to remember their short codes—they can search by the original URL they shortened.
CREATE INDEX ON link_visits(short_link_id);
CREATE INDEX ON link_visits(created_at);
These indexes make queries fast even with millions of visits.
Using Promise.all() reduces response time from 800ms (sequential) to 200ms (parallel).
The analytics page is a client component, allowing instant interactivity without waiting for server-side rendering.
Recharts' ResponsiveContainer handles chart resizing without re-fetching data.
| Component | Technology |
|---|---|
| Frontend Framework | Next.js 15 |
| Charts | Recharts |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Database | PostgreSQL |
| User Agent Parsing | Custom parser + regex |
As we expand the analytics feature, we're planning:
Sequential database queries turned our analytics slow. Parallel queries fixed it instantly.
Showing readable labels ("Chrome on macOS") instead of raw strings made the analytics 10x more useful.
Designing charts for mobile first, then scaling up, led to better layouts across all devices.
We added database indexes after performance became an issue. Do it from day one.
Even when data is limited, showing all four metric cards and charts gives a complete picture.
If you're building a URL shortener or similar service, here's the minimal checklist:
Analytics transforms a URL shortener from "just a link tool" into a powerful marketing analytics platform. By combining smart database design, parallel query execution, intelligent user agent parsing, and beautiful visualizations, we created an analytics dashboard that users genuinely love to use.
The best part? The core logic is surprisingly simple—it's the details (mobile responsiveness, chart optimization, data parsing) that make it shine.
If you're using qz-l, head to the Analytics Dashboard and see what you discover about your traffic!
Want to dive deeper?
Happy analyzing! ๐
Great news! QZ-L.com has officially passed 300 active short-link redirects — a big milestone for our lightweight and fast link-management s...
