From acae2eca89c1bedc6b8758c61ae2f3de4bf36398 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 20 Jun 2025 16:07:01 -0400
Subject: [PATCH] docs(nx-dev): enhance AI feature descriptions & update links
 (#31659)

Refined AI features including new capabilities (self-healing CI, AI data analysis), updated descriptions, and rearranged feature order. Adjusted section ID for CI security and added links to highlight AI integrations in pricing plans.
---
 nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx   | 42 +++++++++++++++----
 nx-dev/ui-cloud/src/lib/enhanced-security.tsx |  2 +-
 nx-dev/ui-pricing/src/lib/plans-display.tsx   | 21 ++++++++++
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx b/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx
index e3f1ee1d6e..53cbaca111 100644
--- a/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx
+++ b/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx
@@ -1,6 +1,9 @@
 import {
+  AcademicCapIcon,
+  CircleStackIcon,
   CloudArrowDownIcon,
   CodeBracketIcon,
+  HeartIcon,
   RectangleGroupIcon,
   ServerStackIcon,
 } from '@heroicons/react/24/outline';
@@ -10,24 +13,41 @@ import { ReactElement } from 'react';
 
 const features = [
   {
-    name: 'AI explainer',
+    name: 'Self-healing CI',
     description:
-      "Debug task errors on your CI pipeline directly in your pipeline's UI.",
-    icon: CodeBracketIcon,
+      'Automatically fix flaky tests, letting you merge with confidence and eliminating wasted time babysitting PRs.',
+    icon: HeartIcon,
+    isAvailable: false,
+    link: '',
+  },
+  {
+    name: 'AI data analysis',
+    description:
+      'Ask questions about your runs and tasks in natural language. Get real-time, data-driven answers to "Why did this build slow down?" or "Which tests are the flakiest this week?"',
+    icon: CircleStackIcon,
+    isAvailable: false,
+    link: '',
+  },
+  {
+    name: 'Nx MCP (Model Context Protocol)',
+    description:
+      'Gives your AI assistant the "map" it needs. Make your AI understand your workspace structure, enabling faster and more reliable coding, debugging, and refactoring.',
+    icon: AcademicCapIcon,
     isAvailable: true,
-    link: '/ci/features/explain-with-ai#explain-with-ai-betautm_source=nx.app&utm_campaign=ai-section',
+    link: '/features/enhance-ai',
   },
   {
     name: 'Dynamic Nx Agent sizing',
     description:
-      'Automatically adjust Nx Agents numbers depending on your workspace usage and needs.',
+      'Automatically scale the number and size of Nx Agents to match your workload, perfectly balancing CI speed and infrastructure cost without any manual configuration.',
     icon: ServerStackIcon,
     isAvailable: false,
     link: '',
   },
   {
     name: 'Task cache miss diagnosis',
-    description: 'Understand why a task has a cache miss and how to fix it.',
+    description:
+      "Instantly understand why a cache miss occurred and get clear instructions on how to fix it, maximizing your team's caching efficiency.",
     icon: CloudArrowDownIcon,
     isAvailable: false,
     link: '',
@@ -35,11 +55,19 @@ const features = [
   {
     name: 'Organization insights',
     description:
-      "Understand your teams' workspaces: shared code usage, ownership, bottlenecks.",
+      "Get a bird's-eye view of your teams' workspaces. Understand shared code usage, identify cross-team bottlenecks, and enforce architectural consistency across your entire organization.",
     icon: RectangleGroupIcon,
     isAvailable: false,
     link: '',
   },
+  {
+    name: 'AI explainer',
+    description:
+      'Get clear, actionable explanations for complex CI errors directly in your task logs. Stop deciphering cryptic messages and start fixing the root cause.',
+    icon: CodeBracketIcon,
+    isAvailable: true,
+    link: '/ci/features/explain-with-ai',
+  },
 ];
 
 export function EnhancedWithAi(): ReactElement {
diff --git a/nx-dev/ui-cloud/src/lib/enhanced-security.tsx b/nx-dev/ui-cloud/src/lib/enhanced-security.tsx
index 548b9cefe4..9789fd28e2 100644
--- a/nx-dev/ui-cloud/src/lib/enhanced-security.tsx
+++ b/nx-dev/ui-cloud/src/lib/enhanced-security.tsx
@@ -41,7 +41,7 @@ const features = [
 
 export function EnhancedSecurity(): ReactElement {
   return (
-    <section id="ai-for-your-ci" className="scroll-mt-24">
+    <section id="enterprise-grade-ci-security" className="scroll-mt-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-3xl text-center">
           <SectionHeading as="h2" variant="title" id="deep-understanding">
diff --git a/nx-dev/ui-pricing/src/lib/plans-display.tsx b/nx-dev/ui-pricing/src/lib/plans-display.tsx
index 0330a3cf55..a7ce46ca50 100644
--- a/nx-dev/ui-pricing/src/lib/plans-display.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans-display.tsx
@@ -81,6 +81,27 @@ export function PlansDisplay(): ReactElement {
                     />
                     <span>50,000 monthly credits</span>
                   </li>
+                  <li className="flex items-center justify-start gap-x-2 py-2.5">
+                    <CheckCircleIcon
+                      aria-hidden="true"
+                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                    />
+                    <Link
+                      href="/nx-cloud#ai-for-your-ci"
+                      target="_blank"
+                      title="Check our AI integrations and how to use them"
+                      onClick={() =>
+                        sendCustomEvent(
+                          'learn-ai-integrations-click',
+                          'plans-table',
+                          'pricing-plans'
+                        )
+                      }
+                      className="font-medium underline decoration-dotted"
+                    >
+                      AI integrations
+                    </Link>
+                  </li>
                   <li className="flex items-center justify-start gap-x-2 py-2.5">
                     <CheckCircleIcon
                       aria-hidden="true"