7 NEW Convex Components

Back in December, which feels like a

thousand years ago at this point, uh we

announced that Convex components were

now ready for you guys to build. And to

celebrate, we announced the component

authoring challenge. It's a competition

challenge, whatever you want to call it,

to uh win some swag, a gift card, and

most importantly, get featured on the

Convex component directory. Well, in

this video, I'm excited to go through

with you the first set of winners and a

couple of extra bonus ones. We've got

components for firecrawl, durable

agents, debouncing, nano banana, convex

fs, transload it, and loops. And the

great thing about it is that the com the

challenge is still going on. So if you

have a great idea for a component you

would like to see built, then follow the

link down below. But enough jibjab. Grab

yourself a lovely cup of tea and let's

get on with it. Now, just before we jump

into it, I should probably also quickly

explain what convex components are if

you're new to convex and not familiar

with them. So, you can think of them as

like little self-contained convex apps

that fit inside your own convex app.

They have their own database, function,

scheduler, storage, etc. And you can

only interact with them by calling uh

into them. You cannot uh they cannot

call out. So, it means that they're nice

and isolated like that. Oh, and yes,

components can have their own

components. So, you can build up

hierarchies of components like this. So,

until very recently, basically all of

the components that were built were

built by the team at Convex. Things such

as a rate limiter, aggregates, workpool.

Um, but then since the authoring

challenge, we've started to see more and

more components that are built by third

parties. uh such as our first component

which is

firecall scrape is a convex interface

into the awesome firecrawl service uh

which lets you scrape any URL for HTML

markdown links JSON and things like

that. [music] So we can take a look at

the demo here that comes nicely with the

component. I can give a URL like this

one for my blog uh this portio Christmas

cruise one and I can say that I'm

interested in the markdown and images

from the site and then I can click

scrape. [music] Then in just a couple of

seconds, I have all the text for my post

as marked down and then all the images

on this extra tab here. I think this is

going to be super useful for you guys

that are building agents like basically

everybody else out there at the moment.

And the component is also not just a

simple wrapper around the fire call API.

Um, like any really good comics

component, it actually enhances the API.

So it also offers durable caching. So if

you hit the same URL twice, it's going

to return the cache result uh which is

going to save you obviously API tokens

[music] and is also going to result in

increased performance. It also has

reactive status updates, different

output performance, JSON extraction and

so on. So if you think this is something

you could use, then check it out uh with

the links down below and make sure you

give the author GitMax uh on X big

thanks for his hard work.

Right. Next up, we have durable agents.

So, the SIGF freed the components author

says that the goal of the component is

to make a simpler version of the agent

component, which is the one that's built

by the Convex team and the one that I

personally have used quite extensively

in the past. Now, I can totally

understand why he wanted a simpler

version of this. Um, the ConX age

component is a bit of a powerful beast,

[music] but anyways, let's take a look

at this one. So you can define your

agent up here and give it some tools

which is very nice. And then down here

you can export everything you need to

run it uh with this very simple single

function define agent API. Then on the

client it even has this handydandy React

hook which lets you interact with the

agent which is very nice. Now, I don't

think I'm going to go any deeper with

this one just at this point. As Sigfree

mentions that this is still an early

development, but I'm keen to see where

he takes it. Um, if you try it out, let

me know down below what you think about

it.

All right, next up we have Convex

debouncer. It's the type of component

that I personally really love. It's

simple, small, and it has a piece of

functionality that most projects are

going to need and is kind of errorprone

to build if you're going to build this

yourself. [music] So suppose you have an

application that causes some data to

change frequently such as a text field

the [music] user can enter into. Um now

imagine you have an expensive process

that you want to run after every time

that this data changes. [music]

Now let's say that this data changes 10

times a second very very frequently. Now

you don't want to run that expensive

thing 10 times a second. Instead you

want to debounce it so you can limit the

number of time that it runs. So, it has

a few different uh modes that you can

put it into. So, sliding where each

keystroke resets the 1.5 seconds timer

and it only executes after you stop

typing. Then we have fixed which is

where the timer starts on the first edit

and then stays fixed. So, subsequent

edits update the args but don't extend

the time for the timer. And then eager.

So, the first message triggers an

immediate response, whereas rapid

follow-up um messages ceue up in a

trailing call. Now, I would say it's

probably still a good idea to do some

client side ID bouncing yourself um just

to save on hitting the convex server

unnecessarily causing you extra, you

know, API calls against your limits. But

I would definitely say this is a very

useful tool to have in your vibe coding

tool chest. And it also feels to me like

it is very similar to the rate limiter

component which I very much love.

