feat(ai): integrate OpenRouter with rich YouTube and episode cards in Agent AJ

Author: codercatdev

.github/workflows/deploy-workers.yml

@@ -45,10 +45,14 @@ jobs:
       - name: Configure Cloudflare Worker Secrets (dev)
         run: |
           echo "$SANITY_API_READ_TOKEN" | pnpm --filter @codingcatdev/site exec wrangler secret put SANITY_API_READ_TOKEN
+          if [ -n "$OPENROUTER_API_KEY" ]; then
+            echo "$OPENROUTER_API_KEY" | pnpm --filter @codingcatdev/site exec wrangler secret put OPENROUTER_API_KEY
+          fi
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           SANITY_API_READ_TOKEN: ${{ secrets.SANITY_API_READ_TOKEN }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
 
       - name: Deploy to Cloudflare Workers (dev.codingcat.dev)
         run: pnpm --filter @codingcatdev/site exec wrangler deploy
@@ -87,10 +91,14 @@ jobs:
       - name: Configure Cloudflare Worker Secrets (production)
         run: |
           echo "$SANITY_API_READ_TOKEN" | pnpm --filter @codingcatdev/site exec wrangler secret put SANITY_API_READ_TOKEN --env production
+          if [ -n "$OPENROUTER_API_KEY" ]; then
+            echo "$OPENROUTER_API_KEY" | pnpm --filter @codingcatdev/site exec wrangler secret put OPENROUTER_API_KEY --env production
+          fi
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           SANITY_API_READ_TOKEN: ${{ secrets.SANITY_API_READ_TOKEN }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
 
       - name: Deploy to Cloudflare Workers (codingcat.dev)
         run: pnpm --filter @codingcatdev/site exec wrangler deploy --env production

apps/site/package.json

@@ -21,6 +21,7 @@
     "@ai-sdk/mcp": "^2.0.72",
     "@astrojs/cloudflare": "^14.2.1",
     "@astrojs/react": "^6.0.2",
+    "@openrouter/ai-sdk-provider": "^3.1.0",
     "@portabletext/to-html": "^6.0.0",
     "@portabletext/types": "^4.0.2",
     "@sanity/client": "^7.26.2",

apps/site/src/components/ChatModal.astro

@@ -212,6 +212,134 @@
 		});
 	});
 
