{
  "markdown": "# petal-components-mcp\n\nAn MCP server that exposes [petal_components](https://github.com/petalframework/petal_components) — the Shadcn-style component library for Phoenix LiveView — to AI coding assistants (Claude Code, Cursor, Windsurf, etc).\n\nWithout 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.\n\n## Install (Claude Code)\n\n```sh\nclaude mcp add petal --transport http https://mcp.petal.build\n```\n\nThen 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.\n\n## Available tools\n\n- `list_components` — every component in the library with a one-line summary\n- `get_component` — full schema (attrs, slots, defaults, values, docs) + HEEx usage example\n\nComing soon: `search_components` (natural-language match) and `generate_pattern` (composed blocks like form-in-card, modal-with-form, dashboard skeletons).\n\n## How it works\n\nThe 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.\n\n```\npetal_components (Hex)              petal-components-mcp (this repo)\n       │                                       │\n       │ mix run extract_schemas.exs           │\n       │─────────────────────────────────────► src/schemas.json\n                                               │\n                                               │ tsc\n                                               ▼\n                                         dist/server.js  ◄── deployed to Fly\n```\n\n## Running locally\n\n```sh\n# Regenerate schemas from the latest petal_components on Hex\nnpm run extract     # cd scripts/extract && mix deps.get && mix run extract_schemas.exs\n\n# Build and serve\nnpm install\nnpm run build\nPORT=8765 npm start\n\n# Health check\ncurl http://localhost:8765/healthz\n```\n\nThe 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.\n\nTo use a local server with Claude Code:\n\n```sh\nclaude mcp add petal-local --transport http http://localhost:8765/mcp\n```\n\n## Deploy (Fly.io)\n\nThe MCP server is hosted at `mcp.petal.build` on Fly.io as a standalone app.\n\n### First-time setup\n\n```sh\n# 1. Create the app (one-time, requires Fly auth)\nfly apps create petal-components-mcp\n\n# 2. Deploy\nfly deploy --remote-only\n\n# 3. Add the custom domain\nfly certs add mcp.petal.build\n```\n\nAfter step 3, Fly prints the DNS records you need. Add a CNAME at the petal.build DNS provider:\n\n```\nmcp.petal.build  CNAME  petal-components-mcp.fly.dev\n```\n\nThen `fly certs check mcp.petal.build` will go green once propagation hits.\n\n### Subsequent deploys\n\n```sh\nfly deploy --remote-only\n```\n\n### Syncing after a new petal_components release on Hex\n\n```sh\n# 1. Regenerate schemas from the latest petal_components on Hex\nnpm run extract\n\n# 2. Eyeball the diff (catches surprises before they ship to AI agents worldwide)\ngit diff src/schemas.json | head -50\n\n# 3. Commit and deploy\ngit add src/schemas.json\ngit commit -m \"chore: sync schemas with petal_components vX.Y.Z\"\ngit push\nfly deploy --remote-only\n```\n\nThe `/healthz` endpoint reports the bundled version, so you can confirm a deploy went out:\n\n```sh\ncurl https://mcp.petal.build/healthz\n# {\"ok\":true,\"petal_components_version\":\"3.2.0\",\"components\":79,...}\n```\n\n## Background\n\nThis is the artifact for [bet 002](../bets/002-petal-components-mcp.md) — testing whether AI coding assistants become the dominant install/discovery channel for Phoenix UI tooling. See the bet for hypothesis, metrics, and kill criteria.\n\n## License\n\nMIT.\n",
  "bytes": 4132,
  "sha": "04307cf5dab88010aceb1e3da9d623fa88485adc98fd2eee51022fc3cffaa3f4",
  "repo_slug": "petalframework/petal-components-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_petalframework_petal_component_44c902dd/readme"
}