Framer AI designs and builds your site with you

Preview of Framer AI agents working on a website design.
Preview of Framer AI agents working on a website design.

Canvas

Site

·

main

12

Interface preview in 2026 UI/Canvas UI/App UI Top Bar.
Interface preview in 2026 UI/Canvas UI/App UI Top Bar.
Interface preview in 2026 UI/Canvas UI/App UI Top Bar.

Invite

Publish

Pages

Layers

Assets

Search…

Pages

Home

/research

Research Pages

/commitments

/learn

/support

/news

/legal

/privacy

/terms

/try-bloom

News Pages

100%

Desktop

1200

Default interface preview in 2026 AI Page/AI Hero Site New.
Left Right interface preview in 2026 AI Page/AI Hero Site New.
Sticky Scroll interface preview in 2026 AI Page/AI Hero Site New.

Agent

Style

Vertical Hero Layout

Change the hero to a vertical stack layout, then replace the hero image with the image attached.

Interface preview in 2026 AI Page/AI Hero Bloom 2026.

GPT 6 Sol

Create with AI. Stay in control from canvas to publish.

Desktop

1200

Default interface preview in 2026 AI Page/AI Hero Site New.
CMS design interface title preview.
CMS design interface button controls preview.
CMS design interface image preview.
Website generation in Framer

How Framer’s AI website builder works

Describe the website, page, or update you need. Framer’s AI agent creates editable pages, sections, copy, and visuals directly in your project. Keep refining in the conversation, or take over on the canvas at any point.

Desktop

1200

Default interface preview in 2026 AI Page/AI Hero Site New.
CMS design interface title preview.
CMS design interface button controls preview.
CMS design interface image preview.
Website generation in Framer

How Framer’s AI website builder works

Describe the website, page, or update you need. Framer’s AI agent creates editable pages, sections, copy, and visuals directly in your project. Keep refining in the conversation, or take over on the canvas at any point.

Desktop

1200

Default interface preview in 2026 AI Page/AI Hero Site New.
CMS design interface title preview.
CMS design interface button controls preview.
CMS design interface image preview.
Website generation in Framer

How Framer’s AI website builder works

Describe the website, page, or update you need. Framer’s AI agent creates editable pages, sections, copy, and visuals directly in your project. Keep refining in the conversation, or take over on the canvas at any point.

Featured models

Landscape

Petal 3.1

Builds and ships

Landscape

Ember 4.7

Fast and efficient

Landscape

Horizon 2.1

For complex work

Mobile preview showing an AI-generated website design in Framer.

Design responsive websites with AI and full control

Start from a prompt and use the Framer canvas to refine layouts, typography, components, breakpoints, spacing, color, and effects. AI helps you move faster while you make the final design decisions.

Featured models

Landscape

Petal 3.1

Builds and ships

Landscape

Ember 4.7

Fast and efficient

Landscape

Horizon 2.1

For complex work

Mobile preview showing an AI-generated website design in Framer.

Design responsive websites with AI and full control

Start from a prompt and use the Framer canvas to refine layouts, typography, components, breakpoints, spacing, color, and effects. AI helps you move faster while you make the final design decisions.

CMS

Site

·

main

Top bar of the Framer interface.

Invite

Publish

Collections

Fields

Plugins

Careers

Documentation

Articles

0

0

Learn

Models

News

Research

Add...

Title

Image

Category

Introduction

Quickstart guide

Guide

In this

Choosing a model

Tutorial

Motion

Data and privacy

Systems

In this

Cost optimization

Tips

We

Connect your data

Tutorial

Testing

Tokens explained

Guide

In this

Sidebar of the Framer CMS editor interface.
Header area of the Framer CMS editor interface.
Search row in the Framer CMS interface.
CMS Item 1 in the Framer CMS content list.
CMS Item 2 in the Framer CMS content list.
CMS Item 3 in the Framer CMS content list.
CMS Item 4 in the Framer CMS content list.
CMS Item 5 in the Framer CMS content list.
CMS Item 6 in the Framer CMS content list.
CMS Item 7 in the Framer CMS content list.
CMS Item 8 in the Framer CMS content list.
CMS Item 9 in the Framer CMS content list.
CMS Item 10 in the Framer CMS content list.
Mobile preview showing site management tools in Framer.

