Agents, AI

Content, Components, and CMS with Framer Agents

Content, Components, and CMS with Framer Agents

Content, Components, and CMS with Framer Agents

Justin

·

8:25

·

468 views

·

Jun 16, 2026

About this lesson

In this demo, we’ll look at practical ways Framer Agents can help speed up everyday production work while keeping you in control of the final result.

From replacing images and refining copy to creating components, building mobile navigation, generating code components, connecting CMS content, managing redirects, and building new page sections — Agents can act like a design assistant that understands your project and helps you move faster.

0:00 Introduction

0:10 Replacing Multiple Images

0:50 Refining Brand Voice and Copy

2:05 Reviewing Site Analytics

2:30 Turning Repeated Elements into Components

3:10 Finding Component Opportunities

3:35 Building Mobile Navigation Variants

4:35 Creating a Functional Code Component

5:25 Creating a CMS Collection

6:05 Connecting CMS References

6:40 Batch-Renaming Blog Titles

7:20 Creating Slug Redirects

7:40 Building a Team Section from CMS

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00The layout is there, the direction is 0:02coming together, but this is usually 0:03where the real production work starts.0:06So, let's jump in and take a look at how 0:08agents can help us polish and scale 0:10what's already there. Here we have three 0:12stock images that were generated with 0:14this page, but I've got a few approved 0:16image files to replace them with.0:18Normally, I'd have to replace each image 0:20one by one, but instead, I'm going to 0:22drag my files right into the chat and 0:25tell the agent to replace the 0:26placeholder images with the correct 0:28image for each location on the contact 0:31page.0:35And just like that, my images are 0:37swapped for the approved ones. Now,0:40let's move from visuals to copy. And 0:42here's the thing, nobody wants to comb 0:44through every page manually to look for 0:47repetitive or flat-sounding copy. So,0:49I'll ask the agent to audit the site for 0:51me by asking, "What adjective is used 0:54most in written text site-wide?"1:02As we can see here, it found that we're 1:03using the word bold a little too often.1:06So, I can follow up with, "Our site-wide 1:09copy mentions bold too many times.1:12Replace them instances with synonyms 1:14that match our tone."1:20The changes are made and we get a full 1:21summary of every change. What was 1:24replaced, where, and why. I also want to 1:27point out that it's not just doing a 1:29blind find and replace. It's looking at 1:31the surrounding content and making edits 1:33that still fit the tone of the site. And 1:36I can even take that a step further by 1:38asking it to do things like rewrite any 1:40passive copy in a more active voice.1:44What used to take a dedicated copy pass 1:46is now done in just a few prompts. And 1:49the result is tighter, more consistent 1:52copy across our entire site. And the 1:55same idea can help cover things that are 1:57easy to miss before launch, like SEO 2:00titles, descriptions, semantic tags,2:03image alt text, you name it. And after 2:05launch, you can even chat about your 2:07site's analytics and get detailed 2:09insights about what's going on with your 2:11visitors and what you can do about it.2:14Okay, so now that the copy is in a 2:16better place, let's move on to fixing up 2:18anything that might become annoying to 2:20maintain later. I'm talking elements 2:23that have the potential to become 2:24components. Things like buttons, list 2:27items, nav links, usually anything that 2:29shows up more than once. For example, I 2:32have a list of services here and each 2:34item follows the same structure, making 2:37it the perfect candidate to be a 2:38component. So to clean this up, I'll ask 2:41the agent to turn these list items into 2:43a single component with variables.2:45Replace each with an instance and 2:47populate the variables with the content 2:49from each card.2:53This is a huge time saver and makes 2:55things way easier to manage if I want to 2:57make any changes in the future. Now,3:00instead of manually inspecting every 3:02page of my site to figure out what else 3:04could be a component, I can take this a 3:06step further and simply ask the agent to 3:09audit the site for smaller repeated 3:11elements that would make sense as 3:13reusable components. And just like 3:15before, the agent gives me a summary of 3:17what it found and I can decide what's 3:20actually worth turning into a component 3:22or not. Another place the agent can save 3:25us a lot of time is by adding 3:27interactive variants to a component like 3:30a mobile navigation for instance,3:31because let's be honest, mobile navs can 3:33be a bit annoying to set up. So, looking 3:37at our nav component here, I already 3:39have a phone variant, but no expanded 3:42state for the menu itself. So, I'll ask 3:45the agent to create open and close 3:47states for the existing phone nav 3:49variant. And I'll also say use a menu 3:51text button to show the nav links and 3:54change it to close when open.4:02Okay, now let's preview the phone 4:04breakpoint to see how it looks.4:06Perfect. The mobile nav is working, the 4:09states are set up, and the interactions 4:11all wired up. All right, so the agent 4:14handled the tedious setup and I can 4:16still jump in to polish anything that 4:18needs a final pass. Okay, now let's talk 4:22code components. And yes, agents have 4:25the ability to create flashy interactive 4:27code components from scratch, but what's 4:29really nice is that agents can use 4:32what's already on the canvas as a 4:34starting point. For example, on the 4:37contact page here, I have this analog 4:39clock component that I want to bring to 4:41life. So, I'll tell the canvas agent to 4:44turn this into a functioning analog 4:46clock with a property for time zone.4:52And the agent takes the visual direction 4:54from what's on the canvas, but makes it 4:57functional.4:58What I really love about this is that it 5:00works for big sections like an 5:01interactive hero and small production 5:04details like a copyright component that 5:06updates the year automatically. Either 5:08way, with the help of agents, code 5:11components can now be created directly 5:13from the context of what's on the 5:15canvas.5:16Now, let's get into some CMS stuff,5:19where agents can really take a lot of 5:21the tedious setup off our plate. For 5:24example, Joseph copied some items from 5:26the services page to the homepage, but 5:28if we want to keep every mention of our 5:30services consistent site-wide, we might 5:33want to create a services CMS collection 5:36from the 13 individual service items on 5:38the services page, connect the homepage 5:41services section to it, and show only 5:43six items.5:45And with this one prompt, the CMS agent 5:48isn't just creating a new collection. It 5:50also replaces those services on the 5:52homepage with a collection list,5:55dynamically populated from the new CMS 5:58collection. That's a serious time-saver.6:02We've also got a new opportunity to make 6:04a structural update to our CMS. So, I 6:07already have a team collection where 6:09each person has a field referencing the 6:11projects they've worked on. But what I 6:13really want is each case study in the 6:16work collection to reference who worked 6:19on it. So, I'll tell the CMS agent that 6:21team collection items multi-reference 6:24work collection items, and that I want 6:26to add a multi-reference field to the 6:29work collection to reference the 6:31corresponding team items.6:34And now, each work item references the 6:37correct team members, quick and easy.6:41Okay, let's quickly look at a more 6:44everyday CMS cleanup task.6:46Here I have a collection of blog posts 6:49already in place, but the titles feel 6:51more like rough placeholders than 6:54polished article titles. I could sit and 6:57read each blog post to come up with a 6:58relevant title myself, or I could have 7:01the CMS agent batch rename the blog CMS 7:04items with clear, polished article 7:07titles.7:10It's that easy. And to be honest, a lot 7:13of CMS tasks aren't necessarily hard,7:16they're just repetitive. For example, if 7:18I needed to simplify a bunch of slugs 7:20and redirect the old URLs to the new 7:22URLs, I'd much rather hand that off to a 7:25CMS agent than go through each item 7:27myself. And as you might expect, agents 7:30can also design whole new sections on 7:33the canvas using our CMS content. If we 7:36take a look at the team collection here,7:38we can see all of the team members in 7:40it. So, I'll head over to the about 7:42page, use the context tool to select the 7:44team section,7:46and then ask the agent to show team 7:49members from CMS grouped by department,7:52label left, cards right, in a grid.7:56And because the agent has full context 7:58of our project, it's not creating this 8:00in a vacuum. It can use the styles,8:02spacing, typography, and design patterns 8:05that are already set up throughout the 8:06site. So, what is generated feels like 8:09it belongs. And all of the team members 8:11and their information are pulled right 8:13onto our canvas from the team collection 8:16within our CMS.

