Visa Design System MCP Server

Instructions

Implementation Reference

• src/mcp-server.ts:461-481 (handler)

  The MCP handler function for the 'get-component-details' tool. Validates input and delegates to ComponentService.getComponent(), returning JSON stringified result.

  private async handleGetComponentDetails(args: Record<string, any>): Promise<CallToolResult> {
    const { name } = args;
    
    if (!name || typeof name !== 'string') {
      throw new McpError(
        ErrorCode.InvalidParams,
        'Component name is required and must be a string'
      );
    }
  
    const component = await this.componentService.getComponent(name);
  
    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(component, null, 2)
        }
      ]
    };
  }

• src/mcp-server.ts:188-201 (registration)

  Tool registration definition returned by listTools, including name, description, and input schema.

  {
    name: 'get-component-details',
    description: 'Get detailed information about a specific component',
    inputSchema: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          description: 'Component name'
        }
      },
      required: ['name']
    }
  },

• src/services/component-service.ts:57-81 (helper)

  Core helper method that retrieves the specific component from cached data by name, with comprehensive error handling and suggestions.

  async getComponent(name: string): Promise<Component> {
    if (!name || typeof name !== 'string') {
      throw this.createError('INVALID_NAME', 'Component name must be a non-empty string');
    }
  
    const cachedData = this.dataManager.getCachedData();
    
    if (!cachedData) {
      throw this.createError('NO_DATA', 'No component data available');
    }
  
    const component = cachedData.components.find(
      comp => comp.name.toLowerCase() === name.toLowerCase()
    );
  
    if (!component) {
      const availableComponents = cachedData.components.map(comp => comp.name);
      throw this.createError('COMPONENT_NOT_FOUND', `Component "${name}" not found`, [
        `Available components: ${availableComponents.join(', ')}`,
        'Check component name spelling'
      ]);
    }
  
    return component;
  }