This Open Source Tool Made Me Finally Quit Webflow

There's a new tool that might put an end to Webflow and Framer. And I don't say this just to say it. I'm genuinely excited and a bit terrified. Command AI. So what you see here is a tool for no code that is AI native and it's all open source running locally on my machine connected to your codeex your cloud whatever you want and yeah it can it it can create designs it has a CMS you can host things you have users there's just so much that I want to show you so this is the V not even V1. This is version 0.0.1. So, it's very early. You add a site and then you can just get in and do stuff yourself or do it agentically, which I will show you in a second. But you have, you know, your pages, you have your layers as you see. And for my Web Flow friends, I don't know if I can find an element here that has multiple classes here. You see like I can remove the base class something like that you can't do in web flow crazy right 2026 so it has everything that you need here literally you have this view you have the canvas view you can like execute the code uh you can like if you look at here to show you like you you have like animations so a lot of things like this you have obviously your um different break points and you know what's crazy you can edit those break points you can add your like new break points so you have all of this you have content and data which I haven't wrapped my head around completely yet content seems to be like a rich text and in this rich text I can do slash and do table crazy right 2026 we don't have this in web flow You have all of this here. Uh yeah, I mentioned data. You have a database, you have the the media, you have plugins. I haven't installed any plugins. And now you have also users. Uh so imagine you build a website for your client and you want to add your client as a new user. You know what? Like we can just add a new role and as you see we can allow them to have access to the dashboard or not to the site to pages to content data media runtime storage plugins AI user roles audit like all of everything separately this is literally $100,000 worth like this is like all not just web flow every enterprise website uh website builder that sells like this access levels they charge I don't know that like a lot of money and now you have all of this here open-source MIT license here we have also code which I haven't looked into yet but yeah you have that uh you have uh a framework something that I guess is from the tool that um gives you but you can discard this. You don't have to use it. That's the beauty of it. You can manage framework and use none whatsoever. Do whatever you want. It's yours. Uh so you have these. But let's talk about how I made this. How did I make this? So this was designed by a human. This is designed by uh my designer on uh my team in Figma. Beautiful work in Figma. It was designed in Figma. I did try to bring this to Webflow via the MCP. Let's just say it was not really good. Uh, and I just gave in this case chat GPT access to Figma and said like do this and it it did it basically one go, no correction, nothing. I did a test for the first two sections to see if it does it. It did it and then I said, "Okay, do it for the rest." And it did it. So one go basically did everything. Uh so you have this AI assistance panel create an MCP you create an MCP and you are basically connecting this tool to your AI whatever that you are using and then from there you take it. So I'll show you how that is. So here we have my uh codeex and this is like my my chat creating this. Um, so the way I did it, I went to the AI assistant here, AI settings. By the way, depending on when you are watching this video, I can imagine a lot of the UI changing, but what you want to search for is it's also / AI and here you go to MCP and you create a new connector. Now, what's really nice here is you can create a connector for local or remote. For example, the local one is for yourself. The remote one is when you want to give access to your client. So imagine you can create an MCP server for your client but give it only access to site editing like to the content editing but not publishing just for example. So your client can edit but they cannot publish so they don't break whatever like whatever access level that you want. You can have different MCPs and give it give them to your clients. And once you create the MCP let's just create one. We give it a name. Actually let's say test two. I give it a name. I need to put in my password. And then you get a token or like this basically prompt. You can actually just ask your codeex or cloud code, paste that in and say add that MCP. And realistically, you need to reload your session or like create a new session uh to to load that MCP. Once that's added, you can just talk to it. So you talk to your AI and you say create a new page. So I can say create a contact page one section. So just just to be fast and now in this case codeex is talking to this tool and everything is still on my machine and it goes on and it it understands by the MCP what it what tools it has access to and creates it. Why am I so excited about this is it's a tool that is doing the AI part really well. It is open source. It's on my machine. I can literally create not just pages here, not like these websites. I can also change the tool itself. It is open source. It's MIT. I can tell ChatGpt to change the content of the, you know, the site or like the tool itself. And it even though it's such an early version, it looks very like complete to me or like not just complete. It it sounds like to me it looks like they have a good sense of where they want to bring this to. And yeah, this can potentially bring your hosting fees down. You can have your clients websites here and they have access to the CMS. they have you have multi-users. It's a really good sp uh starting point. So, here you see the contact page just got added. Um yeah, it's it's not perfect. I didn't give it a a design or whatever, but it started it's it tried to use the same design that we have. And yeah, just to clarify why I'm so excited about like this being finally being something that feels like client ready is that I can have a client with edit ro where they can see the the thing and just edit it on canvas like I can edit this I can edit this like these things are fully editable that's why it's really nice and I can limit their access in addition to obviously having uh an MCP for them to edit through chat GPT or through the canvas. So all of that together it does feel pretty complete. So I cannot wait to play more with it and potentially I'm not joking um my my site. This is my new design by the way showing this for the first time. Um, shout out to Ryan for creating like this banger design. I might legit just continue building it here. Like what is the point of this in doing it in web flow? RIP Web Flow. I I really don't want to sound like that and and frame like I mean what Okay. Okay. Ju just last question before I go. I know framer community is much bigger nowadays. much more active, but we still have the Web Flow community and like genuinely asking like no fear-mongering, nothing from designer to designer, agency owner to agency owner, freelancer to freelancer, like why would you use Web Flow and Framer over this? Like why? I know there is a learning curve. Just editing Sam here because we got a little bit sidetracked on that question. Genuinely uptime of web flow and framer is something where you might choose them. If something goes wrong with your instatic installation, it goes down. You're entirely responsible for that. However, that might not be a big deal and the chance of that happening might be slim to none. So definitely worth checking out. You could pay someone just to get it up and running and then that's it. You know, you pay someone quickly to get this up and running on a URL and then you don't there's no learning curve. We'll go through it after you go. We'll go through how to get this all installed and stuff like that, but point is if you don't want to do that, it's a 20inut job and then you've got your own bespoke version of Web Flow for you and whoever to contribute to, right? Yeah. And so there's no learning curve. But like even the even the learning curve, if you know Web Flow and Frame, I promise you the learning curve here is 10 minutes. Maybe it is ugly in some places like this is ugly, right? This is no web flow and framer. This is no web flow and but does it matter like the the whole point is that I want to do the to let the agent to do the bigger like part of the job and then I want to have controls to do refinement if I need to if I really need to. And this gives me all of that. And if I don't really like this panel, it's on my machine. Like I can't tell Claude, hey, redesign this panel to do whatever that I want. Does the MCP allow you to manipulate the source code or does it just allow you to create the components, the pages and stuff like that? From what I understand, the MCP is only for the content essentially. Okay. But on the same layer, I have access to, you know, the whole tool. So, yeah. So, as long as as long as you're running it on your machine, you can edit the code. Yeah. What is it called again? Instatic. That's the one. Instatic. Oh, I I went the whole thing without naming the tool. That's the way to do it. We We'll just install it. We'll take you through. You access this. You get the raw code. That's what we talk about when we talk about open source is you get access to the code that makes up this whole project. Okay? They're all here. Admin core, all of this stuff is the code that makes up all of that beautiful UI that you saw. So, we get access to all of that. So, we need to download this code. If we go here, we go to quick start, it tells you how we're going to do it. So, this is what we're going to run through. You need bun installed. So, I've just I've literally just Google search install bun Mac and you're going to install that. And Macs and PCs, I think they all have git install, so you don't have to worry about anything regarding that. And this is a this is the line of code that allows you to just download it or what they call clone onto your local machine. Let's have a little quick look up here. You could probably also just go to releases here and just install or download the source code like like that. So, that would be another way to do it. I'm inside a terminal. This is warp, but you can download if you just um command space on a Mac or or download PowerShell or Terminal. These are both applications that basically give you this awful black and white UI. And you'll want to cd into a folder, change directory into the folder that you want to work in. And the easiest thing I would suggest you do is grab your finder. I like all of my websites to be in the sites folder. So, I would potentially just drag sites into that. Just got rid of the CD. And that will navigate to the sites folder. This could also be uh documents. You can type it out or you can drag it in. Uh Samuel Gregory documents. Drag that in. CD into that. Right now, I'm in that folder. I actually want it to be in the sites. So, I'm going to navigate to sites. Now, I'm in my sites folder. Then we run the git clone. This I wouldn't press enter just yet because this is going to download. It's going to create a folder called nst static and download it into there. Whereas, you need a unique installation for every single website. You don't just have the one installation of this app and then create loads and loads of websites. No, no, no. one installation of instatic for every website that you want to create. So let's as an example, let's do the command AI podcast website. So a space after the git and then the name of the project you want to do. So we enter that and it's going to clone and download all of those files into the sites folder on my computer. If I go into my finder here and I go into sites, there's that folder that I've just programmatically created. Can you see that with my terminal? And if I go in here, there's all the files that it's downloaded. And this is exactly what is on the the the GitHub. These are all the same files just here. And we want to cd into that folder that we created. And remember you installed bun earlier. You do bun install which what this does is it installs all the libraries and everything that this um this needs to function and then we just do bun rundev. These are all the instructions here. The only thing we don't do is we created a folder ourselves and then cded into the folder that we created instead of just in static. If you just run this if you just blindly copy and paste this then this will work totally fine. It's just if you want to have multiple websites using in static, then you don't want them all to be called in static. You'll have to rename them or whatever. It looks like everything's good to go. So, I can visit that URL. And here we go. Command a podcast site. Uh, I'm going to use uh testmail.com, but you'll obviously want to use a proper email. I'm going to put in a password. And this is now creating our site. And if you look at the URL, I'm not sure whether you can see this, but it's the it's a URL/admin dashboard. So if we just do this and just do that, it's going to error because we haven't created a website yet. So let's create a new page. And I'm not an expert in this, by the way. I got I got shown this literally just before the the show today. If I added something here, I don't even know how to add stuff. I really don't know how to add stuff. Paste HTML. Oh, that's cool. You can paste HTML, but realistically, I want to add insert module. Uh, some text as well. There we go. We just added some bunch of text. We're really sorry that this looks like utter balls, but if we refresh that there, there's our text. So, we're creating our website. We're done. And obviously, you'd use this um and you create your website. You can either do it through the panel here or like Cabaza showed, if we click on this AI button down here, open AI settings, you can create an MCP. Uh, let's call this clawed code. Name it whatever you want. Really doesn't matter. And I would say no expire there. Select all. So it can do everything. These are all it permissions that it can do. And now what you can do, it creates you a token and a URL. If you're using clawed code, just copy that into your terminal. Now, so if I split this with command D, um, and then do that and then run claude. Um, can you access my instatic website? Hopefully, this will just create it because it knows. There we go. Check connecting your instatic MCP server. Here we go. We're good to go. Now, what I might do is get something from Figma. These are some of my um thumbnails. So, let's just let's just copy the link to that frame. There we go. Right. Take this Figma frame and make a new page in in static. So, this should use the Figma MCP to go and get the Figma design, translate that into Instatic, and create a new page and do everything. So, let's just see how this goes. There it is. Oh, just created a page right in front of her eyes there. So, it's not done anything yet. There we go. Boom. And I know it's a thumbnail design that I've created with Figma, but could this just could just as well be a website. And it's done it. I know I can edit that. I can change. Well, let's have a look here. What is I don't again I don't know this interface. Spacing, typography, font family, inherit. So, let's just do uh what's uh Times. There you go. Times New Roman. There we go. So, you can change all that kind of crap. So, there we go. Then you literally just upload these to a server. You literally just upload them to a server and then now you've got this online. This all this is all locally running on my machine, but you'll want this online. So, if we go to here, I think they've got some instructions to deploy it. Here we go. So, you can deploy on railway on render on Docker, you know. So, you you'll get this online and then then you'll add users so they can log in and do all that sort of stuff. So, that's that's in static and installing it. I hope that was useful and I hope it help is helping people um you know understand the whole terminal stuff. This is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI.