List All Components

Instructions

Implementation Reference

• src/server.ts:59-91 (registration)

  Registration of the 'listComponents' tool on the MCP server. It calls fetchUIComponents() and returns the result as JSON text.

  server.registerTool(
    "listComponents",
    {
      title: "List All Components",
      description:
        "Provides a full list of Shadcn Space components. Agents can use this to discover components to build pages or sections within a project.",
      inputSchema: z.object({}),
    },
    async () => {
      try {
        const uiComponents = await fetchUIComponents();
  
        return {
          content: [
            {
              type: "text",
              text: JSON.stringify(uiComponents, null, 2),
            },
          ],
        };
      } catch {
        return {
          content: [
            {
              type: "text",
              text: "Failed to fetch MagicUI components",
            },
          ],
          isError: true,
        };
      }
    },
  );

• src/server.ts:67-90 (handler)

  Handler function for the 'listComponents' tool. Calls fetchUIComponents() and returns the JSON-stringified result, with error handling returning a failure message.

  async () => {
    try {
      const uiComponents = await fetchUIComponents();
  
      return {
        content: [
          {
            type: "text",
            text: JSON.stringify(uiComponents, null, 2),
          },
        ],
      };
    } catch {
      return {
        content: [
          {
            type: "text",
            text: "Failed to fetch MagicUI components",
          },
        ],
        isError: true,
      };
    }
  },

• src/server.ts:61-66 (schema)

  Input schema and metadata definitions for the 'listComponents' tool (title, description, empty input schema).

  {
    title: "List All Components",
    description:
      "Provides a full list of Shadcn Space components. Agents can use this to discover components to build pages or sections within a project.",
    inputSchema: z.object({}),
  },

• src/utils/api.ts:32-61 (helper)

  The fetchUIComponents() helper function that fetches from the Shadcn Space registry API, filters by 'registry:component' type, and parses each item with ComponentSchema.

  export async function fetchUIComponents() {
    try {
      const response = await fetch(
        "https://shadcnspace.com/r/registry.json",
      );
  
      if (!response.ok) {
        throw new Error(
          `Failed to fetch registry.json: ${response.statusText} (Status: ${response.status})`,
        );
      }
      const data = await response.json();
  
      return data.items
        .filter((item: any) => item.type === "registry:component")
        .map((item: any) => {
          try {
            return ComponentSchema.parse({
              name: item.name,
              type: item.type,
              description: item.description,
            });
          } catch (parseError) {
            return null;
          }
        });
    } catch (error) {
      return [];
    }
  }

• src/utils/api.ts:4-9 (schema)

  ComponentSchema Zod schema used by fetchUIComponents() to validate/parse each component item.

  const ComponentSchema = z.object({
    name: z.string(),
    title: z.string().optional(), // Only optional because of interactive-hover-button
    type: z.string(),
    description: z.string().optional(), // Only optional because of interactive-hover-button
  });