# How to Vibe Code Your Own LnkFlow (and Stop Paying for It) > Track the clicks that make you money - Site: https://lnkflow.io - Category: Marketing Analytics & Link Tracking - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-3 weeks of part-time development ## Verdict You can build a functional personal clone of LnkFlow in a couple of weeks, but setting up custom domain wildcard routing and the MCP server will test your patience. The core of a link shortener and analytics dashboard is straightforward scaffolding with Next.js and Tailwind. However, replicating LnkFlow's exact edge value requires writing a Cloudflare Worker that handles incoming requests for arbitrary custom domains, strips or records UTM parameters, parses user agents and IP locations for analytics, and performs instantaneous HTTP 302 redirects before forwarding data to a Turso database. Furthermore, implementing the Model Context Protocol (MCP) server over SSE/HTTP with OAuth + PKCE requires careful auth handling so Claude Code or Codex can query live tables without exposing security tokens. ### What you can't replicate - The exact LnkFlow brand name, domain portfolio, and existing customer trust - Production-tested edge routing resilient against unexpected bot traffic spikes ## What it does Agentic marketing attribution and server-side link tracking platform designed to measure marketing campaigns, creator collaborations, and conversions. ### Core features - Branded short link generation and database storage - Server-side edge redirect handling with bot filtering - Click attribution by campaign, channel, device, and referrer - Custom domain verification and SSL management - Webhook forwarding to GA4 and Meta CAPI - Model Context Protocol (MCP) server for AI agent queries - Stripe checkout integration and subscription billing - Analytics dashboard with traffic charts and creator performance ranking ## The business ### Pricing - Starter: $9 / month - Growth: $19.50 / month - Scale: $49.50 / month Founded 2026. Team size: 1-5. ## The hard parts - Building a sub-50ms edge redirect handler on Cloudflare Workers that logs click metadata asynchronously without blocking the user journey - Programmatically managing custom domains with automated SSL provisioning and DNS validation - Implementing an OAuth + PKCE Model Context Protocol (MCP) server that securely exposes read tools to terminal coding assistants - Handling asynchronous webhook processing and retry queues for GA4 and Meta CAPI conversion forwarding ## How to vibe code LnkFlow ### Prerequisites - Node.js (free): Required runtime for Next.js, Cloudflare Workers tooling, and MCP server development. - Cloudflare Account (free): Required to deploy edge redirect workers, manage custom domains, and host serverless databases. - GitHub (free): Source code repository and CI/CD deployment connection. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding full-stack apps, debugging edge functions, and writing MCP servers. - Cursor: Ideal for iterative UI work on the analytics dashboard and inspecting code diffs visually. ### Stack - Frontend: Next.js - Backend: Cloudflare Workers - Database: Turso - Auth: better-auth - Payments: Stripe - Other: Tailwind CSS, shadcn/ui, Vercel AI SDK ### Hosting - Cloudflare (Edge worker redirects, D1/Turso database edge replication, and static frontend hosting): $0-5/mo ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, shadcn/ui, and set up the Turso SQLite database schema for users, domains, links, and click events. ``` Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Turso (libSQL) database client connections using environment variables. Define the SQL schema with tables for users, domains (id, domain_name, user_id, verified), links (id, domain_id, short_key, destination_url, campaign, channel, creator, created_at), and clicks (id, link_id, ip_address, country, device, referrer, created_at). Implement better-auth with email/password authentication connected to the Turso database. Provide clean configuration files and basic layout wrappers. ``` 2. **Dashboard UI & Link Management** — Build the core dashboard views for creating short links, assigning UTM tags, and listing existing links with copy-to-clipboard functionality. ``` Build a responsive SaaS dashboard using shadcn/ui components inside the Next.js app. Create a link creation modal/form that accepts a destination URL, custom alias or random key, branded domain selector, and optional UTM tags for campaign, channel, and creator. Implement a links table page showing active links, target URLs, and total click counts. Add server actions for creating, editing, and deleting links with proper validation using Zod. ``` 3. **Edge Redirect & Click Tracking Worker** — Develop a Cloudflare Worker script that intercepts incoming requests on custom domains, matches the short key, logs click attributes asynchronously, and performs a 302 redirect. ``` Write a Cloudflare Worker script in TypeScript that acts as the edge router for short links. The worker must parse the incoming request hostname and path (e.g., links.yourbrand.com/promo). Query the Turso database or edge cache to find the corresponding destination URL. Extract analytics metadata from request headers (CF-IPCountry, User-Agent, Referer). Increment the click count and asynchronously insert a row into the clicks table without delaying the redirect. Return an HTTP 302 redirect to the destination URL. Handle missing keys with a graceful 404 page. ``` 4. **Analytics Dashboard & Aggregations** — Build the analytics views featuring charts for clicks over time, geographic breakdown, device distribution, and creator performance rankings. ``` Build an analytics dashboard page in Next.js that visualizes click data for user links. Implement SQL aggregation queries for clicks over time, top countries, device types, top referrers, and a creator performance leaderboard ranking influencers by total traffic and attributed conversions. Use Recharts for clean time-series and bar charts. Add date-range filtering controls. ``` 5. **Model Context Protocol (MCP) Server** — Implement a Model Context Protocol (MCP) server endpoint that allows AI coding assistants like Claude Code to query links and campaign metrics via natural language. ``` Implement a Model Context Protocol (MCP) server endpoint at /api/mcp using Streamable HTTP transport and OAuth + PKCE authentication via better-auth. Expose read tools that allow authenticated AI clients (like Claude Code or Codex) to list campaigns, query aggregated click analytics, and inspect link performance metrics. Ensure write tools for creating links are disabled by default and require explicit consent scopes. ``` 6. **Polish, Webhooks & Deployment** — Configure custom domain setup instructions, integrate optional GA4/Meta CAPI webhook forwarding, and deploy the application to Cloudflare. ``` Add a settings page for managing custom domains with DNS verification record instructions (TXT/CNAME). Implement webhook forwarding endpoints that trigger asynchronous background events to forward conversion data to GA4 Measurement Protocol and Meta Conversions API (CAPI). Write deployment configuration files (wrangler.toml) to deploy the Next.js application and edge worker routines seamlessly to Cloudflare. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain Registration: $12/yr - AI Coding Assistant (Claude Pro): $20 one-time - Total: ~$32 one-time **Ongoing costs (monthly):** - Cloudflare Workers Paid / Turso: $0-5/mo - Total: ~$5/mo - Paying for the SaaS instead: $19.50/mo (Growth Plan) - Build time: 25-35 hours - AI tool credits: $20 (Claude Pro) - Break-even: 2 months ## Sources - [LnkFlow Official Website & Pricing Pages](https://lnkflow.io) - [LnkFlow Product Hunt Launch Page](https://www.producthunt.com/posts/lnkflow)