Skip to main content
Glama
yun8711
by yun8711

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
NameRequiredDescriptionDefault
tagNameYes组件标签名, 例如:el-button
propNameNo获取特定属性的名称,不指定则返回所有属性

Implementation Reference

  • 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), }, ], } }
  • 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('属性总数'), }),
  • 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);

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/yun8711/element-ui-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server