+	function escapeHtml(text: string): string {
+		return text
+			.replace(/&/g, "&")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+	}
+
+	function renderRichAssistantContent(container: HTMLElement, rawText: string) {
+		// Clean up any localhost or malformed url artifacts
+		let cleanedText = rawText
+			.replace(/http:\/\/localhost:\d+/g, "")
+			.replace(/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]\((?:http:\/\/localhost:\d+)?(\/[a-zA-Z0-9_\-\/]+)\)/g, "[$1]($2)")
+			.replace(/\[\s*["']?(\/[a-zA-Z0-9_\-\/]+)["']?\s*\]/g, "[$1]($1)");
+
+		// Extract YouTube links
+		const ytRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|live\/))([\w-]{11})/gi;
+		const youtubeIds = new Set<string>();
+		let ytMatch: RegExpExecArray | null;
+		while ((ytMatch = ytRegex.exec(cleanedText)) !== null) {
+			if (ytMatch[1]) {
+				youtubeIds.add(ytMatch[1]);
+			}
+		}
+
+		// Extract Internal Episode / Post Links
+		const internalLinkRegex = /\[([^\]]+)\]\(((\/(?:podcast|post)\/[a-zA-Z0-9_\-]+))\)/gi;
+		const internalLinks: Array<{ title: string; url: string; type: "podcast" | "post" }> = [];
+		let intMatch: RegExpExecArray | null;
+		while ((intMatch = internalLinkRegex.exec(cleanedText)) !== null) {
+			const linkUrl = intMatch[2];
+			const linkTitle = intMatch[1];
+			const type = linkUrl.startsWith("/podcast") ? "podcast" : "post";
+			if (!internalLinks.some((l) => l.url === linkUrl)) {
+				internalLinks.push({ title: linkTitle, url: linkUrl, type });
+			}
+		}
+
+		// Convert markdown formatting to safe HTML
+		let html = escapeHtml(cleanedText);
+
+		// Bold: **text**
+		html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+		// Bullet list: - text
+		html = html.replace(/^[ \t]*-[ \t]+(.*)$/gm, "<li class='ml-4 list-disc'>$1</li>");
+		// Markdown links: [Title](url)
+		html = html.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/g,
+			"<a href='$2' class='text-primary font-medium hover:underline inline-flex items-center gap-0.5' target='_blank' rel='noopener noreferrer'>$1<svg class='size-3 inline opacity-70' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'></path><polyline points='15 3 21 3 21 9'></polyline><line x1='10' y1='14' x2='21' y2='3'></line></svg></a>",
+		);
+
+		// Naked YouTube URLs
+		html = html.replace(
+			/(https?:\/\/(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|live\/))[\w-]+[^\s<]*)/gi,
+			"<a href='$1' class='text-primary font-medium hover:underline' target='_blank' rel='noopener noreferrer'>$1</a>",
+		);
+
+		// Newlines to <br> or <p>
+		html = html.replace(/\n\n/g, "<div class='h-2'></div>");
+		html = html.replace(/\n/g, "<br />");
+
+		// Build Cards Section
+		let cardsHtml = "";
+
+		// 1. YouTube Preview Cards
+		if (youtubeIds.size > 0) {
+			cardsHtml += `<div class="mt-3 flex flex-col gap-2.5">`;
+			for (const ytId of youtubeIds) {
+				const thumbUrl = `https://img.youtube.com/vi/${ytId}/mqdefault.jpg`;
+				const ytUrl = `https://www.youtube.com/watch?v=${ytId}`;
+				cardsHtml += `
+					<a href="${ytUrl}" target="_blank" rel="noopener noreferrer" class="group relative flex flex-col sm:flex-row items-center gap-3 p-2.5 rounded-xl border border-border bg-card/80 hover:bg-accent/60 transition-all hover:scale-[1.01] hover:shadow-md overflow-hidden text-left no-underline">
+						<div class="relative shrink-0 w-full sm:w-36 h-24 sm:h-20 rounded-lg overflow-hidden bg-black/20 flex items-center justify-center">
+							<img src="${thumbUrl}" alt="YouTube Preview" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity" loading="lazy" />
+							<div class="absolute inset-0 flex items-center justify-center bg-black/25 group-hover:bg-black/10 transition-colors">
+								<div class="size-8 rounded-full bg-red-600/90 text-white flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
+									<svg class="size-4 ml-0.5 fill-current" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+								</div>
+							</div>
+						</div>
+						<div class="flex-1 min-w-0 py-0.5">
+							<div class="inline-flex items-center gap-1.5 text-[10px] uppercase font-bold tracking-wider text-red-500 mb-0.5">
+								<svg class="size-3.5 fill-current" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+								YouTube Video
+							</div>
+							<div class="text-xs font-semibold text-foreground truncate group-hover:text-primary transition-colors">Watch on YouTube</div>
+							<div class="text-[11px] text-muted-foreground truncate">youtube.com/watch?v=${ytId}</div>
+						</div>
+					</a>
+				`;
+			}
+			cardsHtml += `</div>`;
+		}
+
+		// 2. Clickable Episode / Post Cards
+		if (internalLinks.length > 0) {
+			cardsHtml += `<div class="mt-2.5 flex flex-col gap-2">`;
+			for (const link of internalLinks) {
+				const isPodcast = link.type === "podcast";
+				cardsHtml += `
+					<a href="${link.url}" class="group flex items-center justify-between gap-3 p-3 rounded-xl border border-border bg-card/90 hover:bg-accent hover:border-primary/40 transition-all hover:scale-[1.01] hover:shadow-xs text-left no-underline">
+						<div class="flex items-center gap-2.5 min-w-0">
+							<div class="size-8 rounded-lg ${isPodcast ? "bg-purple-500/10 text-purple-600 dark:text-purple-400" : "bg-blue-500/10 text-blue-600 dark:text-blue-400"} flex items-center justify-center shrink-0">
+								${
+									isPodcast
+										? '<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>'
+										: '<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>'
+								}
+							</div>
+							<div class="min-w-0">
+								<div class="text-xs font-semibold text-foreground group-hover:text-primary transition-colors truncate">${escapeHtml(link.title)}</div>
+								<div class="text-[10px] text-muted-foreground uppercase tracking-wider">${isPodcast ? "Podcast Episode" : "Blog Post"} • CodingCat.dev</div>
+							</div>
+						</div>
+						<div class="shrink-0 text-xs font-medium text-primary flex items-center gap-1 group-hover:translate-x-0.5 transition-transform">
+							<span>View</span>
+							<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+						</div>
+					</a>
+				`;
+			}
+			cardsHtml += `</div>`;
+		}
+
+		container.innerHTML = html + cardsHtml;
+	}
+
 	function appendMessage(role: "user" | "assistant", initialText = ""): HTMLElement {
 		if (welcomeContainer) {
 			welcomeContainer.classList.add("hidden");
@@ -232,7 +360,7 @@
 		}
 
 		const contentDiv = document.createElement("div");
-		contentDiv.className = "whitespace-pre-wrap leading-relaxed";
+		contentDiv.className = "leading-relaxed text-sm";
 		contentDiv.textContent = initialText;
 
 		msgDiv.appendChild(contentDiv);
@@ -275,17 +403,23 @@
 				return;
 			}
 
