diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index dcce5c5637..b1e5054793 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -10,7 +10,7 @@ "build": "yarn build:ts && pf-docs-framework build all", "build:server": "pf-docs-framework build server", "build:client": "pf-docs-framework build client", - "build:ts": "tsc --project patternfly-docs/content/foundations-and-styles/styles/motion/tsconfig.json && tsc --project patternfly-docs/content/AI/Compass/tsconfig.json", + "build:ts": "tsc --project patternfly-docs/content/foundations-and-styles/styles/motion/tsconfig.json && tsc --project patternfly-docs/content/AI/generative-uis/compass/tsconfig.json", "clean": "rimraf -rf .cache public size-plugin.json patternfly-docs/generated/**/*.js", "develop": "yarn build:ts && pf-docs-framework start", "generate": "pf-docs-framework generate", diff --git a/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md b/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md deleted file mode 100644 index a1b6f17586..0000000000 --- a/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: Overview -title: Generative UIs overview -section: AI -subsection: Generative UIs -sortValue: 1 ---- - -import { Alert } from "@patternfly/react-core"; - -## What is generative UI? - -**Generative UI (GenUI)** refers to a user interface design approach where AI is leveraged to dynamically create and adapt UI elements based on context, user needs, and data. Unlike traditional, static UIs, GenUI can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. - ---- - -## Compass: PatternFly's GenUI exploration - -Generative UI represents a significant opportunity for PatternFly to explore new patterns, layouts, and styles that support AI-driven interface generation. PatternFly has been calling this proof of concept Compass. It investigates how the design system can evolve to support generative UI use cases. - -Compass is best suited for use as a POC in other proof-of-concept generative UI use cases. It is not yet production quality code and should be used for exploration and experimentation purposes only. - -### AI-enabled seed app - -We are creating an [AI-enabled seed app](https://github.com/patternfly/patternfly-react-seed/tree/compass_theme) that you can use to create your own PatternFly Compass-based POC. The seed app includes the Compass layout fully wired out with all styles set up, providing a solid foundation that you can build on top of. It can be leveraged with AI tools like Cursor or Claude Code to build out your own POC, making it easier to experiment with generative UI patterns and explore new use cases. - -### What does Compass include? - -To explore Compass and its features, take a look at a number of our full page demos: -- [Full page demo with card view and table layouts](/ai/generative-uis/compass#card-and-data-view-layout) -- [Full page demo with dashboard layout](/ai/generative-uis/compass/org-demos#dashboard-layout) -- [Static, full page HTML demo with multiple content sections](/ai/generative-uis/compass/html-demos#multiple-sections) -- [Static, full page HTML demo with drawer](/ai/generative-uis/compass/html-demos#with-drawer) - -To support the different ways you might use Compass, we've introduced several new capabilities to PatternFly: - -- **Design tokens**: New design tokens that enable: - - Glass-like visual effects - - Background and border gradients - - Additional smooth animations - - Background image explorations -- [**Compass layout component**](/ai/generative-uis/compass): A new layout component designed specifically for generative UI patterns -- **Additional components and component variants**: - - Transparency & Effects: - - `isPlain` makes cards, data lists, and tables transparent to allow background effects (like a glass look) to show through. - - Layout & Navigation: - - `isVertical` changes action lists to a vertical layout, suitable for sidebars. - - `isNav` applies a new style to tabs, optimized for top-site navigation bars. - - Shape & Form: - - `isCircle` creates circular buttons and icon menu toggles, and pill-shaped standard menu toggles. - - `isPill` gives the drawer (slide-out panel) a rounded, floating look. - - AI Indicators: - - `isThinking` adds a pulsing animation to show a system is actively processing (like an AI "thinking"). - - `hasAiIndicator` adds a gradient border to visually highlight AI-related content. - -### Accessibility focus - -Accessibility has been a major focus throughout the Compass exploration. As generative UIs introduce new interaction patterns and visual styles, ensuring these experiences remain accessible to all users is paramount. - -### Integration with react-flow - -Some stakeholdres have been experimenting with Generative UI use cases using React Flow. The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. We have created some [documentation and a demo](/ai/generative-uis/react-flow) for integrations with PatternFly as a POC for these use cases. - -### Current status - -Compass is still under development, with new components being built, evaluated, and refined based on feedback. As we hear from your experiments and learn more about GenUI patterns, the design of Compass will continuously evolve to support practical applications. - -As of Nov 10, 2025, these are the prereleases available for building out Compass based UI POCs. - -- "@patternfly/patternfly": "6.5.0-prerelease.23" -- "@patternfly/react-charts": "8.5.0-prerelease.4" -- "@patternfly/react-code-editor": "6.5.0-prerelease.11" -- "@patternfly/react-core": "6.5.0-prerelease.11" -- "@patternfly/react-drag-drop": "6.5.0-prerelease.11" -- "@patternfly/react-icons": "6.5.0-prerelease.4" -- "@patternfly/react-styles": "6.5.0-prerelease.4" -- "@patternfly/react-table": "6.5.0-prerelease.11" -- "@patternfly/react-tokens": "6.5.0-prerelease.4" -- "@patternfly/react-templates": "6.5.0-prerelease.11" -- "@patternfly/chatbot": "6.5.0-prerelease.19" diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/about-generative-ui.md b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/about-generative-ui.md new file mode 100644 index 0000000000..87a80f57d6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/about-generative-ui.md @@ -0,0 +1,89 @@ +--- +id: Overview +title: Generative UIs overview +section: AI +subsection: Generative UIs +sortValue: 1 +--- + +import { Alert } from "@patternfly/react-core"; + +## What is generative UI? + +**Generative UI (GenUI)** refers to a user interface design approach where AI is leveraged to dynamically create and adapt UI elements based on context, user needs, and data. Unlike traditional, static UIs, GenUI can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. + +--- + +## Compass: PatternFly's GenUI exploration + +Compass is best suited for use in proof-of-concept generative UI use cases. It is not yet production quality code and should be used for exploration and experimentation purposes only. + +GenUI represents a significant opportunity for PatternFly to explore new patterns, layouts, and styles that support consistent AI-driven interface generation. To explore how we can enable GenUI in PatternFly, we've created a proof-of-concept called "compass". + +**Compass** is a new layout, built with PatternFly styles and design tokens, but optimized to support dynamic, personalized information. + +### What does compass look like? + +Compass places a main section in the center of the screen and surrounds it with a header, a footer, and sidebars on either side. compass screens are conversation-focused, utilizing an interactive message bar in the footer to drive interactions with the AI model. The main section displays components dynamically generated based on the user's request. + +To explore compass and its features, take a look at the [compass component documentation](/ai/generative-uis/compass), which includes the following full-page demos: +- [Conversation-focused, full-page demo with card view and table layouts](/ai/generative-uis/compass#card-and-data-view-layout) +- [Conversation-focused, full-page demo with dashboard layout](/ai/generative-uis/compass/org-demos#dashboard-layout) +- [Static, full-page HTML demo with multiple content sections](/ai/generative-uis/compass/html-demos#multiple-sections) +- [Static, full-page HTML demo with drawer](/ai/generative-uis/compass/html-demos#with-drawer) + +### What does compass include? + +To support the different ways you might use compass, we've introduced several new capabilities to PatternFly: + +- **Design tokens**: New design tokens that enable the following styles: + - Glass-like visual effects + - Background and border gradients + - Additional micro animations + - New background image options +- [**Compass layout component**](/ai/generative-uis/compass): A new layout, designed specifically for GenUI patterns, with a main content section, header, footer, and sidebars. +- **New modifiers for existing components**: These new props enable different compass effects and are documented across component documentation where they can be used: + - Transparency: + - `isPlain` makes cards, data lists, and tables transparent. This allows backgrounds to be visible through components, creating the modern, glass-like visual effect. + - Layout and navigation: + - `isVertical` changes action lists to a vertical layout. This enables compass's sidebars. + - `isNav` places tabs within a pill-shaped container, so they can better function as top navigation. + - Shape and form: + - `isCircle` creates circular buttons and icon menu toggles, and pill-shaped standard menu toggles. + - `isPill` gives a drawer a rounded, floating look. + - AI indicators: + - `isThinking` adds a pulsing animation to a component (like a text input) to show a system is actively processing (like an AI "thinking"). + - `hasAiIndicator` adds a gradient border to a component (like a text input) to visually highlight AI-related content. + +### Accessibility consideration + +Because GenUIs introduce new interaction patterns and visual styles, it is essential to ensure that GenUI experiences remain accessible to all users. To ensure designs created with compass align with the accessibility standards maintained by the rest of PatternFly, we've kept accessibility a major focus throughout the design and development of compass. + +### How do I use compass? + +For technical details and full-page demos, refer to the [compass documentation](/ai/generative-uis/compass). + +#### AI-enabled seed app + +We are creating an AI-enabled seed app in [the compass_theme branch of the patternfly-react-seed repo](https://github.com/patternfly/patternfly-react-seed/tree/compass_theme) that will make it easier for you to create your own compass-based prototypes. The seed app includes the compass layout with all styles set up, providing you with a foundation on which you can build. To build out your own proof of concept, you can leverage AI tools like Cursor or Claude Code alongside the seed app, making it easier to experiment with generative UI patterns and explore new use cases. + +#### React Flow integration + +When creating GenUI concepts with PatternFly's compass component, you might want to utilize [React Flow](https://reactflow.dev/). The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global design tokens to React Flow's own tokens to ensure consistent styling. For more information on using React Flow with compass, refer to our [React Flow documentation](/ai/generative-uis/react-flow). + +### Development status + +Compass is still under development, with new components being built, evaluated, and refined based on feedback. As we learn more about GenUI patterns and as more projects experiment with compass, the design will continuously evolve to support practical applications. + +As of Nov 19, 2025, these are the prereleases available for building out compass-based prototypes: +- `"@patternfly/patternfly": "6.5.0-prerelease.27"` +- `"@patternfly/react-charts": "8.5.0-prerelease.6"` +- `"@patternfly/react-code-editor": "6.5.0-prerelease.14"` +- `"@patternfly/react-core": "6.5.0-prerelease.14"` +- `"@patternfly/react-drag-drop": "6.5.0-prerelease.14"` +- `"@patternfly/react-icons": "6.5.0-prerelease.6"` +- `"@patternfly/react-styles": "6.5.0-prerelease.6"` +- `"@patternfly/react-table": "6.5.0-prerelease.14"` +- `"@patternfly/react-templates": "6.5.0-prerelease.14"` +- `"@patternfly/react-tokens": "6.5.0-prerelease.6"` +- `"@patternfly/chatbot": "6.5.0-prerelease.18"` \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/.gitignore b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/.gitignore similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/.gitignore rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/.gitignore diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/Compass.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/Compass.md diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassIntegrationsDemo.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/CompassIntegrationsDemo.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassReactFlowDemo.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/CompassReactFlowDemo.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/ReactFlow.md b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md similarity index 72% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/ReactFlow.md rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md index 2e90d2ac38..80f3031776 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/ReactFlow.md +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md @@ -1,11 +1,9 @@ --- -id: React flow +id: React Flow section: AI subsection: Generative UIs --- -## Demo - import { useState, memo, useCallback, useRef } from 'react'; import { @@ -23,11 +21,15 @@ import { import "@xyflow/react/dist/style.css"; import "./reactFlowOverrides.css"; -### React Flow +When creating GenUI concepts with PatternFly's compass component, you might want to utilize [React Flow](https://reactflow.dev/). The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). + +### Example + +A custom override stylesheet can assign PatternFly's global design tokens to React Flow's own tokens to ensure consistent styling. -The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. The following is a basic list of overrides used by the example, which also renders custom nodes using PatternFly's `Card` components: +This list outlines the overrides used in the following example, which also renders custom nodes using PatternFly `` components: -| React Flow token | PatternFly token suggestion | +| React Flow token | Suggested PatternFly design token | | --- | --- | | --xy-node-border-radius-default | var(--pf-t--global--border--radius--medium) | | --xy-edge-stroke-default | var(--pf-t--global--border--color--default) | diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/RHAiExperienceIcon.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/RHAiExperienceIcon.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/RHAutomationsLogo.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/RHAutomationsLogo.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/RHServerStackIcon.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/RHServerStackIcon.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/avatar.jpg b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/avatar.jpg similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/avatar.jpg rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/avatar.jpg diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/hero-bg.png b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/hero-bg.png similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/hero-bg.png rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/hero-bg.png diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/wallpaper-dark.png b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/wallpaper-dark.png similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/wallpaper-dark.png rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/wallpaper-dark.png diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/assets/wallpaper-light.png b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/wallpaper-light.png similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/assets/wallpaper-light.png rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/wallpaper-light.png diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewClusterInventory.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewClusterInventory.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewMemoryUtilization.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewMemoryUtilization.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewNetworkActivity.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewNetworkActivity.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewStorage.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewStorage.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/ClusterDetailsCard.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/cards/ClusterDetailsCard.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/RecentActivityCard.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/cards/RecentActivityCard.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/dashboard.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.tsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/dashboard.tsx rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.tsx diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/declarations.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.ts similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/declarations.ts rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.ts diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/reactFlowOverrides.css b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/reactFlowOverrides.css similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/reactFlowOverrides.css rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/reactFlowOverrides.css diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/tsconfig.json b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/tsconfig.json similarity index 100% rename from packages/documentation-site/patternfly-docs/content/AI/Compass/tsconfig.json rename to packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/tsconfig.json