Petal Components MCP

Without this, AI agents writing HEEx invent raw Tailwind soup and never reach forpc_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.

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

The MCP server is a thin TypeScript service that bundles a JSON snapshot of every component inpetal_components. The JSON is generated by a Mix task that introspectsPhoenix.Component.__components__/0on every loadedPetalComponents.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

# 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 pullspetal_componentsfrom Hex, introspects everyPhoenix.Component.__components__/0, and writessrc/schemas.json. No need for a localpetal_componentsclone.

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

The MCP server is hosted atmcp.petal.buildon Fly.io as a standalone app.

# 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

Thenfly certs check mcp.petal.buildwill go green once propagation hits.

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/healthzendpoint 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,...}

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Local stdio MCP server that lets AI coding agents read and maintain structured architecture, rules, and decisions directly from your repository.

Official Context7 MCP server that brings up-to-date, version-specific library documentation and code examples into AI coding prompts.

Remote, no-auth MCP server providing AI-powered codebase context and answers

Official Svelte MCP server, provides docs and suggestions on the generated code.

Documentation and assembly review for @nhtio/adk.

Structured .aide spec files that give AI agents progressive disclosure into your codebase architecture. 6 MCP tools, 8 slash commands, TUI wizard, multi-IDE support.

Assists AI developers with requirement clarification, module design, and technical architecture.

AmazingMCP — MCP Server for .NET / C# Codebases

An MCP server that gives AI agents deep understanding of C# codebases via Roslyn — type search, dependency graphs, usage analysis, and architecture overviews, all from a live in-memory compilation.

Automatically generates documentation for code repositories by analyzing directory structures and code files using the OpenRouter API.