Weekly deep dives on AI agents, coding tools, and building with LLMs - delivered to your inbox.
Free forever. No spam.
Subscribe Free
New tutorials, open-source projects, and deep dives on coding agents - delivered weekly.
In this video, learn how to leverage convex components, independent modular TypeScript building blocks for your backend. This tutorial focuses on one of the latest integrations with the Resend convex component, a solution for sending emails within your application. Follow along as I demonstrate setting up this integration, showcase its ease of use, and share a project example where it's applied to detect website changes and send notifications. Perfect for managing authentication, lifecycle emails, and more. 00:00 Introduction to Convex Components 00:24 Understanding the Resend Convex Component 01:07 Setting Up the Project 01:51 Implementing Email Notifications 02:41 Configuring the Resend Component 04:44 Final Thoughts and Encouragement
--- type: transcript date: 2025-07-17 youtube_id: tEs84skRlSE --- # Transcript: Integrating Convex Components in Your TypeScript Backend In this video, I'm going to be showing you Convex components, which are independent modular TypeScript building blocks for your backend. In this video, what I'm going to do is I'm going to show you one of their latest integrations within the components library. And I'm also going to show you how you can get started to show you how easy it is to set this up. And by the end of the video, I'll show you a project that I've been building with Convex where this latest integration that I'm going to show you is going to fit perfectly for what I've been building out. What I'm going to do in this video is I'm going to show you the resend convex component. More than likely, you've probably built out an application where you get to a certain point where you realize, okay, now we have to actually send emails to the users. Usually, this is around authentication and that type of logic or maybe you have life cycle emails within your application where you want to have users engage with your platform. All of those types of things are really great use cases for leveraging resend. What's great with this resend convex component is there's a ton of helpful features built in that you would have otherwise had to probably built out as an abstraction to leverage different email services. Things like queuing, batching, durable executions, being able to send as many emails as you want without having to worry that they'll actually be delivered. Now, I quickly want to show you how easy it is to incorporate within a project. So within here I have a template that I've been working on at work which effectively what this does is I can specify the domain and crawl recursively all of the pages that are within it and get alerts on if and when there are any changes. So what I've done within the template so far is I have set up the web hook functionality. When there is a change detected on a website you can send that event to a web hook. But additionally what I wanted to do within here is actually add in the email functionality. Let's say for instance I want to watch something like the OpenAI website and check it every 3 days to see if there's any big AI news or whatever it is. I can specify to get that email. So effectively the idea with this is only if there is a change will I get that notification type via email. Now I've opened up the project within my IDE and on the lefth hand side here I can see all of the different files that are associated with convex. All that I need to set this up is first I'm going to go ahead and I'm going to install this convex resend package. Now, once that's installed, I'm going to define a convex.config.ts file. All that I need for this file is this code block here. I'll paste that into our application and I'll save that out. And finally, what I can do within here is I can copy this code block here. And in this case, I'm just going to name it something a little bit different. I'm going to call this alert email.ts. And within here, I'm going to define exactly like it is here. Now, the one thing that I do want to mention is it does have this flag called test mode where what we need to do is we just have to specify this to be false. And the thing that is important with this is it does default test mode to true just so it doesn't automatically send out a bunch of emails. Now, I do already have this notifications.ts file where I do have some of the logic set up within what I've already built of the application. So, the first thing that I'm going to do is I'm going to import resend from the file that we had just defined here. And then once we have that, what I'm going to do is I'm going to define the handler within a pre-existing section of the code here. I'm just going to scroll down here to my send email notification action. And within this, what I'm going to do is instead of actually having all of this within here, I'm going to await the resend component. And this is going to be where we call that method. And for the parameters that we pass in, you can specify what the from email is with the validated domain that you have on resend. Within here, I can determine what the domain is for my application. In this case, I just have this test domain. I can specify what the name is. This is going to be the dynamic email or emails that you want to send to. And then within here, I'm going to have the subject line. And then we're going to have a dynamic argument of the website name. And then here is just a simple template that shows you that the website has actually been changed with the specific website details. Then the last thing that you need is you can get a free API key from resend. In this case, I'm going to name it observer. I'm just going to add this logic to the portion of my application where it does actually check for when there are changes and if the email has been selected within that configuration. Within this example, I am going to hardcode just to the email because I haven't set up the settings page just quite yet. And then once I have that, what I'm going to do is I'm going to specify to get an email here within our application within here. The nice thing right now is the firecrawl website is currently being tested with some content. it will trigger change updates every time that there is something on the page there. I can now see that changes were detected and now here we go. I have the name. I have the domain that I have set up within resend. And additionally, I have all of the details about the website that was actually changed. And then within this template, you can obviously make this a little bit more fancy. And you can also add in dynamic links. Maybe you have a query parameter or a specialized path for whatever changes that actually occurred with the diff or whatever I end up setting up. But otherwise, I just wanted to do a really quick one on Convex. Hopefully, you found this video useful. I definitely encourage you to check out the platform if you haven't already. If you found this video useful, please comment, share, and subscribe. Otherwise, until the next
Technical content at the intersection of AI and development. Building with AI agents, Claude Code, and modern dev tools - then showing you exactly how it works.
