MCP server

Petal Components

io.github.petalframework/petal-components-mcp

Checked 26 Oct 2026, 08:29 UTC · Connected to it and listed its tools

Phoenix LiveView component schemas from petal_components, exposed to AI coding assistants.

Website Source

At a glance

Type

MCP server

Publisher

Not verified

Status

Working at last check

Tools

3

Token cost

About 474 tokens per request

Sets up in

Claude Code, Claude Desktop, Codex, Gemini CLI, Cursor, VS Code, Antigravity, ChatGPT, OpenAI API, Grok

Last checked

26 Oct 2026, 08:29 UTC

Connect it to your agent

Add to CursorAdd to VS CodeVS Code Insiders

Opens the app, which shows the server and asks you to confirm. For other apps, copy the setup below.

Claude Code

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

Claude Desktop

Settings → Connectors → Add custom connector, and paste the URL.

Codex (config.toml)

[mcp_servers.petal-components-mcp]
url = "https://mcp.petal.build/mcp"

Gemini CLI

{"mcpServers":{"petal-components-mcp":{"httpUrl":"https://mcp.petal.build/mcp"}}}

Cursor

{"mcpServers":{"petal-components-mcp":{"url":"https://mcp.petal.build/mcp"}}}

VS Code

{"servers":{"petal-components-mcp":{"type":"http","url":"https://mcp.petal.build/mcp"}}}

Antigravity

agy mcp add petal-components-mcp https://mcp.petal.build/mcp

ChatGPT

Settings → Apps & Connectors → Advanced settings: turn on Developer mode, then Create a connector and paste the URL. Which plans can do this varies.

OpenAI API (Responses tools)

{"type":"mcp","server_label":"petal-components-mcp","server_url":"https://mcp.petal.build/mcp","require_approval":"always"}

Grok (xAI API tools)

{"type":"mcp","server_label":"petal-components-mcp","server_url":"https://mcp.petal.build/mcp"}

Tools

• get_component ~198 tokens
  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 g
• get_install_instructions ~166 tokens
  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.e
• list_components ~110 tokens
  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.

Browse

• GitHub tools
• Tailwind tools
• GitHub and code hosting

Related MCP servers

• Mobiscroll
  Version-aware Mobiscroll UI component schemas and examples, plus Connect REST API and SDK knowledge.
• opointo
  Design a React Native app in a browser and emit it as a real Expo project you own, iOS and Android.
• Expo
  Your Expo and EAS project in natural language: up to date SDK docs, cloud builds (status, logs, trig
• America/Phoenix clock
  Current local time in America/Phoenix.
• Phoenix Number
  phoenix-number MCP — wraps StupidAPIs (keyless — no credential needed)
• X402 Factory
  200+ x402 paid data APIs for AI agents: prediction markets, verified weather, econ, SEC filings
• Mlola UI
  Mlola UI components, tokens and design rules for coding agents, with a markup checker
• Phoenix Mobile Mechanic Co — book mobile mechanic in Phoenix
  Book mobile mechanic in Phoenix, AZ: prices, service area by ZIP, free callback from a local pro.

Badge for your README

[![AptLynx](https://aptlynx.net/badge/io.github.petalframework/petal-components-mcp.svg)](https://aptlynx.net/servers/io.github.petalframework/petal-components-mcp)

Listing text is written by the maker; AptLynx lists tools and does not vouch for them. Find another tool · Browse by topic · For agents