Manage website content with AI agents

Create collections, populate CMS content, and keep your site organized. Framer’s AI agent works directly with your CMS and canvas, so content, design, and publishing workflows stay connected.

CMS

Site

·

main

Top bar of the Framer interface.

Invite

Publish

Collections

Fields

Plugins

Careers

Documentation

Articles

0

0

Learn

Models

News

Research

Add...

Title

Image

Category

Introduction

Quickstart guide

Guide

In this

Choosing a model

Tutorial

Motion

Data and privacy

Systems

In this

Cost optimization

Tips

We

Connect your data

Tutorial

Testing

Tokens explained

Guide

In this

Sidebar of the Framer CMS editor interface.
Header area of the Framer CMS editor interface.
Search row in the Framer CMS interface.
CMS Item 1 in the Framer CMS content list.
CMS Item 2 in the Framer CMS content list.
CMS Item 3 in the Framer CMS content list.
CMS Item 4 in the Framer CMS content list.
CMS Item 5 in the Framer CMS content list.
CMS Item 6 in the Framer CMS content list.
CMS Item 7 in the Framer CMS content list.
CMS Item 8 in the Framer CMS content list.
CMS Item 9 in the Framer CMS content list.
CMS Item 10 in the Framer CMS content list.
Mobile preview showing site management tools in Framer.

Manage website content with AI agents

Create collections, populate CMS content, and keep your site organized. Framer’s AI agent works directly with your CMS and canvas, so content, design, and publishing workflows stay connected.

ImageSlider

After image
Before image
Mobile preview showing code editing with Framer AI.

Build custom code with an AI agent

Describe the interaction or live feature you need, and the AI agent can build a code component for your site. Review the result, refine it in Framer, and keep it connected to your design system.

ImageSlider

After image
Before image
Mobile preview showing code editing with Framer AI.

Build custom code with an AI agent

Describe the interaction or live feature you need, and the AI agent can build a code component for your site. Review the result, refine it in Framer, and keep it connected to your design system.

Desktop

1200

News

/

Announcement

Introducing Bloom Horizon 2.1

Bloom Horizon 2.1 is here. Our latest forcasting model helps teams antitcipate risks across public health, education, and support, so decisions come earlier and with more confidance.



Olivia Lindqvist

•

Research Lead

Framer canvas preview used behind the AI review interface.

Bloom®

Research

Commitments

Learn

News

Try Bloom ↗

Mobile preview showing AI review feedback in Framer.

Review and improve your website with AI

Ask the AI agent to review your site before publishing. It can identify contrast issues, typos, missing alt text, SEO gaps, and inconsistent styles, then help you fix them in the same project.

Desktop

1200

News

/

Announcement

Introducing Bloom Horizon 2.1

Bloom Horizon 2.1 is here. Our latest forcasting model helps teams antitcipate risks across public health, education, and support, so decisions come earlier and with more confidance.



Olivia Lindqvist

•

Research Lead

Framer canvas preview used behind the AI review interface.

Bloom®

Research

Commitments

Learn

News

Try Bloom ↗

Mobile preview showing AI review feedback in Framer.

Review and improve your website with AI

Ask the AI agent to review your site before publishing. It can identify contrast issues, typos, missing alt text, SEO gaps, and inconsistent styles, then help you fix them in the same project.

Desktop

1200

Bloom®

Research

Commitments

Learn

News

Try Bloom ↗

Simple pricing based on your needs

Monthly

Yearly

Starter

$29/month

For solo builders getting started

Professional

$49/month

For growing teams that ship fast

Enterprise

$119/month

For organizations running analysis at scale

Mobile preview showing AI improvements to a website in Framer.

Use AI analytics to improve your website

Ask the AI agent to analyze traffic and turn it into practical next steps. Review top pages, drop-offs, search intent, and conversion gaps, then refine the site directly in Framer.

Desktop

1200

Bloom®

Research

Commitments

Learn

News

Try Bloom ↗

Simple pricing based on your needs

Monthly

Yearly

Starter

$29/month

For solo builders getting started

Professional

