1. First, we need to ensure that our domain is deployed. The second thing is that we have not implemented an interface, so it is not going to be there in the Lightning App Builder. In the following screenshot, we are on the record page. Now, click on the Setup icon and select Edit Page.
2. There are Standard components that will be visible on the left-hand side of the page, and, if you see the Custom components, there would be no components available. The first reason might be that you do not have My Domain enabled for you, so if it is already enabled, the URL in the browser should be your registered domain, for example, ltng-cookbook-dev-ed.my.salesforce.com. So, this is your custom domain. Let's move to the configuration part. Let's configure our component by implementing the interface. If we want to use it only for the record page, we will go for the availableForRecordHome interface. If we want to use it anywhere—maybe the app page, home page, or record page—we will go for flexipage:availableForAllPageTypes. In the component, implement the interface as shown in the following highlighted code snippet and let's go to the Lightning App Builder once again and try to reload:

<aura:component implements="flexipage:availableForAllPageTypes">
    <!-- for the label of the Name -->
    <aura:attribute name="enterName" type="String" 
     default="Enter Name"/>
    <ui:outputText value="{!v.enterName}" />
    <ui:inputText  />
    <ui:button label="Submit" />
</aura:component>

3. If you do not get any effect after implementing the preceding code line, log out and then log back in. You will find myFirstLightningComponent under Custom component, as shown in the following screenshot. myFirstLightningComponent is the name we have used for our component with the default Lightning icon. Let's use this on the page: