-
Notifications
You must be signed in to change notification settings - Fork 144
docs(AI): Adds PatternFly MCP documentation. #4857
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 1 commit
e05183b
75e1887
9b4a216
62e8780
f5bc90a
035cf44
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -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" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ``` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ``` { | |
| "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" | |
| } | |
| } | |
| } | |
| ``` |
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was copy/pasted as a direct follow-up to the output from the "verifying installation" prompt above, but we've reframed these here as unrelated sample prompts so I'd suggest rewording this as an independent prompt:
| - **Prompt:** "Yes, fetch docs for card" | |
| - **Prompt:** "Fetch docs for PatternFly card" |
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
User feedback indicated that the PF MCP isn't always used (the AI tool has to make that decision) so tweaking the prompt from those results to explicitly call out PatternFly could lead to more consistent results:
| - **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?" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seeing "new" in our docs immediately makes me think we're building in tech debt as this becomes dated.