list_components

Instructions

Implementation Reference

• src/mcp.ts:27-57 (registration)

  Tool registration for 'list_components' as part of the ListToolsRequestSchema handler. Defines the tool name, description, and empty input schema.

  server.setRequestHandler(ListToolsRequestSchema, async () => ({
    tools: [
      {
        name: "list_components",
        description:
          "List every component available in petal_components (the Shadcn-style Phoenix LiveView component library). Use this first to see what's available before composing HEEx markup.",
        inputSchema: {
          type: "object",
          properties: {},
          additionalProperties: false,
        },
      },
      {
        name: "get_component",
        description:
          "Get the full schema for a single petal_components component — attrs, slots, defaults, allowed values, and a HEEx usage example. Call this any time you're about to write a Phoenix LiveView component reference like <.pc_button> or <.input>, to ensure the attrs and slots match the real library.",
        inputSchema: {
          type: "object",
          properties: {
            name: {
              type: "string",
              description:
                "Component function name (e.g. 'button', 'modal', 'input'). Get the full list via list_components.",
            },
          },
          required: ["name"],
          additionalProperties: false,
        },
      },
    ],
  }));

• src/mcp.ts:64-77 (handler)

  Handler for the 'list_components' tool. Calls listComponents() from schemas.ts and formats the output text with component count, names, modules, and summaries.

  if (name === "list_components") {
    const components = listComponents();
    const text = [
      `petal_components v${schemas.version} — ${components.length} components`,
      "",
      ...components.map((c) => `- \`${c.name}\` (${c.module}) — ${c.summary}`),
      "",
      "Call `get_component` with a name to get the full schema and usage example.",
    ].join("\n");
  
    return {
      content: [{ type: "text", text }],
    };
  }

• src/schemas.ts:35-41 (handler)

  The listComponents() helper function that iterates over schemas.components and extracts name, module, and summary for each component.

  export function listComponents() {
    return schemas.components.map((c) => ({
      name: c.name,
      module: c.module,
      summary: summarize(c),
    }));
  }

• src/schemas.ts:19-31 (schema)

  Type definitions (Component, SchemaFile) that define the shape of component data returned by listComponents.

  export type Component = {
    name: string;
    module: string;
    kind: string;
    attrs: ComponentAttr[];
    slots: ComponentSlot[];
  };
  
  export type SchemaFile = {
    version: string;
    generated_at: string;
    components: Component[];
  };

• src/schemas.ts:47-58 (helper)

  The summarize() helper function called by listComponents() to generate a human-readable summary string for each component.

  function summarize(c: Component): string {
    const attrCount = c.attrs.length;
    const slotCount = c.slots.length;
    const required = c.attrs.filter((a) => a.required).map((a) => a.name);
    const requiredSlots = c.slots.filter((s) => s.required).map((s) => s.name);
  
    const parts = [`${attrCount} attrs`, `${slotCount} slots`];
    if (required.length) parts.push(`required attrs: ${required.join(", ")}`);
    if (requiredSlots.length) parts.push(`required slots: ${requiredSlots.join(", ")}`);
  
    return parts.join(" · ");
  }