Generative UI MCP

Instructions

Implementation Reference

• src/index.ts:32-45 (handler)

  The MCP tool handler for 'load_ui_guidelines' which calls the getGuidelines helper to return design specifications.

  server.tool(
    "load_ui_guidelines",
    `Load detailed design guidelines for generating visual widgets. Call this before generating your first widget in a conversation. Available modules: ${AVAILABLE_MODULES.join(", ")}.`,
    {
      modules: z
        .array(z.enum(["interactive", "chart", "mockup", "art", "diagram"]))
        .describe(
          "Which guideline modules to load. interactive = HTML controls/forms, chart = Chart.js, mockup = UI mockups, art = SVG illustrations, diagram = flowcharts/timelines/hierarchies."
        ),
    },
    async ({ modules }) => ({
      content: [{ type: "text", text: getGuidelines(modules) }],
    })
  );

• src/guidelines.ts:193-211 (helper)

  The getGuidelines helper function that assembles and deduplicates design guideline sections based on requested module names.

  export function getGuidelines(moduleNames: string[]): string {
    const seen = new Set<string>();
    const parts: string[] = [];
    for (const mod of moduleNames) {
      const key = mod.toLowerCase().trim();
      const sections = MODULE_SECTIONS[key];
      if (!sections) continue;
      for (const section of sections) {
        if (!seen.has(section)) {
          seen.add(section);
          parts.push(section);
        }
      }
    }
    if (parts.length === 0) {
      return `No guidelines found. Available modules: ${AVAILABLE_MODULES.join(', ')}`;
    }
    return parts.join('\n\n\n');
  }