Fantastic work Ilia on this one. Big

props to you mate.

All right, we all know and love Nano

Banana, the incredible text to image

model from Google. I've personally used

it on so many projects at this point.

Well, now there is a dedicated convex

component that allows you to interact

with it. And much like with the fire

core component, this one from Daniel

perusia

wraps the official API and adds some

nice stuff on top of it such as uh the

storage of the generated images and some

real-time status updates. Um, which is

very, very cool. Nice work, Daniel.

Now, I should probably do a full video

on this one, not just because it's a

component that's been created by our one

and only Jamie, the CEO of Convex, but

also because of how cool it actually is.

Convex's in-built file storage is

famously

okay. It's nice that it's built into

Convex, but it's definitely kind of

lacking in some ways. You see, the files

are stored when you upload them into S3,

but there's no CDN in front of them. So

if you are on the other side of the

planet like I am uh then it's not

sometimes as great an experience as it

could be. Also the cost is not as

competitive as it could be with other

options out there. Now there have been

other components in the past such as the

CloudFare R2 component that attempts to

solve this by storing the files on R2

and serving them through Cloudflare. But

ComX FS takes this idea and then takes

it up to the next level. It works by

uploading the files to a service that I

actually haven't heard of before, which

is bunny.net, but apparently is a very

popular CDN network and other MISK cloud

services company that offers offers very

competitive pricing. But anyways, once

you've um followed a few of the setup

instructions on the very nice comics FS

docs and you have a bunny bucket, then

you're basically good to go. You can

upload files, then begin serving them as

the example that ships with the

component shows you. And like all really

good components, it takes care of that

hard stuff for you. Stuff that you

wouldn't necessarily think about when

you're if you were to do this yourself

or you were to vibe it out. Things like

guaranteeing transa transactionality

when modifying files. You see that

although mutations are transactional uh

and that's one of the best things about

convex we all love actions are not. So

that means when you're dealing with a

third party service like bony.net it

means you're going to have to use

actions to be able to interact with it

which means you have to be very careful

about the operations that you want to

perform on that third party service.

They they also need to be transactional.

That's why Jamie, the author of the

component, has put so much thought into

having good guarantees around the

transactionality

of uh this component, ensuring that you

don't get any data loss or race

conditions or any annoying issues like

that. But anyways, as I said, I really

should do a whole video on this uh

component. But for now, I'm just going

to leave it here and say that if you're

looking to do lots of stuff with images

on convex, then you definitely might

want to check out this component.

I have to admit that Transloader is

another one of those companies I hadn't

heard of. I'm learning a lot of things

today. Um, but it also seems very very

cool. So, much like with Bone.net, you

can upload images, but you can also

upload videos, sounds, or whatever. They

call these assemblies and have them

processed and delivered to you. And like

most of the components we looked at in

this video, they also take care of a

bunch of the grunt work for you by

wrapping the the API and then also

keeping track of the statuses and

assemblies and whatnot. So big thanks to

Transit for this awesome component.

And last but not least, we have loops

component. So, I'm always on the lookout

for a new email sending solution

because, as I have ranted about time and

time again in the past, I think that the

email sending business is just an

absolute joke. The prices that some of

these guys are charging for sending

emails is just crazy. And they also make

it so complicated and frustrating to

use. So, this component leverages loops.

ides a really nice looking clean

alternative to one of those old email

dinosaurs. You can set up subscriber

lists, create campaigns, send

transaction emails, um all for a very

attractive looking price and even free

transactional emails, which is just

I think it's a really nice option if you

are looking to do email sending from

your application and you want to have

email campaigns or even just

transactional emails. I think you should

definitely check it out. Massive thanks

to Dev with Bobby for this component.

Okay, this one is just a bit of a bonus

gravel kind of one. I want to just

mention that there are now four

different options for doing pon uh

payments with components on convex. We

have Dodo, Polar, Autumn, and Stripe.

Now, I'm not going to go into the

strengths and weaknesses of each of

these in this video, but if you'd like

to see me do a dedicated video on

payments on Convex, then you know what

to do. I do just want to let you know

though, if you are wanting to add

payments to your app, then maybe you

want to just ask your agent to have a

look at these different options and work

out which one's best for you. All right,

well then I think I'll just leave it

there for now. Um, there's a bunch of

new components that I could have talked

about as well and more being added

daily, but in the interest of time, I

think I'll just save those for another

video for now. I hope you enjoyed this

one, and if you did, I would love it if

you leave me a like and sub. And until

next time, thanks for watching. Cheerio.

Guaranteeing transa transactionality.

How you can have good guarantees around

the transactional traction.