How to vibe codeLnkFlow

Prerequisites

• Node.jsfree

  Required runtime for Next.js, Cloudflare Workers tooling, and MCP server development.

• Cloudflare Accountfree

  Required to deploy edge redirect workers, manage custom domains, and host serverless databases.

• GitHubfree

  Source code repository and CI/CD deployment connection.

AI coding 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.

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Dashboard 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Edge 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Analytics 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Model 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for LnkFlow