Framer have released something I've

never seen before on a no-code platform,

which is AI agents that are fully

integrated with the platform itself.

Everything from designing websites

[music] on the canvas to creating and

editing content on the CMS. This is

really cool. You can also bring your own

AI agents to the platform itself. It

doesn't mean that you're limited to

what's on the interface. You can have

your own Claude Code instance, Codex, or

even something like open clause start

editing changes on your behalf. This is

a huge change, especially for

professionals who are looking to build

websites on professional software. While

I've used things like Lovable or

Bolt.new, they're often locked into an

iframe and you're working on a fight

instance. You're not actually designing

in the traditional sense. So, I'm really

excited to see what these changes bring

and test them all out. Let's find out.

Starting on the Framer homepage, let's

log in. In our workspaces, let's select

this project I previously had open. And

on the right-hand panel here, we have

this new option for agent. Similar to VS

Code, we can open up new chats, select

an AI model to use such as Sonnet, GPT,

or Opus. I will show you how to connect

your own AI model a little bit later on.

Selecting the cursor, we can select

elements on the page to reference them

as context. We can send the message to

the AI. Here, I haven't actually

provided any details of what I want it

to do with the title block I selected,

but the model here is smart enough to

ask me questions of what action to

perform. Here are some. I'm simply going

to ask it to restyle it based on the

current design of the page itself. It

goes ahead and completes that action,

and here's the new design. It's made the

font a little bit more bold, the line

spacing a little less, as well as added

in this a linear gradient, which makes

the design look a little bit more

professional than just plain white text

like it was before. For every change

that's made, there's also history, so I

can undo and redo those changes at any

point in time. I can also bring up the

right-hand side context menu and have a

look at the prompt information, which

gives me stats on how long it took and

how many tokens it used. I can also do a

full revert going back in time

completely before I even had the chat

dialogue. And this very much reminds me

of how I normally operate inside of

cursor because I love being able to test

out different things and sometimes

revert them if they didn't turn out the

way I want. As you make different types

of changes and use up tokens, you're

also using credits. And just like things

like Claude code, there's a daily credit

limit. Let's head to settings over here

and then head over to usage to take a

look at that. Right now, we've used

about 105 out of our 500 daily credits.

You can also upgrade your plan to have

additional credits through the month,

but you still have the ability to

connect up your own local AI model

through something like Claude code or

codex and use your own credits rather

than credits through framer. Actually,

let's do this right now because I've

just run out of credits and I'm going to

have to wait until tomorrow to get some

more. If you head to this page here,

which I'll link in the description, you

can connect it to any of the software

you're using. Right now, I'm using

Claude code, so I'm going to paste in

this prompt here, which is going to

connect up my project to Claude code. It

goes through and make sure that node js

24 is installed as well as the framer

package for their agents. Once these two

steps are done, you're going to need to

copy out your project URL, which you can

grab here at the very top under the

project link. Once I paste this into my

chat window, I'll authorize this

instance of Claude code to have access

to this project. With that done, I can

now get Claude code to start creating

actions on this canvas. So, let's test

this out. I want to rework the

testimonial section because right now

the UI is a little bit cluttered. There

is a no space or padding in between and

I want to show all six elements. So, I'm

going to ask it to do that. Claude code

then grabs the skills that it needs to

be able to perform this task and it

starts running in the background. This

takes about 5 to 10 minutes and once

done, we have this a section here with

around six new testimonials that look a

little bit better. But, it continued to

work on those in the background. And

finally, we have this revision just over

here. I'm just scratching the surface of

what you can do with something like

this. Because, for example, you could

connect up Claude code to Notion where

you might have a project for a client

and pull the testimonials as a

real-world examples straight into the

design canvas. Now, let's take a look at

the CMS and how AI agents can work

natively between the designs you have as

well as the data you have all over the

place. Here, I have this testimonial

section and I want to convert it into an

actual CMS. I'll ask the AI to do this

for me and you can see it's processing

in the background and starting to

perform that action. In the design

canvas, you can see that this section

has been turned into a component that is

also connected to that CMS and dynamic

data is being pulled in. Now, to take

this one step further, let's turn this

into a reusable component so that this

section here can be used in other parts

of the website. I'll ask the AI agent to

do this for me and I'll get started. Now

that this is a component, I can also get

it to do a couple of different types of

variations in terms of the UI so I can

see what that experience might look like

in the website overall. I ended up with

these three variations over here and

overall, I like this one here called

spotlight the most because it gave me a

high-quality type of design that felt

like it was quite premium. Next up is to

test out responsive design. I'll prompt

it to create some responsive breakpoints

for tablet and mobile here for this

testimonial section and see how it goes

at handling that. Not too bad, pretty

much exactly how I would structure it

myself. We've got the tablet version

with two columns and the phone with a

single column design. Pretty much

perfect. Now, I want to test out React

components, one of the things that

Framer is known to do quite well. So,

I'm going to ask it to create a

countdown timer and make it a React

component inside of Framer that I can

modify and view the code of. You can see

all the code itself in this file called

slow countdown and it's a pretty big

file but also designed with the same

aesthetic that the page has overall

right now. I'll be really interested to

see how this works with more complex

components in the future, but for now at

least I know these AI agents have a good

grip off how to design these components

inside of Framer. I want to add some

animations now. I'm going to ask the AI

agent to create a transition animation

every time we have these elements on the

screen itself. This prompt runs in the

background for a couple of minutes and

once it's complete it creates this

outcome. It's a slow fade in with a

slight scale as the cards come into the

viewport. I'll select play so you can

see that once more. It isn't anything

over the top, but that's what you

normally want if you're creating

transitions or animations on a website.

The last test is the most difficult,

building an entire web design from

scratch from some reference images in

Framer. And I'm going to get the AI

agent to do this by attaching some

screenshots of the design from my

graphics designer just over here. It's

for a website called new collections and

I want to attach this and just ask it to

put together the home page. It gets

started immediately building out of the

design from the reference image and then

starting to add in the content that was

added in that as well. While the AI

agent is building out the design for the

home page, I can still jump in make my

own changes at the same time in

parallel. And this is pretty cool

because I know that sometimes the nuance

of what I'm trying to get done might be

lost on the agent such as these lines

here on the the categories. However, as

a last time the AI agents done a pretty

good job at replicating the design and

then I can jump in and update the

nuances that I might want to do as a

graphics designer. Finally, a big thanks

to Framer for sponsoring today's video.

There's still a lot more that I haven't

checked out with their new AI agent

update. Everything from uploading files

like images to replicate a design, more

coding examples, or even things like

working with the agent through something

like cursor or codex or even just using

it in the chat and doing things like

mentions, using skills, and other

features, which I'm really excited to

test out in the future. So, finally, let

me know what you guys think of this new

update. And if there's anything specific

I should test for the next video.