-			assistantContent.textContent = "";
+			let accumulatedText = "";
 			const reader = res.body.getReader();
 			const decoder = new TextDecoder();
 
 			while (true) {
 				const { done, value } = await reader.read();
 				if (done) break;
 				const chunk = decoder.decode(value, { stream: true });
-				assistantContent.textContent += chunk;
+				accumulatedText += chunk;
+				// Render progressive text during streaming
+				assistantContent.textContent = accumulatedText;
 				messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: "smooth" });
 			}
+
+			// On complete stream finish: render full rich content with cards & links
+			renderRichAssistantContent(assistantContent, accumulatedText);
+			messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: "smooth" });
 		} catch (err) {
 			assistantContent.textContent = `Connection error: ${err instanceof Error ? err.message : String(err)}`;
 		} finally {

apps/site/src/pages/api/chat.ts

@@ -3,6 +3,7 @@ import { createMCPClient } from "@ai-sdk/mcp";
 import { createClient } from "@sanity/client";
 import { isStepCount, jsonSchema, streamText, tool } from "ai";
 import type { APIRoute } from "astro";
+import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 import { createWorkersAI } from "workers-ai-provider";
 import {
 	semanticSearchQuery,
@@ -338,28 +339,40 @@ export const POST: APIRoute = async ({ request }) => {
 			},
 		};
 
-		// 2. Setup Cloudflare Workers AI model
-		const aiBinding = cfEnv?.AI;
-		if (!aiBinding) {
-			await mcpClient.close();
-			return new Response(
-				JSON.stringify({
-					error:
-						"Cloudflare Workers AI binding is not available in the current environment.",
-				}),
-				{
-					status: 500,
-					headers: {
-						"content-type": "application/json; charset=utf-8",
-						"access-control-allow-origin": "*",
+		// 2. Setup AI Model (prefer OpenRouter when configured, fallback to Workers AI)
+		const openRouterApiKey =
+			(cfEnv?.OPENROUTER_API_KEY as string | undefined) ||
+			process.env.OPENROUTER_API_KEY;
+
+		let model: any;
+		if (openRouterApiKey) {
+			const openrouter = createOpenRouter({
+				apiKey: openRouterApiKey,
+			});
+			// Use meta-llama/llama-3.3-70b-instruct or deepseek/deepseek-chat via OpenRouter
+			model = openrouter("meta-llama/llama-3.3-70b-instruct");
+		} else {
+			const aiBinding = cfEnv?.AI;
+			if (!aiBinding) {
+				await mcpClient.close();
+				return new Response(
+					JSON.stringify({
+						error:
+							"Neither OPENROUTER_API_KEY nor Cloudflare Workers AI binding is configured.",
+					}),
+					{
+						status: 500,
+						headers: {
+							"content-type": "application/json; charset=utf-8",
+							"access-control-allow-origin": "*",
+						},
 					},
-				},
-			);
+				);
+			}
+			const workersai = createWorkersAI({ binding: aiBinding as any });
+			model = workersai("@cf/meta/llama-3.1-8b-instruct");
 		}
 
-		const workersai = createWorkersAI({ binding: aiBinding as any });
-		const model = workersai("@cf/meta/llama-3.3-70b-instruct-fp8-fast");
-
 		// 3. Stream model response with multi-step tool calling
 		const result = streamText({
 			model,
@@ -371,7 +384,7 @@ export const POST: APIRoute = async ({ request }) => {
 				"- When asked for 'top videos' or popular video podcasts, search for high-profile episodes with video recordings (e.g. episodes featuring Guillermo Rauch, Rich Harris, Lee Robinson, or recent GenAI/MCP video podcasts) and provide their YouTube links alongside CodingCat.dev episode links.\n" +
 				"- Use `groq_query` for precise lookups when searching for specific author profiles (e.g. *[_type == 'author' && title match '*Alex*']).\n" +
 				"- CRITICAL: ALWAYS execute tools by invoking them via function calls. NEVER output raw JSON or code blocks in your text describing tool calls instead of executing them.\n" +
-				"- Once you receive results from your tool calls, synthesize them into an engaging, helpful response. List the relevant episode or article titles, brief descriptions, and markdown links using relative paths (e.g. [Title](/podcast/slug) or [Title](/post/slug)). If YouTube links are available, include them. Never use localhost or absolute domain URLs.",
+				"- Once you receive results from your tool calls, synthesize them into an engaging, helpful response. List the relevant episode or article titles, brief descriptions, and markdown links using relative paths (e.g. [Episode Title](/podcast/slug) or [Post Title](/post/slug)). When YouTube links are available, always include them directly on their own line (e.g. https://www.youtube.com/watch?v=VIDEO_ID or https://youtu.be/VIDEO_ID). NEVER output localhost URLs, internal IP addresses, or malformed URL brackets like [\"/slug\"](http://localhost:3000/slug).",
 			messages: coreMessages,
 			tools,
 			stopWhen: isStepCount(5),