Petal Components Mcp

petalframework/petal-components-mcp

Exposes every component from petal_components (the Shadcn-style Phoenix LiveView library) as structured schemas so AI assistants stop inventing Tailwind soup and start writing idiomatic pc_* markup. Provides two tools: list_components returns the full catalog with summaries, get_component returns complete schemas with attrs, slots, defaults, allowed values, and HEEx examples. The schemas are extracted directly from Phoenix.Component metadata via a Mix task, so they stay in sync with each Hex release. Useful if you're building LiveView UIs with an AI assistant and want it to reach for library components instead of reinventing buttons and modals from scratch every time.

tools: 3
transport: STDIO, HTTP
last updated: May 14, 2026

View on GitHub

Install

From registry metadata

$ npx add-mcp https://mcp.petal.build/mcp --name petal-components-mcp

Run in your terminal. add-mcp asks which agents to add it to (Claude Code, Codex, Cursor and more). Add -g to install it for every project.

Review the command, arguments and environment values before installing. MCP servers run with your local permissions.

Other ways

Claude Code

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

Run in your terminal. Add --scope user to make it available in every project.

Tools

Verified live · 3 tools

Verified live against the running server on Nov 6, 2026.

get_install_instructionsGet the canonical steps for installing petal_components in a Phoenix project. Call this when the user asks to install petal_components, when you are setting up a new Phoenix project that needs UI components, or when verifying an existing installation. Returns step-by-step inst...

Get the canonical steps for installing petal_components in a Phoenix project. Call this when the user asks to install petal_components, when you are setting up a new Phoenix project that needs UI components, or when verifying an existing installation. Returns step-by-step inst...

No parameters. Call it with no arguments.

list_componentsList every component shipped by petal_components, the shadcn-style component library for Phoenix LiveView. This is the canonical Phoenix UI vocabulary - call it before composing any HEEx so you reach for an existing component instead of hand-rolling Tailwind divs.

List every component shipped by petal_components, the shadcn-style component library for Phoenix LiveView. This is the canonical Phoenix UI vocabulary - call it before composing any HEEx so you reach for an existing component instead of hand-rolling Tailwind divs.

No parameters. Call it with no arguments.

get_componentGet the full schema for one petal_components component: attrs, slots, defaults, allowed values, and a working HEEx usage example. Call this every time you are about to write a tag like <.button>, <.modal>, <.table>, or <.field> so the attrs and slots match the real library ins...1 params

Get the full schema for one petal_components component: attrs, slots, defaults, allowed values, and a working HEEx usage example. Call this every time you are about to write a tag like <.button>, <.modal>, <.table>, or <.field> so the attrs and slots match the real library ins...

Parameters* required

name*string

Component function name without the leading dot (e.g. 'button', 'modal', 'field', 'text_input'). The HEEx tag is the same name prefixed with a dot: <.button>. Call list_components for the full inve...

Readme

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

View the full README on GitHub

Details

Repository: github.com/petalframework/petal-components-mcp
Website: petal.build/components/mcp
Package: petal-components-mcp
Transport: STDIO, HTTP
Registry: MCP registry, active
Tools verified: Nov 6, 2026