TeachesFramer Agents

Also coversBreakpoints Collection Lists Collections Component Variants Components Grids Links Redirects SEO Audit Semantic Tags Spacing Staging vs Production Typography Variables Visitor Analytics

Watch on YouTube ↗

‹ Connect Framer to Claude Code, Codex, Cursor, and more

Framer 3.0 with Agents, Branching, and a new Community ›

More in this topic

Connect Framer to Claude Code, Codex, Cursor, and more

Connect Framer to Claude Code, Codex, Cursor, and more

Agents2K views · 2 days ago

Framer 3.0 with Agents, Branching, and a new Community

Framer 3.0 with Agents, Branching, and a new Community

Announcement25K views · 2 days ago

Generation, layout, and styling with Framer Agents

Generation, layout, and styling with Framer Agents

Agents886 views · 2 days ago

Framer Event — Introducing Agents, Branching, and a new Community

Framer Event — Introducing Agents, Branching, and a new Community

Event17K views · 2 days ago

Framer Update: Auto Translate

Framer Update: Auto Translate

Framer Update4K views · 2 months ago

Framer Update: Auto Rename

Framer Update: Auto Rename

Framer Update5K views · 7 months ago

Wireframer: Blogs and Changelogs with CMS

Wireframer: Blogs and Changelogs with CMS

Framer Update5K views · 8 months ago

Framer Update: Wireframer Icons and Insert Sections

Framer Update: Wireframer Icons and Insert Sections

Framer Update7K views · 11 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.