List Installed Blocks

Instructions

Implementation Reference

• src/server.ts:187-231 (registration)

  Tool registration for 'listInstalledBlocks' using server.registerTool with inputSchema and handler.

  server.registerTool(
    "listInstalledBlocks",
    {
      title: "List Installed Blocks",
      description:
        "Lists all blocks that are currently installed in the project. Agents can use this to determine which blocks are available for customization or updating, and optionally filter by specific block names.",
      inputSchema: z.object({
        names: z
          .array(z.string())
          .optional()
          .describe(
            "Optional list of block names to filter the installed blocks.",
          ),
      }),
    },
    async ({ names }) => {
      // If no names provided → return all installed blocks
      const blocks = names?.length
        ? await fetchMultipleComponentDetails(names)
        : await fetchUIBlocks();
  
      const normalized = blocks.map(
        (b: { name: any; title: any; files: any }) => ({
          name: b.name,
          title: b.title,
          files: b.files ?? [],
        }),
      );
  
      return {
        content: [
          {
            type: "text",
            text: JSON.stringify(
              {
                blocks: normalized,
              },
              null,
              2,
            ),
          },
        ],
      };
    },
  );

• src/server.ts:202-230 (handler)

  Handler that fetches installed blocks (filtered by names if provided) and returns normalized results.

  async ({ names }) => {
    // If no names provided → return all installed blocks
    const blocks = names?.length
      ? await fetchMultipleComponentDetails(names)
      : await fetchUIBlocks();
  
    const normalized = blocks.map(
      (b: { name: any; title: any; files: any }) => ({
        name: b.name,
        title: b.title,
        files: b.files ?? [],
      }),
    );
  
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(
            {
              blocks: normalized,
            },
            null,
            2,
          ),
        },
      ],
    };
  },

• src/server.ts:193-200 (schema)

  Input schema: optional array of block names (z.array(z.string()).optional()).

  inputSchema: z.object({
    names: z
      .array(z.string())
      .optional()
      .describe(
        "Optional list of block names to filter the installed blocks.",
      ),
  }),

• src/utils/api.ts:64-94 (helper)

  fetchUIBlocks: Fetches registry.json from shadcnspace.com, filters for 'registry:block' items, parses with ComponentSchema.

  export async function fetchUIBlocks() {
    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:block")
        .map((item: any) => {
          try {
            return ComponentSchema.parse({
              name: item.name,
              type: item.type,
              description: item.description,
              title: item.title,
            });
          } catch (parseError) {
            return null;
          }
        });
    } catch (error) {
      return [];
    }
  }

• src/utils/api.ts:129-149 (helper)

  fetchMultipleComponentDetails: Fetches registry.json and optionally filters by block names, returning name/title/files metadata.

  export async function fetchMultipleComponentDetails(
    nameOrNames?: string | string[],
  ): Promise<BlockMetadata[]> {
    const res = await fetch(
      "https://shadcnspace.com/r/registry.json",
    );
    const registry = await res.json();
    let blocks = registry.items;
  
    if (nameOrNames) {
      const names = Array.isArray(nameOrNames) ? nameOrNames : [nameOrNames];
      blocks = blocks.filter((b: any) => names.includes(b.name));
    }
  
    // Return only metadata + file paths
    return blocks.map((b: any) => ({
      name: b.name,
      title: b.title,
      files: b.files ?? [],
    }));
  }