Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

MCP Server: Local PatternFly Component code access

Abierto
  • ¿Algo no está bien?
#18 8 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@cdcabrera ya está trabajando en esto.

Desde el 11/3/2026.

  • #19 de @Hyperkid123 — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
5
Forks
12
Merge medio
1 d 8 h
PR fusionados (30 d)
35

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de patternfly/patternfly-mcp

Todos los issues de patternfly/patternfly-mcp

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.