diff --git a/.cursor/mcp.json b/.cursor/mcp.json new file mode 100644 index 0000000000..6646180520 --- /dev/null +++ b/.cursor/mcp.json @@ -0,0 +1,7 @@ +{ + "mcpServers": { + "nx-mcp": { + "url": "http://localhost:9470/sse" + } + } +} diff --git a/.gitignore b/.gitignore index 65756abf75..839c5daedb 100644 --- a/.gitignore +++ b/.gitignore @@ -101,7 +101,7 @@ node_modules/ # OS specific # Task files tasks.json -tasks/ +tasks/ # Raw docs local configuration (machine-specific) .rawdocs.local.json diff --git a/nx-dev/nx-dev/app/ai/page.tsx b/nx-dev/nx-dev/app/ai/page.tsx deleted file mode 100644 index 9112cc1f2e..0000000000 --- a/nx-dev/nx-dev/app/ai/page.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import type { Metadata } from 'next'; -import { DefaultLayout } from '@nx/nx-dev/ui-common'; -import { Hero } from '@nx/nx-dev/ui-ai-landing-page'; -import { ProblemStatement } from '@nx/nx-dev/ui-ai-landing-page'; -import { Features } from '@nx/nx-dev/ui-ai-landing-page'; -import { CallToAction } from '@nx/nx-dev/ui-ai-landing-page'; -import { TechnicalImplementation } from '@nx/nx-dev/ui-ai-landing-page'; - -export const metadata: Metadata = { - title: 'Nx - Make AI work in large codebases', - description: - 'Empower your AI assistants with workspace intelligence to understand your codebase structure, project dependencies, and build processes at a glance.', - alternates: { - canonical: 'https://nx.dev/ai', - }, - openGraph: { - title: 'Nx - Make AI work in large codebases', - description: - 'Empower your AI assistants with workspace intelligence to understand your codebase structure, project dependencies, and build processes at a glance.', - url: 'https://nx.dev/ai', - siteName: 'Nx', - images: [ - { - url: 'https://nx.dev/images/nx-ai-landing-og.png', - width: 1200, - height: 630, - }, - ], - locale: 'en_US', - type: 'website', - }, - keywords: [ - 'nx', - 'ai', - 'workspace', - 'architecture', - 'codebase', - 'llm', - 'AI workspace development', - 'LLM code assistant', - 'Nx AI integration', - 'multi-project AI tools', - 'enterprise AI development', - 'intelligent code generation', - 'MCP server', - 'workspace AI tools', - 'monorepo AI', - 'architectural intelligence', - 'code assistant', - 'workspace intelligence', - ], -}; - -export default function AiLandingPage() { - return ( - - - -
- -
- -
- -
- -
- -
- -
- -
- - ); -} diff --git a/nx-dev/nx-dev/pages/ai.tsx b/nx-dev/nx-dev/pages/ai.tsx new file mode 100644 index 0000000000..e088f9c88e --- /dev/null +++ b/nx-dev/nx-dev/pages/ai.tsx @@ -0,0 +1,60 @@ +import type { Metadata } from 'next'; +import { DefaultLayout } from '@nx/nx-dev/ui-common'; +import { + AiHero, + CallToAction, + WhileCoding, + WhileRunningCi, + WhileScalingYourOrganization, +} from '@nx/nx-dev/ui-ai-landing-page'; +import type { ReactElement } from 'react'; +import { NextSeo } from 'next-seo'; + +export function Ai(): ReactElement { + return ( + <> + + + + +
+ +
+
+ +
+
+ +
+ +
+ +
+ + + ); +} + +export default Ai; diff --git a/nx-dev/nx-dev/public/images/ai/autonomous-ci-optimization-thumb.avif b/nx-dev/nx-dev/public/images/ai/autonomous-ci-optimization-thumb.avif new file mode 100644 index 0000000000..5fdd2918a8 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/autonomous-ci-optimization-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/ci-querying-thumb.avif b/nx-dev/nx-dev/public/images/ai/ci-querying-thumb.avif new file mode 100644 index 0000000000..0f76355498 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/ci-querying-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/cross-repository-agentic-refactorings-thumb.avif b/nx-dev/nx-dev/public/images/ai/cross-repository-agentic-refactorings-thumb.avif new file mode 100644 index 0000000000..24075df397 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/cross-repository-agentic-refactorings-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/cross-repository-intelligence-thumb.avif b/nx-dev/nx-dev/public/images/ai/cross-repository-intelligence-thumb.avif new file mode 100644 index 0000000000..1e00b521d6 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/cross-repository-intelligence-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/nx-flaky-tasks-detection-thumb.avif b/nx-dev/nx-dev/public/images/ai/nx-flaky-tasks-detection-thumb.avif new file mode 100644 index 0000000000..c32d6fb418 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/nx-flaky-tasks-detection-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/self-healing-ci-thumb.avif b/nx-dev/nx-dev/public/images/ai/self-healing-ci-thumb.avif new file mode 100644 index 0000000000..86e0000d61 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/self-healing-ci-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif b/nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif index 4850d4cb71..30109f8703 100644 Binary files a/nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif and b/nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif differ diff --git a/nx-dev/ui-ai-landing-page/src/index.ts b/nx-dev/ui-ai-landing-page/src/index.ts index 991541eee9..5a19a99f0b 100644 --- a/nx-dev/ui-ai-landing-page/src/index.ts +++ b/nx-dev/ui-ai-landing-page/src/index.ts @@ -1,4 +1,8 @@ export * from './lib/hero'; +export * from './lib/new/ai-hero'; +export * from './lib/new/while-coding'; +export * from './lib/new/while-running-ci'; +export * from './lib/new/while-scaling-your-organization'; export * from './lib/problem-statement'; export * from './lib/features'; export * from './lib/technical-implementation'; diff --git a/nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx b/nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx index e6daae0d9e..377fd82919 100644 --- a/nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx +++ b/nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx @@ -56,7 +56,7 @@ export function CallToAction(): ReactElement { {/* Content */} -
+

Transform your AI assistant in minutes

@@ -75,14 +75,6 @@ export function CallToAction(): ReactElement { → - {/* - Watch 3-min Demo - */}
diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/ai-hero.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/ai-hero.tsx new file mode 100644 index 0000000000..0b6a462de2 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/ai-hero.tsx @@ -0,0 +1,69 @@ +import type { ReactElement } from 'react'; +import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common'; +import { + CodeBracketIcon, + ServerStackIcon, + UserGroupIcon, +} from '@heroicons/react/24/outline'; +import { NxPowerAi } from './nx-power-ai'; + +export function AiHero(): ReactElement { + return ( +
+
+
+ + From editor to CI,
Nx makes your AI
+ + a lot more powerful. + + +
+ + Integrate Nx with your Coding Assistant + +
+
+ + + + + + +
+
+
+ +
+
+
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/feature-card.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/feature-card.tsx new file mode 100644 index 0000000000..52719ceddb --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/feature-card.tsx @@ -0,0 +1,84 @@ +import { ReactElement, ReactNode } from 'react'; +import Image from 'next/image'; +import { PlayButton } from './play-button'; + +type VideoFeature = { + type: 'video'; + videoUrl: string; + onPlayClick?: (videoUrl: string) => void; +}; + +type LinkFeature = { + type?: 'link'; + videoUrl?: never; + onPlayClick?: never; +}; + +interface BaseFeatureCardProps { + isAvailable: boolean; + id: string; + title: string; + subtitle: string; + description: ReactNode; + imageUrl: string; +} + +export type FeatureCardProps = BaseFeatureCardProps & + (VideoFeature | LinkFeature); + +export function FeatureCard({ + isAvailable, + id, + title, + subtitle, + description, + type = 'link', + imageUrl, + videoUrl, + onPlayClick, +}: FeatureCardProps): ReactElement { + const handlePlayClick = () => { + if (type === 'video' && videoUrl && onPlayClick) { + onPlayClick(videoUrl); + } else if (type === 'video' && !videoUrl) { + console.warn( + `Video type specified for ${title} but no videoUrl provided` + ); + } + }; + + return ( +
+
+
+ {`Thumbnail + {type === 'video' && videoUrl && onPlayClick ? ( +
+ +
+ ) : null} + + {!isAvailable && ( + + Coming soon + + )} +
+ {title} +
+ {subtitle} +
+
+
+ {description} +
+
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/nx-power-ai.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/nx-power-ai.tsx new file mode 100644 index 0000000000..84b3725740 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/nx-power-ai.tsx @@ -0,0 +1,182 @@ +import type { FC, ReactElement, SVGProps } from 'react'; +import { + ClaudeIcon, + GoogleGeminiIcon, + MetaIcon, + OpenAiIcon, +} from '@nx/nx-dev/ui-icons'; +import { cx } from '@nx/nx-dev/ui-primitives'; + +const HexagonShape: FC> = (props) => ( + + + +); + +export function NxPowerAi({ + className = '', +}: { + className?: string; +}): ReactElement { + return ( +
+
+
    + {/*Row 1*/} +
  • +
  • +
    • +
  • +
    • +
  • +
    • +
  • + + {/*Row 2*/} +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • + + {/*Row 3*/} +
  • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
+
+ + {/* Steps List */} +
+ {/* Active Step */} +
+
+
+
+
+
+
+

+ Generating a fix for test "ui-profile:test:save-preferences" +

+
+
+
+ + Working... + + + + + +
+
+
+ + {/* Completed Step */} +
+
+
+
+
+
+ +
+
+
+
+
+
+ + Done + +
+
+
+
+ + {/* Pending Step */} +
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/play-button.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/play-button.tsx new file mode 100644 index 0000000000..158cdc5d67 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/play-button.tsx @@ -0,0 +1,70 @@ +import { ComponentProps, ReactElement } from 'react'; +import { cx } from '@nx/nx-dev/ui-primitives'; +import { MovingBorder } from '@nx/nx-dev/ui-animations'; +import { motion } from 'framer-motion'; +import { PlayIcon } from '@heroicons/react/24/outline'; + +export function PlayButton({ + className, + ...props +}: ComponentProps<'div'>): ReactElement { + const parent = { + initial: { + width: 82, + transition: { + when: 'afterChildren', + }, + }, + hover: { + width: 296, + transition: { + duration: 0.125, + type: 'tween', + ease: 'easeOut', + }, + }, + }; + const child = { + initial: { + opacity: 0, + x: -6, + }, + hover: { + x: 0, + opacity: 1, + transition: { + duration: 0.015, + type: 'tween', + ease: 'easeOut', + }, + }, + }; + + return ( +
+
+ +
+ +
+ + +
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/while-coding.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/while-coding.tsx new file mode 100644 index 0000000000..3b6391191a --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/while-coding.tsx @@ -0,0 +1,146 @@ +import { ReactElement, useState } from 'react'; +import { SectionHeading, VideoModal } from '@nx/nx-dev/ui-common'; +import Link from 'next/link'; +import { FeatureCard, type FeatureCardProps } from './feature-card'; + +const features: FeatureCardProps[] = [ + { + isAvailable: true, + id: 'deep-project-understanding', + title: 'Deep Project Understanding Through MCP', + subtitle: '"Context is worth 80 IQ points" - Alan Kay', + description: ( + <> +

+ Nx connects your AI assistant to its comprehensive workspace knowledge + through the Model Context Protocol (MCP), delivering complete insights + into project graphs, dependencies, and code ownership. +

+
+ + How to setup Nx MCP to your LLM + +
+ + ), + type: 'video', + videoUrl: 'https://youtu.be/RNilYmJJzdk', + imageUrl: '/images/ai/nx-copilot-mcp-yt-thumb.avif', + }, + { + isAvailable: true, + id: 'terminal-awareness-in-real-time', + title: 'Terminal Awareness in Real-Time', + subtitle: 'Your AI sees what you see, when you see it.', + description: ( + <> +

+ Your AI assistant can access the terminal output on-demand through + MCP. When you ask about failing builds or broken tests, it retrieves + the relevant error messages and combines them with full codebase + context. +

+
+ + How to set terminal AI integration with Nx{' '} + + +
+ + ), + type: 'video', + videoUrl: 'https://youtu.be/Cbc9_W5J6DA', + imageUrl: '/images/ai/terminal-llm-comm-thumb.avif', + }, + { + isAvailable: true, + id: 'predictable-workspace-aware-code-generation', + title: 'Predictable, Workspace-Aware Code Generation', + subtitle: + 'Combine AI intelligence with consistent generators that follow team standards', + description: ( + <> +

+ Your AI assistant can trigger code generation using predictable Nx + generators, then take it from there to intelligently integrate the + result into your existing workspace architecture. +

+
+ + How to generate code that works with AI{' '} + + +
+ + ), + type: 'video', + videoUrl: 'https://youtu.be/PXNjedYhZDs', + imageUrl: '/images/ai/video-code-gen-and-ai-thumb.avif', + }, +]; + +export function WhileCoding(): ReactElement { + const [openVideoUrl, setOpenVideoUrl] = useState(null); + + return ( +
+
+
+ + While Coding + +
+
+
+ {features.map((feature) => + feature.type === 'video' ? ( + + ) : ( + + ) + )} +
+
+ setOpenVideoUrl(null)} + videoUrl={openVideoUrl || ''} + /> +
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/while-running-ci.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/while-running-ci.tsx new file mode 100644 index 0000000000..97c1c3ec94 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/while-running-ci.tsx @@ -0,0 +1,144 @@ +import { ReactElement, useState } from 'react'; +import { SectionHeading, VideoModal } from '@nx/nx-dev/ui-common'; +import Link from 'next/link'; +import { FeatureCard, type FeatureCardProps } from './feature-card'; + +const features: FeatureCardProps[] = [ + { + isAvailable: true, + id: 'reliable-tests', + title: 'Reliable Tests', + subtitle: 'Turn flaky tests from time-wasters into non-issues.', + description: ( + <> +

+ Nx automatically identifies and fixes flaky tests using AI that + analyzes failures with workspace context and generates actual code + fixes. +

+
+ + How to identify and rerun flaky tasks{' '} + + +
+ + ), + type: 'link', + imageUrl: '/images/ai/nx-flaky-tasks-detection-thumb.avif', + }, + { + isAvailable: true, + id: 'self-healing-ci', + title: 'Self-Healing CI', + subtitle: 'Stop babysitting PRs. AI fixes your CI failures automatically.', + description: ( + <> +

+ AI agents detect, analyze, and propose fixes for CI failures using + your workspace context. Stay focused on features while AI handles the + debugging. +

+
+ + Stop babysitting PRs with Self-Healing CI{' '} + + +
+ + ), + type: 'video', + videoUrl: 'https://youtu.be/JW5Ki3PkRWA', + imageUrl: '/images/ai/self-healing-ci-thumb.avif', + }, + { + isAvailable: true, + id: 'autonomous-ci-optimization', + title: 'Autonomous CI Optimization', + subtitle: 'Let AI manage your CI resources for optimal performance.', + description: ( + <> +

+ AI-driven resource allocation that learns from your CI patterns to + automatically scale agents and optimize build times. +

+
+ + How to setup Autonomous CI Optimization{' '} + + +
+ + ), + type: 'link', + imageUrl: '/images/ai/autonomous-ci-optimization-thumb.avif', + }, +]; + +export function WhileRunningCi(): ReactElement { + const [openVideoUrl, setOpenVideoUrl] = useState(null); + + return ( +
+
+
+
+ + While Running CI + +
+
+
+ {features.map((feature) => + feature.type === 'video' ? ( + + ) : ( + + ) + )} +
+
+ setOpenVideoUrl(null)} + videoUrl={openVideoUrl || ''} + /> +
+
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/new/while-scaling-your-organization.tsx b/nx-dev/ui-ai-landing-page/src/lib/new/while-scaling-your-organization.tsx new file mode 100644 index 0000000000..8b7b30e27b --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/new/while-scaling-your-organization.tsx @@ -0,0 +1,113 @@ +import { ReactElement, useState } from 'react'; +import { SectionHeading, VideoModal } from '@nx/nx-dev/ui-common'; +import { FeatureCard, type FeatureCardProps } from './feature-card'; + +const features: FeatureCardProps[] = [ + { + isAvailable: false, + id: 'architectural-queries', + title: 'Architectural Queries', + subtitle: 'Ask questions about your entire system in plain English.', + description: ( +

+ Query your workspace data naturally: "Extract all failed CI runs from + the last month" or "What patterns are causing our tests to fail?" AI + analyzes your CI pipeline data, cache performance, and build patterns to + identify bottlenecks and optimization opportunities. +

+ ), + type: 'link', + imageUrl: '/images/ai/ci-querying-thumb.avif', + }, + { + isAvailable: false, + id: 'cross-repository-intelligence', + title: 'Cross-Repository Intelligence', + subtitle: 'AI that understands your entire organization.', + description: ( +

+ Nx Polygraph will extend AI context across multiple repositories, + enabling system-wide refactoring and cross-repo analysis. +

+ ), + type: 'link', + imageUrl: '/images/ai/cross-repository-intelligence-thumb.avif', + }, + { + isAvailable: false, + id: 'cross-repository-agentic-refactorings', + title: 'Cross-Repository Agentic Refactorings', + subtitle: 'Modernize your entire organization with AI agents.', + description: ( + <> +

+ Use autonomous agents to perform large-scale migrations and tech debt + cleanup across all repositories. They understand cross-repo + dependencies to execute complex, org-wide changes safely. +

+ + ), + type: 'link', + imageUrl: '/images/ai/cross-repository-agentic-refactorings-thumb.avif', + }, +]; + +export function WhileScalingYourOrganization(): ReactElement { + const [openVideoUrl, setOpenVideoUrl] = useState(null); + + return ( +
+
+
+
+ + While Scaling Your Organization + +
+
+
+ {features.map((feature) => + feature.type === 'video' ? ( + + ) : ( + + ) + )} +
+
+ setOpenVideoUrl(null)} + videoUrl={openVideoUrl || ''} + /> +
+
+ ); +} diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx index 04d1f01e4d..1cc82a771d 100644 --- a/nx-dev/ui-common/src/lib/headers/header.tsx +++ b/nx-dev/ui-common/src/lib/headers/header.tsx @@ -210,6 +210,14 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement { )}
+ + AI +