Petal Components MCP

Añade petal-components-mcp - un servidor MCP que expone esquemas para petal_components, la biblioteca de componentes Phoenix LiveView estilo Shadcn. Permite que los asistentes de codificación con IA consulten atributos, slots, valores predeterminados y valores permitidos para 79 componentes, para que escriban HEEx idiomático en lugar de inventar sopa de Tailwind. Disponible en https://mcp.petal.build/mcp

GitHub
1
Prueba este MCPPatrocinado

Documentación

petal-components-mcp

Un servidor MCP que expone petal_components — la biblioteca de componentes estilo Shadcn para Phoenix LiveView — a asistentes de codificación con IA (Claude Code, Cursor, Windsurf, etc.).

Sin esto, los agentes de IA que escriben HEEx inventan sopa de Tailwind cruda y nunca recurren a los componentes de pc_*. Con esto, la IA obtiene el esquema completo de cada componente bajo demanda — atributos, slots, valores predeterminados, valores permitidos, ejemplos de uso — y escribe marcado idiomático de petal_components por defecto.

Instalación (Claude Code)

claude mcp add petal --transport http https://mcp.petal.build

Luego, en cualquier proyecto Phoenix, pídele a la IA que construya algo. Llamará a list_components y get_component para fundamentar su salida en esquemas reales de petal_components.

Herramientas disponibles

  • list_components — cada componente de la biblioteca con un resumen de una línea
  • get_component — esquema completo (atributos, slots, valores predeterminados, valores, documentación) + ejemplo de uso en HEEx

Próximamente: search_components (coincidencia en lenguaje natural) y generate_pattern (bloques compuestos como formulario-en-tarjeta, modal-con-formulario, esqueletos de panel).

Cómo funciona

El servidor MCP es un servicio TypeScript ligero que agrupa una instantánea JSON de cada componente en petal_components. El JSON se genera mediante una tarea Mix que inspecciona Phoenix.Component.__components__/0 en cada módulo PetalComponents.* cargado — por lo que los esquemas siempre están sincronizados con la biblioteca real, sin duplicación manual.

petal_components (Hex)              petal-components-mcp (this repo)
       │                                       │
       │ mix run extract_schemas.exs           │
       │─────────────────────────────────────► src/schemas.json
                                               │
                                               │ tsc
                                               ▼
                                         dist/server.js  ◄── deployed to Fly

Ejecución local

# Regenerate schemas from the latest petal_components on Hex
npm run extract     # cd scripts/extract && mix deps.get && mix run extract_schemas.exs

# Build and serve
npm install
npm run build
PORT=8765 npm start

# Health check
curl http://localhost:8765/healthz

La extracción es autónoma — scripts/extract/ es un pequeño proyecto Mix que obtiene petal_components desde Hex, inspecciona cada Phoenix.Component.__components__/0 y escribe src/schemas.json. No se necesita un clon local de petal_components.

Para usar un servidor local con Claude Code:

claude mcp add petal-local --transport http http://localhost:8765/mcp

Despliegue (Fly.io)

El servidor MCP está alojado en mcp.petal.build en Fly.io como una aplicación independiente.

Configuración inicial

# 1. Create the app (one-time, requires Fly auth)
fly apps create petal-components-mcp

# 2. Deploy
fly deploy --remote-only

# 3. Add the custom domain
fly certs add mcp.petal.build

Después del paso 3, Fly imprime los registros DNS que necesitas. Añade un CNAME en el proveedor de DNS de petal.build:

mcp.petal.build  CNAME  petal-components-mcp.fly.dev

Luego fly certs check mcp.petal.build se pondrá en verde una vez que la propagación haya ocurrido.

Despliegues posteriores

fly deploy --remote-only

Sincronización tras una nueva versión de petal_components en Hex

# 1. Regenerate schemas from the latest petal_components on Hex
npm run extract

# 2. Eyeball the diff (catches surprises before they ship to AI agents worldwide)
git diff src/schemas.json | head -50

# 3. Commit and deploy
git add src/schemas.json
git commit -m "chore: sync schemas with petal_components vX.Y.Z"
git push
fly deploy --remote-only

El endpoint /healthz informa la versión incluida, para que puedas confirmar que un despliegue se realizó:

curl https://mcp.petal.build/healthz
# {"ok":true,"petal_components_version":"3.2.0","components":79,...}

Antecedentes

Este es el artefacto para bet 002 — probar si los asistentes de codificación con IA se convierten en el canal dominante de instalación/descubrimiento para herramientas de UI de Phoenix. Consulta la apuesta para hipótesis, métricas y criterios de cancelación.

Licencia

MIT.