changelog generator wip

Author: D-K-P

changelog-generator/.env.example

@@ -0,0 +1,9 @@
+# Trigger.dev
+TRIGGER_SECRET_KEY=tr_dev_xxx
+TRIGGER_PROJECT_REF=proj_xxx
+
+# Anthropic
+ANTHROPIC_API_KEY=sk-ant-xxx
+
+# GitHub (optional - required for private repos)
+GITHUB_TOKEN=ghp_xxx

changelog-generator/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

changelog-generator/.gitignore

@@ -0,0 +1,35 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

changelog-generator/README.md

@@ -0,0 +1,91 @@
+# Changelog Generator using Claude Agent SDK and Trigger.dev
+
+Generate intelligent changelogs from GitHub commits using AI with a two-phase approach: scan commits first, then selectively fetch diffs for unclear changes.
+
+## Tech Stack
+
+- **Next.js** – Frontend framework using App Router
+- **Claude Agent SDK** – Anthropic's SDK for building AI agents with custom tools
+- **Trigger.dev** – Background task orchestration with real-time streaming
+- **Octokit** – GitHub API client
+
+## Features
+
+- **Two-phase intelligent analysis**:
+  1. Claude first lists all commits in the date range
+  2. For unclear commits ("fix bug", "update"), Claude requests the actual diff
+  3. Generates grouped changelog with full context
+- **Custom MCP tools** – Claude can call `list_commits` and `get_commit_diff` on demand
+- **Private repo support** – Optional GitHub token for private repositories
+- **Real-time streaming** – Watch the changelog generate live
+
+## How It Works
+
+```
+User enters repo URL + date range
+    ↓
+API triggers generate-changelog task
+    ↓
+Claude Agent SDK with custom GitHub tools:
+  - list_commits: fetches commit messages via GitHub API
+  - get_commit_diff: fetches diff for specific commit SHA
+    ↓
+Claude explores commits, requests diffs as needed
+    ↓
+Generates grouped changelog
+    ↓
+Streams to frontend via Trigger.dev Realtime
+```
+
+## Setup
+
+1. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+2. **Configure environment variables**
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Fill in:
+   - `TRIGGER_SECRET_KEY` – From [Trigger.dev dashboard](https://cloud.trigger.dev/)
+   - `TRIGGER_PROJECT_REF` – Your project ref (starts with `proj_`)
+   - `ANTHROPIC_API_KEY` – From [Anthropic Console](https://console.anthropic.com/)
+   - `GITHUB_TOKEN` (optional) – For private repos, needs `repo` scope
+
+3. **Start development servers**
+
+   ```bash
+   # Terminal 1: Next.js
+   npm run dev
+
+   # Terminal 2: Trigger.dev CLI
+   npx trigger.dev@latest dev
+   ```
+
+4. Open [http://localhost:3000](http://localhost:3000)
+
+## Relevant Files
+
+- `trigger/generate-changelog.ts` – Main task with custom MCP tools for GitHub
+- `trigger/changelog-stream.ts` – Stream definition for real-time output
+- `app/api/generate-changelog/route.ts` – API endpoint
+- `app/response/[runId]/page.tsx` – Streaming display page
+
+## Custom Tools
+
+The task defines two custom MCP tools that Claude can use:
+
+```typescript
+// List commits with messages (lightweight)
+list_commits({ since: "2024-01-01", until: "2024-02-01" })
+
+// Get full diff for a specific commit (on-demand)
+get_commit_diff({ sha: "abc1234" })
+```
+
+This two-phase approach minimizes token usage while giving Claude full context when needed.

changelog-generator/app/api/abort/route.ts

@@ -0,0 +1,26 @@
+import { runs } from "@trigger.dev/sdk";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { runId } = await request.json();
+
+    if (!runId || typeof runId !== "string") {
+      return NextResponse.json(
+        { error: "Run ID is required" },
+        { status: 400 }
+      );
+    }
+
+    await runs.cancel(runId);
+
+    return NextResponse.json({ success: true });
+  } catch (error: unknown) {
+    console.error("Failed to abort task:", error);
+    const message = error instanceof Error ? error.message : "Failed to abort task";
+    return NextResponse.json(
+      { error: message },
+      { status: 500 }
+    );
+  }
+}

changelog-generator/app/api/generate-changelog/route.ts

@@ -0,0 +1,51 @@
+import { tasks } from "@trigger.dev/sdk";
+import type { generateChangelog } from "@/trigger/generate-changelog";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { repoUrl, startDate, endDate } = await request.json();
+
+    // Validate inputs
+    if (!repoUrl || typeof repoUrl !== "string") {
+      return NextResponse.json(
+        { error: "Repository URL is required" },
+        { status: 400 }
+      );
+    }
+
+    if (!startDate || !endDate) {
+      return NextResponse.json(
+        { error: "Start and end dates are required" },
+        { status: 400 }
+      );
+    }
+
+    // Basic GitHub URL validation
+    const githubUrlPattern = /^https?:\/\/(www\.)?github\.com\/[\w-]+\/[\w.-]+/;
+    if (!githubUrlPattern.test(repoUrl)) {
+      return NextResponse.json(
+        { error: "Invalid GitHub URL format" },
+        { status: 400 }
+      );
+    }
+
+    // Trigger the changelog task
+    const handle = await tasks.trigger<typeof generateChangelog>(
+      "generate-changelog",
+      { repoUrl, startDate, endDate }
+    );
+
+    return NextResponse.json({
+      runId: handle.id,
+      accessToken: handle.publicAccessToken,
+    });
+  } catch (error: unknown) {
+    console.error("Failed to trigger generate-changelog task:", error);
+    const message = error instanceof Error ? error.message : "Failed to start changelog generation";
+    return NextResponse.json(
+      { error: message },
+      { status: 500 }
+    );
+  }
+}

changelog-generator/app/globals.css

@@ -0,0 +1,82 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

changelog-generator/app/layout.tsx

@@ -0,0 +1,23 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Changelog Generator - AI-powered changelogs from GitHub commits",
+  description:
+    "Generate developer-friendly changelogs from any GitHub repository using AI",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}