petal-components-mcp
Phoenix LiveView component schemas from petal_components, exposed to AI coding assistants.
Should I use this
Quality & Safety
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"petal-components-mcp": {
"command": "npx",
"args": [
"petal-components-mcp"
]
}
}
}Runnable packages
0.1.0stdioRemote endpoints
https://mcp.petal.build/mcpstreamable-httpWhat it can do
Tool inventory
Tools (3)
🟢get_install_instructions
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 instructions covering mix.exs, mix deps.get, Tailwind v4 CSS config, and the web module import. Steps are idempotent - safe to follow on a project that is partially configured.
Input Schema
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢list_components
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.
Input Schema
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟡get_component(name)
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 instead of training-data guesses.
Input Schema
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "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 inventory."
}
},
"required": [
"name"
],
"additionalProperties": false
}Community
Evidence