Petal Components MCP

Name: Petal Components MCP
Author: petalframework

von petalframeworkVersion 0.1.0i★ –iComputer oder Cloud

Name in der Registryio.github.petalframework/petal-components-mcp

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

Phoenix LiveView component schemas from petal_components, exposed to AI coding assistants.

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Stimmen der NutzeriNoch keine BewertungenBewertungen starten in einem späteren Schritt zusammen mit Benutzerkonten
Unsere Basischecksi1 von 1 bestandenAnhand öffentlicher Informationen geprüft; Code noch nicht gescannt
NutzungiNoch nicht gemessen★ –

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

Verbindung: Computer oder Cloud
Transport: stdio, Streamable HTTP
Kategorie: Sonstiges

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

Bevor du installierst

Basischecks: 1 von 1 bestanden
Läuft auf dem Server des Entwicklers: Was du fragst, läuft über dessen Server.
Die Registry nennt keinen Schlüssel zum Eintragen.

Du brauchst

Läuft in der CloudNichts zu installieren; die Verbindung läuft übers Internet
npmNode.js installiert (für den Befehl npx)

Welche App nutzt du?

ClaudeClaude CodeCursorVS CodeChatGPT

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Funktioniert in Claude im Web, auf dem Desktop und auf dem Handy:

Öffne Settings → Connectors
Tippe auf Add custom connector
Füge die Adresse unten ein und tippe auf Add
Wenn eine Anmeldung verlangt wird, melde dich beim Dienst des Entwicklers an

https://mcp.petal.build/mcp

Oder führ ihn auf deinem Computer aus

Öffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein

{
  "mcpServers": {
    "petal-components": {
      "command": "npx",
      "args": [
        "-y",
        "petal-components-mcp"
      ]
    }
  }
}

Führe das in deinem Terminal aus

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

Oder führ ihn auf deinem Computer aus

claude mcp add petal-components -- npx -y petal-components-mcp

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

{
  "mcpServers": {
    "petal-components": {
      "url": "https://mcp.petal.build/mcp"
    }
  }
}

Oder führ ihn auf deinem Computer aus

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

