Tempo: Build Web Apps with AI & MCP Integrations

--- type: transcript date: 2025-05-29 youtube_id: yVOUR256vz4 --- # Transcript: Tempo: Build Web Apps with AI & MCP Integrations In this video, I'm going to be showing you Temple, which is a platform that allows you to quickly create React applications completely from scratch with natural language. I'm going to go through a live build, show you what it looks like, as well as some of the features that are built within the platform. Once you've made an account on the platform and you create a new project, you can generate an app, connect to a GitHub repository, or alternatively connect to a GitLab repository. In this example, I'm going to start from scratch. One thing that I want to call out on the front end which is really nice is that you have the ability to choose between the different frameworks the authentication and the back end for your database as well as whether you want payments within your application. For instance, if I want to pair Nex.js with Superbase, I can go ahead and select it just like that. Alternatively, if I want to select Vit, I can go and choose between Clerk or Convex. And then for my payments, I have the option between Stripe and Polar. From there, you can make a free account on Clerk. And in this case, I'm just going to call our application Tempo in this case. You can name it to whatever you'd like. I'm also going to select that I'm going to have email as well as Google as my authentication providers. Now, we're going to go over to settings and then from there we can go and we can grab our publishable key here. That's going to be the first thing that we paste within Tempo. Within Convex, I'm going to create a demo project. I'm going to call this Tempo demo. From there, we're going to go to settings and within our settings, we're going to go to environment variables. And within here, this is going to be where we put our clerk secret key. From there, I'm going to go over to our production environment here. And within here we'll have our deployment URL. So we're going to go ahead and grab that. I'll paste that in here. And then we're also going to be generating a deployment key. What I'm going to do within this demo is I'm going to select Nex.js for our framework. And then for our backend I'm going to leverage Superbase. Now for Superbase, the nice thing is you can authenticate with OOTH. All that I need to get set up with this is I can go over to GitHub. So within Supabase, I'm just going to spin up a new project name. I'm going to call it Tempo and I'm going to go and create a new project. And then what we can do is we can select the database that we just created. We can also view the tables here or view the dashboard. I'll click and that will just take a moment. Now what Tempo has access to is the ability to view tables, manage users, access the SQL editor, edge functions, dashboards. Effectively it has a fully featured backend. So now I'm going to go over to Polar. I'm going to go ahead and log in. And in this case I'm going to use GitHub. Once again, within Polar, I'm going to go over to our sandbox, but you could follow the same steps and have this within a production environment as well. I'm going to authorize the Polar sandbox. I'm just going to call this developers digest. I'll go ahead and create that. From here, I'm going to go over to account settings, and right at the top here, we're going to grab our organization ID, and that's going to be what we paste in the second field here. From there, what we're going to do is we're just going to scroll down, and we're going to create a new organization access token. Within here, we have a number of different options. I'm just going to go ahead and create these. And then finally, once that's done, we're going to go over to web hooks. Under web hooks, we're going to add an endpoint. And then within here, we're going to be grabbing this route to this superbase edge function. We'll go and we'll copy that. We'll paste that within here. And then we can select the format type to raw. We can generate a secret. In this case, I'm going to allow all of the different events to be sent via this web hook. And then finally, I'm going to generate the secret. And that's going to be the last value that I put within tempo. From here, you just have to confirm that you've selected all of the events for the polar web hook. The last thing that we're going to need is we're going to actually have to set up some products within Polar. Now, if we go back to our sandbox and I go over to products for my product, I'm going to call this premium research. For the description, I'm going to say this enables premium features. From there, I'm going to change it to a monthly purchase. And then I'm going to set it to a fixed price of $10 a month. From here, you can add in more media. You can add in checkout fields, metadata, and the other nice thing with Polar is you can also easily have things like a Discord invitation link or a GitHub repo, even a large file or a license key. You can use this for a number of different use cases. And it really is a seamless experience. Last step, what I'm going to do here is I'm just going to go and I'm going to click refresh. And now we see you have one Polar product set up within this project. Now, what I can do is I can go and I can click setup integrations. And what it will do is we have the integration setup complete. And now I can ask for whatever I'd like. What I'm going to say within this is I'm going to say I want to create a platform that just has a simple input bar in the center of the screen. I want the overall app to be a dark theme and I want to call it research paper. As soon as I send in that query, what I want to have happen is I want to leverage the fire crawl MCP server and specifically I want to use the deep research functionality. I want to wait for all of that deep research to ultimately stream into a wizzywig editor. Let's maybe use tip tab. And ultimately, I want to save all of those different documents as if it was something similar to a word document on the left hand side. Within here, we have all of our prompt. We have the instructions to leverage firecrawl and set it up within tiptop. Then once you've sent it through, this is what you're going to see is it's going to generate a PRD as well as a mermaid diagram. Within the mermaid diagram, we have the flow of what the user's journey will be. First, the user will enter the homepage. From there, we'll have a clean, dark UI with the research paper branding. From there, we can interact with the center search bar. And then, we can submit our research query. From there, we can send the query to the firecrawl MCP server. We can stream the research results in real time. And then finally, we'll display the results within tiptap within a Wizywig editor. And then if the user has edited the document, we'll save out the research paper. And then we'll add the paper to the sidebar for the document management. And then we also have the ability to start research. And we see all of the different steps here. The mermaid visualization is super great, especially as an early step within your application cuz you can really start to see if what you're asking for actually makes sense and if what you ask for is actually translated to that large language model. And this is a really great visual representation of exactly that. From there, what we have here is on the right hand side, we have this infinite canvas. And on this infinite canvas, we can already see that it started to write out our actual homepage. I can already see almost instantly that we already have even the pricing that we had just set up within Polar. We have a beautiful homepage as a starting point. On the left hand side here, what we're going to see is we're going to see a number of different file edits as well as components that it's creating within here. We can see it's working away at generating some code. on the lefth hand side here. And then what we can do is we can toggle between prd design as well as code. Now I see it's worked through a number of different files. The global.css, the hero.tsx, the page as well as the layout. Now I can open that up within a tab here. This is what our application looks like. We have research paper. We have AI powered deep research. Transform complex queries into comprehensive research documents with our cuttingedge AI technology. We have start researching, learn more, AI powered research, real-time document editing, save and manage, so on and so forth. We have all of these nice callouts on the page here. We have AI powered analysis, wizzywig editor, document management, as well as real-time streaming. And then we also have some placeholders for some of the sources, how it works, and then finally, we have research plans here. Basically, there's only a couple nitpicks here, just obviously making this a little bit of a lighter color so it has better contrast ratio. And then the cool thing with this is we also have the authentication here. So now what I can do is I can put in a name and email as well as a password to sign up. And then I should get an email for a verification link. The one thing that I want to quickly call out is if you do click the confirmation link and you get a screen like this local host refuse to connect. Now the reason for this is if we look within Subabase, it's not going to have the context of where our application is deployed. Now, if I go over to authentication within our authentication table, we do have this user here. Now, if I go into signin and providers and I go over to email and I unfold that, I'm just going to turn off the confirmation email. Next, what I want to show you is the new MCP store. This is a really cool feature where what I can do is I can go and I can select an application. In this case, I'm going to select FireCrawl. And what I can do with this is I can go and I can install Firecrawl. And all that it asks for is an API key. What I can do here is I can go to my firecrawl account. I can copy the API key. I can paste that within tempo and I can go to connect and then we'll get the message that it has successfully been connected. We can go ahead. We can close this out. And effectively what you can do with this is you can select the different services that you want to integrate with. Say if you want to use firecrawl in combination with 11 labs or whatever it might be, you can go and install those and then once they're installed, you can go over to the AI chat and instruct what you actually want to build. In this case, I'm going to say I have added the fire crawl integration. Let's make sure to add that within the research query functionality. Let's leverage their deep research function and give free users 10 queries per day. Implement the firewall MCP client for research query functionality and add a limit of 10 queries per day for free users. Let's start by creating the edge function for the firecrawl integration and then we'll update the necessary component. What we see it doing is we see it's going and it's writing out the SQL migration for us. It's running the migration and then from there what it's doing is it's actually spinning up that Dino edge function within Subabase and writing out all of that necessary logic and then finally even deploying that edge function and then it's going to go and update the route within our Nex.js application and then finally update the respective front-end portion of the application. As you can see here, just by integrating all of these different services and having access to this within a friendly environment like Tempo, you can imagine how quickly you can iterate and build applications completely with natural language. The other thing that I do want to mention with this is you will have the ability to access all of the different code to all of this. You can go ahead and pull this down within something like Cursor or Windsurf or VS Code or whatever you're using. They even have a local editing model which is really neat where basically what you can do is whatever you've built is you can go ahead just choose the editor that you want to leverage and what you can do is you can continue from whatever you have been working on within tempo directly within your local IDE. Now I'm going to test this out. So I'm going to say tell me about the latest release of codeex from openai. I'll go ahead and I'll send in that query. So now the current state of things looks like it's searching the top results and it's getting the contents of each of the respective pages. If I just scroll down here, I see that first one is from OpenAI. I see OpenAI introduces codecs. We can see the different sources. I can see all of the contents within Markdown. What I'm going to do is I'm going to go over to the app store and what I'm going to do is go over to Gemini. I'm going to install Gemini here. For this, I'm going to get a free API key from a studio.google.com. And then once I have that, I'll put in my API key. Now everything works as it should. I do have the results that come in with the markdown of the respective pages that were searched for. But now what I want to do is I want to take all of that markdown in full and I want to pass it into the Gemini model. Specifically, what I want to have happen is I want to have the sources at the top. Let's limit it to five sources at the most. Let's have the title of each of those pages. And I want to be able to click on each of those pages where I can expand and see all of the markdown as well as link out to the page. But the main functionality is once I have those results back from Firecrawl, I want to stream in within the tip tap editor all of the results within Gemini 2.5 Flash. Let's just pass everything in full and ask it in the system prompt specifically to generate a research report for us. But what we know now is we have a lot of the application in its current state working. We have the homepage that we had all sorted out. We have the login functionality. We have the ability to actually enter in our research query and it will submit and it will return those sources with that scraped markdown that we get from fire crawl. Now this is just really the last step is we're just going to be reorganizing the context. And then once we have those results, we're going to be passing that in for just one inference call to Gemini 2.5 and hopefully we'll get the results back. We do see the tempo agent breaking down the task. I'll help you implement the Gemini integration to generate a research report from the firecrawl markdown content. Let's first check if we need any additional files to complete this implementation. Now we see it going through. It's going to implement the Gemini integration and generate the research reports from the firecrawl markdown content. Now, just to demonstrate this, I'm going to say, when is GPD5 expected to come out? And I'll go ahead and I'll send that in. And here we go. So, now we have our research report. We can see that the format is within markdown. If I go over to the source materials, I can see all of the contents of the websites. We can see all of the different sources as well as the contents that ultimately generated this response. Otherwise, in terms of the next steps, you could just continue to prompt with tempo. So, I could ask for it to add a tip tap editor to have that whole area of what the response was to be editable. Overall, I just wanted to give you a really quick look at Tempo as well as their new MCP library. There's a ton of different integrations within here that you can go and try out. They do also have a Figma plugin where you can take your Figma design and convert it directly within a working web app. You'll be able to set up everything from the front end through to the back end, be able to manage all of your different resources, whether it's on Subabase or all of the different MCP integrations. Otherwise, that's pretty much it for this video. I encourage you to take a look at Tempo, and if you found this video useful, please comment, share, and subscribe. Otherwise, until next