Element-UI MCP Server

Instructions

Implementation Reference

• src/tools/get-component-slots.ts:36-69 (handler)

  The asynchronous handler function implementing the core logic of the 'get_component_slots' tool. It retrieves component slots from metadata, filters by slotName if provided, handles missing components/slots with errors listing alternatives, and returns structured JSON content.

    async ({ tagName, slotName }) => {
      const component = componentObject[tagName]
  
      if (!component) {
        throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`)
      }
  
      let resultSlots = component.slots || []
  
      // 如果指定了插槽名，过滤特定插槽
      if (slotName) {
        resultSlots = resultSlots.filter(slot => slot.name === slotName)
        if (resultSlots.length === 0) {
          throw new Error(`Slot "${slotName}" not found in component "${tagName}". Available slots: ${component.slots?.map(s => s.name).join(', ') || 'none'}`)
        }
      }
  
      const result = {
        tagName,
        slots: resultSlots,
        total: (component.slots || []).length,
      }
  
      return {
        structuredContent: result,
        content: [
          {
            type: 'text' as const,
            text: JSON.stringify(result, null, 2),
          },
        ],
      }
    }
  )

• src/tools/get-component-slots.ts:12-35 (schema)

  Zod-based input and output schemas defining the tool interface: input requires tagName (e.g., 'el-button'), optional slotName; output includes tagName, array of slots (with name, description, parameters, ts), and total count.

  {
    title: 'Get Component Slots',
    description: '获取 Element-UI 组件的所有插槽（Slots）信息，包括插槽名称、作用域参数、描述等。',
    inputSchema: z.object({
      tagName: z.string().describe('组件标签名, 例如：el-button'),
      slotName: z.string().optional().describe('获取特定插槽的名称，不指定则返回所有插槽'),
    }),
    outputSchema: z.object({
      tagName: z.string().describe('组件标签名'),
      slots: z.array(
        z.object({
          name: z.string().describe('插槽名'),
          description: z.string().optional().describe('插槽描述'),
          parameters: z.array(
            z.object({
              raw: z.string().describe('参数类型'),
            })
          ).optional().describe('作用域插槽的参数'),
          ts: z.string().optional().describe('TypeScript 签名'),
        })
      ),
      total: z.number().describe('插槽总数'),
    }),
  },

• src/tools/get-component-slots.ts:9-70 (registration)

  Module-level registration function that registers the 'get_component_slots' tool on the MCP server using server.registerTool with name, schema, and handler.

  export function registerGetComponentSlots(server: McpServer) {
    server.registerTool(
      'get_component_slots',
      {
        title: 'Get Component Slots',
        description: '获取 Element-UI 组件的所有插槽（Slots）信息，包括插槽名称、作用域参数、描述等。',
        inputSchema: z.object({
          tagName: z.string().describe('组件标签名, 例如：el-button'),
          slotName: z.string().optional().describe('获取特定插槽的名称，不指定则返回所有插槽'),
        }),
        outputSchema: z.object({
          tagName: z.string().describe('组件标签名'),
          slots: z.array(
            z.object({
              name: z.string().describe('插槽名'),
              description: z.string().optional().describe('插槽描述'),
              parameters: z.array(
                z.object({
                  raw: z.string().describe('参数类型'),
                })
              ).optional().describe('作用域插槽的参数'),
              ts: z.string().optional().describe('TypeScript 签名'),
            })
          ),
          total: z.number().describe('插槽总数'),
        }),
      },
      async ({ tagName, slotName }) => {
        const component = componentObject[tagName]
  
        if (!component) {
          throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`)
        }
  
        let resultSlots = component.slots || []
  
        // 如果指定了插槽名，过滤特定插槽
        if (slotName) {
          resultSlots = resultSlots.filter(slot => slot.name === slotName)
          if (resultSlots.length === 0) {
            throw new Error(`Slot "${slotName}" not found in component "${tagName}". Available slots: ${component.slots?.map(s => s.name).join(', ') || 'none'}`)
          }
        }
  
        const result = {
          tagName,
          slots: resultSlots,
          total: (component.slots || []).length,
        }
  
        return {
          structuredContent: result,
          content: [
            {
              type: 'text' as const,
              text: JSON.stringify(result, null, 2),
            },
          ],
        }
      }
    )
  }

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

  Application-level invocation of the tool registration during server setup in the main entry point.

  registerGetComponentSlots(server);

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

  Import statement for the get_component_slots registration module.

  import { registerGetComponentSlots } from './tools/get-component-slots.js';