--- title: "Getting Started with Uniform and Algolia" description: "This video shows the steps to integrate Algolia with Uniform!" date: "2023-07-20T07:57:59.000Z" url: "https://timbenniks.dev/videos/uniform/013-lfkshonh3oc" youtube_url: "https://www.youtube.com/watch?v=lfkshoNh3oc" playlist: "uniform" image: "https://i.ytimg.com/vi/lfkshoNh3oc/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "content-ops", "frontend"] --- # Getting Started with Uniform and Algolia This video shows the steps to integrate Algolia with Uniform! Watch on YouTube: https://www.youtube.com/watch?v=lfkshoNh3oc ## Transcript this is Tim from uniform and in this video we will be looking at how to get started with the latest integration between uniform and algoli so let's get into the browser and get cracking so here you can see there's my team and there's no projects here yet so let's just add a project to be able to add the integration all right so here we have our dashboard that of course is completely empty right now so let's go to Integrations and find algolia here is the latest integration and add this to our project now that we're here you can see there's a bunch of settings that algolia needs to be able to communicate with the outside world and so if you have a look here we need an application ID and we need an API key but that API key meets a certain amount of permissions so I already have my algolia dashboard open here everything is ready to rock I'm on my Turbo tutorials index it has team 10 videos in it so let's go to our settings and then API keys and then actually go to all API keys and we make a new one for uniform and let's go back to the other tab to have a look of what it actually needs of course we need the turbo tutorials one um in case it needs certain ACL rules access rules so we need search list indexes and settings so search this in that XX yeah and settings here we go create all right we just created an API key we can put it in let's find our application ID also needed and test well we have now successfully found that this connection is working so we are ready to rock and roll the cool thing is now that you've installed this Algeria integration it has also added a whole bunch of components for you so when we now go to Canvas you can see there's actually already a page created which is called algolia demo page you can have a look of what actually happened here so now that we're in this page you can see there's a whole bunch of stuff going on already and this is actually if the the Keen viewers that have actually used algolia instant search components before can see that these match with the egoli instant search front-end components so we actually have to select an index here and you can see there's the search box component there's a refinement list there's hits with with results there's pagination there's a whole bunch of stuff that uniform has already mapped out for you that you only have to go into your front end then you add your instant search widgets connected to uniform and you're ready to rock um next to being able to actually create something like this we can also add another component ourselves to make a search query work so let's do that now so let's add an algolia let's say just a list of items that we're searching and then in parameters you can actually add an algolia parameter let's let's call it search and then here we can do algoli components query and record but we want a list of three things so let's query algolia so here you can select which index you want to search in and then here what we have is kind of a little mapper field so you can actually say Okay so the title in my um in my index item is going to be then shown in uniform I don't really have a subtitle I think I have a description and I have an image so and I think that's poster.source let's have a look at the algoli index if that actually matches up um let's go to my index here there we go and then here you can see these are my hits so I have a title I have description and a poster dot Source all right these are working and just to show you quickly what it might look like these are all my videos that I have indexed all right so we also have facets selected and set up in this index already so we can actually do that you can actually say it uniform has found them already right so we want tags and complexity sure so now we've added a component that is a list with a search parameter in it so let's save this one and um let's make sure we can add it to the algolia demo page because we actually have a slot in here and in it let's find our list there it is we just made this one so we are allowing this component to actually also work on that page so we're closing it up um let's make a new quick page and just add our list components in here let's find our list and there it is it's already working so it's basically just allowing you to query into algolia and then select whatever you want and so now it shows me five but I kind of want three and you see our facets are showing up so I can say you know what I only want few three ones or I want only complex ones or I want everything to do with data fetching I just filter by term and so this list now output that search query so your front-end can use that and show it and this can be related items or whatever you want it to be you can also just select one to actually use a girly as a CMS if you wanted to so that's what I wanted to show you this is the getting started and there you go cheers have fun