CrocoBuilder + Claude Code MCP (First Look)

Crocoblock just entered the page builder arena, but they're doing things a bit differently. With Crocobuilder, there is an AI assistant workflow from the jump start. Here's a couple of sites I was able to create with Crocobuilder and ClaudeCode while testing. One of them, I used a design inside of Figma and had ClaudeCode built from that design into Crocobuilder. And in the other website, I was able to use just a screenshot from a website that I liked. In this video, we're going to get a first look at Crocobuilder, but also I'm going to show you how to connect your AI agent like ClaudeCode or CodeX through the native built-in MCP to Crocobuilder and get started building websites. And while I'm showing you all this, I want to hear from you. Can you see yourself using an AI assistant workflow like this? Let me know your thoughts inside of the comments. Let's start by getting it installed and set up. And you can see here on Crocoblock's website, still a few more days to get the launch discount. Also, if you do have the all-inclusive LTD plan, then it is already included. Now, I do have it. I bought it several years ago, so I have Crocobuilder right here inside of my account. Just go ahead and download it. And here I got a blank website. I want to connect everything to ClaudeCode and get everything set up. First though, let's go over to the themes because we do need to add our own theme. For this, what I did was I went old school and I just went and created a theme with underscore, which is basically a blank theme. Next, we got to go to the plugins to install Crocobuilder. So, I'm just going to go add it and upload it and then install it. And once it's installed and activated, then we go in and put in our license. Now that I'm connected, let's go to Crocobuilder and see what we got. And then we start off with the settings. Now, the settings are quite minimal right now. And you can see right here at the top, we have the AI and MCP. And this is what we are going to set up inside of the video. But really quick, let me show you what else we have back here. Now, we have our LLMs. This is to help out with our AI workflow. We also have our versioning, so we could connect everything with GitHub. Now, it's quite easy to do, and I've already connected one of my testing sites with GitHub. And then, let's go back over to our dashboard. We have our theme builder. This is interesting, and this is something too I want to go in a little bit deeper. I might do something in another video on this. Let me go back though to our dashboard. We also have our fonts where we could go ahead and install our fonts and could upload them directly here. Very simple process to do. But, back over here to our dashboard for the MCP. The first thing I want to do is connect Claude code and get it set up. So, this way I could start building out my pages and just speeds up the whole process. So, let's go ahead and enable this. We're going to have our name and URL. We're going to need that. Let's go ahead and save it. Now, once we save it, we're able to create our bearer tokens. So, I'm going to create these and you don't want to share them with anybody. Don't worry, they'll be deleted by the time you see this video, but we're going to need these in order to connect Claude code or code X. But, really quick, take a look at what else we have. We have our pre-built AI skills as well. This skill actually worked very well in a project that I just tested, which is building a website from a screenshot. And we have several other skills here as well as well as some more MCP tools. So, it's built this way from the jump start, and this is where I was spending most of my time while I was testing. And actually, as more updates through the beta came out over the week while I was testing, a lot more was added here. So, let's go ahead and get a jump start. The first thing I'm going to do is set up a new project inside of Claude code. I'm going to use a desktop app. This pretty much works the same though if you're using terminal, VS Code, or Cursor. I am going to connect the folder and since this is inside of a localhost, I can find my local folder here. This is the site that I'm working on. I'm going to take it to public and open. Let's go ahead and trust it. Now next, you could use Sonnet for this or you could put it in Opus, but you're going to want to put it on all the way to the lowest effort. This way it is fast and it doesn't overthink. You don't want it to overthink when it is connecting things. So, let's go here and just tell it, let's connect the MCP for Crocoblock in this site. We're going to keep it very simple. Now let's give it the name, URL, and the bearer tokens just like this and let's let Claude connect this for us. And that took less than a minute, actually just 45 seconds. Once it's done, now we got to go in and close Claude Code, come back and restart it. Once it's restarted, let's check the connection. When I test it, I always give it a task as well, just a very simple light task, usually to list off pages or plugins or something. For this I'm asking it to list what skills are available. I want to make sure those skills that Crocoblock has that we just saw, they are ready for us to use all these skills right over here. You can see it is past, it is working. So, what's see? Okay, we do have all of our skills connected. This means we are ready to go and get started building. Now I'm going to run a test and I'm just going to have a little bit of fun right now. What I'm going to do is go over here to Tailwind. I'm going to grab a screenshot. Let's drag this over here and just get started building something. And I'm going to give it this prompt and I'm going to tell it to use a screenshot. I gave it the URL and then asking Claude Code to also create the design system with the design tokens and variables as well. This is very low fidelity right here, like low effort for what I'm asking it to do, but what I'm doing is just showing an example of how we could get set up creating that design system, and then we'll take a look inside of the builder. Okay, it finished. It did take a little bit of time, but that's because we're setting up our design system first and creating that framework, but let's go into pages. We can see it created a page. Let's take a look and see what it did. And this is just a first quick shot just to show you how Look at it. It's connected and it actually works. But now, let's take a look at the actual builder and see how things work on the builder side. Here's something I was working on this morning. And what I did was I got a screenshot from this site right here. It's a template that I found inside of Framer. And what I did in this was go through section by section. And I just had in a filler images. So, we're going to fill out those images, but what I did was build it out closely just section by section. Took a little bit more time and was able to get far better results. Now, another thing that I did do as well was I built this page out. Now, this page, it needs some more work. Some of it was good. It took a little bit of time, but that is because I used this design inside of Figma. And all I did was go here, right click it, and I went to copy link selection. Took this over to CrocoBlock and said, "Hey, build this out." And it did, you know, it did so-so on it, but it would take a little bit more work. Let's focus on this site here, though, because this one is the one that I actually learned from. I'm going to go here to edit page. Edit with CrocoBlock, and now we're inside of our builder. So, what I learned from my first experiment with Figma, that took a lot of time, was to first build out the framework. We're going to find that over here in our tools, and we're going to see we have our CSS variables. So, the variables have all been created and you could take this from a screenshot, a URL, a Figma design, and you could create your design system first. Then you're able to go in and make edits directly into your design system. Same thing for our CSS class manager. Now this part's pretty cool here as well. We can go to one of our classes like this Bento Grid class and you're going to see we have controls to edit the class directly inside of our control panel, but we could also select on raw CSS and we could edit it directly inside of the raw CSS. Sometimes for some of us this is going to be a whole lot faster. Now we could go to one of our simpler classes right here like the body text. We take a look at the raw CSS, you can see like we have a 1.6 line height. I'm going to change this. I'm going to put in 1.75 m because this is what I use for a lot of my body text. Go back to raw CSS. You can see we edited directly in here, but if I want to change this to maybe 1.5 m, we'll go to control and you're going to see that everything flows between the controls and the raw CSS. This is pretty dope right here. I found this very useful. Now back over in the tools as well, we have the import and export design systems. So this right here is going to play a big role in streamlining the whole process. Even if we are building with Claude and we're telling Claude, "Hey, build out this landing page." We can set up our design system first and then have Claude follow our design system. Then you could even use Claude to build out a design system, go back in here and fine-tune it yourself making it your own and create a starter design system. Now let's go back out. Over here we also have a query builder. I'm going to have to take more time to go through this. There's a whole lot already inside of this first version that I'm definitely going to need to go through. And also using Jet Engine, being that CrocoBlock built Jet Engine, I definitely want to test it out cuz I have a feeling that is going to be awesome. But, more on that will come out later. Let me know if you do want to see a video on Jet Engine included in this. I will I definitely want to test this out with Croco. But, this is cool right here, the component builder. Now, I already created a component. In fact, I didn't create this. I asked Croco to create this component for me. The image changes whenever I click on one of the accordion items. And this is what we're going to see inside of the front end when I created this. This section down here, this is a component and it has changing images inside of it as well. A couple other things that are different from other page builders are going to be up here. So, we have our option for dev. When we have it in dev, that's where we could click on the element, go directly into the element and style, and then we could set it all up. And again, we do have that two-way sync constantly between the raw CSS and with our control. So, if I want to center align this to the left, if we go to the raw CSS, it's going to text align left. And in fact, we could just write CSS inside of here. You know, I could go in, font weight 700, and it should turn into 700. We do have it at font weight 700. I just didn't install a font on this yet. Let's go ahead and turn this back to center. So, this is on dev, but then we also have the option to select on code. And we could go in, check out the HTML, the raw HTML, and we could edit directly inside of the raw HTML. Then we have the other option for AI. Now, we connected everything with the MCP, and that is a direction I personally go in. That's the way I like to use my workflow because I do have a Claude subscription, I got a OpenAI subscription, and when we use this AI assistant, it is going to be using the API, which means you kind of pay for what you use. You use a different payment method, basically. But, this is going to be using the default built-in WordPress connector. So, when you go to open connectors, this is where we're going to set it up. So, if you're going to be using like Anthropic for Claude, then you're going to go through this process of connecting it. I can see where this is going to have a big advantage because you'll be able to go in and say, "Hey, uh I want to find a new image. I want to change this. I want to maybe center align this content instead of aligning it to the bottom." And you could just go directly in here instead of going through Claude code like I would do here. Or, you know, you could just go in through the code yourself and change it inside of the builder by going over here to dev. And then we would go in through our display. Claude did not do me justice on this one. It set me up a block instead of flex. It's going to take some training definitely when it comes to Claude and connecting it to it. Got the job done, but it's about the way it gets it done. This is why we still need a professional inside of the mix to make sure this gets done right. So, don't start thinking that my client is going to be able to do this cuz your client won't get the best results or good results, really. I mean, you get something that you can see, but, you know, anyways, another topic. So, we could go in now, and let's say we do get a jump start. And it looks like the changes didn't happen in the builder. Again, this is a very early start and a very early look. Let's go back and take a look at the front end. Okay, we need a center align that. So, it is working in some ways and some ways you don't see it in the back end. But, look at this is beta right now. So, let's go ahead and take a look and see what we're working with in the front end. Okay, I want to change that image now because what Claude did was I spent about a good I would say about 45 minutes just going through each section by section. And every time I put out a section, first time it would be very close to it or it would be completed. This section right here took one shot. So did the header. Actually, the banner was one shot. I had to give a second prompt to make sure to put the header on a overlay. And then down here, this one took a few prompts, but we built out the component that could be reused. We got good results. All in all, took about 45 minutes. Now, we have that start. This is where we go in and make our final touches. I'm going to go to my controls, my background. Let's go ahead and choose an image. From here, I'll go ahead and load this image. Let's go ahead and save it. Take a look at the front. And this is a good start right here. I'm just going to go in and fill in these three images really quick. Just to show how quick we could get some of this going. Okay, this is an actual image element. So, we're going to go choose something and I'm going to go a little bit I'm already going a bit faster with this and okay, we'll put some health focus images here. Let's see if I got another Okay, no, I don't. But, that's all good. Uh let's go ahead and put something of a healthy meal here. We could go in, find three more. Okay, so this is going to be another image and I'll add in two more images. And let me just fill in these last three. Okay, one thing I am noticing doing this is it remembers where I'm at. It's a very uh something similar to bricks. If you use bricks, you know that how quick you can move within the builder because it remembers where you at. You don't have to start over like you have to on some other builders, which is great. Okay, let's go ahead and save this, take a look in the front end. And now we have a pretty good jump start to a decent site. And this, you know, it did not take uh too much time uh setting all this up. Back over here inside of the builder, let's take a look and see everything else that we have. Now, go over here to the plus and we can see our elements. Right now it's still a very basic. It's a very early on. We do have our components here. So, we're going to see this grow through time, for sure. This is just a very first launch, but already on the first launch, having this AI-focused workflow, this is where I see us going right now in WordPress or wherever we're going as website creators, as web designers. And it's pretty interesting to see how they have done this from the very jump start. If we go into the builder, a lot of this is going to feel familiar in many ways. There are going to be our variable selectors where we find them. So, for an example, we could choose our variables like, okay, I don't want this to be super large, but you could choose your variables here. We also have our dynamic data. So, we have all of that already inside of here. When we go into a element, we're going to have different options in the tab. We're going to be able to copy, we're going to be able to edit, and then we also have this gear icon. It's going to take us to general. So, we could edit a few different ways. This is going to be very familiar to class-based builders. We're going to be able to put in our own headers. So, let's say header XL. I'm going to use my style here and going to hit enter. My initial thoughts so far from my experimenting on this in the last week has been this is different in the fact that it is focused on the AI workflow, but also the quick access to just edit directly inside of the code. Especially if I just want to go to one element and I don't want to go through clicking on everything. Just being able to go into my raw CSS and set something up or see the style that's actually showing. This is very useful. So, this is my first look. There's a lot more to explore here. I mean, we still have our display conditions. We also have our interactions. And then we also have our states as well. Our hover, active, focus. There's a lot here to get started with. So, for now, the direction I would go in for the rest of this page is I would go back to the website that I am trying to emulate. And I would continue going through section by section, sending that to Crocoblock, and like, "Okay, let's work on the next section. Let's build this one out." And then making little tweaks to it. I would also say the first thing to do on this is to get the design system going because I mean, whenever I'm building something or just designing a Figma, building out in Bricks, or whatever it is I'm doing, even inside of Crocoblock design, the design system always comes first. So, it's good to see we do have that from the very beginning where we could import and export but I look forward to seeing how this grows and evolves and hearing your thoughts on all of it. And that's a first look at Crocoblock Builder. It's still early on. It's in beta, but it's moving fast and I really look forward to seeing how it grows, evolves, and matures, especially being the AI assistant workflow right there from the jumpstart. This to me excites me, but I really want to hear from you. What do you think about it? Can you see yourself using something like Crocoblock Builder and this AI assisted workflow with your AI agent. Let me know inside of the comments and if you do want to give it a try, well, I have links to everything inside of the description. If you act quick, you can still get the discount as well. And before signing off, I want to give a big thanks to Crocoblock for being super cool about including Crocoblock builder in the all-inclusive LTD plans for all of us who bought those plans way back. I'm really grateful for that. That was really cool. And also thanks for partnering on this video. Well, that's it for this video. Thank you for watching. I really appreciate you and I look forward to seeing you inside of the next video.