Audit landing page examples against docs

src/components/landing/AiLanding.tsx

@@ -264,7 +264,7 @@ export default function AiLanding({
             <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
               A useful AI layer has to cross clients, servers, providers, tools,
               streaming events, approvals, and observability. AI keeps those
-              seams explicit so teams can swap pieces without rewriting the
+              boundaries explicit so teams can swap pieces without rewriting the
               product.
             </p>
           </div>
@@ -888,11 +888,15 @@ function RuntimePanel() {
     <div className="min-w-0 rounded-lg border border-pink-200 bg-white p-4 dark:border-pink-900 dark:bg-zinc-950">
       <div className="rounded-lg bg-zinc-950 p-4 text-sm text-pink-100 dark:bg-black">
         <p className="font-mono leading-6">
-          agent.run({'{'} provider, model, tools {'}'})
+          const {'{'} messages, addToolApprovalResponse {'}'} = useChat({'{'}
           <br />
-          stream.on(&quot;tool.call&quot;, requestApproval)
+          &nbsp;&nbsp;connection: fetchServerSentEvents(&quot;/api/chat&quot;),
           <br />
-          devtools.record(event)
+          &nbsp;&nbsp;tools,
+          <br />
+          &nbsp;&nbsp;devtools: {'{'} name: &quot;Support Chat&quot; {'}'}
+          <br />
+          {'}'})
         </p>
       </div>
 

src/components/landing/CliLanding.tsx

@@ -28,7 +28,7 @@ import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptB
 const library = getLibrary('cli')
 const cliAgentPrompt = [
   'Use TanStack CLI for a TanStack project workflow.',
-  'Show how the CLI, MCP server, Builder, docs search, and modular integrations can scaffold or modify a TanStack Start app with auth, database, styling, deployment, and package-specific best practices.',
+  'Show how the CLI, Builder, docs search, and modular integrations can scaffold or modify a TanStack Start app with auth, database, styling, deployment, and package-specific best practices.',
   'Keep generated changes inspectable and grounded in TanStack docs instead of relying on generic framework assumptions.',
 ].join(' ')
 
@@ -38,8 +38,8 @@ const heroProof = [
     value: 'project commands and generated changes',
   },
   {
-    label: 'MCP',
-    value: 'docs search and agent context',
+    label: 'Docs',
+    value: 'search, fetch, and introspect',
   },
   {
     label: 'Builder',
@@ -48,10 +48,10 @@ const heroProof = [
 ]
 
 const commandRows = [
-  ['search docs', 'router loaders'],
-  ['add integration', 'auth + database'],
-  ['scaffold start', 'Cloudflare target'],
-  ['export builder', 'checked project plan'],
+  ['search-docs', '"router loaders" --library router'],
+  ['create', 'my-app --add-ons clerk,drizzle'],
+  ['libraries', '--group state --json'],
+  ['ecosystem', '--category database --json'],
 ]
 
 const featureCards = [
@@ -61,8 +61,8 @@ const featureCards = [
     icon: <Terminal size={18} />,
   },
   {
-    title: 'MCP turns docs into agent context.',
-    body: 'Connect assistants to TanStack documentation so generated work can reference current docs and package-specific conventions.',
+    title: 'CLI introspection turns docs into agent context.',
+    body: 'Use JSON commands for docs, libraries, add-ons, and ecosystem data so generated work can reference current TanStack conventions.',
     icon: <Bot size={18} />,
   },
   {
@@ -80,7 +80,7 @@ const featureCards = [
 const workflowSteps = [
   {
     label: 'Discover',
-    body: 'Search docs, examples, packages, and integrations through CLI or MCP.',
+    body: 'Search docs, examples, packages, and integrations through direct CLI commands.',
   },
   {
     label: 'Choose',
@@ -110,8 +110,8 @@ const builderOutputs = [
     value: 'routes, server fns, env, deploy config',
   },
   {
-    label: 'agent prompt',
-    value: 'copyable implementation brief',
+    label: 'CLI config',
+    value: '.tanstack.json and chosen add-ons',
   },
 ]
 
@@ -127,7 +127,7 @@ export default function CliLanding({
         <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
           <div className="min-w-0 max-w-full sm:max-w-3xl">
             <SectionKicker icon={<Terminal size={14} />}>
-              CLI, MCP, and Builder
+              CLI, add-ons, and Builder
             </SectionKicker>
 
             <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
@@ -146,9 +146,9 @@ export default function CliLanding({
             </p>
 
             <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
-              CLI brings together commands, MCP docs access, modular
+              CLI brings together project commands, docs search, modular
               integrations, and the Builder so TanStack Start apps can be
-              scaffolded and customized with the same context the docs use.
+              scaffolded and customized with current TanStack context.
             </p>
 
             <LibraryDownloadsMicro
@@ -241,7 +241,7 @@ export default function CliLanding({
             <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
               The Builder turns app intent into a readable stack brief: TanStack
               libraries, partner integrations, deployment target, generated
-              files, and an agent-ready prompt.
+              files, and CLI-ready configuration.
             </p>
           </div>
 
@@ -319,10 +319,7 @@ export default function CliLanding({
 function CliWorkbenchPanel() {
   const [activeCommandIndex, setActiveCommandIndex] = React.useState(0)
   const activeCommand = commandRows[activeCommandIndex] ?? commandRows[0]
-  const activeCommandPreview = `npx @tanstack/cli ${activeCommand[0].replace(
-    ' ',
-    '-',
-  )} "${activeCommand[1]}"`
+  const activeCommandPreview = `npx @tanstack/cli ${activeCommand[0]} ${activeCommand[1]}`
 
   return (
     <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-indigo-200 bg-white p-4 shadow-sm shadow-indigo-950/5 dark:border-indigo-900 dark:bg-zinc-950">
@@ -339,11 +336,11 @@ function CliWorkbenchPanel() {
 
       <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-indigo-100 dark:bg-black">
         <p className="font-mono leading-6">
-          npx @tanstack/cli mcp
+          npx @tanstack/cli create --list-add-ons --json
           <br />
           {activeCommandPreview}
           <br />
-          npx @tanstack/cli build-plan
+          npx @tanstack/cli doc query framework/react/overview --json
         </p>
       </div>
 

src/components/landing/ConfigLanding.tsx

@@ -29,8 +29,8 @@ import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptB
 const library = getLibrary('config')
 const configAgentPrompt = [
   'Set up TanStack Config for a TypeScript package.',
-  'Use the opinionated lint, build, test, versioning, changelog, publishing, and package-quality defaults while keeping project-specific configuration minimal and explicit.',
-  'Show how the package should produce publint-friendly output, stable npm releases, and repeatable local/CI workflows.',
+  'Use the opinionated ESLint, Vite package build, CI/CD, package structure, and publish defaults while keeping project-specific configuration minimal and explicit.',
+  'Show how the package should produce publint-friendly output, Changesets-backed releases, and repeatable local/CI workflows.',
 ].join(' ')
 
 const heroProof = [
@@ -40,26 +40,26 @@ const heroProof = [
   },
   {
     label: 'Validate',
-    value: 'lint, tests, publint-friendly checks',
+    value: 'ESLint, tests, package checks',
   },
   {
     label: 'Release',
-    value: 'versioning, changelogs, npm + GitHub',
+    value: 'Changesets, npm + GitHub',
   },
 ]
 
 const releaseRows = [
   ['typecheck', 'passed'],
   ['lint', 'passed'],
   ['package exports', 'verified'],
-  ['changelog', 'generated'],
+  ['changesets', 'ready'],
   ['npm publish', 'ready'],
 ]
 
 const featureCards = [
   {
     title: 'Opinionated where packages are repetitive.',
-    body: 'Linting, building, testing, formatting, publishing, and release hygiene should not become bespoke work in every package repo.',
+    body: 'Linting, package builds, CI tasks, publishing, and release hygiene should not become bespoke work in every package repo.',
     icon: <ClipboardCheck size={18} />,
   },
   {
@@ -69,7 +69,7 @@ const featureCards = [
   },
   {
     title: 'Publishing rules stay visible.',
-    body: 'Exports, changelogs, package metadata, versioning, and npm release behavior can be reviewed as part of the same workflow.',
+    body: 'Exports, package metadata, release branches, and npm publish behavior can be reviewed as part of the same workflow.',
     icon: <PackageCheck size={18} />,
   },
   {
@@ -94,7 +94,7 @@ const pipelineSteps = [
   },
   {
     label: 'Publish',
-    body: 'Version, changelog, tag, and publish through a repeatable release path.',
+    body: 'Version, tag, and publish through a repeatable release path.',
   },
 ]
 
@@ -108,8 +108,8 @@ const auditSignals = [
     value: 'package shape checked',
   },
   {
-    label: 'changes',
-    value: 'changelog generated',
+    label: 'changesets',
+    value: 'versioning ready',
   },
   {
     label: 'release',
@@ -142,8 +142,8 @@ export default function ConfigLanding({
 
             <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
               Config is the opinionated toolchain TanStack uses to keep
-              JavaScript packages linted, built, tested, versioned,
-              changelogged, and published with minimal per-package ceremony.
+              JavaScript packages linted, built, tested in CI, versioned with
+              Changesets, and published with minimal per-package ceremony.
             </p>
 
             <LibraryDownloadsMicro
@@ -190,9 +190,9 @@ export default function ConfigLanding({
             </h2>
             <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
               Every library needs the same boring promises: exports resolve,
-              types ship, tests pass, changelogs make sense, and npm publishes
-              what consumers expect. Config turns that repetition into shared
-              defaults.
+              types ship, tests pass, release branches are configured, and npm
+              publishes what consumers expect. Config turns that repetition into
+              shared defaults.
             </p>
           </div>
 
@@ -234,7 +234,7 @@ export default function ConfigLanding({
             </h2>
             <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
               The consumer sees your package boundary: exports, module formats,
-              types, metadata, changelog, and version. Config keeps that
+              types, metadata, release branch, and version. Config keeps that
               boundary part of the workflow.
             </p>
           </div>
@@ -345,13 +345,13 @@ function ReleasePanel() {
 
       <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-zinc-100 dark:bg-black">
         <p className="font-mono leading-6">
-          pnpm lint
+          vite build &amp;&amp; publint --strict
           <br />
-          pnpm test
+          nx affected
           <br />
-          pnpm build --verify {completedCount}/{releaseRows.length}
+          changesets {completedCount}/{releaseRows.length}
           <br />
-          pnpm release{' '}
+          publish config: branchConfigs, packages, npm, github{' '}
           {completedCount === releaseRows.length ? '--ready' : '--blocked'}
         </p>
       </div>
@@ -432,7 +432,7 @@ function AuditPanel() {
           <br />
           dist/index.d.ts
           <br />
-          CHANGELOG.md
+          .changeset/*.md
         </p>
       </div>
     </div>

src/components/landing/DbLanding.tsx

@@ -574,13 +574,17 @@ function SyncPanel() {
     <div className="min-w-0 rounded-lg border border-orange-200 bg-white p-4 dark:border-orange-900 dark:bg-zinc-950">
       <div className="rounded-lg bg-zinc-950 p-4 text-sm text-orange-100 dark:bg-black">
         <p className="font-mono leading-6">
-          liveQuery({'{'} projects, issues, members {'}'})
+          useLiveQuery((q) =&gt;
           <br />
-          &nbsp;&nbsp;.where(({`{`} issue, project {`}`}) =&gt; issue.projectId
-          === project.id)
+          &nbsp;&nbsp;q.from({'{'} issue: issuesCollection {'}'})
           <br />
-          &nbsp;&nbsp;.orderBy(({`{`} issue {`}`}) =&gt; issue.updatedAt,
-          &quot;desc&quot;)
+          &nbsp;&nbsp;&nbsp;&nbsp;.join({'{'} project: projectsCollection {'}'},
+          ({`{`} issue, project {`}`}) =&gt;
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eq(issue.projectId, project.id))
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;.orderBy(({`{`} issue {`}`}) =&gt;
+          issue.updatedAt, &quot;desc&quot;))
         </p>
       </div>
 

src/components/landing/DevtoolsLanding.tsx

@@ -31,7 +31,7 @@ const library = getLibrary('devtools')
 const devtoolsAgentPrompt = [
   'Add TanStack Devtools to a TypeScript app.',
   'Use the unified devtools shell to host TanStack panels and any custom product devtools, keeping the panel lightweight, framework-friendly, and available during development without coupling product code to one library-specific inspector.',
-  'Include examples for mounting built-in panels and registering a custom panel with useful runtime state.',
+  'Include examples for mounting built-in panels and product-specific panels through the plugins array.',
 ].join(' ')
 
 const heroProof = [
@@ -45,7 +45,7 @@ const heroProof = [
   },
   {
     label: 'Framework friendly',
-    value: 'React, Preact, Solid, vanilla',
+    value: 'React, Vue, Solid, Preact, Angular',
   },
 ]
 
@@ -82,7 +82,7 @@ const featureCards = [
   },
   {
     title: 'Frameworks get adapters, not rewrites.',
-    body: 'Use the shell from React, Preact, Solid, or vanilla integration points while panels keep their own internal state model.',
+    body: 'Use the shell from React, Vue, Solid, Preact, Angular, or vanilla integration points while panels keep their own internal state model.',
     icon: <Layers size={18} />,
   },
 ]
@@ -94,7 +94,7 @@ const panelLifecycle = [
   },
   {
     label: 'Register',
-    body: 'Provide TanStack panels or custom panels with a title, icon, and renderer.',
+    body: 'Provide TanStack panels or custom panels through the plugins array.',
   },
   {
     label: 'Inspect',
@@ -106,7 +106,14 @@ const panelLifecycle = [
   },
 ]
 
-const frameworkAdapters = ['React', 'Preact', 'Solid', 'Vanilla']
+const frameworkAdapters = [
+  'React',
+  'Vue',
+  'Solid',
+  'Preact',
+  'Angular',
+  'Vanilla',
+]
 
 export default function DevtoolsLanding({
   landingCodeExampleRsc,
@@ -449,15 +456,17 @@ function CustomPanelExample() {
     <div className="min-w-0 rounded-lg border border-zinc-300 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
       <div className="rounded-lg bg-zinc-950 p-4 text-sm text-zinc-100 dark:bg-black">
         <p className="font-mono leading-6">
-          registerDevtoolsPanel({'{'}
+          &lt;TanStackDevtools
+          <br />
+          &nbsp;&nbsp;plugins={'{'}[{'{'}
           <br />
-          &nbsp;&nbsp;id: &quot;jobs&quot;,
+          &nbsp;&nbsp;&nbsp;&nbsp;name: &quot;Background Jobs&quot;,
           <br />
-          &nbsp;&nbsp;title: &quot;Background Jobs&quot;,
+          &nbsp;&nbsp;&nbsp;&nbsp;render: &lt;JobsPanel /&gt;,
           <br />
-          &nbsp;&nbsp;render: JobsPanel,
+          &nbsp;&nbsp;{'}'}]{'}'}
           <br />
-          {'}'})
+          /&gt;
         </p>
       </div>