This is a visualforce page and controller for Remote site creation using MetaDataService apex class.

RemoteSiteCreation.Page

<!--
- This Visualforce Page is created for Remote Site Creation 
- using MetaDataService apex class.
-
- @author       Sagar Sindhi
- @since        10.03.2018
- @revision     N/A
-
--> 

<apex:page docType="html-5.0" sidebar="false" controller="RemoteSiteCreationExt">
    <apex:form>
        <!-- Page Message to display success or error message -->
        <apex:PageMessages id="msg" />
        <apex:pageBlock title="Remote Site Setting" id="RmtBlck">
            <apex:pageBlockSection columns="2" id="RblckSec">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Name"/>
                    <apex:inputText id="rmtname" value="{!RemoteName}"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="URL"/>
                    <apex:inputText id="rmturl" value="{!RemoteUrl}"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Descripton"/>
                    <apex:inputTextArea id="rmtdesc" value="{!RemoteDescription}"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Active"/>
                    <apex:inputCheckbox id="rmtact" value="{!RemoteActive}"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            
            <div align="center">
                <apex:commandButton value="Create Remote Site" action="{!RemoteSiteCreation}" reRender="msg,RmtBlck" status="actStatusId"/>
                <apex:actionStatus id="actStatusId">
                    <apex:facet name="start">
                        <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;height: 100%;opacity:0.75;width:100%;"> 
                            <div class="waitingHolder" style="top:150px; width: 40px;">
                                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                            </div>
                        </div>                   
                    </apex:facet>
                </apex:actionStatus>
            </div> 
        </apex:pageBlock>
    </apex:form>
</apex:page>

RemoteSiteCreationExt.cls

/**
* This Apex class is used for bussiness logic
* with RemoteSiteCreation Visualforce Page to
* call the MetaDataService class for Remote 
* Site Creation.
*
* @author       Sagar Sindhi
* @since        10.03.2018
* @revision     N/A
*
**/
    
public with sharing class RemoteSiteCreationExt {

    public String RemoteName {get;set;}
    public String RemoteUrl {get;set;}
    public String RemoteDescription {get;set;}
    public Boolean RemoteActive {get;set;}
    
    public void RemoteSiteCreation()
    {
        try
        {
            String resultMessage;
            System.debug(RemoteName);
            System.debug(RemoteUrl);
            if(String.isEmpty(RemoteName) && String.isEmpty(RemoteUrl))
            {
                ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR, 'Please Enter Name and URL'));
            }
            else if(String.isEmpty(RemoteName))
            {
                ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR, 'Please Enter Name'));
            }
            else if(String.isEmpty(RemoteUrl))
            {
                ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR, 'Please Enter URL'));
            }
            else
            {
                MetadataService.MetadataPort ServiceCreation = new MetadataService.MetadataPort();
                ServiceCreation.SessionHeader = new MetadataService.SessionHeader_element();
                ServiceCreation.SessionHeader.sessionId = UserInfo.getSessionId();
                MetadataService.RemoteSiteSetting remoteSiteSettings = new MetadataService.RemoteSiteSetting();
                remoteSiteSettings.fullName = RemoteName;
                remoteSiteSettings.url = RemoteUrl;
                remoteSiteSettings.description= RemoteDescription;
                remoteSiteSettings.isActive= RemoteActive;
                remoteSiteSettings.disableProtocolSecurity=false;
                MetadataService.SaveResult[] results = ServiceCreation.createMetadata(new List<MetadataService.Metadata> { remoteSiteSettings });
                
                for(MetadataService.SaveResult sr : results)
                {
                    if(sr.errors != NULL)
                    {
                        for(MetadataService.Error er : sr.errors)
                        {
                            resultMessage = er.message;
                        }
                    }
                }
            
                if(results[0].success == true)
                {
                    ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Remote Site Successfully created !!'));
                    RemoteName = '';
                    RemoteUrl = '';
                    RemoteDescription = '';
                    RemoteActive = false;
                }
                else
                {
                    ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR, resultMessage));
                } 
                
            } 
        }
        catch(Exception ex)
        {
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR, ex.getMessage()));
        }
        
    }
}