Visa Design System MCP Server

Instructions

Implementation Reference

• src/mcp-server.ts:397-417 (handler)

  MCP server handler for get-design-token-details tool: validates input arguments and calls DesignTokenService.getToken

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

• src/services/design-token-service.ts:54-81 (handler)

  Core implementation of design token retrieval: performs case-insensitive search in cached data and returns token details or throws detailed error

   * Get a specific design token by name
   */
  async getToken(name: string): Promise<DesignToken> {
    if (!name || typeof name !== 'string') {
      throw this.createError('INVALID_NAME', 'Token name must be a non-empty string');
    }
  
    const cachedData = this.dataManager.getCachedData();
    
    if (!cachedData) {
      throw this.createError('NO_DATA', 'No design token data available');
    }
  
    const token = cachedData.designTokens.find(
      token => token.name.toLowerCase() === name.toLowerCase()
    );
  
    if (!token) {
      const availableTokens = cachedData.designTokens.map(token => token.name);
      throw this.createError('TOKEN_NOT_FOUND', `Design token "${name}" not found`, [
        `Available tokens: ${availableTokens.slice(0, 10).join(', ')}${availableTokens.length > 10 ? '...' : ''}`,
        'Check token name spelling',
        'Use search-tokens to find similar tokens'
      ]);
    }
  
    return token;
  }

• src/mcp-server.ts:147-160 (schema)

  Input schema and tool metadata definition used for registration and validation

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

• src/mcp-server.ts:97-102 (registration)

  MCP server request handler for listing tools, which includes get-design-token-details via getToolDefinitions()

  this.server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
      tools: this.getToolDefinitions()
    };
  });

• src/mcp-server.ts:294-295 (handler)

  Switch case routing tool calls to specific handlers

  case 'get-design-token-details':
    return await this.handleGetDesignTokenDetails(args);