feat: summarize links using ai

Author: Filip

apps/backend/package.json

@@ -17,11 +17,13 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "better-auth": "catalog:",
-    "hono": "catalog:",
+    "@ai-sdk/groq": "^2.0.24",
     "@hono/zod-validator": "^0.7.3",
     "@prisma/adapter-d1": "^6.16.3",
     "@prisma/client": "6.16.3",
+    "ai": "^5.0.76",
+    "better-auth": "catalog:",
+    "hono": "catalog:",
     "pino": "^10.0.0",
     "zod": "^4.1.11"
   },
@@ -30,7 +32,7 @@
     "typescript": "catalog:",
     "prisma": "^6.16.3",
     "tsx": "^4.20.6",
-    "wrangler": "^4.42.2",
+    "wrangler": "^4.45.1",
     "oxlint": "catalog:",
     "oxlint-tsgolint": "catalog:"
   }

apps/backend/src/links.ts

@@ -1,4 +1,6 @@
+import { createGroq } from "@ai-sdk/groq";
 import { zValidator } from "@hono/zod-validator";
+import { generateText } from "ai";
 import z from "zod";
 import { appFactory } from "./app-factory";
 
@@ -119,4 +121,57 @@ export const linksApp = appFactory
 
       return c.json(link);
     },
+  )
+  .post(
+    "/links/:id/ai-summary",
+    zValidator("param", z.object({ id: z.string().max(1000) })),
+    async (c) => {
+      const user = c.get("user");
+      if (!user) {
+        return c.json({ error: "Unauthorized" }, 401);
+      }
+
+      const { id } = c.req.valid("param");
+
+      const link = await c.get("prisma").link.findUnique({ where: { id } });
+      if (!link) return c.json({ error: "Link not found" }, 404);
+
+      if (link.userId !== user.id) {
+        return c.json({ error: "You are not the owner of this link" }, 401);
+      }
+
+      const groq = createGroq({
+        apiKey: c.env.GROQ_API_KEY,
+      });
+
+      const { text } = await generateText({
+        model: groq("openai/gpt-oss-20b"),
+        prompt: `
+Summarize the content at this URL: ${link.url}.
+
+Output format: Markdown unordered list. Each list item must follow this exact format: **Title** - Description
+
+- Provide bullet points that capture the main ideas, key takeaways, and any clear conclusions.
+   - Keep each bullet concise.
+   - Use plain, easy-to-understand language.
+- If the page is behind a paywall or unreachable, say so and extract whatever is visible.
+- No long quotes; no extra commentary or analysis unless it's an explicit main takeaway.
+- Output only Markdown.
+        `,
+        tools: {
+          browser_search: groq.tools.browserSearch({}),
+        },
+        toolChoice: "required",
+        providerOptions: {
+          groq: {
+            reasoningEffort: "low",
+          },
+        },
+        topP: 1,
+        temperature: 1,
+        maxOutputTokens: 8192,
+      });
+
+      return c.json({ data: text });
+    },
   );

