Antigravity + Stitch MCP: AI Agents That Build Complete Websites

Hey everyone. Google's anti-gravity has been around for a while, but only now are people starting to realize how powerful it really is. And the best part is it's completely free. It's not just an IDE. It's an agentdriven workspace where AI can plan, write, edit, and run your entire application workflow. On the other hand, Stitch is Google's AI powered UI and UX design agent that helps you generate productionready designs in minutes. If you're new to Stitch, check out my previous video on it. It'll give you a solid foundation and make this walkthrough much easier to follow. With MCP support, Stitch can directly connect to Anti-Gravity, allowing agents to create, modify, and iterate on multi-page designs automatically. In this video, I'll show you how to combine anti-gravity with Stitch using MCP to connect everything seamlessly, where Stitch handles the design, and anti-gravity turns those designs into real working applications from start to finish. Once you open Stitch, you'll find a link to the MCP documentation. Just click that. The first thing you need to do is create an API key. Go to the Stitch settings page where you can generate a new key. I've already created mine. After that, the next step is setting up the MCP client in your IDE. Stitch supports Gemini CLI, Cursor, VS Code, and more. In my case, I'm going to use the anti-gravity MCP server JSON. Now, open your anti-gravity IDE, click the three dot menu, select MCP servers, and then choose manage MCP. From there, click view config. Paste the MCP server JSON here and make sure to replace it with your valid API URL. Once you save the config, hit the refresh button. You'll now see the Stitch MCP server listed and all the available tools will show up ready to use. So now we have multiple tools available like create project, get project, list projects, list screens and a few others. For example, when you use list projects, it automatically fetches and shows all the projects available in your Stitch account. I simply asked Stitch to list projects and it triggered the MCP tool and returned everything instantly. Next, I opened one of my projects in Stitch, copied the project ID, and then asked it to list screens for that specific ID. Once I submitted that, it pulled all the screens inside that project. This project has five screens and it's basically an e-commerce website. Pages like product listing, cart, checkout, and more. Inside Stitch itself, you also get options to edit the theme, regenerate designs, and tweak different elements. If you're new to Stitch, I definitely recommend checking out my earlier Stitch tutorial videos. Now, I've opened the landing page design in a new tab, and the next step is simple. I'm going to use all these pages to build a Reactbased ecommerce project. For that, I added a simple prompt. Create the React app using all the page designs. Once I submitted it, Stitch automatically generated a complete React setup, creating proper components and hooks by converting the HTML directly from the design. Everything is structured cleanly. So instead of starting from scratch, you already get a solid React code base generated straight from the UI. Here you can see the landing page and all the assets are reused exactly from the original design. This is the product page and you'll notice it even includes hover functionality by default. Next, this is the view product page. Along with that, we also have two more pages, the shopping cart page and the final checkout page. The key thing to understand is this. Using MCP, we're not just pulling designs from Stitch. We can actually create, update, and modify projects and screens directly through these tools. So far, we've used Get Project and list screens to work with an existing project and its screens. Now, let's switch gears and use the create project tool to spin up a brand new Stitch project from scratch. Here you can see I've already generated a plan for a modern fitness website using the Claude Opus model. It includes detailed breakdowns of the theme and individual page layouts. Before using this plan, I want to quickly show you the stitch skills and what it's capable of. Stitch skills are basically plug-andplay abilities you can add to your agent to do things like convert designs into React components, generate design docs, or even build full websites. They work with the Stitch MCP server and run smoothly across tools like anti-gravity, Gemini, CLI, cursor, and claude code. If you're new to Stitch skills, check out my agent skills video first. Coming back here, some of the key skills available are design MD which breaks down the design system, react components which converts stitch screens into production ready react components and enhance prompt which refineses rough ideas into strong UI ready prompts. But in this video, I'm going to use the stitch loop skill. It generates a complete multi-page website from a single prompt because in our plan we have around six pages and without this skill stitch would only generate one page by default. You can try installing the skill using this command. There might be some issues on my side but it could work for you. If not the workaround is simple. Download the entire skills folder from GitHub and drop it straight into your project directory. So next I'm going to give this prompt to create the stitch project using the stitch loop skill. Once I submit it, the skill automatically generates all the screens one by one based on the plan. Now go back to stitch and refresh it. You'll see that a new project is being created. Open it up. Here you can already see two pages generated and the third one is currently in progress. It creates the pages one by one, not all at once. Take a look at the output quality. I'll open this design in a new tab. This is our home landing page and honestly, it looks really good. The product catalog page is generated and it matches the plan perfectly. So, the takeaway is simple. You don't even need to manually open Stitch anymore. You can create a clean, detailed plan inside anti-gravity and then directly executed into Stitch. You can also see the HTML code for all the pages and the UI matches exactly. Getting clean, usable HTML like this is honestly awesome. After a few minutes, all six pages were fully generated. Anti-gravity also provided a detailed walkthrough in markdown with screenshots and screen level details for every page. Along with that, it automatically created design.md and site.md files as well. One thing I really like is how Stitch generates images for elements using Nano Banana. The visuals it creates are clean, relevant, and fit perfectly with each page and component. And I've deployed both websites already. I'll drop the links below so you can check out the final output yourself. Anti-gravity plus Stitch with MCP and agent skills completely change how you build apps, turning plans into multi-page designs and clean code faster than ever. All with a mostly free stack. This is a full agent-driven workflow, not just UI generation anymore. All resource links are in the description below. Check them out. Thanks for watching and I'll see you in the next one.