$49/month

For growing teams that ship fast

Enterprise

$119/month

For organizations running analysis at scale

Mobile preview showing AI improvements to a website in Framer.

Use AI analytics to improve your website

Ask the AI agent to analyze traffic and turn it into practical next steps. Review top pages, drop-offs, search intent, and conversion gaps, then refine the site directly in Framer.

Desktop

1200

Bloom®

Research

Commitments

Learn

News

Try Bloom ↗

Simple pricing based on your needs

Monthly

Yearly

Starter

$29/month

For solo builders getting started

Professional

$49/month

For growing teams that ship fast

Enterprise

$119/month

For organizations running analysis at scale

Mobile preview showing AI improvements to a website in Framer.

Use AI analytics to improve your website

Ask the AI agent to analyze traffic and turn it into practical next steps. Review top pages, drop-offs, search intent, and conversion gaps, then refine the site directly in Framer.

GPT 6.1 Sol

Generate a homepage

for Bloom, an AI research organization for human wellbeing. Make it minimalistic and dark, with releases, research themes, public trust, and CTAs.

Thinking...

Created a design plan

2s

  1. Dark minimal opening with Bloom identity, research statement, CTAs, and trust signals.

  2. Releases section with publication style cards.

  3. Research themes and public trust sections.

  4. Closing CTA and homepage metadata.

Created the Bloom homepage on Home.

Would you like me to add tablet and phone breakpoints next?

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

Screenshot 2026-06-08 at 12.48.52 interface preview in 2026 AI Page/External Agents Phone.
Pull in live data

Run scripts and workers that refresh site content from live APIs.

What our users say

Name Sample

@NameSample

Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you’re a small team wearing a lot of hats.

Image interface preview in 2026 AI Page/AI Live Data.

Name Sample

@NameSample

Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you’re a small team wearing a lot of hats.

Name Sample

@NameSample

Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you’re a small team wearing a lot of hats.

Image interface preview in 2026 AI Page/AI Live Data.

Name Sample

@NameSample

Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you’re a small team wearing a lot of hats.

framer-agent

Claude

Cursor

Codex

╭─── Claude Code v2.1.170 ─────────────────────╮

│ │ │ │

Sonnet 4.6 · Claude Team · Framer

╰──────────────────────────────────────────────╯

Initializing Agent environment...
└ Node.js detected · twitter-api-v2 loaded.

Skill(check-auth-status)
└ Authenticated with X API.

Bash(GET /2/tweets/search/recent --query "@keyframe -is:retweet" --max 100)
└ 187 returned · 27 passed like_count ≥ 100.

Bash(GET /2/users/:id × 6)

└ name, handle, avatar resolved.

27 posts live · refreshes every 5 min.

Pull in live data

Run scripts and workers that refresh site content from live APIs.

Migrate and import

Import from sources like Notion, WordPress, or other APIs into your CMS.

Import local files

Pull local files from your machine to fill in CMS content.

What our users say

Name Sample

@NameSample

Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you’re a small team wearing a lot of hats.

Image interface preview in 2026 AI Page/AI Live Data.

Name Sample

@NameSample

Our team went from spending half our Monday on manual updates to having everything ready before we even sit down. That kind of time back is priceless when you’re a small team wearing a lot of hats.

framer-agent

Claude

Cursor

Codex

Initializing Agent environment...
└ Node.js detected.
└ twitter-api-v2 loaded.

Skill(check-auth-status)
└ Authenticated with X API.

└ Authenticated with Framer API.

Bash(GET /2/tweets/search/recent --query "@keyframe -is:retweet" --max 100)
└ 187 returned · 27 passed like_count ≥ 100.

Bash(GET /2/users/:id × 6)

└ name, handle, avatar resolved.

27 posts live · refreshes every 5 min.

Pull in live data

Run scripts and workers that refresh site content from live APIs.

Migrate and import

Import from sources like Notion, WordPress, or other APIs into your CMS.

Import local files

Pull local files from your machine to fill in CMS content.

Explore more ways to boost your productivity with AI agents in Framer

All the control you need, right where you work

design-system

Use components, styles, spacing, and layouts to create new pages.

cms-content

When writing content, consider the following…

