Articles

Varty's Videos Article

<hr /><p> </p><p>If screen legend Eric Roberts is sometimes known as the “Busiest Actor in Hollywood” (he's racked up over 700 credits in film and TV),<span style="color:rgb(71,71,71)"> </span>then <a target="_blank" rel="noopener noreferrer" href="https://agilitycms.com/">Agility CMS</a> CTO <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/playing-to-win-in-the-headless-cms-game-interview-with-joel-varty-cto-at-agility">Joel Varty</a> has a valid claim as “The Busiest Man in the CMS industry.”</p><p>Seriously. This year, Joel has released comprehensive video playlists on <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/vartys-videos-a-ctos-take-on-nextjs">Next.js</a> and <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/vartys-videos-all-about-composable">composable content</a>. Now, he’s back to complete the trilogy with this latest YouTube series, <a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/playlist?list=PLEI81bLU4t-uQbH7IZOLUvShAqKGhTlFA"><i>Next-Level Dev: AI Meets Code</i></a><i>.</i> </p><p>We've got an exclusive wrap on this new edition, and you can watch all the videos below. We've even pulled some of Joel's Oscar-worthy quotes from each installment. Just for fun. </p><p>So grab your popcorn, put away your DVD copy of <i>Runaway Train</i>, and prepare for a blockbuster knowledge drop. </p><h3 id="video-1:-building-a-vs-code-component-from-a-screenshot">Video 1: Building a VS Code Component from a Screenshot</h3><p>This is an <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/a-gathering-of-content-champions-heres-why-cms-connect-25-was-super-in-every-way">award-winning</a> video. Literally<i>.</i></p><p>Joel opens with his <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/a-gathering-of-content-champions-heres-why-cms-connect-25-was-super-in-every-way">CMS Connect 25</a>, CMS Idol-winning demo. Within the Agility <a target="_blank" rel="noopener noreferrer" href="https://agilitycms.com/product/headless-cms">headless CMS</a> platform – and in six swift minutes – Joel shows:</p><ul><li>How starting in your codebase (instead of the CMS) saves time.</li><li>The way AI assistants like Claude read your existing project patterns and build components to match.</li><li>Why this approach makes hard-to-visualize use cases simple and fast to deliver.</li></ul><p> </p><p><mark class="marker-yellow"><strong>Fun Joel quote: </strong></mark><i><mark class="marker-yellow">“I don’t even know what this is.”</mark></i></p><p><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=-Kh9eU1gWaU"><strong>Watch </strong><i><strong>Building a VS Code Component from a Screenshot </strong></i><strong>here</strong></a><strong>:</strong></p><figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=-Kh9eU1gWaU"><div style="position:relative;padding-bottom:100%;height:0;padding-bottom:56.2493%"><iframe src="https://www.youtube.com/embed/-Kh9eU1gWaU" style="position:absolute;width:100%;height:100%;top:0;left:0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></div></figure><h3 id="video-2:-can-you-code-ai-with-agility-cms?">Video 2: Can You Code AI with Agility CMS?</h3><p>Think of this as a longer, code-first expansion of the first video.</p><p>Joel wires Agility CMS into a <a target="_blank" rel="noopener noreferrer" href="https://agilitycms.com/starters/nextjs">Next.js</a> site, starting code-first. He covers what the AI-assisted workflow looks like and why it matters for developer efficiency and editor usability. He also breaks down:</p><ul><li>Reverse workflows by taking a React component and letting AI convert it into an Agility CMS component without a manual boilerplate.</li><li>Using AI to add elements like dark mode support, consistent container spacing, and scroll-triggered effects.</li><li>Letting AI scaffold so <a target="_blank" rel="noopener noreferrer" href="https://agilitycms.com/product/developers">developers</a> can focus on testing, code reviews, accessibility, and performance.</li></ul><p> </p><p><mark class="marker-yellow"><strong>Fun Joel quote: </strong></mark><i><mark class="marker-yellow">“I’m going to go boom.”</mark></i></p><p><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=Xtq-SgVbP_I\"><strong>Watch </strong><i><strong>Can You Code AI with Agility CMS? </strong></i><strong>here</strong></a><strong>:</strong></p><figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=Xtq-SgVbP_I"><div style="position:relative;padding-bottom:100%;height:0;padding-bottom:56.2493%"><iframe src="https://www.youtube.com/embed/Xtq-SgVbP_I" style="position:absolute;width:100%;height:100%;top:0;left:0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></div></figure><h3 id="video-3:-oops!-no-dark-mode?-let’s-fix-it-together">Video 3: Oops! No Dark Mode? Let’s Fix it Together</h3><p>Joel shipped a hero component without dark mode.</p><p>But fear not! AI to the rescue! Joel uses an AI agent to retrofit the component properly. Not only does he cover what to change, but also why the pattern matters for consistency across the site. He also dives into:</p><ul><li>Aligning spacing, tones, and dark-mode behavior with existing components.</li><li>Best practices for reviewing diffs and safely accepting changes.</li><li>How to iterate fast and make small manual edits where needed.</li></ul><p> </p><p><mark class="marker-yellow"><strong>Fun Joel quote: </strong></mark><i><mark class="marker-yellow">“It looks like it’s doing a bunch of stuff. Then it undid some stuff.”</mark></i></p><p><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=5fl7avmXx3k"><strong>Watch </strong><i><strong>Oops! No Dark Mode? Let’s Fix it Together </strong></i><strong>here</strong></a><strong>:</strong></p><figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=5fl7avmXx3k"><div style="position:relative;padding-bottom:100%;height:0;padding-bottom:56.2493%"><iframe src="https://www.youtube.com/embed/5fl7avmXx3k" style="position:absolute;width:100%;height:100%;top:0;left:0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></div></figure><h3 id="video-4:-watch-me-build-a-carousel-with-ai,-mcp,-and-next.js">Video 4: Watch Me Build a Carousel with AI, MCP, and Next.js</h3><p>This is a bigger, hands-on video. </p><p>Joel installs the <a target="_blank" rel="noopener noreferrer" href="https://github.com/cdejongfiero/agility-cms-mcp-server">Agility MCP (Model Context Protocol) server</a>, explains what MCP is, and shows how a code-first + AI approach accelerates modeling and implementation while maintaining Next.js conventions. You’ll also see:</p><ul><li>How to go from a simple <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/products/figma">Figma</a> sketch to a carousel component model and item content model using AI.</li><li>Correct <a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/products/nextjs">Next.js</a> routing and file naming.</li><li>The developer’s job to craft precise AI prompts, review diffs, run tests, and enforce performance.</li></ul><p> </p><p><mark class="marker-yellow"><strong>Fun Joel quote: </strong></mark><i><mark class="marker-yellow">“Here’s my quote, unquote design. I am not a designer.”</mark></i></p><p><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=7SgX8Yx39YQ"><strong>Watch </strong><i><strong>Watch Me Build a Carousel with AI, MCP, and Next.js </strong></i><strong>here</strong></a><strong>:</strong></p><figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=7SgX8Yx39YQ"><div style="position:relative;padding-bottom:100%;height:0;padding-bottom:56.2493%"><iframe src="https://www.youtube.com/embed/7SgX8Yx39YQ" style="position:absolute;width:100%;height:100%;top:0;left:0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></div></figure><h3 id="video-5:-github-copilot-vs-cursor-vs-claude:-the-ultimate-ai-coding-showdown">Video 5: GitHub Copilot vs Cursor vs Claude: The Ultimate AI Coding Showdown</h3><p>The last video in the series is the big, winner-take-all battle.</p><p>Joel compares <a target="_blank" rel="noopener noreferrer" href="https://github.com/features/copilot">GitHub Copilot,</a> <a target="_blank" rel="noopener noreferrer" href="https://www.anthropic.com/claude-code">Claude Code (CLI)</a>, and <a target="_blank" rel="noopener noreferrer" href="https://cursor.com/en">Cursor</a> by adding personalization to a Next.js background hero using Agility CMS. He also covers:</p><ul><li>The exact fields and list requirements for personalization.</li><li>How this exercise was set up, executed, and validated.</li><li>How developers ensure quality within AI scaffolding.</li></ul><p>Who takes it? You’ll have to watch.</p><p> </p><p><mark class="marker-yellow"><strong>Fun Joel quote: </strong></mark><i><mark class="marker-yellow">“It’s not working. No, it’s not working. That did not work.”</mark></i></p><p><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=_tJQC_CHXYY"><strong>Watch </strong><i><strong>GitHub Copilot vs Cursor vs Claude: The Ultimate AI Coding Showdown </strong></i><strong>here</strong></a><strong>:</strong></p><figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=_tJQC_CHXYY"><div style="position:relative;padding-bottom:100%;height:0;padding-bottom:56.2493%"><iframe src="https://www.youtube.com/embed/_tJQC_CHXYY" style="position:absolute;width:100%;height:100%;top:0;left:0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></div></figure><h3 id="the-post-credits-scene:-the-repeatable-loop">The Post-Credits Scene: The Repeatable Loop</h3><p>Whether intended or accidental, Joel’s series showcases that AI won’t replace developers. </p><p>And maybe that’s the point.</p><p>Each episode in Joel’s series sort of reinforces the same loop:</p><ol><li><strong>Developers Start: </strong>It’s dev intent, through things like prompts, that drive the work. </li><li><strong>AI Scaffolds: </strong>It drafts the boring parts.</li><li><strong>Developers Stay Accountable:</strong> For things like naming, accessibility, performance, and overall quality.</li></ol><p>In <a target="_blank" rel="noopener noreferrer" href="https://agilitycms.com/blog/i-taught-a-little-and-learned-a-lot-at-cms-connect-25">Joel’s recap of CMS Connect 25</a>, he pointed out that for AI experimentation, nobody has “cracked the code” on a singular, best way to do it. But in <i>Next Level Dev: AI Meets Code, </i>he may have found a workable formula where dev input and AI output are given equal consideration and craft.</p><p>We’ll see. </p><p>Until then, we're looking forward to the next installment of Varty’s Videos.</p><p> </p><hr /><h4 style="text-align:center" id="looking-for-guidance-on-agility?-talk-to-an-expert."><i><strong>Looking for guidance on Agility? </strong></i><a target="_blank" rel="noopener noreferrer" href="https://cmscritic.com/contact"><span style="color:hsl(210,75%,60%)"><i><strong>Talk to an expert.</strong></i></span></a></h4><hr /><h3 id="upcoming-events">Upcoming Events</h3><p> </p><p><img style="width:31.61%" src="https://cmscritic.com/ms-content/uploads/2025/08/storyblok-joyconf-2025-logo.jpg" /></p><h4 id="storyblok-joyconf-2025"><a target="_blank" rel="noopener noreferrer" href="https://joyconf.storyblok.com/"><span style="color:hsl(210,75%,60%)">Storyblok JoyConf 2025</span></a></h4><p><span style="color:rgb(30,28,34)"><strong>October 14-15, 2025 – Amsterdam, Netherlands</strong></span><br /><span style="color:rgb(30,28,34)"><strong>November 4, 2025 – New York, NY</strong></span><br /><span style="color:rgb(30,28,34)"><strong>November 6, 2025 – Los Angeles, CA</strong></span></p><p><span style="color:rgb(31,31,31)">Join us at JoyConf 2025, where the future of content meets the people shaping it. Built for </span>developers, marketers, and digital innovators<span style="color:rgb(31,31,31)">, this free conference goes way beyond product updates or yet another strategy playbook. </span>It’s where you’ll get inspired, get real, and get connected – to ideas, to the community, and to what’s possible when you build joyfully. Whether you're building lightning-fast frontends or launching cross-channel campaigns, this is where content becomes connection and collaboration becomes second nature. Come for the talks. Stay for the community. Leave with joy. <a target="_blank" rel="noopener noreferrer" href="https://joyconf.storyblok.com/">Save your spot.</a></p><p> </p><p><img style="width:28.9%" src="https://cmscritic.com/ms-content/uploads/2025/08/sitecore-symposium-2025.jpg" /></p><h4 id="sitecore-symposium-2025"><a target="_blank" rel="noopener noreferrer" href="https://symposium.sitecore.com/"><span style="color:hsl(210,75%,60%)">Sitecore Symposium 2025</span></a></h4><p><span style="color:rgb(30,28,34)"><strong>November 3-5, 2025 – Orlando, FL</strong></span></p><p>At Sitecore Symposium, you’ll learn how to meet your customers where they are – across channels, moments, and touchpoints that didn’t exist a year ago. You’ll hear how the boldest brands in the world are transforming content into outcomes and creating experiences that are fast, relevant, and human. Join 1,500 marketers, digital leaders, and technologists in Orlando to see what’s possible when personalization scales, AI accelerates creativity, and trust becomes your competitive edge. This is the Third Wave of the Internet. And this is your moment to lead in it. <a target="_blank" rel="noopener noreferrer" href="https://symposium.sitecore.com/">Get your tickets today.</a></p><p> </p><p><img style="width:31.44%" src="https://cmscritic.com/ms-content/uploads/2025/08/cms-kickoff-2026-logo.png" alt="" /></p><h4 id="cms-kickoff-2026"><a target="_blank" rel="noopener noreferrer" href="https://www.boye-co.com/conferences/cmskickoff26"><span style="color:hsl(210,75%,60%)">CMS Kickoff 2026</span></a></h4><p><strong>January 13-14, 2026 – St. Petersburg, FL</strong></p><p><span style="color:rgb(29,28,29)">Meet industry leaders at our fourth</span> annual CMS Kickoff – the industry's premier global CMS event. Similar to a traditional kickoff, we reflect on recent trends and share stories from the frontlines. Additionally, we will delve into the current happenings and shed light on the future. Prepare for an unparalleled in-person CMS conference experience that will equip you to move things forward. This is an exclusive event – space is limited, <a target="_blank" rel="noopener noreferrer" href="https://www.boye-co.com/conferences/cmskickoff26">so secure your tickets today.</a></p>

Varty’s Videos: Where AI Meets Code

cms-critic-staff

Explore a wide range of informative articles on Varty's Videos, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry

News

Varty’s Videos: Where AI Meets Code