Okay, I see like circuit boards and stuff. I guess I should zoom the Bishan zone. I love it. I'm sold. Today we're going to be playing with an
all-in-one coding agent specifically for front-end web designs. This is called Comby and it really is quite interesting to play with and a lot of fun.
So, to begin this, I want to just give a quick bit of insight into how specifically we're going about
testing this today. We're going to be using Comby in conjunction with Cursor. So, it just pops into the IDE of your choice and then you can start
generating some front-ends. Now, if you do watch the channel, thank you and you know that a big part of the model tests that are pretty frequently
posted on the channel revolve around having to make websites. So, this perfectly fits into the scope 100%
and it is possible to have a bit of fun with this as well as we're going to see in today's video. So, before we get into it, please do feel free to
subscribe as I do want that 100k plaque. And also, Comby was kind enough to sponsor this video. So, thank you to Comby for allowing me to continue
putting out videos at rapid pace and for having good taste in content creators. So, before we just hop in
and start playing with this, I do have to say I find their logo very cute and there may be a specific reason for that which would be as follows. But
with that out of the way, essentially what's going to happen now is we're going to pop into Cursor and we see right here that I have Comby installed
as an extension and we're going to be able to just click on this. We'll get a nice view that shows up
both in the side pane and then once we start playing with things, we will also be able to see some of at least my specific favorite piece of this
which is the way it goes about actually generating the front-end. From honestly, I've been playing with it with super lacklustre prompts, but the
animation or the way it does it is very cool. And for the beginning of this, I want to just kind of slap
something in here just to give folks an understanding of how this works and then perhaps we will iteratively increase the complexity of the task that
we are going to use this for. But for now, we're going to notice a couple of things. First and foremost, this left pane right here is essentially our
command center, at least for now, for using Comby. And there are a bunch of options here. We have
things like the canvas gallery, which we will get more familiar with later on. Additionally to that, you can change the number of iterations and the
number of times that it basically ensures your code is actually good. How many variations there are, so you can do multiple variations as well of the
same like core design concept to be able to see like, "Oh, I like this one better. I'll go with
that." Additionally, there's just some interesting things such as a high creativity button. Now, I do believe that when I was created, the high
creativity toggle was enabled. And all right. [laughter] I'm enjoying myself with this. So, the thing I want to specifically point out is there are a
bunch of different selectable things right here in terms of the model that it's using in the back end. So,
we have things like Ultra, which will use some Opus model. However, I've been using this on Mini, which uses 0.33% or as we see right here, default
would be 1x in terms of credit usage and things like this. The Mini model, and this also does have a 1 million context length. They have a specific
page just telling you a bit more info about these models and their usage. This one has been surprisingly
good. So, >> [laughter] >> I I'm not going to start with that for now. I'll just start with high. But, this is where it gets fun. So, check this out.
Now, watch this. Once I press enter right here, it's essentially going to start putting this together. But, something we're going to see that is very
cool is first and foremost, it's basically doing some work right now where it's going to search for
inspiration. As we see, it is telling us that as well. We might, depending on the specific prompt that gets sent to it, it will actually generate or
search for some pictures just for reference. And sometimes it will just include those as assets on the website as well if you don't have a specific
image or grouping of images to give it. But, we're going to see a bunch of its process right here just
kind of summarize for us in the way we're familiar with seeing when models are thinking what they actually show us. Now, this is a different and
arguably perhaps more complex task because the Bejan Zone is not really something that like exists, at least not yet. But, we see it's going about
like the specific planning of this website right here. Request invite button, a subtle starburst SVG rotates
slowly in the background corner, 5% opacity. Yeah. Now, we have stock assets, so that's kind of what I was talking about right here where we'll find
the assets that it's at least going to include as place holders on the site. But, still this is not the cool part yet. So, wait for it. And once it
opens the canvas right here and actually starts like putting this out is when things get super cool.
So, it has settled on some design. Carbon matte for cards, warm walnut for accents. I don't know about warm walnut. We might have to change that. And
now it's going to build the landing page. All right, check this out. So, watch. It's going to open this canvas right here and we see its cursor like
moving around. So, if I zoom out, not to that degree, watch this. It's basically going to give us
like the entire animation of it having creating this website right here. And we'll get into a little more of what we can actually do with this canvas
right here. But, check this out. So, this is sick. This has totally buttered me up and we can see it is making the Bejan Zone heading right now, which
is sick. But, okay. So, I just really like the animation process right here where we can see,
"Okay, I see like circuit boards and stuff. I guess I should zoom the Bejan Zone." I love it. I'm sold. >> [laughter] >> Request your invite. I just I
really think that the way this presents the creation of the page in this canvas right here where it basically draws it out section by section is
really kind of cool. Now, something else interesting and we'll get into this perhaps a bit later, but
you can actually individually highlight elements or blocks I suppose could be said for the page right here. And then you can save them as like
specific pieces of inspiration. You can actually use a generated site to create a color palette or like a theme or something that you could then reuse
for certain things. But this whole process right here, and I'll zoom out again just to showcase like the
way it's drawing it out right here, it almost looks like a collaborative like a Google Docs thing or something when you can see someone else working
in the document at the same time with the combi cursor there right now. I just think this is really cool. And we're actually getting a look at the
front end it's creating right here. 349 per month for the Bijan VIP. All right. Oh, night owl. That
would probably be like a discount night time rate. Yep, 8:00 p.m. to 6:00 a.m. I would be on that specific plan. Just Well, you know, I mean, it would
be my space, but okay. I like that. Enter the zone. Oh, okay. The the like um I can't think of like the specific terminology for that, but whatever
that Okay, and then we have the generated design. All right, so the website has now been created here
at least in terms of it's being presented to us fully in the canvas, and that specific task for the model has completed. Now, but there's a bunch of
other things we can do right here. So, where's the one for block? So, check this out. We can actually create a block from a specific, I guess, block
on this page. So, if we do create block, we can basically go onto a design element, and it will give
us a selector of the canvas. So, if we zoom in so we can actually select something. So, check that out. We can actually select specific parts of this
page right here. So, say I really liked this access essentially header or something like that. Additionally, we have the enter here, which I kind of
like as well, but I do like this pricing card. So, let's select this. So, we have selected that
specific element now, and we can create a block out of this, which if we do that, it will now just paste it in its own little kind of individualized
element next to this in the canvas, probably right there. And see, so now we have this reusable component block that was just created off of one
specific part of this page that we really happen to like, in this case being the contact or the pricing
segment. And it draws it out like kind of in the same way that it had done before when we saw the entirety of this page being generated. And now we
have this self-contained as a block as it said right here. It is extracted faithfully from the landing. Okay, I guess. I mean, I would say so. It's
just I guess So, one other thing I want to quickly showcase just based off of this Bijan Zone is we can
use this to create a theme. So, from design on canvas is what we're going to select and then we will just select the entirety of this website right
here and click create theme. And this will essentially create a reusable design theme that just contains things like the color scheme used from within
this and things like this. So, this showcases to us right here what specifically is going to be
included in this theme as well. And we can see that our theme is essentially just the Bijan Zone. It talks about the font that's used, the color
palette, and things of that sort. If we go into detach from design, we could then kind of use this later for a different design and then reapply it.
Now we see in this table right here that the theme has been created just based off of this generated
result right here for the Bijan Zone. Things like colors, typography, the radius, the shadows, the borders, just to keep things consistent if we were
to expand this out into something a little more complicated. Now, as this currently sits in the canvas, this is essentially almost think of it's
basically like an HTML render of this specific site and how it is going to look. But the interactivity
there would not really be much. So, the next step with using something like this is to click the green code design button right here, which will then
go and actually turn this into a real piece of website essentially. So, if we click this, we're going to see code this design gets filled in and
populated in the text box and it just kind of references it using this tag as we see right here. If we
select send, now before we do that, there are a couple of other things I want to specifically touch upon. So, we can see that there's a bunch of other
additional options and things right here when we are going to be using Comby. Now, if I go into text stack, this is a very interesting one because
look at all of this. So, this is going to really allow us to specifically use a lot of different text
stack things. We even have like package manager, which is cool. Icon set, so you can specifically like choose where you want the icon set to come
from. Documentation tool, user analytics, authentication. So, this allows this tool to properly integrate like deeply with your existing projects
assuming you were starting here with an existing project and not from scratch like we just showcased. And
this just allows it to function better and it will understand like natively how to integrate with these specific things you select for your text stack
here assuming you are popping this into an existing project that would already have a lot of these preselected. Now, additionally to that, you can
create something called a context graph, which is pretty cool. Now, to be honest with you, the context
graphs are actually pretty complicated seeming in terms of like the back end of how they function right here, but there is documentation on them that
goes a bit deeper into how they specifically function. But like the TLDR of it is right here. Comby builds context graphs for the reusable code items
in your code base including components, primitives, design tokens, types, and constants. This gives
Comby a deep semantic understanding of your project and enables consistent reuse of these items during code generation. So, purpose-built
domain-specific alternative to the vector based indexing prevalent in general-purpose coding agents. Now, that is why I said this is like a little
complicated right here, but this specific set of options that we have or customizability is very cool because this
really does properly allow this tool to really like deeply integrate with an existing project and then basically make a sick front end. Now, with that
out of the way, we are going to go back to the task at hand, which was to actually have this now code and create the Bijan Zone. So, we're going to
just click send right here and this is now going to build this out properly and the culmination of
that will be that in the specific working directory called Bijan, we will end up seeing a whole bunch of different files and things associated with
the creation of this front end. Now, in the traditional agentic manner, it has proposed a specific tech stack for this project. We can edit this if we
do want to. However, because this is just a simple from scratch project, I'm totally happy with
everything that has been proposed right here. So, if I do not choose to edit, we can just save stack and then it will continue on in actually creating this site.
So, the site is getting closer to us being able to take a look at it. Yes, it is. Check that out. Look at those background animations that we didn't
even notice when this was just in the canvas. So, so far, so good and we can also click continue at the same time there. Okay. But, we're not 100%
done yet because there's something cool that I want to actually showcase here as a capability and that
is exactly what just happened right here. So, let me ex- Let me expand this page a little bit or this browser window in the preview. So, essentially,
we can take a peek at the site right now as it is running and we get our first look at it. However, at the same time, we can Oh, I apologize. Now,
what's happening right here is it's actually autonomously taking a look and checking over the site
itself just to make sure there are no errors and things like this. So, the thing I was going to showcase will have to wait a second, but that's
actually cool that happened and we saw the red effect over it just showing us like that something else had control of the site right now and it even
notices I I saw something. No console errors, all sections rendering perfectly. Let me do a final check on
the pricing section and we see right here that essentially a tool call is happening where it's interacting with the browser in order to be able to
check itself to see, "Oh, does this look good or is there any weirdness?" And we're now being met with just basically the finishing message we see
right here from the agent where here's everything that was done. Here's the file structure that was
created. Now, as we may recall, this was essentially an empty directory prior to starting the agent and actually creating this. And now we have a full
functional front end right here for it, the Bee Zone in this case. Now, the thing I wanted to showcase was if we go back into the preview browser
window right here and we click on the combi pin or extension, whatever you'd want to refer to this as.
The cool thing that we're going to be able to see right here is we can specifically speak to it while actually looking at this. And beyond that, there
are a bunch of different options right here to specifically point it to elements on the page that we want changed. So, in this case, perhaps the Night
Owl card should have some form of like a nighttime theme or something to differentiate it from the
others. So, I think that's one thing I would like to pick out. So, in order to do that, I'm going to select this option right here, which will have us
add a reference element. So, let's just add the div that's contained within and in the green like little thing right here that we saw earlier when we
were going to initiate this site being created. That just shows us that it's being referenced for
when we send this message. Though, let me say um the pencil tool. And then if we click send to agent, we're going to see that the agent gets that
message and now it is going to work to actually fix that. So, for the time being, I'm actually going to close the browser right here and we'll get
that fixed and then we'll be able to see. All right, and we can see that it's autonomously opened the
browser again now and it was interacting with it. So, it made you a Q&A runner check itself right now. So, if it takes control. Okay, good. And now we
see that the change we had specifically wanted to have reflected in fact does. So, we can do go night mode and now it is interacting again with the
browser itself just to ensure that the changes that were made are satisfactory to the agent. I would
say that is kind of specifically what I wanted. We have like a little moon icon in the top right. We have stars. We have like kind of glow. We have
the enter the zone thing right here and then the 240 additional members who are already inside the Be John zone. All right, so let's take a look at
this website now. So, we have the sanctuary in the Be John zone and in the background you can see like a
really cool scrolling video, not scrolling video, but a video that actually shows some This does look like a cooperative working space, so that is
definitely fitting of this. Request your invite. We have members. We have fiber speed access. The setup, so this shows us some additional things right
here. Always open. Herman Miller, very good. Espresso bar, shared office suites and podcast studios.
All of the photos right here are absolutely in line with the specific task that was denoted in this website generation. No corporate sterile vibes
here, just real people doing real work in a space that actually slaps. Very interesting that it knows I use that terminology. Be John VIP and then we
have our specific access plans including the updated and pretty night owl one. And then I like this a
lot and this sometimes does like flash for enter the zone to request an invite. So, I like that. It made this very exclusive sounding because none of
these buttons are like sign up or something like that. It's basically like get access or request invite. So, it's made it very like guarded and
exclusive could be said. So, next up I'd like to have come by build something that is a little more
focused. So, I have a bunch of assets that it's going to need to use in order to create a site. This site specifically is going to be for a couple of
different style retro modern PCs that have been created by me. So, I have a bunch of product photos and things like this of systems like this and
we're going to have this essentially create a website that is sales focused. So, designed to sell these
to customers, but also something that tries to adhere to the aesthetic style of these retro modern PCs. So, we can see that the folder that we're
working in right here just has a bunch of sub folders and I have specifically created a prompt to give this in order to get the best understanding of
what each of these is, their pricing, and things of the sort. So, to begin, we're just going to go into
the drop down right here and start Comby. And we're greeted once again with the cute dog, but the familiar looking window right here to speak with the
agent. Now, for this, I am going to change this to ultra. I do have extended thinking enabled, which we did have previously as well, but for this, I
also want to enable the high creativity mode as this just seems like it will be a lot of fun just a
feel for how it like intertwines that with the specific task that does have existing assets. So, the next part of this is going to be to paste in the
specific prompt that we have created for this task and see what we get. And the prompt is right here. I will leave this on screen for a second, so
anyone interested can see what it says, but basically it just tells this what specifically the two
products are, the pricing for each one of them. There is a customer builds photo with two builds, or I should have said customer builds folder. And
then also there is a photo of myself in there that can be used for like an about section or something of the sort. Now, because this is going to be a
more difficult task, at least with more structure, we can actually start by just putting this in a
plan mode, which will create a structured plan before it actually builds it. Now, I don't know if I want to do that right now cuz I was just excited
to just have it whip something out. Now, this will hypothetically create a better quality result. However, I do want to just go back into design mode
right here and ensure high creativity toggle is enabled cuz I think this will be more fun for this
specific task. So, I've sent it that prompt right here, and I would imagine this will take a little bit of time, but then we'll be greeted with the
canvas animation that you know I very much like and we'll start to see this website come to life. All right. So, the canvas has opened and we're now
going to be able to see what this is going to create for our creation or our website. Okay. Let me zoom
out just a bit and then we'll center this. All right, cool. I'm excited for this. Ooh, look at that. Look. System ready ominous underscore hardware.
Now, obviously this is a little difficult to see because I've zoomed it out a lot. I just love the way that it goes about actually creating these
things. In terms of the visual presentation of actually having this website built, it's really really
good. Oh, yes. >> [laughter] >> All right. Let's zoom down. Just follow this page a bit. All the product photos that it's putting are sick. >>
[laughter] >> That is actually I took apart an old desktop PC and shoved it in that case that I made in 3D printed and put like a tiny little LCD in
it. So, that is actually a portable desktop because it's a legitimate desktop computer shoved into like a
case like that. It is Commodore SX-64 inspired. And then we have our Ominous 2, which is the retro clamshell customer builds. There are two actual
customer build photos that I did receive of folks who built these laptops, which I did make. Yeah. Uh um all right, good. This looks so good. This
look Yes. Yes. The finishing touch. Who am I? Oh, and it did it in like the shell command of like if you
watch the browser OS as you see that This is really good. And we can kind of like just preview it by scrolling down here, but I like this a lot. I'm
very very pleased with this to the point where I don't even want to do anything. I'm going to do code design. Now, it is actually cool. You can
actually have this create like AI generated videos and things like this as well if you um it's something it
pops up as a tool tip sometimes you see like with the little light bulb icon here. So, if you want an asset or you want like an actual AI generated
video or something, you can implement that as well. Being that this is using source images that I've provided, we're not going to do that for this
case, but it's just something cool to mention as well. Though, I am quite happy to just go ahead with
this. And now we're going to have it create this design fully and then we'll see what we do. And once again, we have a suggested a stack, which I'm
totally fine with, because these are just starting from scratch to get the front end created. So, we're getting our first look at this now because it
has opened it in the browser. Now, I'm not going to touch it currently because it's inevitably going
to autonomously go and just ensure that it doesn't see anything that is blatantly incorrect, which it will then go and fix. So, once we see that like
red um hover effect or glow effect over the corners of the page here, that means that it's autonomously doing QA basically. QA, not Q&A. We can see
that it is going to find some feedback. So, it's showing the terminal window might be below the
visible viewport. And it's once again just autonomously checking things, and it has found an issue, which is that the terminal really isn't visible.
So, that just showcases some of the autonomous checks doing things that we then don't have to tell it manually, like, "Hey, this is messed up." and
then go back and forth.
And as we can see, after a bit of troubleshooting, it did fix the terminal issue. It was not rendering for a specific reason that the autonomous QA
back and forth basically took care of it without us really needing to even describe the issue. And we're getting our first look kind of at this
website right here, which again is absolutely 100% like true to the style of these products or items. And
it's scrolling down now just to check. And so, I'm basically not doing anything right here. This is just autonomous or agentic as a lot of things now
are. Custom SBC Linux ready, integrated LCD and status panel, mechanical keyboard input, which is true. And some of those keycaps are in fact 3D
printed. Basically, only the enter key, but or no, the shift key. And now, we get our fully generated
website right here. So, let's actually take a look at this because so far we have not. Okay, so it starts with this sick terminal homepage right here.
Retro portable yours. Let's just refresh it so we get like the full like good. So, that hovers in. All right, hand-built retro modern portable
computers designed for the hacker who refuses to be ordinary. Last login, that's great and it shows you
the specific like date and things like that. Um and oh no, okay, never mind. That's not today's date. It just happens to be so close to it that I just
blindly assumed it was. Okay, ominous at workshop, scroll to explore product one, the ominous one, the custom desktop portable. We have specific
product information right here as well as an order button and the price tag built to order. We have some
images as well, which do look very good and nicely placed as well as some like specific things about it. Then we have the portable clamshell, which is
of course the laptop with two different options. So one is a pre-built one and then one is the DIY kit. And then we also have These are genuinely
customer builds. So that's also It's always nice to see like something you've created like be created
again by someone, I guess. Like all the other people who do model reviews now on YouTube. So and then it also just has a who am I section and
realistically probably zoom in on this like 210% or something like that. But this is really cool and just like showcases its ability to create a front
end that adheres to a specific style that was denoted by one, the prompt, and two, like the types of PCs
these are. They're very retro and old and this definitely, even just a scrolling background right there, everything else very much adheres to that
style of being unapologetically different as it does say. And then we do look at the hover links. So those are lime green as well. Even the bottom, I
don't think I've ever seen like a footer effect before and it has a blinking cursor right there with C.
So shipping, returns, contact. So we have some footer links as well, which is just really kind of cool. Now, the cool thing about Combai is that it
integrates very well with a bunch of different coding agents. So essentially we have a sick front end created right here. Let's now basically do a
demonstration of something, in this case cursor composer 2.5, actually adding on a feature to this site
that wouldn't necessarily be related at all to the front end here. So, we'll be able to see like the culmination or the mating of front end and back
end, if you will. So, I'm going to say I don't actually know which form I think it's just form now that I see it, but doesn't matter. So, basically
I'm just now instructing Cursor Composer 2.5 to build a form based on this website. So, like an image
not an image board, a text posting board like an online form like Reddit or something of the sort. So, I'm instructing it to do that, create a back
end to actually host the specific things, and it's giving me the architecture right here. Everything for the form needs to be added. And keep in mind,
this is now Cursor Composer 2.5 working based off of the front end that Comb by has created for us.
And it's saying switch to agent mode, and then I can do what we need to do as we did start it out just in ask mode to get a good look at specifically
what would happen right here. So, this is going to add all of these things on to the existing front end that we have, and then we'll actually have
some back end functionality as well.
All right. So, hypothetically we now have an entire like form on the here. Let me just copy this and open it in a native browser instead. Okay. So, we
now have the website here, and this added in the form. So, this is the intersection of front end and back end. So, Comb by did the entirety of this
whole front end and everything like that. Then in the same project, we had Composer 2.5 spin out this
form thing. Now, if we click this, good. We should actually be able to log in to post. All right. Username was Oh, demo account for testing. Very
good. Fill demo credentials, and it added this in. But see, it keeps the style that Comb by had created here when it's making these edits. So, now if
we log in, we actually have a functional No, thanks. We have a functional form back end here. So, we
just slapped on an albeit simple form posting back end right here. So, post title, "Hello. What's on your mind? Hello." And then we can do submit. And
then we have that right here, and we can even reply, "Hey, how are you?" This is This looks like generic like a like slop like bot posts on X. But And
then we can go back to form. And then if we were to just go back to the home page, then we're
logged in as well now. So, it did implement like a user login system as well. Just as a back-end that is included now. Basically, the combination of
Comby and Cursor, especially Composer 2.5 fast. I tried opening it there, but it was 5174, not 5173. This combination is fantastic in terms of
front-end from Comby and then back-end stuff from Composer 2.5 or any other really model. You can use this
in a bunch of different IDEs as well. So, really that's going to wrap up our first look and testing of Comby for front-end. And this really is a very
powerful for front-end agent. I love the way that it showcases what it creates and as it's creating it as well here. The features where it just
autonomously finds issues on the page and fixes them saves a lot of time and the way it works properly
with something specifically here like Composer in Cursor is really fantastic. I mean, this is a decent website we just created that could be like sold
to someone ideally. If you use these things to like sell, you could definitely will like this. But just adding on that form back-end is pretty sick
and it showcases I'm probably beating a dead horse at this point, but that intersection of front-end
and back-end which is very smooth as this like with this as a pipeline basically. So, that's going to conclude our first look and test of Comby.
Again, thank you to Comby for hooking me up with this video. This is very cool and I really did have a ton of fun actually playing with this. I played
with this for a while before even filming the video as well. Made some and things, but this was awesome.
So, that's going to wrap it up. If you have any questions, please feel free to leave them in the comments, and thanks for watching.