Skip to content

MCP Server: Local PatternFly Component code access #18

@Hyperkid123

Description

@Hyperkid123

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions