The PatternFly MCP Server provides AI assistants and IDE integrations with programmatic access to PatternFly design system documentation, rules, and component schemas via the Model Context Protocol.
Browse Component Documentation: Fetch design guidelines, accessibility information, and usage examples for 80+ PatternFly React components (Button, Modal, Table, Alert, Card, Form, etc.)
Access Layout & Chart Documentation: Retrieve docs for layout components (Flex, Grid, Gallery, Bullseye, etc.) and all chart types (Area, Bar, Donut, Line, Pie, Scatter, and more)
Get Component JSON Schemas: Retrieve structured JSON Schema definitions for PatternFly React components, including prop definitions, types, and validation rules via the
componentSchemastoolFetch General Reference Docs: Access top-level documentation for packages like
@patternfly/react-chatbot,@patternfly/react-component-groups, setup guides, and troubleshooting referencesMulti-URL Document Fetching: Fetch multiple documentation pages in a single call to answer complex, multi-component questions
Multiple Integration Options: Use via IDE integration (Claude Desktop, Cursor, etc.), direct CLI with
npx, HTTP transport mode, or embedded in custom Node.js/TypeScript applicationsInspection Tool: Visualize and test the MCP interface via the built-in MCP inspector
Provides access to PatternFly React component documentation, design guidelines, accessibility information, and JSON schemas for PatternFly components.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@PatternFly MCP Servershow me the schema for the Button component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
PatternFly MCP Server
A Model Context Protocol (MCP) server that provides access to PatternFly rules and documentation, built with Node.js.
The PatternFly MCP server is a comprehensive library resource for PatternFly. It is intended to be extensible to meet the needs of different teams and projects, from simple to complex, from design to development. Read more about our roadmap and how we've structured the server in our architecture docs.
Requirements
NPM (or equivalent package manager)
Quick Start
The PatternFly MCP Server supports multiple configurations; see the usage documentation for details.
For integrated use with an IDE
Set a basic MCP configuration
Minimal configuration
{
"mcpServers": {
"patternfly-docs": {
"command": "npx",
"args": ["-y", "@patternfly/patternfly-mcp@latest"],
"description": "PatternFly rules and documentation"
}
}
}HTTP transport mode
{
"mcpServers": {
"patternfly-docs": {
"command": "npx",
"args": ["-y", "@patternfly/patternfly-mcp@latest", "--http", "--port", "8080"],
"description": "PatternFly docs (HTTP transport)"
}
}
}See the MCP Server Configuration documentation for more examples.
For development, advanced usage
Run the server directly
Run the server immediately via npx:
npx -y @patternfly/patternfly-mcpOr with options
npx -y @patternfly/patternfly-mcp --log-stderr --verboseInspect the server
Visualize and test the MCP interface:
npx -y @modelcontextprotocol/inspector npx @patternfly/patternfly-mcpEmbed the server in your application
import { start } from '@patternfly/patternfly-mcp';
// Remember to avoid using console.log and info, they pollute STDOUT
async function main() {
const server = await start();
// Graceful shutdown
process.on('SIGINT', async () => {
await server.stop();
process.exit(0);
});
}
main();See the development documentation for additional examples, CLI and embedded server options.
Documentation
For comprehensive usage, development, and project state read the docs.
Contributing
Contributing? Guidelines can be found here CONTRIBUTING.md.
AI agent
If you're using an AI assistant to help with development in this repository, please prompt it to review the repo guidelines to ensure adherence to project conventions.
Guidelines for developer-agent interaction can be found in CONTRIBUTING.md.
Resources
Looking for Admin?
Admins can modify the Dockerfile, update the server description, and track usage metrics. If you are the server author, to access the admin panel.