Magic Component Platform (MCP)

Instructions

Implementation Reference

• src/tools/logo-search.ts:196-345 (handler)

  The `execute` method: core handler that processes multiple logo queries, fetches SVGs from SVGL API, converts to JSX/TSX/SVG formats, generates component code, handles failures, saves test results, and returns JSON-structured response with icons, not-found suggestions, and usage setup instructions.

  async execute({ queries, format }: z.infer<typeof this.schema>) {
    console.log(
      `[${LOGO_TOOL_NAME}] Starting logo search for: ${queries.join(
        ", "
      )} in ${format} format`
    );
    try {
      // Process all queries
      const results = await Promise.all(
        queries.map(async (query) => {
          try {
            console.log(`[${LOGO_TOOL_NAME}] Fetching logos for ${query}...`);
            const logos = await this.fetchLogos(query);
  
            if (logos.length === 0) {
              console.log(`[${LOGO_TOOL_NAME}] No logo found for ${query}`);
              return {
                query,
                success: false,
                message: `No logo found for: "${query}"`,
              };
            }
  
            const logo = logos[0];
            console.log(
              `[${LOGO_TOOL_NAME}] Processing logo for: ${logo.title}`
            );
  
            const svgUrl =
              typeof logo.route === "string" ? logo.route : logo.route.light;
            console.log(`[${LOGO_TOOL_NAME}] Fetching SVG from: ${svgUrl}`);
            const svgContent = await this.fetchSVGContent(svgUrl);
  
            console.log(`[${LOGO_TOOL_NAME}] Converting to ${format} format`);
            const formattedContent = await this.convertToFormat(
              svgContent,
              format,
              logo.title + "Icon"
            );
  
            console.log(`[${LOGO_TOOL_NAME}] Successfully processed ${query}`);
            return {
              query,
              success: true,
              content: `// ${logo.title} (${logo.url})\n${formattedContent}`,
            };
          } catch (error) {
            console.error(
              `[${LOGO_TOOL_NAME}] Error processing ${query}:`,
              error
            );
            return {
              query,
              success: false,
              message: error instanceof Error ? error.message : "Unknown error",
            };
          }
        })
      );
  
      // Prepare summary
      const successful = results.filter((r) => r.success);
      const failed = results.filter((r) => !r.success);
  
      console.log(`[${LOGO_TOOL_NAME}] Results summary:`);
      console.log(
        `[${LOGO_TOOL_NAME}] Successfully processed: ${successful.length}`
      );
      console.log(`[${LOGO_TOOL_NAME}] Failed to process: ${failed.length}`);
  
      // Save test results
      await this.saveTestResult({
        queries,
        format,
        successful: successful
          .filter(
            (r): r is typeof r & { content: string } => r.content !== undefined
          )
          .map((r) => ({
            query: r.query,
            content: r.content,
          })),
        failed: failed
          .filter(
            (r): r is typeof r & { message: string } => r.message !== undefined
          )
          .map((r) => ({
            query: r.query,
            message: r.message,
          })),
      });
  
      // Format response as component structure
      const foundIcons = successful.map((r) => {
        const title =
          r.content?.split("\n")[0].replace("// ", "").split(" (")[0] || "";
        const componentName =
          title
            .split(" ")
            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
            .join("")
            .replace(/[^a-zA-Z0-9]/g, "") + "Icon";
  
        return {
          icon: componentName,
          code: r.content?.split("\n").slice(1).join("\n") || "",
        };
      });
  
      const missingIcons = failed.map((f) => ({
        icon: f.query,
        alternatives: [
          "Search for SVG version on the official website",
          "Check other icon libraries (e.g., heroicons, lucide)",
          "Request SVG file from the user",
        ],
      }));
  
      const response = {
        icons: foundIcons,
        notFound: missingIcons,
        setup: [
          "1. Add these icons to your project:",
          foundIcons
            .map((c) => `   ${c.icon}.${format.toLowerCase()}`)
            .join("\n"),
          "2. Import and use like this:",
          "```tsx",
          "import { " +
            foundIcons.map((c) => c.icon).join(", ") +
            " } from '@/icons';",
          "```",
        ].join("\n"),
      };
  
      // Log results
      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify(response, null, 2),
          },
        ],
      };
    } catch (error) {
      // Log error
      console.error(`[${LOGO_TOOL_NAME}] Error:`, error);
      throw error;
    }
  }

• src/tools/logo-search.ts:49-58 (schema)

  LogoSearchTool class definition including name='logo_search', multi-line description, and Zod schema for inputs: queries (string array), format (enum: JSX/TSX/SVG).

  export class LogoSearchTool extends BaseTool {
    name = LOGO_TOOL_NAME;
    description = LOGO_TOOL_DESCRIPTION;
  
    schema = z.object({
      queries: z
        .array(z.string())
        .describe("List of company names to search for logos"),
      format: z.enum(["JSX", "TSX", "SVG"]).describe("Output format"),
    });

• src/index.ts:22-25 (registration)

  Registration of LogoSearchTool (and other tools) to the MCP server instance via .register(server) method.

  new CreateUiTool().register(server);
  new LogoSearchTool().register(server);
  new FetchUiTool().register(server);
  new RefineUiTool().register(server);

• src/index.ts:10-10 (registration)

  Import statement for LogoSearchTool from the implementation file.

  import { LogoSearchTool } from "./tools/logo-search.js";

• src/tools/logo-search.ts:60-81 (helper)

  Helper method to fetch logo metadata from SVGL API.

  private async fetchLogos(query: string): Promise<SVGLogo[]> {
    const baseUrl = "https://api.svgl.app";
    const url = `${baseUrl}?search=${encodeURIComponent(query)}`;
  
    try {
      const response = await fetch(url);
      if (!response.ok) {
        if (response.status === 404) {
          return []; // Return empty array for not found instead of throwing
        }
        throw new Error(`SVGL API error: ${response.statusText}`);
      }
      const data = await response.json();
      return Array.isArray(data) ? data : [];
    } catch (error) {
      console.error(
        `[${LOGO_TOOL_NAME}] Error fetching logos for ${query}:`,
        error
      );
      return []; // Return empty array on error
    }
  }