diff --git a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
index 85bcfe394f..c01edaac4d 100644
--- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -4,6 +4,7 @@ import { mdxComponents } from "@/mdx-components"
 import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
 import { findNeighbour } from "fumadocs-core/page-tree"
 
+import { replaceComponentsList } from "@/lib/llm"
 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
 import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
@@ -83,7 +84,7 @@ export default async function Page(props: {
   const neighbours = isChangelog
     ? { previous: null, next: null }
     : findNeighbour(source.pageTree, page.url)
-  const raw = await page.data.getText("raw")
+  const raw = replaceComponentsList(await page.data.getText("raw"))
 
   return (
     <div
diff --git a/apps/v4/lib/llm.ts b/apps/v4/lib/llm.ts
index 0f29f38ce9..8568b6f5dc 100644
--- a/apps/v4/lib/llm.ts
+++ b/apps/v4/lib/llm.ts
@@ -1,7 +1,9 @@
 import fs from "fs"
 import { ExamplesIndex } from "@/examples/__index__"
 
+import { getPagesFromFolder, type PageTreeFolder } from "@/lib/page-tree"
 import { source } from "@/lib/source"
+import { absoluteUrl } from "@/lib/utils"
 import { Index as StylesIndex } from "@/registry/__index__"
 import { type Style } from "@/registry/_legacy-styles"
 import { BASES } from "@/registry/bases"
@@ -35,28 +37,28 @@ function getRegistryEntry(name: string, styleName: string) {
   )
 }
 
-function getComponentsList() {
-  const components = source.pageTree.children.find(
+export function replaceComponentsList(content: string) {
+  const componentsFolder = source.pageTree.children.find(
     (page) => page.$id === "components"
   )
-
-  if (components?.type !== "folder") {
-    return ""
-  }
-
-  const list = components.children.filter(
-    (component) => component.type === "page"
-  )
-
-  return list
-    .map((component) => `- [${component.name}](${component.url})`)
-    .join("\n")
+  const list =
+    componentsFolder?.type === "folder"
+      ? getPagesFromFolder(componentsFolder as PageTreeFolder, "radix")
+          .map((component) => {
+            const slug = component.url.replace(/^\/docs\//, "").split("/")
+            const description = source.getPage(slug)?.data.description?.trim()
+            const url = absoluteUrl(component.url.replace("/radix/", "/"))
+            return `- [${component.name}](${url})${
+              description ? `: ${description}` : ""
+            }`
+          })
+          .join("\n")
+      : ""
+  return content.replace(/<ComponentsList\s*\/>/g, list)
 }
 
 export function processMdxForLLMs(content: string, style: Style["name"]) {
-  // Replace <ComponentsList /> with a markdown list of components.
-  const componentsListRegex = /<ComponentsList\s*\/>/g
-  content = content.replace(componentsListRegex, getComponentsList())
+  content = replaceComponentsList(content)
 
   const componentPreviewRegex =
     /<ComponentPreview[\s\S]*?name="([^"]+)"[\s\S]*?\/>/g