-
Notifications
You must be signed in to change notification settings - Fork 5
Description
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