get_web_component

Retrieve accessibility criteria for web components including WCAG mappings, acceptance criteria, and implementation guidelines to ensure compliance with accessibility standards.

Instructions

Get detailed accessibility criteria for a specific web component. Returns acceptance criteria, WCAG mappings, code examples, and implementation guidelines.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`component`	Yes	Component name (e.g., "button", "checkbox", "text-input")
`include_code_examples`	No	Include code examples in response (default: true)

Implementation Reference

src/index.ts:119-152 (handler)

Primary handler function that executes the get_web_component tool logic. Retrieves web component accessibility data via contentLoader and includes comprehensive error handling with component suggestions.

async function handleGetWebComponent(args: any) {
  try {
    const componentData = await contentLoader.getComponent('web', args.component);

    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(componentData, null, 2),
        },
      ],
    };
  } catch (error: any) {
    const suggestions = contentLoader.getSimilarComponents('web', args.component);

    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(
            {
              error: 'Component not found',
              component: args.component,
              suggestions,
            },
            null,
            2
          ),
        },
      ],
      isError: true,
    };
  }
}

src/tool-definitions.ts:21-39 (schema)

Tool schema definition including name, description, and input schema with required 'component' parameter and optional code examples flag.

{
  name: 'get_web_component',
  description: 'Get detailed accessibility criteria for a specific web component. Returns acceptance criteria, WCAG mappings, code examples, and implementation guidelines.',
  inputSchema: {
    type: 'object',
    properties: {
      component: {
        type: 'string',
        description: 'Component name (e.g., "button", "checkbox", "text-input")',
      },
      include_code_examples: {
        type: 'boolean',
        description: 'Include code examples in response (default: true)',
        default: true,
      },
    },
    required: ['component'],
  },
},

src/index.ts:36-40 (registration)
Registration of all tools, including get_web_component, via the ListToolsRequestSchema handler that returns TOOL_DEFINITIONS.
```
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: TOOL_DEFINITIONS,
  };
});
```

netlify/functions/api.js:31-34 (handler)

Alternative inline handler for get_web_component in the Netlify HTTP server implementation.

case 'get_web_component': {
  const data = await contentLoader.getComponent('web', args.component);
  return { content: [{ type: 'text', text: JSON.stringify(data, null, 2) }] };
}

netlify/functions/api.js:20-21 (registration)
Registration of tools in Netlify function using shared TOOL_DEFINITIONS for list tools endpoint.
```
const tools = TOOL_DEFINITIONS;
```

MagentaA11y MCP Server