From e060cbdb5c855c446e773829478d61dac6406952 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Mon, 16 Mar 2026 19:56:29 -0400
Subject: [PATCH] feat(Workers AI): improve model catalog search and display
 tags

- Search now matches model name, description, AND tags
- Display clickable tag pills on individual model pages
- Show tags as badges on model cards in catalog
- Fix card alignment so badges align at bottom
---
 src/components/ModelCatalog.tsx          | 17 ++++++++---
 src/components/models/ModelBadges.tsx    | 36 ++++++++++++++++++++----
 src/pages/workers-ai/models/[name].astro | 15 ++++++++++
 3 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/src/components/ModelCatalog.tsx b/src/components/ModelCatalog.tsx
index 9a02787452b..3574aca714c 100644
--- a/src/components/ModelCatalog.tsx
+++ b/src/components/ModelCatalog.tsx
@@ -164,7 +164,16 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		}
 
 		if (filters.search) {
-			if (!model.name.toLowerCase().includes(filters.search.toLowerCase())) {
+			const searchTerm = filters.search.toLowerCase();
+			const matchesName = model.name.toLowerCase().includes(searchTerm);
+			const matchesDescription = model.description
+				.toLowerCase()
+				.includes(searchTerm);
+			const matchesTags = model.tags?.some((tag) =>
+				tag.toLowerCase().includes(searchTerm),
+			);
+
+			if (!matchesName && !matchesDescription && !matchesTags) {
 				return false;
 			}
 		}
@@ -309,7 +318,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 					return (
 						<a
 							key={model.model.id}
-							className="relative mb-3 block w-full self-start rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 lg:w-[48%] dark:border-gray-700 dark:hover:bg-gray-800"
+							className="relative mb-3 flex w-full flex-col rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 lg:w-[48%] dark:border-gray-700 dark:hover:bg-gray-800"
 							href={`/workers-ai/models/${model.model_display_name}`}
 						>
 							{isPinned && (
@@ -340,8 +349,8 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 							<p className="mt-2! line-clamp-2 text-sm leading-6">
 								{model.model.description}
 							</p>
-							<div className="mt-2! text-xs">
-								<ModelBadges model={model.model} />
+							<div className="mt-auto pt-2 text-xs">
+								<ModelBadges model={model.model} showTags />
 							</div>
 						</a>
 					);
diff --git a/src/components/models/ModelBadges.tsx b/src/components/models/ModelBadges.tsx
index f9e768359f0..22d554f00d9 100644
--- a/src/components/models/ModelBadges.tsx
+++ b/src/components/models/ModelBadges.tsx
@@ -1,6 +1,12 @@
 import type { WorkersAIModelsSchema } from "~/schemas";
 
-const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
+const ModelBadges = ({
+	model,
+	showTags = false,
+}: {
+	model: WorkersAIModelsSchema;
+	showTags?: boolean;
+}) => {
 	const badges = model.properties.flatMap(({ property_id, value }) => {
 		if (property_id === "lora" && value === "true") {
 			return {
@@ -50,11 +56,31 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
 		return [];
 	});
 
+	// Add tags as badges if showTags is enabled
+	const tagBadges =
+		showTags && model.tags
+			? model.tags.slice(0, 3).map((tag) => ({
+					variant: "default",
+					text: tag,
+					isTag: true,
+				}))
+			: [];
+
+	const allBadges = [...badges, ...tagBadges];
+
 	return (
-		<ul className="m-0 flex list-none items-center gap-2 p-0 text-xs">
-			{badges.map((badge) => (
-				<li key={badge.text}>
-					<span className="sl-badge default">{badge.text}</span>
+		<ul className="m-0 flex list-none flex-wrap items-center gap-2 p-0 text-xs">
+			{allBadges.map((badge) => (
+				<li key={badge.text} className="m-0">
+					<span
+						className={`sl-badge ${
+							"isTag" in badge && badge.isTag
+								? "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+								: "default"
+						}`}
+					>
+						{badge.text}
+					</span>
 				</li>
 			))}
 		</ul>
diff --git a/src/pages/workers-ai/models/[name].astro b/src/pages/workers-ai/models/[name].astro
index aebafa72c05..f48fac43c72 100644
--- a/src/pages/workers-ai/models/[name].astro
+++ b/src/pages/workers-ai/models/[name].astro
@@ -217,6 +217,21 @@ const starlightPageProps = {
 
 	<p class="mt-3 mb-2!">{description}</p>
 
+	{
+		model.tags && model.tags.length > 0 && (
+			<div class="mt-3 flex flex-wrap gap-2">
+				{model.tags.map((tag: string) => (
+					<a
+						href={`/workers-ai/models/?search=${encodeURIComponent(tag)}`}
+						class="inline-block rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 no-underline transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+					>
+						{tag}
+					</a>
+				))}
+			</div>
+		)
+	}
+
 	{
 		model.name === "@cf/meta/llama-3.2-11b-vision-instruct" && (
 			<Aside>