get_component_props

Retrieve detailed property information for Element-UI components including names, types, descriptions, and default values to support Vue 2 development.

Instructions

获取 Element-UI 组件的所有属性（Props）信息，包括名称、类型、描述、默认值等。

Input Schema

TableJSON Schema

Name	Required	Description	Default
`tagName`	Yes	组件标签名, 例如：el-button
`propName`	No	获取特定属性的名称，不指定则返回所有属性

Implementation Reference

src/tools/get-component-props.ts:35-67 (handler)

The asynchronous handler function that implements the core logic of the 'get_component_props' tool. It fetches component data from componentObject, filters props if propName is specified, handles errors for missing components or props, and returns structured content with JSON stringified text.

async ({ tagName, propName }) => {
  const component = componentObject[tagName]

  if (!component) {
    throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`)
  }

  let resultProps = component.props || []

  // 如果指定了属性名，过滤特定属性
  if (propName) {
    resultProps = resultProps.filter(prop => prop.name === propName)
    if (resultProps.length === 0) {
      throw new Error(`Property "${propName}" not found in component "${tagName}". Available props: ${component.props?.map(p => p.name).join(', ') || 'none'}`)
    }
  }

  const result = {
    tagName,
    props: resultProps,
    total: (component.props || []).length,
  }

  return {
    structuredContent: result,
    content: [
      {
        type: 'text' as const,
        text: JSON.stringify(result, null, 2),
      },
    ],
  }
}

src/tools/get-component-props.ts:15-33 (schema)

Zod schemas for input (tagName: string, propName: optional string) and output (tagName, props array with name/description/type/required/default, total count) validation.

inputSchema: z.object({
  tagName: z.string().describe('组件标签名, 例如：el-button'),
  propName: z.string().optional().describe('获取特定属性的名称，不指定则返回所有属性'),
}),
outputSchema: z.object({
  tagName: z.string().describe('组件标签名'),
  props: z.array(
    z.object({
      name: z.string().describe('属性名'),
      description: z.string().optional().describe('属性描述'),
      type: z.object({
        raw: z.string().describe('属性类型'),
      }).describe('属性类型信息'),
      required: z.boolean().optional().describe('是否必需'),
      default: z.any().optional().describe('默认值'),
    })
  ),
  total: z.number().describe('属性总数'),
}),

src/tools/get-component-props.ts:9-69 (registration)

The registerGetComponentProps function that registers the 'get_component_props' tool on the MCP server, including tool name, title, description, input/output schemas, and handler.

export function registerGetComponentProps(server: McpServer) {
  server.registerTool(
    'get_component_props',
    {
      title: 'Get Component Props',
      description: '获取 Element-UI 组件的所有属性（Props）信息，包括名称、类型、描述、默认值等。',
      inputSchema: z.object({
        tagName: z.string().describe('组件标签名, 例如：el-button'),
        propName: z.string().optional().describe('获取特定属性的名称，不指定则返回所有属性'),
      }),
      outputSchema: z.object({
        tagName: z.string().describe('组件标签名'),
        props: z.array(
          z.object({
            name: z.string().describe('属性名'),
            description: z.string().optional().describe('属性描述'),
            type: z.object({
              raw: z.string().describe('属性类型'),
            }).describe('属性类型信息'),
            required: z.boolean().optional().describe('是否必需'),
            default: z.any().optional().describe('默认值'),
          })
        ),
        total: z.number().describe('属性总数'),
      }),
    },
    async ({ tagName, propName }) => {
      const component = componentObject[tagName]

      if (!component) {
        throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`)
      }

      let resultProps = component.props || []

      // 如果指定了属性名，过滤特定属性
      if (propName) {
        resultProps = resultProps.filter(prop => prop.name === propName)
        if (resultProps.length === 0) {
          throw new Error(`Property "${propName}" not found in component "${tagName}". Available props: ${component.props?.map(p => p.name).join(', ') || 'none'}`)
        }
      }

      const result = {
        tagName,
        props: resultProps,
        total: (component.props || []).length,
      }

      return {
        structuredContent: result,
        content: [
          {
            type: 'text' as const,
            text: JSON.stringify(result, null, 2),
          },
        ],
      }
    }
  )
}

src/index.ts:33-33 (registration)
Invocation of registerGetComponentProps in the main server creation function to include the tool in the MCP server.
```
registerGetComponentProps(server);
```

Element-UI MCP Server