remove-ai-writing

Deletes commonly used AI filler writing, vague claims, repetition,

seo-check

Review and improve page SEO, such as metadata, social previews, image alt text, and other essential SEO settings.

References panel showing linked context for an AI agent.

Skills. Turn the way you work into reusable instructions for agents.

Agents

Agents

Sonnet 4.6

Agents

GPT 6.1 Sol

Context panel showing connected project knowledge for AI agents.

Contexts. Select layers on the canvas and add them as context to your chat.

Chat interface for working with AI agents in Framer.

Chats. Start a new one for each task to keep the agent focused.

Model picker interface for choosing an AI model in Framer.

Models. Choose GPT, Sonnet, Opus, or Fable depending on the task.

Skills

/cms

Write content

/component

With variants

/code

Custom component

GPT 6.1 Sol

Mentions panel showing referenced files and project context.

Mentions. Type @ to reference pages, CMS collections, styles, or assets.

DESIGN.md

Update the padding,

buttons, and icons on my site to match this file.

GPT 6.1 Sol

Google Sheets file icon

blog.csv

Google Sheets file icon

DESIGN.md

AI file management preview

shader.mp4

Google Sheets file icon

data.json

Google Sheets file icon

component.tsx

AI file management preview

screenshot.png

Google Sheets file icon

blog.csv

Google Sheets file icon

DESIGN.md

AI file management preview

shader.mp4

Google Sheets file icon

data.json

Google Sheets file icon

component.tsx

AI file management preview

screenshot.png

Google Sheets file icon

blog.csv

References panel showing linked context for an AI agent.

References. Upload images, files, or URLs to guide AI toward the exact result you want.

Branches panel showing agent changes ready for review.

Branches. Iterate safely by moving AI agent edits to a branch.

Frequently asked questions

What is Framer AI?

Framer AI is the set of AI agents built into Framer. Start with a prompt or an existing site, then ask an agent to create pages, refine layouts, update CMS content, or review SEO. Everything stays editable on the canvas, so you can adjust the design and publish with Framer’s hosting.

How do Framer Agents work?

Framer Agents work inside the editor on your actual project. Ask an agent to design a page, revise copy, update CMS items, or fix SEO issues, and it makes the changes directly. You review and refine them on the canvas before anything goes live.

What can I build with Framer AI?

You can build full websites, landing pages, portfolios, and multi-page sites with CMS content. Framer AI handles the first draft and the busywork. You keep full control over layout, typography, components, and responsive breakpoints.

You can build full websites, landing pages, portfolios, and multi-page sites with CMS content. Framer AI handles the first draft and the busywork. You keep full control over layout, typography, components, and responsive breakpoints.

Can I edit what Framer AI creates?

Yes. Framer AI creates real, editable layers, not a fixed image or locked template. You can change layout, styles, effects, copy, images, and CMS content directly, and keep working with the agent while you do.

Yes. Framer AI creates real, editable layers, not a fixed image or locked template. You can change layout, styles, effects, copy, images, and CMS content directly, and keep working with the agent while you do.

Can Framer AI update an existing website?

Yes. Open any Framer project and ask an agent to change a page, adjust a layout, update CMS content, or fix an SEO issue. You don’t need to regenerate the site. Review the edits on the canvas and publish when they’re ready.

Can I publish and manage my site with Framer AI?

Yes. Framer AI works alongside Framer’s CMS, branching and review workflows, hosting, SEO settings, redirects, and analytics. Teams can create or update a site with agents, review the work, and publish approved changes from one place.

Yes. Framer AI works alongside Framer’s CMS, branching and review workflows, hosting, SEO settings, redirects, and analytics. Teams can create or update a site with agents, review the work, and publish approved changes from one place.

Do I stay in control of the design?

Always. Agents suggest and make changes, but nothing is locked. Every edit shows up on the canvas where you can tweak it, undo it, or take over by hand. Framer AI speeds up production work while you keep control of the site.

Your next idea starts here

GPT 6 Sol

Create personal portfolio

Build startup site

Launch landing page

Start company blog

Framer UI showing Pages, Layers and Assets panels titles
Framer UI showing Pages, Layers and Assets panels titles