apps/backend/worker-configuration.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
-// Generated by Wrangler by running `wrangler types --env-interface CloudflareBindings` (hash: c7ca6cd5dbf1ee032486719b5ba2f133)
-// Runtime types generated with workerd@1.20251008.0 2025-10-13
+// Generated by Wrangler by running `wrangler types --env-interface CloudflareBindings` (hash: bf4909deb35eddfba8904f967119eebc)
+// Runtime types generated with workerd@1.20251011.0 2025-10-28 nodejs_compat
 declare namespace Cloudflare {
   interface GlobalProps {
     mainModule: typeof import("./src/index");
@@ -9,10 +9,28 @@ declare namespace Cloudflare {
     BETTER_AUTH_SECRET: string;
     BETTER_AUTH_URL: string;
     CORS_ORIGINS: string;
+    GROQ_API_KEY: string;
     D1_DATABASE: D1Database;
   }
 }
 interface CloudflareBindings extends Cloudflare.Env {}
+type StringifyValues<EnvType extends Record<string, unknown>> = {
+  [Binding in keyof EnvType]: EnvType[Binding] extends string
+    ? EnvType[Binding]
+    : string;
+};
+declare namespace NodeJS {
+  interface ProcessEnv
+    extends StringifyValues<
+      Pick<
+        Cloudflare.Env,
+        | "BETTER_AUTH_SECRET"
+        | "BETTER_AUTH_URL"
+        | "CORS_ORIGINS"
+        | "GROQ_API_KEY"
+      >
+    > {}
+}
 
 // Begin runtime types
 /*! *****************************************************************************
@@ -6762,13 +6780,6 @@ type AiOptions = {
   prefix?: string;
   extraHeaders?: object;
 };
-type ConversionResponse = {
-  name: string;
-  mimeType: string;
-  format: "markdown";
-  tokens: number;
-  data: string;
-};
 type AiModelsSearchParams = {
   author?: string;
   hide_experimental?: boolean;
@@ -6825,6 +6836,7 @@ declare abstract class Ai<AiModelList extends AiModelListType = AiModels> {
         : AiModelList[Name]["postProcessedOutputs"]
   >;
   models(params?: AiModelsSearchParams): Promise<AiModelsSearchObject[]>;
+  toMarkdown(): ToMarkdownService;
   toMarkdown(
     files: {
       name: string;
@@ -9049,6 +9061,47 @@ declare module "cloudflare:sockets" {
   ): Socket;
   export { _connect as connect };
 }
+type ConversionResponse = {
+  name: string;
+  mimeType: string;
+} & (
+  | {
+      format: "markdown";
+      tokens: number;
+      data: string;
+    }
+  | {
+      format: "error";
+      error: string;
+    }
+);
+type SupportedFileFormat = {
+  mimeType: string;
+  extension: string;
+};
+declare abstract class ToMarkdownService {
+  transform(
+    files: {
+      name: string;
+      blob: Blob;
+    }[],
+    options?: {
+      gateway?: GatewayOptions;
+      extraHeaders?: object;
+    },
+  ): Promise<ConversionResponse[]>;
+  transform(
+    files: {
+      name: string;
+      blob: Blob;
+    },
+    options?: {
+      gateway?: GatewayOptions;
+      extraHeaders?: object;
+    },
+  ): Promise<ConversionResponse>;
+  supported(): Promise<SupportedFileFormat[]>;
+}
 declare namespace TailStream {
   interface Header {
     readonly name: string;

apps/backend/wrangler.jsonc

@@ -2,7 +2,7 @@
   "$schema": "node_modules/wrangler/config-schema.json",
   "name": "random-links",
   "main": "src/index.ts",
-  "compatibility_date": "2025-10-13",
+  "compatibility_date": "2025-10-28",
   "d1_databases": [
     {
       "binding": "D1_DATABASE",
@@ -20,7 +20,8 @@
       "head_sampling_rate": 1,
       "invocation_logs": true
     }
-  }
+  },
+  "compatibility_flags": ["nodejs_compat"]
   // "vars": {
   //   "MY_VAR": "my-variable"
   // },

apps/web-app/app/app.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @plugin './ui/heroui.config.ts';
+@plugin "@tailwindcss/typography";
 
 @source '../../../node_modules/@heroui/theme/**/*.{js,ts,jsx,tsx}';
 @custom-variant dark (&:is(.dark *));

apps/web-app/app/components/ai-summary.tsx

@@ -0,0 +1,60 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+  Tooltip,
+} from "@heroui/react";
+import { SparklesIcon } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+
+export function GenerateAiSummaryButton({
+  isPending,
+  type,
+  onPress,
+}: {
+  isPending: boolean;
+  type: "button";
+  onPress: () => void;
+}) {
+  return (
+    <Tooltip closeDelay={150} content="AI Summary">
+      <Button
+        color="secondary"
+        isIconOnly
+        isLoading={isPending}
+        type={type}
+        onPress={onPress}
+      >
+        <SparklesIcon size={16} />
+        <span className="sr-only">AI Summary</span>
+      </Button>
+    </Tooltip>
+  );
+}
+
+export function AiSummaryModal({
+  isOpen,
+  setIsOpen,
+  children,
+  linkTitle,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  children: string;
+  linkTitle: string;
+}) {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+      <ModalContent>
+        <ModalHeader>
+          <span className="line-clamp-2 mr-2">AI Summary for {linkTitle}</span>
+        </ModalHeader>
+        <ModalBody>
+          <ReactMarkdown>{children}</ReactMarkdown>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/web-app/app/components/link-card.tsx

@@ -9,14 +9,19 @@ import {
 } from "@heroui/react";
 import { Edit, ExternalLink, Trash2 } from "lucide-react";
 import type { Link as LinkItem } from "../data/types";
+import { GenerateAiSummaryButton } from "./ai-summary";
 
 interface LinkCardProps {
   link: LinkItem;
   onEdit: (link: LinkItem) => void;
   onDelete: (link: LinkItem) => void;
+  aiSummary: {
+    handler: () => void;
+    isPending: boolean;
+  };
 }
 
-export function LinkCard({ link, onEdit, onDelete }: LinkCardProps) {
+export function LinkCard({ link, onEdit, onDelete, aiSummary }: LinkCardProps) {
   const linkDomain = new URL(link.url).hostname;
 
   return (
@@ -28,6 +33,11 @@ export function LinkCard({ link, onEdit, onDelete }: LinkCardProps) {
         </div>
 
         <ButtonGroup size="sm" variant="flat">
+          <GenerateAiSummaryButton
+            type="button"
+            onPress={aiSummary.handler}
+            isPending={aiSummary.isPending}
+          />
           <Tooltip closeDelay={150} content="Edit">
             <Button isIconOnly onPress={() => onEdit(link)}>
               <Edit size={16} />

apps/web-app/app/data/links.ts

@@ -61,3 +61,16 @@ export const deleteLink = async (id: string): Promise<Result<{}, string>> => {
 
   return ok({});
 };
+
+export const linkAiSummary = async (
+  id: string,
+): Promise<Result<{ data: string }, string>> => {
+  const res = await apiClient.links[":id"]["ai-summary"].$post({
+    param: { id },
+  });
+  const json = await res.json();
+
+  if ("error" in json) return err(json.error);
+
+  return ok({ data: json.data });
+};

apps/web-app/app/routes/ai-summary.$linkId.tsx

@@ -0,0 +1,41 @@
+import { err, ok, type Result } from "@repo/type-safe-errors";
+import { useFetcher } from "react-router";
+import { linkAiSummary } from "~/data/links";
+import type { Link } from "~/data/types";
+import type { Route } from "./+types/ai-summary.$linkId";
+
+type ActionData = Result<
+  { data: string; linkId: string; linkName: string },
+  { message: string }
+>;
+
+export async function clientAction({
+  request,
+}: Route.ClientActionArgs): Promise<ActionData> {
+  const formData = await request.formData();
+  const linkId = formData.get("linkId") as string;
+  const linkName = formData.get("linkName") as string;
+
+  const result = await linkAiSummary(linkId);
+  if (!result.ok) {
+    return err({ message: result.error ?? "Failed to generate AI summary" });
+  }
+
+  return ok({ data: result.value.data, linkId: linkId, linkName: linkName });
+}
+
+export function useGenerateAiSummary() {
+  const fetcher = useFetcher<ActionData>();
+  return {
+    isPending: (linkId: string) =>
+      fetcher.state !== "idle" &&
+      fetcher.formAction === `/ai-summary/${linkId}`,
+    data: fetcher.data,
+    submit: (link: Link) =>
+      fetcher.submit(
+        { linkId: link.id, linkName: link.name },
+        { method: "post", action: `/ai-summary/${link.id}` },
+      ),
+    reset: () => fetcher.unstable_reset(),
+  };
+}