shadcn-vue-mcp

Instructions

Implementation Reference

• src/core/tools.ts:27-78 (handler)

  The main handler function for the 'requirement-structuring' tool. It detects the preferred icon library from the input message, constructs a detailed prompt instructing an AI to structure the requirement into a specific JSON format (main_goal, data_structure, user_actions, icon), and returns this prompt as a text content block to be processed by the model.

      execute: async (params) => {
        // 智能识别用户描述中的图标库偏好
        const detectIconLibrary = (message: string): "@nuxt/icon" | "lucide" => {
          const lowerMessage = message.toLowerCase();
          // 优先检查明确的图标库关键词
          if (lowerMessage.includes("nuxt")) {
            return "@nuxt/icon";
          }
          // 如果没有明确指定，返回默认值
          return "lucide";
        };
  
        // 如果用户没有显式指定 icon，则从描述中智能识别
        const icon = detectIconLibrary(params.message);
  
        const prompt = `
  # Role
  You are a Vue.js Frontend Architect, an expert in shadcn-vue.
  
  # Task
  Your task is to convert a simple user requirement into a production-ready component blueprint in JSON format. Analyze the user's underlying intent and add essential features they might have overlooked, such as loading states, error handling, user interactions, edge cases, and accessibility.
  
  # Input
  The user requirement will be provided via the \`${params.message}\` variable.
  
  # Output Requirements
  1.  **Strictly** return a single, valid JSON object with absolutely no extra text, explanations, or markdown.
  2.  The JSON object **must** strictly follow this exact structure:
      \`\`\`json
      {
        "main_goal": "A one-sentence summary of the component's core purpose.",
        "data_structure": {
          "propertyName": "TypeScriptType - Brief description of its purpose."
        },
        "user_actions": {
          "actionName": "Description of the action's trigger and its effect."
        },
        "icon": "${icon}"
      }
     \`\`\`
  3.  After outputting the JSON, you **must** call the \`components-filter\` tool with the JSON string format as the input. 
    `;
  
        return {
          content: [
            {
              type: "text",
              text: prompt,
            },
          ],
        };
      },

• src/core/tools.ts:22-26 (schema)

  Zod schema defining the input parameters for the tool: a single 'message' string containing the user's requirement description.

  parameters: z.object({
    message: z
      .string()
      .describe("Content about user requirement in specific contextual information"),
  }),

• src/core/tools.ts:18-79 (registration)

  The registration of the 'requirement-structuring' tool on the FastMCP server instance, specifying name, description, input schema, and handler function.

    server.addTool({
      name: "requirement-structuring",
      description:
        "analyze the user's natural language and structure the requirements into a clear and structured component requirement document. Use this tool when the user requests a new UI component—e.g., mentions /ui, or asks for a button, input, dialog, table, form, banner, card, or other Vue component",
      parameters: z.object({
        message: z
          .string()
          .describe("Content about user requirement in specific contextual information"),
      }),
      execute: async (params) => {
        // 智能识别用户描述中的图标库偏好
        const detectIconLibrary = (message: string): "@nuxt/icon" | "lucide" => {
          const lowerMessage = message.toLowerCase();
          // 优先检查明确的图标库关键词
          if (lowerMessage.includes("nuxt")) {
            return "@nuxt/icon";
          }
          // 如果没有明确指定，返回默认值
          return "lucide";
        };
  
        // 如果用户没有显式指定 icon，则从描述中智能识别
        const icon = detectIconLibrary(params.message);
  
        const prompt = `
  # Role
  You are a Vue.js Frontend Architect, an expert in shadcn-vue.
  
  # Task
  Your task is to convert a simple user requirement into a production-ready component blueprint in JSON format. Analyze the user's underlying intent and add essential features they might have overlooked, such as loading states, error handling, user interactions, edge cases, and accessibility.
  
  # Input
  The user requirement will be provided via the \`${params.message}\` variable.
  
  # Output Requirements
  1.  **Strictly** return a single, valid JSON object with absolutely no extra text, explanations, or markdown.
  2.  The JSON object **must** strictly follow this exact structure:
      \`\`\`json
      {
        "main_goal": "A one-sentence summary of the component's core purpose.",
        "data_structure": {
          "propertyName": "TypeScriptType - Brief description of its purpose."
        },
        "user_actions": {
          "actionName": "Description of the action's trigger and its effect."
        },
        "icon": "${icon}"
      }
     \`\`\`
  3.  After outputting the JSON, you **must** call the \`components-filter\` tool with the JSON string format as the input. 
    `;
  
        return {
          content: [
            {
              type: "text",
              text: prompt,
            },
          ],
        };
      },
    });