diff --git a/.gitignore b/.gitignore index 9981a021a4..893b2561dd 100644 --- a/.gitignore +++ b/.gitignore @@ -74,4 +74,6 @@ storybook-static .kotlin .cursor/rules/nx-rules.mdc -.github/instructions/nx.instructions.md \ No newline at end of file +.github/instructions/nx.instructions.md +.cursor/rules/nx-rules.mdc +.github/instructions/nx.instructions.md diff --git a/nx-dev/nx-dev/app/ai/page.tsx b/nx-dev/nx-dev/app/ai/page.tsx new file mode 100644 index 0000000000..9112cc1f2e --- /dev/null +++ b/nx-dev/nx-dev/app/ai/page.tsx @@ -0,0 +1,76 @@ +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/public/images/ai/ai-ci-fix-thumb.avif b/nx-dev/nx-dev/public/images/ai/ai-ci-fix-thumb.avif new file mode 100644 index 0000000000..8957482690 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/ai-ci-fix-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/nx-copilot-mcp-yt-thumb.avif b/nx-dev/nx-dev/public/images/ai/nx-copilot-mcp-yt-thumb.avif new file mode 100644 index 0000000000..3a0df97f6d Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/nx-copilot-mcp-yt-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 new file mode 100644 index 0000000000..4850d4cb71 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/ai/video-code-gen-and-ai-thumb.avif b/nx-dev/nx-dev/public/images/ai/video-code-gen-and-ai-thumb.avif new file mode 100644 index 0000000000..921eb31d36 Binary files /dev/null and b/nx-dev/nx-dev/public/images/ai/video-code-gen-and-ai-thumb.avif differ diff --git a/nx-dev/nx-dev/public/images/nx-console/nx-mcp-landingpage-img.avif b/nx-dev/nx-dev/public/images/nx-console/nx-mcp-landingpage-img.avif new file mode 100644 index 0000000000..d3be89a648 Binary files /dev/null and b/nx-dev/nx-dev/public/images/nx-console/nx-mcp-landingpage-img.avif differ diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index 440f4da811..3edb460a04 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -1037,7 +1037,7 @@ const coreFeatureAndConceptsRefactoring = { * For AI Chat to make sure old URLs are not broken (added 2023-09-14) */ const aiChat = { - '/ai': '/ai-chat', + // '/ai': '/ai-chat', }; // rename nx/linter to eslint diff --git a/nx-dev/ui-ai-landing-page/.babelrc b/nx-dev/ui-ai-landing-page/.babelrc new file mode 100644 index 0000000000..1ea870ead4 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/nx-dev/ui-ai-landing-page/.eslintrc.json b/nx-dev/ui-ai-landing-page/.eslintrc.json new file mode 100644 index 0000000000..a39ac5d057 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["plugin:@nx/react", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/nx-dev/ui-ai-landing-page/README.md b/nx-dev/ui-ai-landing-page/README.md new file mode 100644 index 0000000000..cfb9b199d4 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/README.md @@ -0,0 +1,7 @@ +# ui-ai-landing-page + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test ui-ai-landing-page` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/nx-dev/ui-ai-landing-page/jest.config.ts b/nx-dev/ui-ai-landing-page/jest.config.ts new file mode 100644 index 0000000000..068cf81dca --- /dev/null +++ b/nx-dev/ui-ai-landing-page/jest.config.ts @@ -0,0 +1,9 @@ +export default { + displayName: 'ui-ai-landing-page', + preset: '../../jest.preset.js', + transform: { + '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../coverage/nx-dev/ui-ai-landing-page', +}; diff --git a/nx-dev/ui-ai-landing-page/project.json b/nx-dev/ui-ai-landing-page/project.json new file mode 100644 index 0000000000..8db9242c1b --- /dev/null +++ b/nx-dev/ui-ai-landing-page/project.json @@ -0,0 +1,9 @@ +{ + "name": "ui-ai-landing-page", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "nx-dev/ui-ai-landing-page/src", + "projectType": "library", + "tags": [], + "// targets": "to see all targets run: nx show project ui-ai-landing-page --web", + "targets": {} +} diff --git a/nx-dev/ui-ai-landing-page/src/index.ts b/nx-dev/ui-ai-landing-page/src/index.ts new file mode 100644 index 0000000000..991541eee9 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/index.ts @@ -0,0 +1,5 @@ +export * from './lib/hero'; +export * from './lib/problem-statement'; +export * from './lib/features'; +export * from './lib/technical-implementation'; +export * from './lib/call-to-action'; 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 new file mode 100644 index 0000000000..e6daae0d9e --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx @@ -0,0 +1,90 @@ +import { ButtonLink } from '@nx/nx-dev/ui-common'; +import { cx } from '@nx/nx-dev/ui-primitives'; +import React, { ReactElement } from 'react'; +import Link from 'next/link'; + +export function CallToAction(): ReactElement { + return ( +
+ {/* Background pattern */} + + + {/* Gradient background */} +
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/features.tsx b/nx-dev/ui-ai-landing-page/src/lib/features.tsx new file mode 100644 index 0000000000..a56b054037 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/features.tsx @@ -0,0 +1,297 @@ +import { SectionHeading } from '@nx/nx-dev/ui-common'; +import { cx } from '@nx/nx-dev/ui-primitives'; +import { CommandLineIcon } from '@heroicons/react/24/outline'; +import { ReactElement } from 'react'; + +export function Features(): ReactElement { + return ( +
+
+
+ + Make your AI workspace-aware + + +

+ Transform your AI from context-blind to architecture-aware with + complete workspace intelligence. +

+
+ +
+ + + + + + + + + } + /> + + + + + + } + /> + } + /> + + + + + + + } + /> + + + + + + + + + } + /> + + + + + + + + + + + } + /> +
+
+
+ ); +} + +interface FeatureCardProps { + title: string; + description: string; + icon: JSX.Element; + href?: string; +} + +function FeatureCard({ + title, + description, + icon, + href = '#', +}: FeatureCardProps): ReactElement { + return ( + +
+
+
+ {icon} +
+

{title}

+

{description}

+
+
+ + ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/hero.tsx b/nx-dev/ui-ai-landing-page/src/lib/hero.tsx new file mode 100644 index 0000000000..7319cd41c1 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/hero.tsx @@ -0,0 +1,519 @@ +'use client'; +import { ComponentProps, ReactElement, useState } from 'react'; +import { ButtonLink, SectionHeading, VideoModal } from '@nx/nx-dev/ui-common'; +import { + PlayIcon, + CommandLineIcon, + CpuChipIcon, +} from '@heroicons/react/24/outline'; +import { sendCustomEvent } from '@nx/nx-dev/feature-analytics'; +import { cx } from '@nx/nx-dev/ui-primitives'; +import { MovingBorder } from '@nx/nx-dev/ui-animations'; +import { motion, AnimatePresence } from 'framer-motion'; +import Image from 'next/image'; + +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 ( +
+
+ +
+ +
+ + +
+ ); +} + +interface AIFeature { + id: string; + title: string; + description: string; + icon: React.ComponentType>; + videoUrl: string; + thumbnailUrl: string; + eventId: string; + blogUrl?: string; +} + +const aiFeatures: AIFeature[] = [ + { + id: 'vscode-copilot', + title: 'Integrate with your LLM via MCP', + description: + 'Connect your AI assistants directly to your Nx workspace for deep project understanding.', + icon: CpuChipIcon, + videoUrl: 'https://youtu.be/RNilYmJJzdk', + thumbnailUrl: '/images/ai/nx-copilot-mcp-yt-thumb.avif', + eventId: 'nx-ai-vscode-video-click', + blogUrl: '/blog/nx-mcp-vscode-copilot', + }, + { + id: 'ci-fixes', + title: 'AI-Powered CI Failure Analysis', + description: + 'Your LLM automatically diagnoses CI failures and suggests targeted fixes.', + icon: ({ className, ...props }: React.ComponentProps<'svg'>) => ( + + + + + + ), + videoUrl: 'https://youtu.be/fPqPh4h8RJg', + thumbnailUrl: '/images/ai/ai-ci-fix-thumb.avif', + eventId: 'nx-ai-ci-video-click', + blogUrl: '/blog/nx-editor-ci-llm-integration', + }, + { + id: 'terminal-integration', + title: 'Active Terminal Task and Log Awareness', + description: + 'Give your LLM real-time visibility into running tasks and build outputs.', + icon: CommandLineIcon, + videoUrl: 'https://youtu.be/Cbc9_W5J6DA', + thumbnailUrl: '/images/ai/terminal-llm-comm-thumb.avif', + eventId: 'nx-ai-terminal-video-click', + // blogUrl: '/blog/nx-editor-ci-llm-integration', + }, + { + id: 'code-generation', + title: 'Predictable Code Generation That Works', + description: + 'Generate workspace-aware code that follows your patterns and architecture.', + icon: ({ className, ...props }: React.ComponentProps<'svg'>) => ( + + + + + + + ), + videoUrl: 'https://youtu.be/PXNjedYhZDs', + thumbnailUrl: '/images/ai/video-code-gen-and-ai-thumb.avif', + eventId: 'nx-ai-codegen-video-click', + blogUrl: '/blog/nx-generators-ai-integration', + }, +]; + +export interface HeroProps { + className?: string; +} + +export function Hero(): JSX.Element { + const [isOpen, setIsOpen] = useState(false); + const [selectedFeature, setSelectedFeature] = useState( + aiFeatures[0] + ); + + const headingVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + ease: 'easeOut', + }, + }, + }; + + return ( +
+
+ {/* Header Section */} +
+ + + AI that{' '} + + actually works + {' '} +
+ for large codebases + + +
+ + {/* Interactive Video + Features Section */} +
+ {/* Video Section */} + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + {`${selectedFeature.title} + + +
+ + + + { + setIsOpen(true); + sendCustomEvent( + selectedFeature.eventId, + 'ai-landing-hero-video', + 'ai-landing' + ); + }} + /> + + +
+ + {selectedFeature.blogUrl && ( + + + + sendCustomEvent( + `${selectedFeature.eventId}-learn-more`, + 'ai-landing-hero-learn-more', + 'ai-landing' + ) + } + > + Learn more about {selectedFeature.title.toLowerCase()} + + → + + + + + )} + + + {/* Features Section */} + +
+ {aiFeatures.map((feature, index) => { + const Icon = feature.icon; + const isSelected = selectedFeature.id === feature.id; + + return ( + + ); + })} +
+ + + + sendCustomEvent( + 'ai-landing-enhance-click', + 'ai-landing-hero', + 'ai-landing' + ) + } + > + Enhance your AI assistant + + + +
+
+ + setIsOpen(false)} + videoUrl={selectedFeature.videoUrl} + /> +
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx b/nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx new file mode 100644 index 0000000000..55e702ef0e --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx @@ -0,0 +1,308 @@ +import { SectionHeading } from '@nx/nx-dev/ui-common'; + +export interface ProblemStatementProps { + className?: string; +} + +export function ProblemStatement({ + className, +}: ProblemStatementProps): JSX.Element { + return ( +
+
+
+ + Your AI is blind to your workspace architecture + + +

+ As monorepos scale, AI tools become progressively less effective + without true workspace understanding. +

+
+ +
+ {/* Left Column - Problems */} +
+

+ The challenges +

+ +
+
+
+ + + + + + + + + + +
+
+

+ Limited context +

+

+ LLMs only see individual files, missing the architectural + relationships in large monorepos. +

+
+
+ +
+
+ + + + + + +
+
+

+ Inconsistent output +

+

+ AI generates code that doesn't follow team standards or may + break components it can't see. +

+
+
+ +
+
+ + + + + + + + +
+
+

+ No workspace awareness +

+

+ AI can't understand project dependencies, ownership, or + cross-project integration points. +

+
+
+ +
+
+ + + + + +
+
+

+ Manual context burden +

+

+ Developers must repeatedly provide the same contextual + information about project structure. +

+
+
+
+
+ + {/* Right Column - Solutions */} +
+

+ How Nx helps +

+ +
+
+
+ + + + + + + + + + +
+
+

+ Architectural awareness +

+

+ Move from file-level to workspace-level understanding with + rich project relationship metadata. +

+
+
+ +
+
+ + + + + + +
+
+

+ Predictable + intelligent +

+

+ Combine consistent generators with AI customization that + follows team standards. +

+
+
+ +
+
+ + + + + +
+
+

+ Integrated workflows +

+

+ Connect editor, terminal, CI, and AI for truly context-aware + assistance across your entire workspace. +

+
+
+ +
+
+ + + + + + + + +
+
+

+ Up-to-Date Documentation +

+

+ Access current docs and best practices for accurate, + workspace-specific guidance. +

+
+
+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx b/nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx new file mode 100644 index 0000000000..bd7583511d --- /dev/null +++ b/nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx @@ -0,0 +1,217 @@ +import { + ModelContextProtocolIcon, + NxConsoleSmallIcon, +} from '@nx/nx-dev/ui-icons'; +import Image from 'next/image'; + +export interface TechnicalImplementationProps { + className?: string; +} + +export function TechnicalImplementation({ + className, +}: TechnicalImplementationProps): JSX.Element { + return ( +
+
+
+ {/* Left Side - Title and How It Works */} +
+

+ Powered by Nx workspace intelligence +

+ +
+
+
+ 1 +
+
+

+ Nx daemon runs in the background, maintaining up-to-date + workspace metadata +

+
+
+ +
+
+ 2 +
+
+

+ This rich contextual data is processed and optimized for AI + consumption +

+
+
+ +
+
+ 3 +
+
+

+ Nx Console exposes the data to your AI assistant via an MCP +

+
+
+
+
+ + {/* Right Side - Image */} +
+
+ Nx MCP visualization +
+
+
+ +
+ {/* Flow diagram with connected boxes */} +
+ {/* Nx Console Box */} +
+
+
+ +
+

+ Start with Nx Console +

+
+

+ Install the Nx Console Extension, available for VSCode, Cursor, + and IntelliJ. +

+ + {/* Right arrow - only visible on md and larger screens */} +
+ + + +
+ + {/* Down arrow - only visible on small screens */} +
+ + + +
+
+ + {/* MCP Box */} +
+
+
+ +
+

+ Nx MCP +

+
+

+ Nx Console automatically registers its MCP server or you can + configure it in any MCP compatible client. +

+ + {/* Right arrow - only visible on md and larger screens */} +
+ + + +
+ + {/* Down arrow - only visible on small screens */} +
+ + + +
+
+ + {/* Enhanced LLM Workflow Box */} +
+
+
+ + + +
+

+ Enhanced LLM workflow +

+
+

+ Your existing AI tools understand your workspace architecture + without changing your development habits. +

+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-ai-landing-page/tsconfig.json b/nx-dev/ui-ai-landing-page/tsconfig.json new file mode 100644 index 0000000000..3c41f10fb2 --- /dev/null +++ b/nx-dev/ui-ai-landing-page/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../tsconfig.base.json" +} diff --git a/nx-dev/ui-ai-landing-page/tsconfig.lib.json b/nx-dev/ui-ai-landing-page/tsconfig.lib.json new file mode 100644 index 0000000000..578a3fb7dd --- /dev/null +++ b/nx-dev/ui-ai-landing-page/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [ + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" + ] + }, + "exclude": [ + "jest.config.ts", + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.jsx", + "src/**/*.test.jsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] +} diff --git a/nx-dev/ui-ai-landing-page/tsconfig.spec.json b/nx-dev/ui-ai-landing-page/tsconfig.spec.json new file mode 100644 index 0000000000..ec9d3e281b --- /dev/null +++ b/nx-dev/ui-ai-landing-page/tsconfig.spec.json @@ -0,0 +1,22 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "moduleResolution": "node10", + "jsx": "react-jsx", + "types": ["jest", "node"] + }, + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ] +} diff --git a/nx-dev/ui-icons/src/index.ts b/nx-dev/ui-icons/src/index.ts index 1dea615205..e01d3784cd 100644 --- a/nx-dev/ui-icons/src/index.ts +++ b/nx-dev/ui-icons/src/index.ts @@ -2,6 +2,7 @@ export * from './lib/ai/cursor'; export * from './lib/ai/github-copilot'; export * from './lib/ai/intellij-ai'; +export * from './lib/ai/model-context-protocol'; // CI PROVIDERS export * from './lib/ci-providers/azure-devops'; diff --git a/nx-dev/ui-icons/src/lib/ai/model-context-protocol.tsx b/nx-dev/ui-icons/src/lib/ai/model-context-protocol.tsx new file mode 100644 index 0000000000..7eb765c1e1 --- /dev/null +++ b/nx-dev/ui-icons/src/lib/ai/model-context-protocol.tsx @@ -0,0 +1,21 @@ +import { FC, SVGProps } from 'react'; + +/** + * Model Context Protocol (MCP) icon. + */ +export const ModelContextProtocolIcon: FC> = ( + props +) => ( + + ModelContextProtocol + + + +); diff --git a/nx-dev/ui-icons/src/lib/products.tsx b/nx-dev/ui-icons/src/lib/products.tsx index 78706a2b9a..9eb7433fa9 100644 --- a/nx-dev/ui-icons/src/lib/products.tsx +++ b/nx-dev/ui-icons/src/lib/products.tsx @@ -130,3 +130,19 @@ export const NxConsoleIcon: FC> = (props) => ( /> ); + +export const NxConsoleSmallIcon: FC> = (props) => ( + + + +); diff --git a/tools/ai-landing-tasks.md b/tools/ai-landing-tasks.md new file mode 100644 index 0000000000..1bb9644d4c --- /dev/null +++ b/tools/ai-landing-tasks.md @@ -0,0 +1,222 @@ +# Nx AI Landing Page Implementation + +This file tracks the implementation of a new AI-focused landing page for Nx, based on the content strategy from `nx-ai-landing-page-copy.md`. The page will showcase how Nx enhances AI assistants with workspace intelligence. + +## Completed Tasks + +- [x] Create initial task list + +## In Progress Tasks + +- [ ] Project setup and scaffolding + +## Future Tasks + +### Project Setup + +- [ ] Create UI Library for AI Landing Page Components + + - Run `nx g @nx/react:lib nx-dev/ui-ai-landing-page` + - Configure project structure similar to ui-enterprise + - Set up proper export patterns in index.ts + +- [ ] Create Next.js Page Component for AI Landing Page + + - Create `nx-dev/nx-dev/app/ai/page.tsx` following same structure as React page + - Set up metadata and SEO properties + - Import components from new ui-ai-landing-page library + +- [ ] Configure Routing and Navigation + - Update navigation components to include AI landing page + - Configure proper routing in Next.js app + +### Component Development + +- [ ] Create Hero Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/hero.tsx` + - Use headline "Make Your AI Assistant 10x Smarter" + - Add sub-headline with proper styling + - Create split-screen visual comparison (before/after) + - Add primary CTA "Enhance Your AI Assistant" + - Add secondary CTA "Watch 3-min Demo" + +- [ ] Create Video Demo Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/nx-ai-benefits-video` + - Create thumbnail with play button + - Set up video modal similar to existing examples + - Connect to appropriate YouTube video link + +- [ ] Create Problem Statement Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx` + - Add section heading "Why Your AI Assistant Struggles with Enterprise Codebases" + - Create visual elements for the three core problems + - Add diagram comparing LLM "street view" vs Nx "map view" + +- [ ] Create Solution Overview Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/solution-overview.tsx` + - Add headline "Nx Provides the Missing Context Your AI Needs" + - Create visual elements for the three core value props + - Add appropriate styling and animations + +- [ ] Create Features Container Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/features.tsx` + - Create wrapper structure for all feature sections + +- [ ] Create Individual Feature Components + + - Implement workspace intelligence feature (`workspace-intelligence.tsx`) + - Implement CI integration feature (`ci-integration.tsx`) + - Implement terminal integration feature (`terminal-integration.tsx`) + - Implement smart code generation feature (`smart-code-generation.tsx`) + - Implement documentation-aware feature (`documentation-aware.tsx`) + +- [ ] Create Demo Snippets + + - Implement visual demos for each feature section + - Create stylized code snippets demonstrating features + +- [ ] Create Technical Implementation Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx` + - Add headline "Powered by Nx's Rich Workspace Intelligence" + - Create visual elements for explaining how it works + - Add integration options section + +- [ ] Create Use Cases Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/use-cases.tsx` + - Create visual elements for each use case scenario + - Add appropriate icons and styling + +- [ ] Create Competitive Differentiation Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/competitive-differentiation.tsx` + - Add headline "Why Large Workspaces Are AI Future-Proof" + - Create visual comparison for each key point + +- [ ] Create Social Proof Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/social-proof.tsx` + - Add headline "Join Forward-Thinking Teams Already Using AI-Enhanced Nx" + - Create carousel for customer testimonials + - Add customer logos section + +- [ ] Create Getting Started Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/getting-started.tsx` + - Add headline "Transform Your AI Assistant in Minutes" + - Create visual step-by-step guide with three steps + - Add technical requirements section + +- [ ] Create Resources Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/resources.tsx` + - Add featured content with video links + - Add blog series links + - Add additional resources section + +- [ ] Create Call-to-Action Component + + - Implement in `nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx` + - Add strong headline encouraging action + - Add primary and secondary CTAs + - Add appropriate styling and animations + +- [ ] Create Shared UI Components + - Create comparison slider component for before/after visuals + - Create stylized code snippets component + - Create feature card component template + - Create animated icon components for features + +### Integration and Testing + +- [ ] Assemble Components in Page + + - Assemble all components in proper order in page.tsx + - Ensure proper spacing and responsive layout + - Add scroll anchors for navigation + +- [ ] Implement Responsive Design + + - Ensure all components are responsive for mobile, tablet and desktop + - Implement proper dark mode support + - Test across different viewport sizes + +- [ ] Optimize Performance + + - Lazy load videos and heavy content + - Optimize images for web + - Implement proper caching strategies + +- [ ] Perform Component Testing + + - Create tests for critical components + - Test responsive behavior + - Test dark/light mode switching + +- [ ] Perform Page Integration Testing + + - Test full page rendering + - Test navigation to/from page + - Test all links and CTAs + +- [ ] Conduct Final Review + + - Review content for grammar and style consistency + - Verify all links work correctly + - Check analytics tracking + +- [ ] Prepare for Release + - Coordinate with marketing for announcement + - Prepare social media assets + - Set up tracking for KPIs + +## Implementation Plan + +The AI landing page will be implemented following the React landing page structure as a model. We'll create a dedicated UI library for all AI landing page components, similar to the ui-enterprise library. + +The page will feature multiple sections based on the content strategy in `nx-ai-landing-page-copy.md`: + +1. **Hero Section**: Eye-catching introduction with a clear value proposition +2. **Video Demo**: Showcase Nx AI capabilities in action +3. **Problem Statement**: Explain challenges AI assistants face with enterprise codebases +4. **Solution Overview**: How Nx provides the missing context +5. **Features Deep Dive**: Detailed exploration of key features and capabilities +6. **Technical Implementation**: Explanation of how the integration works +7. **Use Cases**: Real-world scenarios demonstrating value +8. **Competitive Differentiation**: Why Nx + AI is superior +9. **Social Proof**: Testimonials and customer examples +10. **Getting Started**: Simple steps to implement +11. **Resources**: Additional learning materials +12. **Call-to-Action**: Final conversion point + +The implementation will follow best practices for responsive design, accessibility, and performance optimization. We'll prioritize component reusability and maintain consistency with existing Nx design patterns. + +### Relevant Files + +Overall project information is in `./nx-ai-landing-page-copy.md`. + +- `nx-dev/ui-ai-landing-page/src/index.ts` - Main exports for the AI landing page library +- `nx-dev/ui-ai-landing-page/src/lib/hero.tsx` - Hero component with main headline and CTAs +- `nx-dev/ui-ai-landing-page/src/lib/nx-ai-benefits-video/` - Video demo components +- `nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx` - Problem statement section +- `nx-dev/ui-ai-landing-page/src/lib/solution-overview.tsx` - Solution overview section +- `nx-dev/ui-ai-landing-page/src/lib/features.tsx` - Features container component +- `nx-dev/ui-ai-landing-page/src/lib/workspace-intelligence.tsx` - Workspace intelligence feature +- `nx-dev/ui-ai-landing-page/src/lib/ci-integration.tsx` - CI integration feature +- `nx-dev/ui-ai-landing-page/src/lib/terminal-integration.tsx` - Terminal integration feature +- `nx-dev/ui-ai-landing-page/src/lib/smart-code-generation.tsx` - Smart code generation feature +- `nx-dev/ui-ai-landing-page/src/lib/documentation-aware.tsx` - Documentation-aware feature +- `nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx` - Technical implementation section +- `nx-dev/ui-ai-landing-page/src/lib/use-cases.tsx` - Use cases section +- `nx-dev/ui-ai-landing-page/src/lib/competitive-differentiation.tsx` - Competitive differentiation section +- `nx-dev/ui-ai-landing-page/src/lib/social-proof.tsx` - Social proof section +- `nx-dev/ui-ai-landing-page/src/lib/getting-started.tsx` - Getting started section +- `nx-dev/ui-ai-landing-page/src/lib/resources.tsx` - Resources section +- `nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx` - Call to action section +- `nx-dev/nx-dev/app/ai/page.tsx` - Main Next.js page component for the AI landing page diff --git a/tools/nx-ai-landing-page-copy.md b/tools/nx-ai-landing-page-copy.md new file mode 100644 index 0000000000..589a9f33fe --- /dev/null +++ b/tools/nx-ai-landing-page-copy.md @@ -0,0 +1,287 @@ +# Nx AI Landing Page: Content Strategy & Structure + +## Executive Summary + +Based on the analysis of Nx's AI blog series and existing landing pages, here's a comprehensive strategy for an AI-focused landing page that positions Nx as the essential foundation for AI-powered development in monorepos. + +## Page Structure & Content Strategy + +### Hero Section + +**Primary Headline:** "Make Your AI Assistant 10x Smarter" +**Sub-headline:** "Integrate Nx's workspace intelligence directly into your existing AI assistant through MCP - transforming basic code helpers into architecturally-aware development partners." + +**Primary CTA:** "Enhance Your AI Assistant" +**Secondary CTA:** "Watch 3-min Demo" + +### Problem Statement Section + +**Headline:** "Why Your AI Assistant Struggles with Enterprise Codebases" + +**Four Core Problems:** + +1. **Limited Context** - LLMs only see individual files, missing architectural relationships. As monorepos grow larger, this problem compounds dramatically, requiring developers to manually provide context for every interaction. + +2. **Inconsistent Output** - AI generates code that doesn't follow your team's best practices and may introduce breaking changes by deprecating components it doesn't see being used elsewhere in the codebase. + +3. **No Workspace Awareness** - Can't understand project dependencies, ownership, or integration points, making it difficult for AI to know where to start when fixing issues across multiple projects. + +4. **Manual Context Burden** - Developers must constantly provide the same contextual information about project structure, relationships, and interdependencies, negating much of the productivity gains AI promises. + +**Visual:** Diagram showing LLM with limited "street view" vs. Nx providing "map view" of codebase, with callouts showing the increasing context burden as repository size grows. + +**Additional Callout Box:** +"As monorepos scale, AI tools become progressively less effective - a challenge that only architectural intelligence can solve. While type safety provides some guardrails, it's not enough without true workspace understanding." + +### Solution Overview Section + +**Headline:** "Nx Provides the Missing Context Your AI Needs" + +**Core Value Props:** + +1. **Architectural Awareness** - Move from file-level to workspace-level understanding +2. **Predictable + Intelligent** - Combine consistent generators with AI customization +3. **Integrated Workflows** - Connect editor, CI, and AI for seamless development + +### Features Deep Dive + +#### 1. Workspace Intelligence + +**Headline:** "Elevate Your AI from File-Level to Architecture-Level Understanding" + +**Content:** + +- Project relationship mapping +- Dependency analysis and impact assessment +- Team ownership and responsibility identification +- Technology stack and configuration understanding + +**Demo:** "Ask your AI: 'If I change the API of this library, which teams need to know?'" + +**Resources:** + +- 📹 [Watch: Nx Just Made Your LLM Way Smarter](https://youtu.be/RNilYmJJzdk) +- 📖 [Blog: Nx Just Made Your LLM Way Smarter](/blog/nx-just-made-your-llm-smarter) + +#### 2. CI Integration & Failure Resolution + +**Headline:** "Fix CI Issues Before You Even Know They Exist" + +**Content:** + +- Real-time CI failure notifications in your editor +- AI-powered failure analysis and suggested fixes +- Access to detailed Nx Cloud pipeline data +- Automated resolution suggestions + +**Demo:** "Get notified of CI failures and let AI suggest the fix" + +**Resources:** + +- 📹 [Watch: Connect Your Editor, CI and LLMs](https://youtu.be/fPqPh4h8RJg) +- 📖 [Blog: Save Time: Connecting Your Editor, CI and LLMs](/blog/nx-editor-ci-llm-integration) + +#### 3. Terminal Integration & Live Assistance + +**Headline:** "Your AI Assistant Sees What You See in the Terminal" + +**Content:** + +- Real-time terminal output awareness +- Live task execution monitoring +- Contextual error analysis and fixes +- No more copy-pasting terminal errors + +**Demo:** "Run a task that fails, and AI immediately offers solutions based on the actual error output" + +**Resources:** + +- 📖 Blog post coming soon + +#### 4. Smart Code Generation + +**Headline:** "Predictable Generators + AI Intelligence" + +**Content:** + +- Nx generators provide consistent, tested scaffolding +- AI adds contextual customization and integration +- Human-in-the-loop workflow for quality control +- Workspace-aware code integration + +**Demo:** "Generate a new library and automatically connect it to existing projects" + +**Resources:** + +- 📹 [Watch: Enhancing Nx Generators with AI](https://youtu.be/PXNjedYhZDs) +- 📖 [Blog: Combining Predictability and Intelligence With Nx Generators and AI](/blog/nx-generators-ai-integration) + +#### 5. Documentation-Aware Assistance + +**Headline:** "Always Up-to-Date, Never Hallucinating" + +**Content:** + +- Live access to current Nx documentation +- Context-aware configuration guidance +- Best practices enforcement +- Migration assistance + +**Resources:** + +- 📹 [Watch: Making Cursor Smarter with MCP](https://youtu.be/V2W94Sq_v6A) +- 📖 [Blog: Making Cursor Smarter with an MCP Server For Nx](/blog/nx-made-cursor-smarter) + +### Technical Implementation Section + +**Headline:** "Powered by Nx's Rich Workspace Intelligence" + +**Content:** +Nx already maintains comprehensive metadata about your workspace to optimize builds, manage dependencies, and enforce architectural boundaries. The Nx daemon continuously monitors your workspace, tracking project relationships and updates in real-time to keep this intelligence current and accurate. + +**How It Works:** + +- Nx daemon runs in the background, maintaining up-to-date workspace metadata +- This rich contextual data is processed and optimized for AI consumption +- Intelligence is exposed through the Model Context Protocol (MCP) +- Integrates seamlessly into your existing AI assistant workflows + +**The key advantage:** Rather than building something entirely new, this enhances the AI tools you already use and trust, making your existing collaboration with LLMs significantly more powerful and context-aware. + +**Integration Options:** + +- **Nx Console Extension**: Available for VSCode, Cursor, and IntelliJ +- **Pure MCP Server**: Works with any MCP-compatible client (Claude Desktop, Cline, Windsurf, etc.) +- **Existing Workflow**: Enhances your current AI assistant without changing your development habits + +### Use Cases & Examples + +#### Enterprise Developer + +**Scenario:** "Understanding impact of API changes across 50+ projects in a large workspace" +**Solution:** AI uses project graph to identify all affected teams and suggests migration strategy + +#### New Team Member + +**Scenario:** "Getting up to speed on complex multi-project architecture" +**Solution:** AI explains project relationships, ownership, and where to implement features + +#### DevOps Engineer + +**Scenario:** "Optimizing CI/CD pipeline performance across multiple related projects" +**Solution:** AI analyzes Nx Cloud data to suggest task distribution and caching improvements + +### Competitive Differentiation + +**Headline:** "Why Large Workspaces Are AI Future-Proof" + +**Key Points:** + +1. **Complete Context** - All related projects in one workspace vs. scattered repositories +2. **Rich Metadata** - Nx's architectural understanding vs. basic file access +3. **Predictable Patterns** - Consistent generators vs. variable AI output +4. **Integrated Tooling** - Connected workflow vs. isolated tools + +### Social Proof Section + +**Headline:** "Join Forward-Thinking Teams Already Using AI-Enhanced Nx" + +**Featured Testimonials:** + +- Focus on teams using AI + Nx successfully +- Metrics: reduced onboarding time, faster feature delivery +- Use existing customer logos where applicable + +### Getting Started Section + +**Headline:** "Transform Your AI Assistant in Minutes" + +**Three Steps:** + +1. **Install Nx Console** - Available for VSCode, Cursor, IntelliJ +2. **Enable MCP Integration** - One-click setup +3. **Start Asking Better Questions** - AI now understands your workspace + +**Technical Requirements:** + +- Existing Nx workspace or `nx init` for new setup +- Compatible AI assistant (Copilot, Claude, etc.) +- Nx Console extension + +### Resources & Next Steps + +**Featured Content:** + +- 📹 [Nx Just Made Your LLM Way Smarter](https://youtu.be/RNilYmJJzdk) - Foundation overview +- 📹 [Why Nx and AI Work So Well Together](https://youtu.be/[video-url]) - Strategic perspective +- 📹 [Making Cursor Smarter with MCP](https://youtu.be/V2W94Sq_v6A) - Cursor setup guide +- 📹 [Nx MCP for VS Code Copilot](https://youtu.be/dRQq_B1HSLA) - VSCode setup guide +- 📹 [Enhancing Nx Generators with AI](https://youtu.be/PXNjedYhZDs) - Smart generation workflow + +**Blog Series:** + +- 📖 [Nx Just Made Your LLM Way Smarter](/blog/nx-just-made-your-llm-smarter) (foundational post) +- 📖 [Making Cursor Smarter with an MCP Server](/blog/nx-made-cursor-smarter) (Cursor integration) +- 📖 [Nx MCP Now Available for VS Code Copilot](/blog/nx-mcp-vscode-copilot) (VSCode integration) +- 📖 [Nx and AI: Why They Work so Well Together](/blog/nx-and-ai-why-they-work-together) (strategic overview) +- 📖 [Combining Predictability and Intelligence With Nx Generators and AI](/blog/nx-generators-ai-integration) (generator workflow) + +**Additional Resources:** + +- Live demo videos +- Documentation links +- Community Discord for questions +- Blog series for deep dives + +## Page Optimization Strategy + +### SEO Keywords + +**Primary:** "AI workspace development", "LLM code assistant", "Nx AI integration", "multi-project AI tools" +**Secondary:** "enterprise AI development", "intelligent code generation", "MCP server", "workspace AI tools" + +### Conversion Optimization + +1. **Multiple entry points** - Different CTAs for different user types +2. **Progressive disclosure** - Start with benefits, dive into technical details +3. **Social proof throughout** - Testimonials and usage stats +4. **Risk reduction** - Free trial, easy setup, existing workspace compatibility + +### Developer-Focused Messaging + +- Technical accuracy and specificity +- Real code examples and demos +- Focus on productivity gains and workflow improvements +- Emphasis on maintaining control and predictability + +## Content Tone & Voice + +**Technical but Accessible:** Explain complex concepts clearly without dumbing down +**Benefit-Focused:** Lead with outcomes, support with features +**Confident but Not Overhyped:** Realistic about current capabilities while showing vision +**Developer-to-Developer:** Written by and for engineers who understand the pain points + +## Success Metrics + +### Primary KPIs + +- Nx Console downloads/installs +- MCP server configurations +- AI-related feature adoption +- Time-to-first-AI-query in workspace + +### Secondary KPIs + +- Page engagement time +- Video completion rates +- Documentation page visits from AI landing page +- Community Discord joins related to AI features + +## Implementation Recommendations + +1. **Start with Core Message Testing** - A/B test hero section messaging +2. **Progressive Rollout** - Begin with essential features, add advanced use cases +3. **Continuous Content Updates** - Regular examples and case studies as features evolve +4. **Community Feedback Loop** - Use Discord and GitHub discussions to refine messaging + +This landing page strategy positions Nx as the essential infrastructure for AI-powered development, focusing on the unique value of architectural awareness and workspace intelligence that generic AI tools simply cannot provide. diff --git a/tsconfig.base.json b/tsconfig.base.json index 9019aa1a2a..c64023e782 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -93,6 +93,9 @@ "@nx/nx-dev/models-document": ["nx-dev/models-document/src/index.ts"], "@nx/nx-dev/models-menu": ["nx-dev/models-menu/src/index.ts"], "@nx/nx-dev/models-package": ["nx-dev/models-package/src/index.ts"], + "@nx/nx-dev/ui-ai-landing-page": [ + "nx-dev/ui-ai-landing-page/src/index.ts" + ], "@nx/nx-dev/ui-animations": ["nx-dev/ui-animations/src/index.ts"], "@nx/nx-dev/ui-blog": ["nx-dev/ui-blog/src/index.ts"], "@nx/nx-dev/ui-brands": ["nx-dev/ui-brands/src/index.ts"],