From e05183b62eed71db2b2359d3edc7f1eaa7a48fe2 Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Mon, 10 Nov 2025 12:08:10 -0500
Subject: [PATCH 1/4] docs(AI): Adds PatternFly MCP documentation.
---
.../PatternFly-AI/img/claude-mcp-servers.svg | 9 ++
.../PatternFly-AI/img/cursor-mcp-settings.svg | 9 ++
.../content/PatternFly-AI/patternfly-mcp.md | 95 +++++++++++++++++++
3 files changed, 113 insertions(+)
create mode 100644 packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/claude-mcp-servers.svg
create mode 100644 packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/cursor-mcp-settings.svg
create mode 100644 packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/claude-mcp-servers.svg b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/claude-mcp-servers.svg
new file mode 100644
index 0000000000..260e54f64e
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/claude-mcp-servers.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/cursor-mcp-settings.svg b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/cursor-mcp-settings.svg
new file mode 100644
index 0000000000..0dac667e75
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/cursor-mcp-settings.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
new file mode 100644
index 0000000000..3e605d7cb0
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
@@ -0,0 +1,95 @@
+---
+id: PatternFly MCP
+section: PatternFly-AI
+---
+import '../design-guidelines/components/components.css';
+
+This guide provides an overview of the PatternFly MCP server, including its benefits and instructions for setting up the tool.
+
+For full technical documentation, setup instructions, and to contribute, visit our [PatternFly MCP GitHub Repository](https://github.com/patternfly/patternfly-mcp).
+
+## What is the PatternFly MCP?
+The **PatternFly MCP** is a new tool designed to integrate our design guidelines, component documentation, and accessibility best practices directly into your AI-powered development environment.
+
+MCP stands for Model Context Protocol, an open standard that allows AI assistants to securely and accurately access external data sources and tools. The PatternFly MCP is a server that connects your AI assistant (like those within Cursor or Claude Code) directly to official PatternFly documentation. Instead of relying on a model's potentially outdated or overgeneralized knowledge, your assistant can query the PatternFly MCP to get answers based on real, up-to-date, and verified sources.
+
+## What are the benefits of the PatternFly MCP?
+
+This tool is valuable for developers, designers, and other stakeholders, like product managers. This can look different depending on your needs, but the primary benefit is trust. The PatternFly MCP helps reduce AI "hallucinations" by ensuring the answers you receive are quoted directly from our documentation and are linked to the correct sources.
+
+- **For developers:** Receive quick and accurate information about component props, implementation details, and accessibility requirements. The PatternFly MCP can also help validate component usage or choose the right component for a specific need.
+- **For designers:** Quickly reference design guidelines and usage patterns while you work. You can ask for best practices, such as "Which component should I use for a gallery view?", and get answers rooted in our official standards.
+- **For stakeholders:** By embedding the design system directly into the development workflow, the PatternFly MCP ensures consistency and adherence to design and accessibility standards across all projects. This speeds up development and review cycles by reducing errors and guesswork.
+
+## What does the PatternFly MCP provide?
+There are 2 main tools provided by the PatternFly MCP:
+- `usePatternFlyDocs`: Used to answer high-level questions about components, design guidelines, and accessibility.
+- `fetchDocs`: Used to retrieve the full documentation for a specific component via a URL provided by `usePatternFlyDocs`.
+
+## Get started
+You can install the PatternFly MCP in your preferred development environment. Here are the instructions for popular clients.
+
+### Cursor
+1. While in Cursor, press **cmd** + **shift** +**P**.
+1. Search for and select **View: Open MCP Settings**.
+1. At the bottom of the settings menu, click **New MCP Server** to open the `mcp.json` file.
+1. Add the following JSON block within the `mcpServers` object. If `mcpServers` already exists, just add the `patternfly-docs` block inside it.
+
+ ``` {
+ "mcpServers": {
+ "patternfly-docs": {
+ "command": "npx",
+ "args": [
+ "-y",
+ "@patternfly/patternfly-mcp"
+ ],
+ "description": "PatternFly React development rules and documentation"
+ }
+ }
+ }
+ ```
+1. Save and close mcp.json. The MCP Settings will now show "patternfly-docs" as an installed server with its tools enabled.
+
+
+ 
+
+
+### Claude Code
+
+1. From your terminal (before opening Claude Code), run the `claude mcp add` command with your preferred configuration:
+ - To install the server globally (recommended, so it's available across all your projects), use the `-s user` flag:
+ ```claude mcp add patternfly-mcp -s user -- npx -y @patternfly/patternfly-mcp```
+ - To install for the current project only, run:
+ ```claude mcp add patternfly-mcp -- npx -y @patternfly/patternfly-mcp```
+1. Open Claude Code by typing `claude`.
+1. Inside Claude Code, type the `/mcp` command to view and manage your running MCP servers. You should see `patternfly-mcp` listed as "connected".
+
+
+ 
+
+
+## Example prompts
+Once installed, you can begin asking questions in your chat window and the PatternFly MCP will automatically be referenced for PatternFly-related requests. You can use the PatternFly MCP’s tools for a range of use cases, but here are a few sample scenarios to explore:
+
+### Verifying installation
+- **Prompt:** "Can you see the PF MCP running? If so, what are the tools?"
+- **Expected AI behavior:** The assistant will confirm it sees the PatternFly MCP and list the available tools: mcp_patternfly-docs_usePatternFlyDocs and mcp_patternfly-docs_fetchDocs.
+- **Response:** Yes, the PatternFly MCP is running successfully. There are 2 available tools for you to use: `mcp_patternfly-docs_usePatternFlyDocs` and `mcp_patternfly-docs_fetchDocs`.
+
+### Fetching specific documentation
+- **Prompt:** "Yes, fetch docs for card"
+- **Expected AI behavior:** This will trigger the `fetchDocs` tool. The assistant will return a detailed, organized summary of the card component's documentation, including design guidelines (elements, usage, variations), accessibility guidelines (key requirements, React props), and more.
+- **Response:** “Here’s the current PatternFly card documentation, including the general design guidelines and key accessibility requirements: [documentation summary]“
+
+### Get design guidance
+- **Prompt:** "Which components should I use if we want a user to be able to select several different cards from a gallery view?"
+- **Expected AI behavior:** This will trigger the `usePatternFlyDocs tool`. The AI assistant will analyze your request and provide a recommendation based on PatternFly's design guidelines, likely suggesting the use of selectable cards and noting that multi-select is achieved using cards with checkboxes.
+- **Response:** “If you want to let users select several cards within a gallery view, you could use the selectable cards variation, which would allow multiple card selection via checkboxes that are placed within a card’s header.”
+
+## Experimentation and feedback
+
+The PatternFly MCP is still an evolving experiment, and we'd love to learn from your experiences:
+- 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).
+
+As our AI tooling evolves, we'll continue to refine our recommendations based on community feedback and real-world usage.
\ No newline at end of file
From 75e188737c2e084b8004b6af8ca6571eada60e60 Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Tue, 11 Nov 2025 11:29:57 -0500
Subject: [PATCH 2/4] Content updates from pr review
---
.../content/PatternFly-AI/patternfly-mcp.md | 31 ++++++++++---------
1 file changed, 17 insertions(+), 14 deletions(-)
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
index 3e605d7cb0..0902cd5c3a 100644
--- a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
+++ b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
@@ -9,9 +9,11 @@ This guide provides an overview of the PatternFly MCP server, including its bene
For full technical documentation, setup instructions, and to contribute, visit our [PatternFly MCP GitHub Repository](https://github.com/patternfly/patternfly-mcp).
## What is the PatternFly MCP?
-The **PatternFly MCP** is a new tool designed to integrate our design guidelines, component documentation, and accessibility best practices directly into your AI-powered development environment.
+The **PatternFly MCP** is a tool designed to integrate our design guidelines, component documentation, and accessibility best practices directly into your AI-powered development environment.
-MCP stands for Model Context Protocol, an open standard that allows AI assistants to securely and accurately access external data sources and tools. The PatternFly MCP is a server that connects your AI assistant (like those within Cursor or Claude Code) directly to official PatternFly documentation. Instead of relying on a model's potentially outdated or overgeneralized knowledge, your assistant can query the PatternFly MCP to get answers based on real, up-to-date, and verified sources.
+MCP stands for Model Context Protocol, an open standard that allows AI assistants to securely and accurately access external data sources and tools. The PatternFly MCP is a server that connects your AI assistant (like those within Cursor or Claude Code) directly to official PatternFly documentation. Instead of relying on a model's potentially outdated or overgeneralized knowledge, your assistant can query the PatternFly MCP to get answers based on real, up-to-date, and verified sources.
+
+Beyond offering these enhanced AI assistant conversations, the PatternFly MCP can also work in the background and incorporate into your existing workflows. For example, it can ensure that vibe coding will automatically utilize the latest and most applicable PatternFly elements, without requiring you to specifically ask an assistant to do so. It will quietly supply an assistant with the information necessary to make these recommendations and decisions.
## What are the benefits of the PatternFly MCP?
@@ -35,18 +37,19 @@ You can install the PatternFly MCP in your preferred development environment. He
1. At the bottom of the settings menu, click **New MCP Server** to open the `mcp.json` file.
1. Add the following JSON block within the `mcpServers` object. If `mcpServers` already exists, just add the `patternfly-docs` block inside it.
- ``` {
- "mcpServers": {
- "patternfly-docs": {
- "command": "npx",
- "args": [
- "-y",
- "@patternfly/patternfly-mcp"
- ],
- "description": "PatternFly React development rules and documentation"
+ ```
+ {
+ "mcpServers": {
+ "patternfly-docs": {
+ "command": "npx",
+ "args": [
+ "-y",
+ "@patternfly/patternfly-mcp"
+ ],
+ "description": "PatternFly React development rules and documentation"
+ }
}
}
- }
```
1. Save and close mcp.json. The MCP Settings will now show "patternfly-docs" as an installed server with its tools enabled.
@@ -77,12 +80,12 @@ Once installed, you can begin asking questions in your chat window and the Patte
- **Response:** Yes, the PatternFly MCP is running successfully. There are 2 available tools for you to use: `mcp_patternfly-docs_usePatternFlyDocs` and `mcp_patternfly-docs_fetchDocs`.
### Fetching specific documentation
-- **Prompt:** "Yes, fetch docs for card"
+- **Prompt:** "Fetch docs for a PatternFly card"
- **Expected AI behavior:** This will trigger the `fetchDocs` tool. The assistant will return a detailed, organized summary of the card component's documentation, including design guidelines (elements, usage, variations), accessibility guidelines (key requirements, React props), and more.
- **Response:** “Here’s the current PatternFly card documentation, including the general design guidelines and key accessibility requirements: [documentation summary]“
### Get design guidance
-- **Prompt:** "Which components should I use if we want a user to be able to select several different cards from a gallery view?"
+- **Prompt:** "Which PatternFly components should I use if we want a user to be able to select several different cards from a gallery view?"
- **Expected AI behavior:** This will trigger the `usePatternFlyDocs tool`. The AI assistant will analyze your request and provide a recommendation based on PatternFly's design guidelines, likely suggesting the use of selectable cards and noting that multi-select is achieved using cards with checkboxes.
- **Response:** “If you want to let users select several cards within a gallery view, you could use the selectable cards variation, which would allow multiple card selection via checkboxes that are placed within a card’s header.”
From 9b4a216cd68d60c22ddb37c937c15c3b8bd7f1bc Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Wed, 12 Nov 2025 14:02:02 -0500
Subject: [PATCH 3/4] adjust patternfly-docs to patternfly-mcp
---
.../content/PatternFly-AI/patternfly-mcp.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
index 0902cd5c3a..444f3cb45f 100644
--- a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
+++ b/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
@@ -6,7 +6,7 @@ import '../design-guidelines/components/components.css';
This guide provides an overview of the PatternFly MCP server, including its benefits and instructions for setting up the tool.
-For full technical documentation, setup instructions, and to contribute, visit our [PatternFly MCP GitHub Repository](https://github.com/patternfly/patternfly-mcp).
+For full technical documentation, setup instructions, and to contribute, visit our [PatternFly MCP GitHub repository](https://github.com/patternfly/patternfly-mcp).
## What is the PatternFly MCP?
The **PatternFly MCP** is a tool designed to integrate our design guidelines, component documentation, and accessibility best practices directly into your AI-powered development environment.
@@ -35,12 +35,12 @@ You can install the PatternFly MCP in your preferred development environment. He
1. While in Cursor, press **cmd** + **shift** +**P**.
1. Search for and select **View: Open MCP Settings**.
1. At the bottom of the settings menu, click **New MCP Server** to open the `mcp.json` file.
-1. Add the following JSON block within the `mcpServers` object. If `mcpServers` already exists, just add the `patternfly-docs` block inside it.
+1. Add the following JSON block within the `mcpServers` object. If `mcpServers` already exists, just add the `patternfly-mcp` block inside it.
```
{
"mcpServers": {
- "patternfly-docs": {
+ "patternfly-mcp": {
"command": "npx",
"args": [
"-y",
@@ -51,10 +51,10 @@ You can install the PatternFly MCP in your preferred development environment. He
}
}
```
-1. Save and close mcp.json. The MCP Settings will now show "patternfly-docs" as an installed server with its tools enabled.
+1. Save and close mcp.json. The MCP Settings will now show "patternfly-mcp" as an installed server with its tools enabled.
- 
+ 
### Claude Code
@@ -76,8 +76,8 @@ Once installed, you can begin asking questions in your chat window and the Patte
### Verifying installation
- **Prompt:** "Can you see the PF MCP running? If so, what are the tools?"
-- **Expected AI behavior:** The assistant will confirm it sees the PatternFly MCP and list the available tools: mcp_patternfly-docs_usePatternFlyDocs and mcp_patternfly-docs_fetchDocs.
-- **Response:** Yes, the PatternFly MCP is running successfully. There are 2 available tools for you to use: `mcp_patternfly-docs_usePatternFlyDocs` and `mcp_patternfly-docs_fetchDocs`.
+- **Expected AI behavior:** The assistant will confirm it sees the PatternFly MCP and list the available tools: mcp_patternfly-mcp_usePatternFlyDocs and mcp_patternfly-mcp_fetchDocs.
+- **Response:** Yes, the PatternFly MCP is running successfully. There are 2 available tools for you to use: `mcp_patternfly-mcp_usePatternFlyDocs` and `mcp_patternfly-mcp_fetchDocs`.
### Fetching specific documentation
- **Prompt:** "Fetch docs for a PatternFly card"
From 035cf4404931e4cec3154dd5da0a014d12a6cc62 Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Tue, 18 Nov 2025 15:10:14 -0500
Subject: [PATCH 4/4] Update nav placement and add @latest to args
---
.../{PatternFly-AI => AI}/img/claude-mcp-servers.svg | 0
.../{PatternFly-AI => AI}/img/cursor-mcp-settings.svg | 0
.../content/{PatternFly-AI => AI}/patternfly-mcp.md | 11 ++++++-----
3 files changed, 6 insertions(+), 5 deletions(-)
rename packages/documentation-site/patternfly-docs/content/{PatternFly-AI => AI}/img/claude-mcp-servers.svg (100%)
rename packages/documentation-site/patternfly-docs/content/{PatternFly-AI => AI}/img/cursor-mcp-settings.svg (100%)
rename packages/documentation-site/patternfly-docs/content/{PatternFly-AI => AI}/patternfly-mcp.md (97%)
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/claude-mcp-servers.svg b/packages/documentation-site/patternfly-docs/content/AI/img/claude-mcp-servers.svg
similarity index 100%
rename from packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/claude-mcp-servers.svg
rename to packages/documentation-site/patternfly-docs/content/AI/img/claude-mcp-servers.svg
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/cursor-mcp-settings.svg b/packages/documentation-site/patternfly-docs/content/AI/img/cursor-mcp-settings.svg
similarity index 100%
rename from packages/documentation-site/patternfly-docs/content/PatternFly-AI/img/cursor-mcp-settings.svg
rename to packages/documentation-site/patternfly-docs/content/AI/img/cursor-mcp-settings.svg
diff --git a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md b/packages/documentation-site/patternfly-docs/content/AI/patternfly-mcp.md
similarity index 97%
rename from packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
rename to packages/documentation-site/patternfly-docs/content/AI/patternfly-mcp.md
index 444f3cb45f..4132d3f75e 100644
--- a/packages/documentation-site/patternfly-docs/content/PatternFly-AI/patternfly-mcp.md
+++ b/packages/documentation-site/patternfly-docs/content/AI/patternfly-mcp.md
@@ -1,8 +1,8 @@
---
id: PatternFly MCP
-section: PatternFly-AI
+section: AI
---
-import '../design-guidelines/components/components.css';
+import '../components/components.css';
This guide provides an overview of the PatternFly MCP server, including its benefits and instructions for setting up the tool.
@@ -44,7 +44,8 @@ You can install the PatternFly MCP in your preferred development environment. He
"command": "npx",
"args": [
"-y",
- "@patternfly/patternfly-mcp"
+ "@patternfly/patternfly-mcp",
+ "@latest"
],
"description": "PatternFly React development rules and documentation"
}
@@ -61,9 +62,9 @@ You can install the PatternFly MCP in your preferred development environment. He
1. From your terminal (before opening Claude Code), run the `claude mcp add` command with your preferred configuration:
- To install the server globally (recommended, so it's available across all your projects), use the `-s user` flag:
- ```claude mcp add patternfly-mcp -s user -- npx -y @patternfly/patternfly-mcp```
+ ```claude mcp add patternfly-mcp -s user -- npx -y @patternfly/patternfly-mcp @latest```
- To install for the current project only, run:
- ```claude mcp add patternfly-mcp -- npx -y @patternfly/patternfly-mcp```
+ ```claude mcp add patternfly-mcp -- npx -y @patternfly/patternfly-mcp @latest```
1. Open Claude Code by typing `claude`.
1. Inside Claude Code, type the `/mcp` command to view and manage your running MCP servers. You should see `patternfly-mcp` listed as "connected".