MCP Server: Local PatternFly Component code access

[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

---

Jira Issue: PF-3126

[cdcabrera]

Left a comment in PR and here

@Hyperkid123 nice concepts!

Just a heads up

• Limited reviewing this week..
• On the roadmap for the short term tool plugins...

This will will affect what you're aiming for...

Our short term roadmap...

"Reduce maintenance overhead of the codebase and offset that onto "tool plugins" instead."

This is being done because

• we can't anticipate every use case
• provides an avenue for someone to use something outside of the releases, faster than we can
• reduce the "maintenance" and "testing" overhead on core
• creates a process that allows someone to move tooling plugins into core

How that might affect this work...

• let's you create a plugin(s) that
  • could be installed via NPM inside this repo
  • or immediate CLI or programmatic use, (closest example is the component schemas work where we started the concept)
• contributed utility functions to core that we may be able to expose back to tool plugins since their benefit might help other authors

The work for plugins was scheduled for last week, but it got pushed due to delays. The work you've got are some unanticipated concepts, very nice! Keeping the PR/MR up gives a testing framework for sure but when the work lands for the tool plugins we may encourage its use (next week).

[Hyperkid123]

Hi @cdcabrera, I don't expect this to get solved overnight :). I was asked to open a draft and open a discussion about the approach. I am doing some experimentation for HCC workflow, and this seems to be somewhat overlapping with your effort. Let me know once you have a bit more time and we can chat.

[cdcabrera]

@Hyperkid123

Following up on the pf resources snapshot concept. We agree it is a valid use case. The concept of using a snapshot, or version information, to let an agent apply contextual knowledge (like "this is the closest PatternFly version") works well with our long-term goals for core tools.

We're working on finalizing our architectural approach for new contributions, which focuses on refinement before a core-server merge:

• Core Server: Reserved for features like search and primary PatternFly doc usage (our core library).
• Tools, Prompts, and Resources: Expandable and customizable by the community (development, design, etc.). This includes setting up resources like the patternfly-ai-coding repository.

What this means for your existing PR

To ensure every new tool is robust, refined, and a good fit for the core server's focus, we're implementing the following path:

1. Start as a Tool Plugin: All new server tools intended for a core server merge will begin their life as tool plugins.
2. Refinement: Viability and refinement, specifically related to the core server's focus, will be handled at the plugin level.
3. Core Consideration: Once a tool has been validated and refined as a plugin, it will be considered for a full merge into the core server, which may involve additional streamlining.

In short, the pf resources snapshot is a great idea, but it needs to go through the plugin process first before it's considered for a full review and merge.

Next Steps

We just released the base work for tool plugins under our 0.5.0 release.

This means you can immediately move forward using the PF MCP with the pf resource snapshot tooling! You can implement it either by embedding the server in your own framework or by using the standard MCP JSON config.

Additionally, please leave this issue open so we can continue to track discussion.

[Hyperkid123]

Hi. Thanks for the message. I'll look at the options to see what may work best. There are some updates that need to happen first. I had a good experience with using Vector DB to look for the components. I'll to think about the final shape of this feature. I think I'll have some time next week to come up with a sollution.

[Hyperkid123]

OK. I sat down for a bit and updated the module discovery. The MCP now uses an AST to track down all the imports. We have the working MCP here: https://github.com/RedHatInsights/platform-frontend-ai-toolkit/tree/master/packages/hcc-pf-mcp

I'll now look at the possibilities to integrate with your work 🙂

[cdcabrera]

Aspects of this proposed tooling mesh nicely with our internal concepts for snapshotting/scanning environments.

The end tooling we're reviewing may look somewhat different. Will post more frequent updates as we get closer.

[Hyperkid123]

Sorry, I had to jump on other things. Glad you are still considering this. The MCP I posted in the earlier comment seems to be working very nicely for developers in our team.

[evwilkin]

Bug in Jira Sync tool after move to Cloud, issue shouldn't have closed.