MCP Server: Local PatternFly Component code access

I'd like to discuss an option to create tools that try to directly access the currently installed version of PF and use that as a reference for AI agents to gain exact knowledge of the interface and inner workings of the JS modules.

Dynamic Package Discovery

The MCP server generates a comprehensive map of all available exports from the PatternFly package by analyzing the dist/dynamic/ directory structure. This creates a real-time inventory of:

• All available components
• Their exact file paths
• Export names and types
• Component interfaces and props

Source Code Analysis

When agent requests information about a specific component (e.g., Breadcrumb, Tabs, Toolbar), the MCP server:

• Locates the exact TypeScript interface file
• Reads the source code directly
• Extracts the complete component interface including:
  • PropTypes and their TypeScript definitions
  • Component implementation details
  • Usage patterns and examples
  • Default props and behavior

Real-Time Accuracy

This approach ensures Claude always has access to:

• Current version compatibility - Reads from the actually installed PF version
• Exact interface matching - No guesswork about prop names or types
• Complete API surface - All props, methods, and component variants
• TypeScript definitions - Precise type information for better code generation

Examples

Here are a couple of examples of code that were generated using an experimental implementation of these tools. The experiment only considers the reac-core package. Other packages like DataView, Icons, etc. were not added.

Page based on a Figma design

Prompt: Can you help me implement this design using the Patternfly or PF components: https://www.figma.com/design/ay6AYgKYoF0yh1evYctbyP/Workspaces-MVP?node-id=1850-63987&t=69cOkIBIuBuLosN8-4 use the MCP servers to
learn about figma and PF components. This will be a React, create new file don't worry about builds and stuff, this is jsut to test the MPCs. I will validate the output.

Used MCP server:

• figma MCP

• browser tools MCP

• experimental MCP with above described tools

Codesandbox link: https://codesandbox.io/p/sandbox/priceless-bogdan-fgnw9y

Showcase of Form components

Prompt: Can you create me showcase of Form components? Look at waht avaiable form modules we have first

Codesandbox link: https://codesandbox.io/p/devbox/zen-scooby-5mdtr7?workspaceId=ws_LP3UqCqxM8J8SsaHMFRDcN

As request, I'll open PR shortly so we can discuss the code.

cc @nicolethoen

---

Jira Issue: PF-3126