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 componentSchemas tool

• Fetch General Reference Docs: Access top-level documentation for packages like @patternfly/react-chatbot, @patternfly/react-component-groups, setup guides, and troubleshooting references

• Multi-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 applications

• Inspection 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.

1. Click on "Install Server".

2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.

3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@PatternFly MCP Server show 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.