list_components

Instructions

Implementation Reference

• src/index.ts:31-73 (handler)

  Main handler function that executes the list_components tool logic. It optionally filters by category using getComponentsByCategory or returns all components from COMPONENT_REGISTRY, then groups and formats them into a readable Markdown output with component names, slugs, descriptions, and dependencies.

  async ({ category }) => {
    let results =
      category && category.trim()
        ? getComponentsByCategory(category.trim())
        : COMPONENT_REGISTRY;
  
    if (results.length === 0) {
      return {
        content: [
          {
            type: "text" as const,
            text: `No components found for category "${category}". Available categories: ${CATEGORIES.join(", ")}`,
          },
        ],
      };
    }
  
    const grouped = new Map<string, typeof results>();
    for (const comp of results) {
      const cat = comp.category;
      if (!grouped.has(cat)) grouped.set(cat, []);
      grouped.get(cat)!.push(comp);
    }
  
    let output = `# Reacticx Components (${results.length} total)\n\n`;
    output += `Install any component: \`bunx --bun reacticx add <component-name>\`\n\n`;
  
    for (const [cat, comps] of grouped) {
      output += `## ${cat.charAt(0).toUpperCase() + cat.slice(1)} (${comps.length})\n\n`;
      for (const comp of comps) {
        const deps =
          comp.dependencies.length > 0
            ? ` — deps: ${comp.dependencies.join(", ")}`
            : "";
        output += `- **${comp.name}** (\`${comp.slug}\`): ${comp.description}${deps}\n`;
      }
      output += "\n";
    }
  
    return {
      content: [{ type: "text" as const, text: output }],
    };
  }

• src/index.ts:24-29 (schema)

  Zod schema definition for the list_components tool's input parameters, defining an optional 'category' field that accepts strings from the valid categories: shaders, texts, micro-interactions, components, templates.

  category: z
    .string()
    .optional()
    .describe(
      "Filter by category: shaders, texts, micro-interactions, components, templates"
    ),

• src/index.ts:20-74 (registration)

  Tool registration using server.tool() that registers 'list_components' with the MCP server, including its description, input schema, and async handler function.

  server.tool(
    "list_components",
    "List all available Reacticx components. Optionally filter by category: shaders, texts, micro-interactions, components, templates.",
    {
      category: z
        .string()
        .optional()
        .describe(
          "Filter by category: shaders, texts, micro-interactions, components, templates"
        ),
    },
    async ({ category }) => {
      let results =
        category && category.trim()
          ? getComponentsByCategory(category.trim())
          : COMPONENT_REGISTRY;
  
      if (results.length === 0) {
        return {
          content: [
            {
              type: "text" as const,
              text: `No components found for category "${category}". Available categories: ${CATEGORIES.join(", ")}`,
            },
          ],
        };
      }
  
      const grouped = new Map<string, typeof results>();
      for (const comp of results) {
        const cat = comp.category;
        if (!grouped.has(cat)) grouped.set(cat, []);
        grouped.get(cat)!.push(comp);
      }
  
      let output = `# Reacticx Components (${results.length} total)\n\n`;
      output += `Install any component: \`bunx --bun reacticx add <component-name>\`\n\n`;
  
      for (const [cat, comps] of grouped) {
        output += `## ${cat.charAt(0).toUpperCase() + cat.slice(1)} (${comps.length})\n\n`;
        for (const comp of comps) {
          const deps =
            comp.dependencies.length > 0
              ? ` — deps: ${comp.dependencies.join(", ")}`
              : "";
          output += `- **${comp.name}** (\`${comp.slug}\`): ${comp.description}${deps}\n`;
        }
        output += "\n";
      }
  
      return {
        content: [{ type: "text" as const, text: output }],
      };
    }
  );

• src/registry.ts:782-788 (helper)

  Helper function getComponentsByCategory that filters the COMPONENT_REGISTRY to return only components matching the specified category (case-insensitive comparison). Used by list_components handler when a category filter is provided.

  export function getComponentsByCategory(
    category: string
  ): ComponentInfo[] {
    return COMPONENT_REGISTRY.filter(
      (c) => c.category.toLowerCase() === category.toLowerCase()
    );
  }

• src/registry.ts:1-7 (schema)

  Type definition for ComponentInfo interface that defines the shape of component data including name, slug, category, description, and dependencies array. This schema is used throughout the registry and returned by list_components.

  export interface ComponentInfo {
    name: string;
    slug: string;
    category: string;
    description: string;
    dependencies: string[];
  }