Tighten the AI landing page and make the typesafe model demo real

src/components/landing/LandingPromptBox.tsx

@@ -0,0 +1,39 @@
+import { CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
+import { CopyIcon } from '@phosphor-icons/react/Copy'
+import { useCopyButton } from '~/components/CopyMarkdownButton'
+import { copyTextToClipboard } from '~/utils/browser-effects'
+
+export function LandingPromptBox({
+  heading,
+  prompt,
+}: {
+  heading: string
+  prompt: string
+}) {
+  const [copied, onCopy] = useCopyButton(() => copyTextToClipboard(prompt))
+
+  return (
+    <div className="mt-6 w-full max-w-136 rounded-lg border border-border-default bg-background-surface px-4 py-3">
+      <div className="flex items-start gap-3">
+        <p className="min-w-0 flex-1 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/65">
+          {heading}
+        </p>
+        <button
+          type="button"
+          onClick={onCopy}
+          className="inline-flex shrink-0 items-center gap-1.5 font-ds-mono text-ds-mono-caps-xs uppercase text-text-secondary transition-colors hover:text-text-primary"
+        >
+          {copied ? (
+            <CheckCircleIcon size={16} aria-hidden="true" />
+          ) : (
+            <CopyIcon size={16} aria-hidden="true" />
+          )}
+          {copied ? 'Copied' : 'Copy prompt'}
+        </button>
+      </div>
+      <p className="mt-2 text-ds-body-sm text-text-primary sm:text-ds-body-md">
+        {prompt}
+      </p>
+    </div>
+  )
+}

src/libraries/libraries.ts

@@ -691,9 +691,10 @@ export const ai: LibrarySlim = {
   ...categoryStyles.data,
   name: 'TanStack AI',
   to: '/ai/latest',
-  tagline: 'The headless agent framework for TypeScript. Bring your own stack',
+  tagline:
+    'AI building blocks for TypeScript. We build the hard parts, you keep the stack.',
   description:
-    'TanStack AI is a pluggable AI ecosystem that makes it easy for you to build AI features into your apps. Provide tools to LLMs, interrupt chat for user approval, run agents in sandboxes, build headless chat UI, stream from your server to your client, and connect to any AG-UI compatible server or client. Bring your own infrastructure. We offer the pluggable APIs to build on top of.',
+    'TanStack AI is a TypeScript library for building AI features and agents. It ships the agent loop, provider adapters, durability, interrupts, sandboxes, and tools, and plugs into the server, database, and UI you already have.',
   badge: 'RC',
   repo: 'tanstack/ai',
   frameworks: [

src/styles/app.css

@@ -87,6 +87,17 @@ html.theme-switching *::after {
   --color-gray-800: #332d24;
   --color-gray-900: #201b15;
   --color-gray-950: #111111;
+
+  --animate-shimmer: shimmer 2.4s ease-in-out infinite;
+  @keyframes shimmer {
+    0%,
+    40% {
+      transform: translateX(-150%);
+    }
+    100% {
+      transform: translateX(250%);
+    }
+  }
 }
 
 /* Keep neutral grays stable before client CSS injection reorders Tailwind layers. */

src/utils/docsNavTabs.ts

@@ -6,6 +6,7 @@ export const docsNavTabIds = [
   'get-started',
   'tutorial',
   'guides',
+  'adapters',
   'api',
   'examples',
 ] as const
@@ -17,6 +18,8 @@ export const docsNavTabs: Array<{ id: DocsNavTabId; label: string }> = [
   { id: 'get-started', label: 'Get Started' },
   { id: 'tutorial', label: 'Tutorial' },
   { id: 'guides', label: 'Guides' },
+  // Only shown for libraries whose docs config tags sections with it.
+  { id: 'adapters', label: 'Adapters' },
   { id: 'api', label: 'API' },
   { id: 'examples', label: 'Examples' },
 ]