So, you want to build apps and right now most YouTube videos you see are focused on building really simple apps that don't use any external integrations. That's mostly because those integrations are tough to configure and connect properly. Now, what do you actually need for those external integrations? You need APIs. APIs are basically connections that websites or services offer. So, you can plug into their app and use their features inside your own app. Take ChatGpt as an example. You've probably seen that a lot of apps now come with AI builtin, but they're not running any AI model themselves. It's just the chat GPT API. You send a request to it and it sends a response back. You're basically using chat GPT as a service inside your app. The problem is a lot of these API services are tricky to set up in your own apps. Tools like Lovable, Bolt, or even Firebase Studio often don't fetch external API documentation automatically. And every API needs some kind of documentation to explain how it works. For instance, if you're building a chat GPT app, there's a full set of docs you either need to read yourself or feed into your AI model so it knows how to properly integrate that API into your code. Most of these tools use pretty simple AI models that actually perform really well on things like React and TypeScript, but they don't have any external knowledge. That's where TempoLabs has come in with a pretty solid fix. All right, so what they've done is introduce this new MCP app store. And right now I'm in a new project by TempoLabs. I'm going to show you how we can build a project using these MCP integrations. What they've basically done is take these APIs, these external integrations, and put them on an MCP server. The app just needs to access that MCP server, and the full documentation for the external integration is already built in. So, the AI knows exactly how to connect to each individual service, and that's the fun part. You just install it, and the integration is ready to go. No need to read the documentation or explain anything to the AI. Just install it, drop in your API keys because those are still required and it works. It really is that simple. First, you need to connect it to Superbase to get started. Just go ahead and connect to Superbase. If you haven't signed up yet, you'll need to create an account, make an organization like we've done here, and then authorize TempoLabs. Once you're connected, you can pick any of your projects like I picked test and connect that. You'll see that Superbase is now linked and ready to use. Now, let's go back to the app store. You'll see a browse section where you can look through all the external integrations you might want to use. There are a bunch of them like Firecrawl. In their demo, TempoLabs showed how they built a web crawler by pasting a link to any website and it automatically crawled that site. They also connected an LLM and you can do that too. For example, you can connect Gemini to process the crawl data, summarize it and give you the main points from any site or if you just want the raw data, firecrawl works great. It's a solid web crawler. Installing it is super easy. Just grab your API key from the Firecrawl dashboard, paste it in, click connect, and you're done. After that, you can tell the AI that the app is installed, and it'll start using it. For this demo, we're going to install 11 Labs and actually build something with it. So, let's click on install. You'll see we need to paste our API key here. I've got mine saved somewhere safe. So, I'll paste that in, hit connect, and then I'll show you what we're about to build. Okay, so this is our PRD right here. And right now I'm building a quotes app that uses the 11 Labs API to read our daily codes aloud. This is just to show how it uses the external MCP apps from the app store. Based on the PRD, it's already generated the user flow. And if you expand it, you'll see the full mermaid diagram laid out. If you want to change anything, you can just edit your PRD or add more detail to it. Over on the right, you'll see we've got our Nex.js starter template kit, which also includes authentication. They've given us a template that starts with a landing page and then continues into the app we actually want to build. Now, I'm just going to prompt it to keep going and start building the app based on the PRD and the user flow. If you're enjoying the video, I'd really appreciate it if you could subscribe to the channel. We're aiming to hit 25,000 subscribers by the end of this month, and your support really helps. We share videos like this three times a week, so there's always something new and useful for you to check out. Okay, so it has finished building the basic app now and I've just prompted it to add a test mode that lets users sign in anonymously. While that's happening, we can take a look at what it has built so far on the landing page. This is what it's generated using the starter template and we can see that it's using Shaden components with a clean minimalistic style. If we scroll down to the bottom, we can also see a preview of what the inner UI will look like. It's not functional yet, but they've given us a glimpse of how the component guards are going to work. We'll have our quote displayed right here, the name of the person who said it, and an option to listen to the quote as well. I'm probably going to add a drop down, too, so we can switch between voices and pick from the different options that 11 Labs provides. Okay, so as you can see, we're here on the dashboard right now. It's pretty clean and minimal. Tempo is really a React builder, so it knows how to write React code. And honestly, this looks amazing. On the left, we've got multiple sections, but to be honest, I don't think most of them are working right now. The only one that works is the quote generator. And at the moment, we're not generating any new quotes since we already have some saved. So, if I click this, it won't generate a new quote. It'll just fetch one from the database. We can easily add that functionality, too, since we've got MCP stores for OpenAI, Tropic, and Gemini. We just need to plug in our API keys for those, and we'll be able to generate quote ourselves. It's that simple to add new features directly into your app. Now, I haven't tested this fully yet, but let's go ahead and give it a listen. The best way to predict the future is to create it. You can see we got a notification that the quote was being played and that's because I added some error logging earlier. There were issues with voice generation and I added that logging to help figure out what was wrong. But now that it's fixed, we got the transcription and it looks great. One thing that's still missing is the ability to switch between multiple voices and choose from a drop- down menu. So, let's go ahead and ask Tempo to add that in, too. Okay. So, if you look right here, you'll see that I gave it the prompt to add the ability to choose multiple voices provided by 11 Labs. I also asked it to include a drop-down and explained how the entire multiple voices setup should work. This is the prompt I gave it. Now, if we go back to our app, you can see that we have this beautiful drop- down menu with multiple voices to choose from. It pulled in a lot of voices. I believe it fetched everything available in my 11 Labs library. Let's go ahead and give it a listen. The only limit to our realization of tomorrow will be our doubts of today. This is the default voice that gets selected when the app opens. Okay, that was pretty good. Now, let's switch to another one. Let's say we pick the voice of George. The only limit to our realization of tomorrow will be our doubts of today. The only limit to our realization of tomorrow will be our doubts of today. That works, too. So, you can see it's working really well. We can switch to any voice we want. Honestly, the voice integration with 11 Labs was super seamless. I didn't even have to check the API documentation. I haven't explored the rest of the app yet, but I noticed that the user flow also generated a share button. So, if I click that, it actually brings up the default Mac OS sharing menu. That means I can share the quote or even the audio. That's a really nice touch. We also have a save button that lets us store the quotes. And when I go into the saved quotes section, I can see that the quote has been added. That's pretty impressive. So, this is a really cool feature that Tempo Labs has introduced. It makes integrating tools like these into your app incredibly simple. You just tell the AI what you want and it handles everything. You don't need to read documentation or load it into the AI because it's already built in. Right now, they've got a solid collection of these external connections available and I think even more are on the way. That brings us to the end of this video. If you'd like to support the channel and help us keep making tutorials like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.