feat(nx-dev): AI landing page (#31310)
adds a new AI landing page at `/ai`
This commit is contained in:
Juri Strumpflohner
GitHub
parent
9fd51ed659
commit
873f2d8046
4
.gitignore
vendored
4
.gitignore
vendored
@ -74,4 +74,6 @@ storybook-static
|
||||
.kotlin
|
||||
|
||||
.cursor/rules/nx-rules.mdc
|
||||
.github/instructions/nx.instructions.md
|
||||
.github/instructions/nx.instructions.md
|
||||
.cursor/rules/nx-rules.mdc
|
||||
.github/instructions/nx.instructions.md
|
||||
|
||||
76
nx-dev/nx-dev/app/ai/page.tsx
Normal file
76
nx-dev/nx-dev/app/ai/page.tsx
Normal file
@ -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 (
|
||||
<DefaultLayout>
|
||||
<Hero />
|
||||
|
||||
<div className="mt-32 lg:mt-56" id="problem-statement">
|
||||
<ProblemStatement />
|
||||
</div>
|
||||
|
||||
<div className="mt-32 lg:mt-56" id="features">
|
||||
<Features />
|
||||
</div>
|
||||
|
||||
<div className="mt-32 lg:mt-56" id="how-it-works">
|
||||
<TechnicalImplementation />
|
||||
</div>
|
||||
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<CallToAction />
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
BIN
nx-dev/nx-dev/public/images/ai/ai-ci-fix-thumb.avif
Normal file
BIN
nx-dev/nx-dev/public/images/ai/ai-ci-fix-thumb.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
nx-dev/nx-dev/public/images/ai/nx-copilot-mcp-yt-thumb.avif
Normal file
BIN
nx-dev/nx-dev/public/images/ai/nx-copilot-mcp-yt-thumb.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif
Normal file
BIN
nx-dev/nx-dev/public/images/ai/terminal-llm-comm-thumb.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
nx-dev/nx-dev/public/images/ai/video-code-gen-and-ai-thumb.avif
Normal file
BIN
nx-dev/nx-dev/public/images/ai/video-code-gen-and-ai-thumb.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -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
|
||||
|
||||
12
nx-dev/ui-ai-landing-page/.babelrc
Normal file
12
nx-dev/ui-ai-landing-page/.babelrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@nx/react/babel",
|
||||
{
|
||||
"runtime": "automatic",
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
18
nx-dev/ui-ai-landing-page/.eslintrc.json
Normal file
18
nx-dev/ui-ai-landing-page/.eslintrc.json
Normal file
@ -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": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
7
nx-dev/ui-ai-landing-page/README.md
Normal file
7
nx-dev/ui-ai-landing-page/README.md
Normal file
@ -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).
|
||||
9
nx-dev/ui-ai-landing-page/jest.config.ts
Normal file
9
nx-dev/ui-ai-landing-page/jest.config.ts
Normal file
@ -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',
|
||||
};
|
||||
9
nx-dev/ui-ai-landing-page/project.json
Normal file
9
nx-dev/ui-ai-landing-page/project.json
Normal file
@ -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": {}
|
||||
}
|
||||
5
nx-dev/ui-ai-landing-page/src/index.ts
Normal file
5
nx-dev/ui-ai-landing-page/src/index.ts
Normal file
@ -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';
|
||||
90
nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx
Normal file
90
nx-dev/ui-ai-landing-page/src/lib/call-to-action.tsx
Normal file
@ -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 (
|
||||
<section className="relative isolate px-6 py-12 lg:px-8">
|
||||
{/* Background pattern */}
|
||||
<svg
|
||||
className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="ai-cta-pattern"
|
||||
width={200}
|
||||
height={200}
|
||||
x="50%"
|
||||
y={0}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M.5 200V.5H200" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<svg
|
||||
x="50%"
|
||||
y={0}
|
||||
className="overflow-visible fill-slate-200/20 dark:fill-slate-800/20"
|
||||
>
|
||||
<path
|
||||
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
</svg>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
strokeWidth={0}
|
||||
fill="url(#ai-cta-pattern)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Gradient background */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-blue-500 to-blue-600 opacity-20"
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white">
|
||||
Transform your AI assistant in minutes
|
||||
</h2>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<Link
|
||||
href="/features/enhance-AI#setting-up-nx-mcp"
|
||||
title="Get started with Nx AI integration"
|
||||
prefetch={false}
|
||||
className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
|
||||
>
|
||||
Start here{' '}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="inline-block transition group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
{/* <Link
|
||||
href="https://youtu.be/RNilYmJJzdk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm font-semibold leading-6 text-slate-900 dark:text-white"
|
||||
>
|
||||
Watch 3-min Demo <span aria-hidden="true">→</span>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
297
nx-dev/ui-ai-landing-page/src/lib/features.tsx
Normal file
297
nx-dev/ui-ai-landing-page/src/lib/features.tsx
Normal file
@ -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 (
|
||||
<section className="py-12">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mb-12 text-left">
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Make your AI workspace-aware
|
||||
</SectionHeading>
|
||||
|
||||
<p className="mt-4 text-lg text-slate-500 dark:text-slate-400">
|
||||
Transform your AI from context-blind to architecture-aware with
|
||||
complete workspace intelligence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<FeatureCard
|
||||
title="Workspace intelligence"
|
||||
description="Elevate your AI from file-level to architecture-level understanding with project relationship mapping and dependency analysis."
|
||||
href="/blog/nx-mcp-vscode-copilot"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="8"
|
||||
r="3"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="6"
|
||||
cy="16"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="18"
|
||||
cy="16"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 9.5L7 14"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.5 9.5L17 14"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 16L16 16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="CI integration & failure resolution"
|
||||
description="Fix CI issues before you even know they exist with real-time failure notifications and AI-powered analysis."
|
||||
href="/blog/nx-editor-ci-llm-integration"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 2L2 7L12 12L22 7L12 2Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 17L12 22L22 17"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 12L12 17L22 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Terminal integration"
|
||||
description="Your AI assistant sees what you see in the terminal with real-time output awareness and contextual error analysis."
|
||||
href="#"
|
||||
icon={<CommandLineIcon className="h-6 w-6" />}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Smart code generation"
|
||||
description="Combine predictable generators with AI intelligence for consistent, tested scaffolding with contextual customization."
|
||||
href="https://youtu.be/Cbc9_W5J6DA"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14 3V7C14 7.55228 14.4477 8 15 8H19"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H14L19 8V19C19 20.1046 18.1046 21 17 21Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 17H15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 13H15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Documentation-aware assistance"
|
||||
description="Always up-to-date, never hallucinating with live access to current Nx documentation and context-aware configuration guidance."
|
||||
href="/blog/nx-made-cursor-smarter"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 6L14 6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 10H18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 14H18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 18H18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 21.4V2.6C2 2.26863 2.26863 2 2.6 2H21.4C21.7314 2 22 2.26863 22 2.6V21.4C22 21.7314 21.7314 22 21.4 22H2.6C2.26863 22 2 21.7314 2 21.4Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M6 18V14L8 16L10 14V18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Architectural awareness"
|
||||
description="Move from file-level to workspace-level understanding with team ownership identification and technology stack analysis."
|
||||
href="/blog/nx-and-ai-why-they-work-together"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="5"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="19"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="19"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path d="M7 5H17" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M5 7V17" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M7 19H17" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M19 7V17" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: JSX.Element;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
href = '#',
|
||||
}: FeatureCardProps): ReactElement {
|
||||
return (
|
||||
<a href={href} className="block h-full transform-gpu">
|
||||
<div
|
||||
className={cx(
|
||||
'group relative h-full w-full overflow-hidden rounded-lg border border-slate-200 bg-white p-6',
|
||||
'dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-900 dark:hover:shadow-blue-900/20',
|
||||
'before:absolute before:inset-0 before:z-0 before:bg-gradient-to-br before:from-blue-50 before:to-transparent before:opacity-0 before:transition-opacity',
|
||||
'transition-all duration-300 ease-out',
|
||||
'hover:-translate-y-2 hover:border-blue-200 hover:shadow-xl hover:shadow-blue-100/50',
|
||||
'hover:before:opacity-100 dark:before:from-blue-950'
|
||||
)}
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600 transition-transform duration-300 group-hover:scale-110 dark:bg-slate-800 dark:text-blue-400 dark:group-hover:bg-blue-900">
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-medium">{title}</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
519
nx-dev/ui-ai-landing-page/src/lib/hero.tsx
Normal file
519
nx-dev/ui-ai-landing-page/src/lib/hero.tsx
Normal file
@ -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 (
|
||||
<div
|
||||
className={cx(
|
||||
'group relative overflow-hidden rounded-full bg-transparent p-[1px] shadow-md',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<MovingBorder duration={5000} rx="5%" ry="5%">
|
||||
<div className="size-20 bg-[radial-gradient(var(--blue-500)_40%,transparent_60%)] opacity-[0.8] dark:bg-[radial-gradient(var(--cyan-500)_40%,transparent_60%)]" />
|
||||
</MovingBorder>
|
||||
</div>
|
||||
<motion.div
|
||||
initial="initial"
|
||||
whileHover="hover"
|
||||
variants={parent}
|
||||
className="relative isolate flex size-20 cursor-pointer items-center justify-center gap-6 rounded-full border-2 border-slate-100 bg-white/10 p-6 text-white antialiased backdrop-blur-xl"
|
||||
role="button"
|
||||
aria-label="Play video about Nx MCP"
|
||||
tabIndex={0}
|
||||
>
|
||||
<PlayIcon aria-hidden="true" className="absolute left-6 top-6 size-8" />
|
||||
<motion.div variants={child} className="absolute left-20 top-4 w-48">
|
||||
<p className="text-base font-medium">Watch the video</p>
|
||||
<p className="text-xs">See Nx AI in action.</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface AIFeature {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ComponentType<React.ComponentProps<'svg'>>;
|
||||
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'>) => (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M12 2L2 7L12 12L22 7L12 2Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 17L12 22L22 17"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 12L12 17L22 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</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'>) => (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M14 3V7C14 7.55228 14.4477 8 15 8H19"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H14L19 8V19C19 20.1046 18.1046 21 17 21Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 17H15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 13H15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</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<AIFeature>(
|
||||
aiFeatures[0]
|
||||
);
|
||||
|
||||
const headingVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
ease: 'easeOut',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden py-10 sm:py-16 md:py-20">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
{/* Header Section */}
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={headingVariants}
|
||||
className="mb-16"
|
||||
>
|
||||
<SectionHeading
|
||||
as="h1"
|
||||
variant="display"
|
||||
className="text-pretty tracking-tight"
|
||||
>
|
||||
AI that{' '}
|
||||
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
|
||||
actually works
|
||||
</span>{' '}
|
||||
<br className="hidden md:block" />
|
||||
for large codebases
|
||||
</SectionHeading>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Video + Features Section */}
|
||||
<div className="lg:grid lg:grid-cols-2 lg:items-center lg:gap-12">
|
||||
{/* Video Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.3, duration: 0.6 }}
|
||||
className="mb-12 lg:mb-0"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="absolute bottom-0 start-0 -z-10 -translate-x-14 translate-y-10">
|
||||
<svg
|
||||
className="h-auto max-w-40 text-slate-200 dark:text-slate-800"
|
||||
width="696"
|
||||
height="653"
|
||||
viewBox="0 0 696 653"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="72.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="29.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="128.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="227.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="326.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="425.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="524.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="623.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="72.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="29.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="128.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="227.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="326.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="425.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="524.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="623.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="72.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="29.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="128.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="227.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="326.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="425.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="524.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="623.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="72.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-xl shadow-2xl">
|
||||
<div className="absolute inset-0 z-0 rounded-xl bg-gradient-to-tr from-blue-500/10 to-cyan-500/10"></div>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={selectedFeature.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 1.05 }}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
<Image
|
||||
src={selectedFeature.thumbnailUrl}
|
||||
alt={`${selectedFeature.title} video thumbnail`}
|
||||
width={960}
|
||||
height={540}
|
||||
loading="lazy"
|
||||
unoptimized
|
||||
className="relative w-full transform rounded-xl transition-transform duration-300 hover:scale-[1.02]"
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={selectedFeature.id}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="absolute inset-0 grid h-full w-full items-center justify-center"
|
||||
>
|
||||
<PlayButton
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
sendCustomEvent(
|
||||
selectedFeature.eventId,
|
||||
'ai-landing-hero-video',
|
||||
'ai-landing'
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{selectedFeature.blogUrl && (
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={selectedFeature.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
className="mt-6 flex justify-center"
|
||||
>
|
||||
<a
|
||||
href={selectedFeature.blogUrl}
|
||||
className="group inline-flex items-center gap-2 text-center text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
onClick={() =>
|
||||
sendCustomEvent(
|
||||
`${selectedFeature.eventId}-learn-more`,
|
||||
'ai-landing-hero-learn-more',
|
||||
'ai-landing'
|
||||
)
|
||||
}
|
||||
>
|
||||
Learn more about {selectedFeature.title.toLowerCase()}
|
||||
<motion.span
|
||||
className="inline-block"
|
||||
animate={{ x: 0 }}
|
||||
whileHover={{ x: 4 }}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</a>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Features Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5, duration: 0.6 }}
|
||||
className="w-full flex-auto"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{aiFeatures.map((feature, index) => {
|
||||
const Icon = feature.icon;
|
||||
const isSelected = selectedFeature.id === feature.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={feature.id}
|
||||
onClick={() => setSelectedFeature(feature)}
|
||||
className={cx(
|
||||
'group flex w-full gap-4 rounded-lg p-4 text-left transition-all duration-200',
|
||||
isSelected
|
||||
? 'bg-blue-50 ring-2 ring-blue-500 dark:bg-blue-950/50 dark:ring-blue-400'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-800'
|
||||
)}
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: isSelected ? 1.1 : 1,
|
||||
rotate: isSelected ? 5 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
>
|
||||
<Icon
|
||||
aria-hidden="true"
|
||||
className={cx(
|
||||
'size-6 shrink-0 transition-colors',
|
||||
isSelected
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-blue-500'
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4
|
||||
className={cx(
|
||||
'relative text-base font-medium leading-6 transition-colors',
|
||||
isSelected
|
||||
? 'text-blue-900 dark:text-blue-100'
|
||||
: 'text-slate-900 group-hover:text-blue-600 dark:text-slate-100 dark:group-hover:text-blue-400'
|
||||
)}
|
||||
>
|
||||
{feature.title}
|
||||
<motion.span
|
||||
className={cx(
|
||||
'ml-1 transition-opacity',
|
||||
isSelected
|
||||
? 'opacity-100'
|
||||
: 'opacity-0 group-hover:opacity-100'
|
||||
)}
|
||||
animate={{ x: isSelected ? 4 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</h4>
|
||||
<p
|
||||
className={cx(
|
||||
'mt-2 text-sm leading-6 transition-colors',
|
||||
isSelected
|
||||
? 'text-blue-700 dark:text-blue-200'
|
||||
: 'text-slate-600 dark:text-slate-400'
|
||||
)}
|
||||
>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.8, duration: 0.5 }}
|
||||
className="mt-8 flex justify-start"
|
||||
>
|
||||
<ButtonLink
|
||||
href="/features/enhance-AI#setting-up-nx-mcp"
|
||||
variant="primary"
|
||||
size="default"
|
||||
title="Enhance your AI assistant"
|
||||
onClick={() =>
|
||||
sendCustomEvent(
|
||||
'ai-landing-enhance-click',
|
||||
'ai-landing-hero',
|
||||
'ai-landing'
|
||||
)
|
||||
}
|
||||
>
|
||||
Enhance your AI assistant
|
||||
</ButtonLink>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VideoModal
|
||||
isOpen={isOpen}
|
||||
onClose={() => setIsOpen(false)}
|
||||
videoUrl={selectedFeature.videoUrl}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
308
nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx
Normal file
308
nx-dev/ui-ai-landing-page/src/lib/problem-statement.tsx
Normal file
@ -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 (
|
||||
<section className={`py-12 ${className || ''}`}>
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mb-12 text-left">
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Your AI is blind to your workspace architecture
|
||||
</SectionHeading>
|
||||
|
||||
<p className="mt-4 text-lg text-slate-500 dark:text-slate-400">
|
||||
As monorepos scale, AI tools become progressively less effective
|
||||
without true workspace understanding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-8 gap-y-4 md:grid-cols-2">
|
||||
{/* Left Column - Problems */}
|
||||
<div>
|
||||
<h3 className="mb-3 text-lg font-bold text-slate-900 dark:text-white">
|
||||
The challenges
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<circle cx="5" cy="5" r="2" />
|
||||
<circle cx="19" cy="5" r="2" />
|
||||
<circle cx="5" cy="19" r="2" />
|
||||
<circle cx="19" cy="19" r="2" />
|
||||
<path d="M7 5H17" />
|
||||
<path d="M5 7V17" />
|
||||
<path d="M7 19H17" />
|
||||
<path d="M19 7V17" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Limited context
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
LLMs only see individual files, missing the architectural
|
||||
relationships in large monorepos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<path d="M14 3V7C14 7.55228 14.4477 8 15 8H19" />
|
||||
<path d="M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H14L19 8V19C19 20.1046 18.1046 21 17 21Z" />
|
||||
<path d="M9 17H15" />
|
||||
<path d="M9 13H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Inconsistent output
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
AI generates code that doesn't follow team standards or may
|
||||
break components it can't see.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<circle cx="12" cy="8" r="3" />
|
||||
<circle cx="6" cy="16" r="2" />
|
||||
<circle cx="18" cy="16" r="2" />
|
||||
<path d="M9.5 9.5L7 14" strokeLinecap="round" />
|
||||
<path d="M14.5 9.5L17 14" strokeLinecap="round" />
|
||||
<path d="M8 16L16 16" strokeLinecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
No workspace awareness
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
AI can't understand project dependencies, ownership, or
|
||||
cross-project integration points.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||
<path
|
||||
d="M6 10L10 14L6 18"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M12 18H18" strokeLinecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Manual context burden
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Developers must repeatedly provide the same contextual
|
||||
information about project structure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Solutions */}
|
||||
<div>
|
||||
<h3 className="mb-3 text-lg font-bold text-slate-900 dark:text-white">
|
||||
How Nx helps
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-green-600 dark:text-green-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<circle cx="5" cy="5" r="2" />
|
||||
<circle cx="19" cy="5" r="2" />
|
||||
<circle cx="5" cy="19" r="2" />
|
||||
<circle cx="19" cy="19" r="2" />
|
||||
<path d="M7 5H17" />
|
||||
<path d="M5 7V17" />
|
||||
<path d="M7 19H17" />
|
||||
<path d="M19 7V17" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Architectural awareness
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Move from file-level to workspace-level understanding with
|
||||
rich project relationship metadata.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-green-600 dark:text-green-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<path d="M14 3V7C14 7.55228 14.4477 8 15 8H19" />
|
||||
<path d="M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H14L19 8V19C19 20.1046 18.1046 21 17 21Z" />
|
||||
<path d="M9 17H15" />
|
||||
<path d="M9 13H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Predictable + intelligent
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Combine consistent generators with AI customization that
|
||||
follows team standards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-green-600 dark:text-green-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
d="M12 2L2 7L12 12L22 7L12 2Z"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 17L12 22L22 17"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 12L12 17L22 12"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Integrated workflows
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Connect editor, terminal, CI, and AI for truly context-aware
|
||||
assistance across your entire workspace.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-green-600 dark:text-green-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
d="M6 6L14 6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 10H18"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 14H18"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 18H18"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M2 21.4V2.6C2 2.26863 2.26863 2 2.6 2H21.4C21.7314 2 22 2.26863 22 2.6V21.4C22 21.7314 21.7314 22 21.4 22H2.6C2.26863 22 2 21.7314 2 21.4Z" />
|
||||
<path
|
||||
d="M6 18V14L8 16L10 14V18"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium leading-tight text-slate-900 dark:text-slate-100">
|
||||
Up-to-Date Documentation
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Access current docs and best practices for accurate,
|
||||
workspace-specific guidance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
217
nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx
Normal file
217
nx-dev/ui-ai-landing-page/src/lib/technical-implementation.tsx
Normal file
@ -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 (
|
||||
<section
|
||||
className={`bg-gradient-to-b from-white to-slate-50 py-12 dark:from-slate-900 dark:to-slate-800 ${
|
||||
className || ''
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mb-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12">
|
||||
{/* Left Side - Title and How It Works */}
|
||||
<div className="flex flex-col justify-center">
|
||||
<h2 className="mb-8 text-left text-3xl font-bold text-slate-900 md:text-4xl dark:text-white">
|
||||
Powered by Nx workspace intelligence
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start">
|
||||
<div className="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400">
|
||||
<span className="text-lg font-semibold">1</span>
|
||||
</div>
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-slate-600 dark:text-slate-300">
|
||||
Nx daemon runs in the background, maintaining up-to-date
|
||||
workspace metadata
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400">
|
||||
<span className="text-lg font-semibold">2</span>
|
||||
</div>
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-slate-600 dark:text-slate-300">
|
||||
This rich contextual data is processed and optimized for AI
|
||||
consumption
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400">
|
||||
<span className="text-lg font-semibold">3</span>
|
||||
</div>
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-slate-600 dark:text-slate-300">
|
||||
Nx Console exposes the data to your AI assistant via an MCP
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="relative h-[300px] w-full md:h-[400px] lg:h-[450px]">
|
||||
<Image
|
||||
src="/images/nx-console/nx-mcp-landingpage-img.avif"
|
||||
alt="Nx MCP visualization"
|
||||
fill
|
||||
style={{ objectFit: 'contain' }}
|
||||
className="rounded-lg"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-8 lg:mt-12">
|
||||
{/* Flow diagram with connected boxes */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
|
||||
{/* Nx Console Box */}
|
||||
<div className="relative rounded-xl border border-slate-200 bg-slate-50 p-6 shadow-md dark:border-slate-700 dark:bg-slate-800/50">
|
||||
<div className="mb-4 flex items-center">
|
||||
<div className="mr-4 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white">
|
||||
<NxConsoleSmallIcon className="h-24 w-24" />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white">
|
||||
Start with Nx Console
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-300">
|
||||
Install the Nx Console Extension, available for VSCode, Cursor,
|
||||
and IntelliJ.
|
||||
</p>
|
||||
|
||||
{/* Right arrow - only visible on md and larger screens */}
|
||||
<div className="absolute -right-5 top-1/2 hidden -translate-y-1/2 md:block">
|
||||
<svg
|
||||
width="40"
|
||||
height="24"
|
||||
viewBox="0 0 40 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-blue-500 dark:text-blue-400"
|
||||
>
|
||||
<path
|
||||
d="M39.0607 13.0607C39.6464 12.4749 39.6464 11.5251 39.0607 10.9393L29.5147 1.3934C28.9289 0.807611 27.9792 0.807611 27.3934 1.3934C26.8076 1.97919 26.8076 2.92893 27.3934 3.51472L35.8787 12L27.3934 20.4853C26.8076 21.0711 26.8076 22.0208 27.3934 22.6066C27.9792 23.1924 28.9289 23.1924 29.5147 22.6066L39.0607 13.0607ZM0 13.5H38V10.5H0V13.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Down arrow - only visible on small screens */}
|
||||
<div className="absolute -bottom-8 left-1/2 block -translate-x-1/2 md:hidden">
|
||||
<svg
|
||||
width="24"
|
||||
height="40"
|
||||
viewBox="0 0 24 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-blue-500 dark:text-blue-400"
|
||||
>
|
||||
<path
|
||||
d="M13.0607 39.0607C12.4749 39.6464 11.5251 39.6464 10.9393 39.0607L1.3934 29.5147C0.807611 28.9289 0.807611 27.9792 1.3934 27.3934C1.97919 26.8076 2.92893 26.8076 3.51472 27.3934L12 35.8787L20.4853 27.3934C21.0711 26.8076 22.0208 26.8076 22.6066 27.3934C23.1924 27.9792 23.1924 28.9289 22.6066 29.5147L13.0607 39.0607ZM13.5 0V38H10.5V0H13.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MCP Box */}
|
||||
<div className="relative rounded-xl border border-slate-200 bg-slate-50 p-6 shadow-md dark:border-slate-700 dark:bg-slate-800/50">
|
||||
<div className="mb-4 flex items-center">
|
||||
<div className="mr-4 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 text-white">
|
||||
<ModelContextProtocolIcon className="h-8 w-8" />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white">
|
||||
Nx MCP
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-300">
|
||||
Nx Console automatically registers its MCP server or you can
|
||||
configure it in any MCP compatible client.
|
||||
</p>
|
||||
|
||||
{/* Right arrow - only visible on md and larger screens */}
|
||||
<div className="absolute -right-5 top-1/2 hidden -translate-y-1/2 md:block">
|
||||
<svg
|
||||
width="40"
|
||||
height="24"
|
||||
viewBox="0 0 40 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-blue-500 dark:text-blue-400"
|
||||
>
|
||||
<path
|
||||
d="M39.0607 13.0607C39.6464 12.4749 39.6464 11.5251 39.0607 10.9393L29.5147 1.3934C28.9289 0.807611 27.9792 0.807611 27.3934 1.3934C26.8076 1.97919 26.8076 2.92893 27.3934 3.51472L35.8787 12L27.3934 20.4853C26.8076 21.0711 26.8076 22.0208 27.3934 22.6066C27.9792 23.1924 28.9289 23.1924 29.5147 22.6066L39.0607 13.0607ZM0 13.5H38V10.5H0V13.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Down arrow - only visible on small screens */}
|
||||
<div className="absolute -bottom-8 left-1/2 block -translate-x-1/2 md:hidden">
|
||||
<svg
|
||||
width="24"
|
||||
height="40"
|
||||
viewBox="0 0 24 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-blue-500 dark:text-blue-400"
|
||||
>
|
||||
<path
|
||||
d="M13.0607 39.0607C12.4749 39.6464 11.5251 39.6464 10.9393 39.0607L1.3934 29.5147C0.807611 28.9289 0.807611 27.9792 1.3934 27.3934C1.97919 26.8076 2.92893 26.8076 3.51472 27.3934L12 35.8787L20.4853 27.3934C21.0711 26.8076 22.0208 26.8076 22.6066 27.3934C23.1924 27.9792 23.1924 28.9289 22.6066 29.5147L13.0607 39.0607ZM13.5 0V38H10.5V0H13.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced LLM Workflow Box */}
|
||||
<div className="rounded-xl border border-slate-200 bg-slate-50 p-6 shadow-md dark:border-slate-700 dark:bg-slate-800/50">
|
||||
<div className="mb-4 flex items-center">
|
||||
<div className="mr-4 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white">
|
||||
Enhanced LLM workflow
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-300">
|
||||
Your existing AI tools understand your workspace architecture
|
||||
without changing your development habits.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
20
nx-dev/ui-ai-landing-page/tsconfig.json
Normal file
20
nx-dev/ui-ai-landing-page/tsconfig.json
Normal file
@ -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"
|
||||
}
|
||||
23
nx-dev/ui-ai-landing-page/tsconfig.lib.json
Normal file
23
nx-dev/ui-ai-landing-page/tsconfig.lib.json
Normal file
@ -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"]
|
||||
}
|
||||
22
nx-dev/ui-ai-landing-page/tsconfig.spec.json
Normal file
22
nx-dev/ui-ai-landing-page/tsconfig.spec.json
Normal file
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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';
|
||||
|
||||
21
nx-dev/ui-icons/src/lib/ai/model-context-protocol.tsx
Normal file
21
nx-dev/ui-icons/src/lib/ai/model-context-protocol.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { FC, SVGProps } from 'react';
|
||||
|
||||
/**
|
||||
* Model Context Protocol (MCP) icon.
|
||||
*/
|
||||
export const ModelContextProtocolIcon: FC<SVGProps<SVGSVGElement>> = (
|
||||
props
|
||||
) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
{...props}
|
||||
>
|
||||
<title>ModelContextProtocol</title>
|
||||
<path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path>
|
||||
<path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path>
|
||||
</svg>
|
||||
);
|
||||
@ -130,3 +130,19 @@ export const NxConsoleIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const NxConsoleSmallIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.2536 9H4v5h1.2536v-2.8855L7.23221 14h1.22024V9H7.23221v2.9515L5.2536 9Zm6.4819 0h-1.3251l1.7098 2.4731L10.3358 14h1.4019l1.7075-2.527L11.7355 9ZM19 13.0969h-3.6841V14H19v-.9031Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
222
tools/ai-landing-tasks.md
Normal file
222
tools/ai-landing-tasks.md
Normal file
@ -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
|
||||
287
tools/nx-ai-landing-page-copy.md
Normal file
287
tools/nx-ai-landing-page-copy.md
Normal file
@ -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.
|
||||
@ -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"],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user