Design Inspiration MCP Server

Instructions

Implementation Reference

• src/index.ts:307-393 (handler)

  The registration and handler implementation for the 'design_search_styles' tool, which performs parallel image and web searches using the Serper API based on the user's style and type preferences.

  server.registerTool("design_search_styles", {
    title: "Search design styles",
    description: `Search for a specific aesthetic direction — color palettes, typography, layouts, or animation references. Runs image and web search in parallel and returns combined results.`,
    inputSchema: SearchStyleInputSchema,
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      idempotentHint: true,
      openWorldHint: true,
    },
  }, async (params: SearchStyleInput) => {
    try {
      const typeKeywords: Record<string, string> = {
        "color-palette": "color palette scheme",
        typography: "typography fonts",
        layout: "layout grid structure",
        animation: "animation motion design",
        general: "",
      };
  
      const query = `${params.style} ${typeKeywords[params.type]} UI design inspiration`;
      const allSites = Object.values(DESIGN_SITES);
      const siteFilter = allSites.map((s) => `site:${s}`).join(" OR ");
      const fullQuery = `${query} (${siteFilter})`;
  
      const [imageData, searchData] = await Promise.all([
        serperRequest<SerperImagesResponse>("/images", { q: fullQuery, num: params.num }),
        serperRequest<SerperSearchResponse>("/search", { q: fullQuery, num: params.num }),
      ]);
  
      const images = imageData.images || [];
      const results = searchData.organic || [];
  
      const lines = [`# Style Inspiration: "${params.style}" (${params.type})`, ""];
  
      if (images.length) {
        lines.push("## Images", "");
        for (const img of images.slice(0, 5)) {
          lines.push(`- **${img.title}**: ${img.imageUrl}`);
          lines.push(`  Source: ${img.source} | [View](${img.link})`);
        }
        lines.push("");
      }
  
      if (results.length) {
        lines.push("## References", "");
        for (const r of results) {
          lines.push(`- **${r.title}**`);
          lines.push(`  ${r.snippet}`);
          lines.push(`  [View](${r.link})`);
          lines.push("");
        }
      }
  
      let text = lines.join("\n");
      if (text.length > CHARACTER_LIMIT) {
        text = text.slice(0, CHARACTER_LIMIT) + "\n\n...(truncated)";
      }
  
      return {
        content: [{ type: "text" as const, text }],
        structuredContent: {
          style: params.style,
          type: params.type,
          images: images.slice(0, 5).map((img) => ({
            title: img.title,
            imageUrl: img.imageUrl,
            source: img.source,
            link: img.link,
          })),
          references: results.map((r) => ({
            title: r.title,
            link: r.link,
            snippet: r.snippet,
          })),
        },
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text" as const,
            text: error instanceof Error ? error.message : `Error: ${String(error)}`,
          },
        ],
      };
    }

• src/index.ts:290-303 (schema)

  The Zod input schema definition for 'design_search_styles', validating style, type, and number of results.

      ),
    type: z
      .enum(["color-palette", "typography", "layout", "animation", "general"])
      .default("general")
      .describe("Type of style inspiration to search for"),
    num: z
      .number()
      .int()
      .min(1)
      .max(20)
      .default(10)
      .describe("Number of results (1-20, default: 10)"),
  })
  .strict();