petal components mcp

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.