Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
id: AI development tools
section: AI
sortValue: 3
---

The [PatternFly AI helpers](https://github.com/patternfly/ai-helpers) marketplace is an open source collection of plugins for AI coding tools like [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [Cursor](https://www.cursor.com/). These plugins provide development knowledge and skills tailored to PatternFly workflows, so your AI tools generate more accurate, best-practice code out of the box.

Whether you're building PatternFly UIs, prototyping in code, or evaluating AI tooling for your team, AI helpers can help.

With AI helpers installed, you can expect:

- More consistent use of PatternFly components and patterns.
- Faster prototyping and development cycles.
- Fewer common implementation mistakes.
- Built-in awareness of PatternFly coding standards, accessibility, and design tokens.

## What's available

The marketplace is organized into plugins, each focused on a different area of PatternFly development. Here's what's currently available at a high level:

| Plugin | What it helps you do |
| :--- | :--- |
| **React** | Build and test React components following PatternFly coding standards and component structure best practices. |
| **Design foundations** | Work with design tokens, icons, colors, and spacing. Audit and validate token usage. |
| **Accessibility** | Audit and document accessibility across your project. |
| **Figma** | Review Figma design changes and generate code update checklists. |
| **Issue management** | Create, triage, and track issues across PatternFly repositories. Primarily for PatternFly maintainers. |
| **Repo management** | Manage releases, analyze dependencies, and maintain repository health. Primarily for PatternFly maintainers. |

Plugins are actively maintained and evolving. For the full, always-current list of every skill and agent available, see the [plugin catalog](https://github.com/patternfly/ai-helpers/blob/main/PLUGINS.md).

## Getting started

### Claude Code

```bash
# Add the marketplace
/plugin marketplace add patternfly/ai-helpers

# Install the plugins you need
/plugin install react@ai-helpers
```

After installation, the plugin's skills and knowledge are available in any project.

### Cursor

Cursor can discover plugins from `.cursor-plugin/` directories. If you also have Claude Code installed, Cursor may pick up installed plugins automatically via its third-party plugin settings. See the [AI helpers README](https://github.com/patternfly/ai-helpers#cursor) for details.

### PatternFly MCP server (recommended)

For the best experience, also set up the [PatternFly MCP server](https://github.com/patternfly/patternfly-mcp), which gives AI tools direct access to PatternFly component documentation, prop schemas, and design guidelines. Plugins work without it, but provide stronger results when it's available.

## Contributing

The AI helpers marketplace is open source and welcomes contributions from the community. Whether you want to add a new skill to an existing plugin, create an entirely new plugin, or improve the documentation that AI tools rely on, there's a place for your contribution.

To get started, check out the [contributing guide](https://github.com/patternfly/ai-helpers/blob/main/CONTRIBUTING.md) and the [step-by-step skill creation guide](https://github.com/patternfly/ai-helpers/blob/main/CONTRIBUTING-SKILLS.md).
31 changes: 16 additions & 15 deletions packages/documentation-site/patternfly-docs/content/AI/ai.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@ id: Overview
title: AI overview
section: AI
sortValue: 1
---
---
import { Alert, AlertActionLink, Accordion, AccordionItem, AccordionContent, AccordionToggle, Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox, Divider, DescriptionList, DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, Grid, GridItem} from '@patternfly/react-core';
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';

When used thoughtfully, **AI** can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. Regardless of the AI resources or workflows you use, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practices on this page.
When used thoughtfully, **AI** can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. Regardless of the AI resources or workflows you use, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practices on this page.

## PatternFly AI resources

The following guides are intended to help you integrate AI into your workflows as you design and develop products with:

- **[Design language](/ai/design-language):** The foundational design decisions that guide the use of AI features in products.
- **[Design language](/ai/design-language):** The foundational design decisions that guide the use of AI features in products.
- **[Rapid prototyping](/ai/rapid-prototyping):** Guidance for generating and iterating AI features during early stages of design.
- **[AI development tools](/ai/ai-development-tools):** Tools and plugins that help AI coding assistants generate more accurate, PatternFly-compliant code.
- **[AI-assisted code migration](/ai/ai-assisted-code-migration):** Guidance for using AI to speed up and simplify codebase migrations.
- **[Conversational design principles](/ai/conversation-design):** Guidance for designing effective and human-centered AI conversations.
- **[Generative UIs](/ai/generative-uis/overview):** Proof-of-concept resources for creating UIs that can utilize AI to dynamically generate elements as needed.
Expand All @@ -32,7 +33,7 @@ When using PatternFly to design Red Hat products, you *must* adhere to AI-relate
- Gain approval before using AI technology for business related to Red Hat.
- Gain approval before using certain information as input for AI technology.
- Review, test, and validate generative AI model output.
- Always consider data privacy when entering company or personal information into AI resources, and ensure compliance with all company data protection policies and rules around AI usage.
- Always consider data privacy when entering company or personal information into AI resources, and ensure compliance with all company data protection policies and rules around AI usage.

<Button component="a" href="https://source.redhat.com/?signin&r=%2fdepartments%2flegal%2fglobal_legal_compliance%2fcompliance_folder%2fpolicy_on_the_use_of_ai_technologypdf" target="_blank" variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
View policy details (requires Red Hat login)
Expand All @@ -59,7 +60,7 @@ These five core principles create our ethics-first framework, which should guide
<CardTitle>Explainability</CardTitle>
</CardHeader>
<CardBody>
AI systems should be easy to **explain** and comprehend. Humans should be able to easily perceive, recognize, and understand their decision-making processes. Imperceptible AI is *not* ethical.
AI systems should be easy to **explain** and comprehend. Humans should be able to easily perceive, recognize, and understand their decision-making processes. Imperceptible AI is *not* ethical.
</CardBody>
</Card>
</GridItem>
Expand Down Expand Up @@ -89,7 +90,7 @@ These five core principles create our ethics-first framework, which should guide
<CardTitle>Human-centeredness</CardTitle>
</CardHeader>
<CardBody>
At their core, AI systems must prioritize a **human-centered** approach, focusing on addressing real needs and empowering humans. They should emphasize accessibility, transparency, user autonomy, and privacy. To build trust and promote understanding, these systems should provide users with intuitive interfaces and clear communication of intentions and capabilities.
At their core, AI systems must prioritize a **human-centered** approach, focusing on addressing real needs and empowering humans. They should emphasize accessibility, transparency, user autonomy, and privacy. To build trust and promote understanding, these systems should provide users with intuitive interfaces and clear communication of intentions and capabilities.
</CardBody>
</Card>
</GridItem>
Expand All @@ -99,7 +100,7 @@ These five core principles create our ethics-first framework, which should guide

When designing, developing, and using AI, consider the following ethical and best-practice guidelines.

### Document your value proposition
### Document your value proposition

Every AI product should begin with a documented user need and problem statement. Before choosing a technology, identify the specific gap in the current experience that AI is uniquely qualified to fill.

Expand All @@ -111,7 +112,7 @@ Not all uses of AI are good for your UX strategy. Conduct research to identify r

#### When to use AI
- **Improve productivity:** Streamlining onboarding, data entry, or routine job tasks.
- **Offer better personalization:** Tailoring search results or dashboard views to a user's unique history.
- **Offer better personalization:** Tailoring search results or dashboard views to a user's unique history.
- **Support sustainability:** Making design and development processes more repeatable.

#### Choosing the right AI technology
Expand All @@ -122,17 +123,17 @@ Some AI features are better suited for different types of AI, and they should al
| **Generative AI** | Summarization, creative brainstorming, and conversational support. | **Lower:** Best when a "human-in-the-loop" can verify and edit the output. |
| **Predictive or structured AI** | Data classification, trend forecasting, and risk scoring. | **Higher:** Best for tasks requiring high precision and repeatable, data-driven outcomes. |

## Ethical design and compliance checklist
## Ethical design and compliance checklist

When working on an AI system, you should consciously check that you're in alignment with the core principles and best practices of PatternFly and Red Hat.

To help teams navigate best practices and requirements, we offer a guiding checklist that covers accountability, transparency, and fairness standards. Note that this resource is open to change and is not exhaustive. Always ensure you're following the most up-to-date industry standards and Red Hat AI requirements.
To help teams navigate best practices and requirements, we offer a guiding checklist that covers accountability, transparency, and fairness standards. Note that this resource is open to change and is not exhaustive. Always ensure you're following the most up-to-date industry standards and Red Hat AI requirements.

<Button
variant="secondary"
icon={<DownloadIcon />}
component="a"
href="https://raw.githubusercontent.com/patternfly/patternfly-org/main/packages/documentation-site/patternfly-docs/content/AI/Red-Hat-AI-Ethics-Compliance-Checklist.pdf"
<Button
variant="secondary"
icon={<DownloadIcon />}
component="a"
href="https://raw.githubusercontent.com/patternfly/patternfly-org/main/packages/documentation-site/patternfly-docs/content/AI/Red-Hat-AI-Ethics-Compliance-Checklist.pdf"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,52 +7,14 @@ sortValue: 2

# Enhancing existing projects

This guide provides instructions for integrating AI-assisted PatternFly development tools into your existing codebase.
This guide covers how to integrate AI-assisted PatternFly development tools into an existing codebase.

Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/ai/rapid-prototyping/#what-is-vibe-coding) for effective AI-assisted development.

If you need to start a new project, follow our guidelines for [starting a new prototype](/ai/rapid-prototyping/new-prototypes).

## Why enhance existing projects?
## How to set up

If you have an existing codebase that you'd like to enhance with AI-driven PatternFly development, you can integrate the **[patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding)** directly into your project. This tool can be pulled into any existing codebase to:
AI coding tools work best when they have context about the frameworks and patterns your project uses. The [PatternFly AI helpers](https://github.com/patternfly/ai-helpers) marketplace plugins give your AI tools this context, leading to more accurate component suggestions, better adherence to design patterns, and improved consistency across your codebase.

- Improve future AI-driven development sessions.
- Provide AI tools with PatternFly-specific context and best practices.
- Enable more accurate code generation for PatternFly components.
- Reduce common implementation mistakes.

## The patternfly-ai-coding tool

The [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding) is a collection of AI-friendly documentation files designed to guide Large Language Models and AI development assistants toward successful PatternFly implementation.

Once you've integrated this tool, you'll notice a variety of benefits for AI-assisted rapid prototyping, including:
- More accurate PatternFly component suggestions.
- Better adherence to PatternFly design patterns.
- Reduced need for manual corrections.
- Improved consistency across your codebase.
- Tools that evolve to better cater to your specific project needs.

### What it includes

- **AI-friendly knowledge base**: Current PatternFly documentation formatted for optimal AI consumption.
- **Relevant examples**: Code samples and implementation patterns.
- **Common pitfalls**: Documentation of frequent mistakes and how to avoid them.
- **Best practices**: Proven approaches for PatternFly development.
- **Cross-linked files**: Interconnected documentation that helps AI tools quickly find relevant information.
- **Cursor rules**: Special configuration files that flag important PatternFly context for the Cursor AI editor.

### How it works

1. The tool provides static files (primarily markdown) that contain comprehensive PatternFly guidance.
2. These files are loaded into a development project alongside your code.
3. AI development tools can reference this context when generating PatternFly components.
4. The result is more accurate, PatternFly-compliant code generation.

## Set up patternfly-ai-coding

1. Download the [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding) from the repository.
2. Copy the tool files into your existing project structure.
3. Configure your AI development environment to recognize the new context files.
4. Test the integration by generating some PatternFly components.
5. Customize as needed for your specific project requirements.
The plugins install into your AI tool, so there are no project dependencies to manage. For setup instructions, available plugins, and the recommended MCP server, see the [AI development tools](/ai/ai-development-tools) page.
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,21 @@ For new prototypes, we recommend using the [patternfly-react-seed (ai_enabled br

The patternfly-react-seed ai_enabled branch comes pre-configured with:

- A basic PatternFly React application structure.
- The [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding) already integrated and ready to use.
- Essential dependencies and build configuration.
- A working PatternFly React application structure with essential dependencies and build configuration.
- AI-friendly documentation that provides context about PatternFly components and best practices.
- Example components and patterns to reference.

### Set up the patternfly-react-seed

1. Clone or download the patternfly-react-seed repository using the ai_enabled branch.
2. Install dependencies according to [the project's README](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled?tab=readme-ov-file#patternfly-seed).
3. Start the development server.
4. Begin prototyping with your AI development tools.
3. Install [AI helpers](https://github.com/patternfly/ai-helpers) marketplace plugins to give your AI tools additional context and skills for PatternFly development. See the [AI development tools](/ai/ai-development-tools) page for setup instructions.
4. Start the development server.
5. Begin prototyping with your AI development tools.

## How to prototype

Once you've installed and set up the patternfly-react-seed ai_enabled branch, with the [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding), follow these steps to begin prototyping:
Once you've set up the patternfly-react-seed and installed the AI helpers plugins, follow these steps to begin prototyping:

1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/ai/rapid-prototyping/#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
2. **Leverage AI assistance**: Use AI tools to generate PatternFly components based on your requirements, communicating through natural language descriptions of user needs and design intent.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@ Rapid prototyping with PatternFly code offers several key benefits:

## Get started

For the best results with AI-assisted prototyping, install the [PatternFly AI helpers](/ai/ai-development-tools) marketplace plugins. These give your AI tools additional knowledge and skills that lead to more accurate code generation.

Choose your path based on your current situation:

- **[Starting a new prototype](/ai/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
- **[Enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.
- **[Enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects):** Add AI helpers to your current codebase.

## Best practices for AI-assisted prototyping

Expand All @@ -43,7 +45,7 @@ When working with AI tools using the vibe coding approach:
### Vibe coding examples

| **Before** | **After** |
| --- | --- |
| --- | --- |
| "Create a data table with pagination and sorting" | "Users need to quickly scan through a large dataset to find specific items. They should be able to easily narrow down results and understand the data hierarchy at a glance. The experience should feel efficient and not overwhelming." |
| "Add a modal with a form" | "When users click this action, they need a focused space to input information without losing context of what they were doing. The interaction should feel lightweight but important." |

Expand All @@ -54,4 +56,4 @@ This rapid prototyping approach is an evolving experiment. We'd love to learn fr
- Share your feedback and experiences on our [GitHub discussions board](https://github.com/orgs/patternfly/discussions).
- Connect with the community on our [PatternFly Slack workspace](https://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ).

This guidance represents the first step in maturing AI-assisted PatternFly prototyping. As the process evolves, we'll continue to refine tools and recommendations based on community feedback and real-world usage.
This guidance represents the first step in maturing AI-assisted PatternFly prototyping. As the process evolves, we'll continue to refine tools and recommendations based on community feedback and real-world usage.
Loading