Search Blocks by Keyword

Instructions

Implementation Reference

• src/server.ts:155-184 (registration)

  Registration of the 'searchBlocks' tool via server.registerTool(). Defines name, title, description, and inputSchema (query string).

  // Register tools for Searching a Block by keyword
  server.registerTool(
    "searchBlocks",
    {
      title: "Search Blocks by Keyword",
      description:
        "Search Shadcn Space blocks using keywords or tags. Agents can use this to find relevant blocks when building a page based on user requirements or content type.",
      inputSchema: z.object({
        query: z
          .string()
          .describe("Keyword or tag to search for relevant blocks."),
      }),
    },
    async ({ query }) => {
      const blocks = await fetchUIBlocks();
      const filtered = blocks.filter(
        (b: { name: string | string[]; tags: any[] }) =>
          b.name.includes(query) || b.tags?.some((t) => t.includes(query)),
      );
  
      return {
        content: [
          {
            type: "text",
            text: JSON.stringify(filtered, null, 2),
          },
        ],
      };
    },
  );

• src/server.ts:168-183 (handler)

  The handler function for searchBlocks. It fetches all UI blocks via fetchUIBlocks(), filters them by matching the query against block names or tags, and returns the filtered results as JSON.

  async ({ query }) => {
    const blocks = await fetchUIBlocks();
    const filtered = blocks.filter(
      (b: { name: string | string[]; tags: any[] }) =>
        b.name.includes(query) || b.tags?.some((t) => t.includes(query)),
    );
  
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(filtered, null, 2),
        },
      ],
    };
  },

• src/server.ts:162-166 (schema)

  Input schema for searchBlocks defining a single required 'query' string parameter.

  inputSchema: z.object({
    query: z
      .string()
      .describe("Keyword or tag to search for relevant blocks."),
  }),

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

  The fetchUIBlocks() helper function called by the searchBlocks handler. Fetches the registry JSON and filters for items of type 'registry:block'.

  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 [];
    }
  }