{
  "mcpServers": {
    "petal-components": {
      "command": "npx",
      "args": [
        "-y",
        "petal-components-mcp"
      ]
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

{
  "servers": {
    "petal-components": {
      "type": "http",
      "url": "https://mcp.petal.build/mcp"
    }
  }
}

Oder führ ihn auf deinem Computer aus

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

{
  "servers": {
    "petal-components": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "petal-components-mcp"
      ]
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

ChatGPT verbindet sich nur mit Servern im Internet:

Öffne ChatGPT im Web → Settings → Connectors (Apps)
Tippe auf Create oder Add (bei manchen Tarifen musst du zuerst Developer mode unter Advanced einschalten)
Füge die Adresse unten ein, gib ihr einen Namen und speichere
Wenn eine Anmeldung verlangt wird, melde dich beim Dienst des Entwicklers an

https://mcp.petal.build/mcp

Menünamen können sich je nach Tarif und mit der Zeit leicht unterscheiden.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Was er kann

Die Tool-Liste dieses Servers haben wir noch nicht gelesen; wir prüfen die Endpunkte reihum.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 7. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto petalframework bestätigt, dem das Repo gehört
… Noch nicht geprüft
Wird noch gepflegt
Dieses Repo haben wir noch nicht von GitHub gelesen
… Noch nicht geprüft
Hat eine Lizenz
Dieses Repo haben wir noch nicht von GitHub gelesen
… Noch nicht geprüft
Endpunkt antwortet
Noch nicht geprüft; wir prüfen die Endpunkte reihum
… Noch nicht geprüft
Anmeldung mit OAuth
Noch nicht geprüft; wir prüfen die Endpunkte reihum
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Noch nicht geprüft; wir lesen die Tool-Liste, wenn wir den Endpunkt prüfen

Im Vergleich mit anderen in Sonstigesi

Mehr Sterne als 0 % der anderen 32680 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 9 % der anderen 32680 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 32680 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Petal Components MCP sicher?

Er hat 1 von 1 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Beides geht: Installiere ihn auf deinem Computer oder verbinde dich mit der Cloud-Version.

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (0.1.0) kam vor 6 Monaten in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Er verbindet sich per URL, also funktionieren auch Apps, die Remote-MCP-Server akzeptieren, zum Beispiel ChatGPT im Entwicklermodus.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Spec Driven Development, Remote Desktop Commander, EmbeddedCI BenchPod

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Spec Driven Development

von formulahendry

MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.

Läuft auf deinem Computer★ 440MITAktualisiert vor 14 Monaten

Installieren

Remote Desktop Commander

von desktop-commander

Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.

Läuft in der Cloud★ 211Aktualisiert vorgestern

Installieren

EmbeddedCI BenchPod

von embeddedci-com

Drive a BenchPod hardware-in-the-loop bench: power, flash, UART, I2C, CAN, analog and logic.

Läuft auf deinem ComputerAktualisiert heute

Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

petal-components-mcp

An MCP server that exposes petal_components — the Shadcn-style component library for Phoenix LiveView — to AI coding assistants (Claude Code, Cursor, Windsurf, etc).

Without this, AI agents writing HEEx invent raw Tailwind soup and never reach for pc_* components. With it, the AI gets the full schema for every component on demand — attrs, slots, defaults, allowed values, usage examples — and writes idiomatic petal_components markup by default.

Install (Claude Code)

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

Then in any Phoenix project, ask the AI to build something. It'll call list_components and get_component to ground its output in real petal_components schemas.

Available tools

list_components — every component in the library with a one-line summary
get_component — full schema (attrs, slots, defaults, values, docs) + HEEx usage example

Coming soon: search_components (natural-language match) and generate_pattern (composed blocks like form-in-card, modal-with-form, dashboard skeletons).

How it works

The MCP server is a thin TypeScript service that bundles a JSON snapshot of every component in petal_components. The JSON is generated by a Mix task that introspects Phoenix.Component.__components__/0 on every loaded PetalComponents.* module — so the schemas are always in sync with the actual library, no manual duplication.

petal_components (Hex)              petal-components-mcp (this repo)

│ │ │ mix run extract_schemas.exs │ │─────────────────────────────────────► src/schemas.json │ │ tsc ▼ dist/server.js ◄── deployed to Fly

Running locally

# 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

The extraction is self-contained — scripts/extract/ is a tiny Mix project that pulls petal_components from Hex, introspects every Phoenix.Component.__components__/0, and writes src/schemas.json. No need for a local petal_components clone.

To use a local server with Claude Code:

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

Deploy (Fly.io)

The MCP server is hosted at mcp.petal.build on Fly.io as a standalone app.

First-time setup

# 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

After step 3, Fly prints the DNS records you need. Add a CNAME at the petal.build DNS provider:

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

Then fly certs check mcp.petal.build will go green once propagation hits.

Subsequent deploys

fly deploy --remote-only

Syncing after a new petal_components release on 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

The /healthz endpoint reports the bundled version, so you can confirm a deploy went out:

curl https://mcp.petal.build/healthz

{"ok":true,"petal_components_version":"3.2.0","components":79,...}

Background

This is the artifact for bet 002 — testing whether AI coding assistants become the dominant install/discovery channel for Phoenix UI tooling. See the bet for hypothesis, metrics, and kill criteria.

License

MIT.

Petal Components MCP

Überblick

Die drei Säulen von PopNx MCP

Was du damit machen kannst

Installation

Bevor du installierst

Oder führ ihn auf deinem Computer aus

Oder führ ihn auf deinem Computer aus

Oder führ ihn auf deinem Computer aus

Oder führ ihn auf deinem Computer aus

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Im Vergleich mit anderen in Sonstigesi

Häufige Fragen

Alternativen

Spec Driven Development

Remote Desktop Commander

EmbeddedCI BenchPod

README vom Entwickler

petal-components-mcp

Install (Claude Code)

Available tools

How it works

Running locally

Build and serve

Health check

Deploy (Fly.io)

First-time setup

2. Deploy

3. Add the custom domain

Subsequent deploys

Syncing after a new petal_components release on Hex

2. Eyeball the diff (catches surprises before they ship to AI agents worldwide)

3. Commit and deploy

{"ok":true,"petal_components_version":"3.2.0","components":79,...}

Background

License