Search
Generate, refine, and publish with Framer’s AI website builder


Canvas
Site
·
main
12



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



Agent
Style
Vertical Hero Layout
Change the hero to a vertical stack layout, then replace the hero image with the image attached.

GPT 5.5
AI for every part of your site, you stay in control
Desktop
1200





Generate pages with a Framer agent
Describe what you want to build and the agent turns it into editable pages, sections, copy, and visuals. Keep refining in the same conversation until the page matches your intent.
Desktop
1200





Generate pages with a Framer agent
Describe what you want to build and the agent turns it into editable pages, sections, copy, and visuals. Keep refining in the same conversation until the page matches your intent.
Desktop
1200





Generate pages with a Framer agent
Describe what you want to build and the agent turns it into editable pages, sections, copy, and visuals. Keep refining in the same conversation until the page matches your intent.
Featured models

Petal 3.1
Builds and ships

Ember 4.7
Fast and efficient

Horizon 2.1
For complex work

Design with an AI agent
Start from a prompt and watch the AI agent generate layouts, sections, and visual style directly on your canvas. Refine typography, spacing, and color until it looks exactly right.
Featured models

Petal 3.1
Builds and ships

Ember 4.7
Fast and efficient

Horizon 2.1
For complex work

Design with an AI agent
Start from a prompt and watch the AI agent generate layouts, sections, and visual style directly on your canvas. Refine typography, spacing, and color until it looks exactly right.
CMS
Site
·
main

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














Manage your CMS with AI Agents
Set up collections, populate content, and keep everything organized. The AI agent works in your CMS directly to the canvas so content and design always stay in sync.
CMS
Site
·
main

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














Manage your CMS with AI Agents
Set up collections, populate content, and keep everything organized. The AI agent works in your CMS directly to the canvas so content and design always stay in sync.
ImageSlider



Write code with an AI agent
Describe what you need and the AI agent builds it. From simple custom effects to complex interactions and live data, placed in your site and ready to use.
ImageSlider



Write code with an AI agent
Describe what you need and the AI agent builds it. From simple custom effects to complex interactions and live data, placed in your site and ready to use.
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

Bloom®
Research
Commitments
Learn
News
Try Bloom ↗

Review and fix with an AI agent
Ask the AI agent to review your site and it will find issues before your users do. Contrast, typos, missing alt text, SEO gaps, inconsistent styles. Flagged and fixed.
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

Bloom®
Research
Commitments
Learn
News
Try Bloom ↗

Review and fix with an AI agent
Ask the AI agent to review your site and it will find issues before your users do. Contrast, typos, missing alt text, SEO gaps, inconsistent styles. Flagged and fixed.
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

Analyze and improve with an AI agent
Ask the AI agent to read your traffic and it will turn the numbers into clear next steps. Top pages, drop-offs, search intent, conversion gaps. Summarized and ready to act on.
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

Analyze and improve with an AI agent
Ask the AI agent to read your traffic and it will turn the numbers into clear next steps. Top pages, drop-offs, search intent, conversion gaps. Summarized and ready to act on.
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

Analyze and improve with an AI agent
Ask the AI agent to read your traffic and it will turn the numbers into clear next steps. Top pages, drop-offs, search intent, conversion gaps. Summarized and ready to act on.
GPT 5.5
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...
Thinking...
Created a design plan
2s
Dark minimal opening with Bloom identity, research statement, CTAs, and trust signals.
Releases section with publication style cards.
Research themes and public trust sections.
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 and Codex to Framer
Copy install prompt

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.

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.

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.
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.

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.
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
Skills
/cms
Write content
/component
With variants
/code
Custom component
GPT 5.5

Skills. Type / to run focused AI actions for layouts, CMS, styling, and more.
Agents
Agents
Sonnet 4.6
Agents
GPT 5.5

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

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

Models. Choose between Sonnet, Opus, and GPT depending on the task.
Skills
/cms
Write content
/component
With variants
/code
Custom component
GPT 5.5

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 5.5

blog.csv

DESIGN.md

shader.mp4

data.json

component.tsx

screenshot.png

blog.csv

DESIGN.md

shader.mp4

data.json

component.tsx

screenshot.png

blog.csv

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

Branches. Iterate safely by moving AI agent edits to a branch.
Everything your site needs, built into Framer
Frequently asked questions
What happened to Wireframer?
Wireframer is now part of the Framer AI workflow. You can still generate AI wireframes in Framer by asking the AI agent to create a wireframe instead of a more opinionated website design. From there, you can edit the structure, layout, copy, and responsive breakpoints on the Framer canvas.
Wireframer is now part of the Framer AI workflow. You can still generate AI wireframes in Framer by asking the AI agent to create a wireframe instead of a more opinionated website design. From there, you can edit the structure, layout, copy, and responsive breakpoints on the Framer canvas.
Is Workshop still part of Framer AI?
Workshop is still available from the plugin menu and Framer Marketplace, but it uses older AI models and is no longer the best way to create code components in Framer. For new projects, Framer’s AI agent is the better choice for writing, editing, and improving code components directly inside your site.
Workshop is still available from the plugin menu and Framer Marketplace, but it uses older AI models and is no longer the best way to create code components in Framer. For new projects, Framer’s AI agent is the better choice for writing, editing, and improving code components directly inside your site.
Can Framer AI still translate pages?
Yes. The Framer agent can translate an entire page and help adapt website copy for another language while keeping your layout, design system, and publishing workflow in Framer. If you want to localize a site across multiple languages at the same time, use Framer Localization, which includes AI auto-translate features for managing multilingual websites.
Yes. The Framer agent can translate an entire page and help adapt website copy for another language while keeping your layout, design system, and publishing workflow in Framer. If you want to localize a site across multiple languages at the same time, use Framer Localization, which includes AI auto-translate features for managing multilingual websites.
Get started with Framer
Get started with Framer
Get started with Framer
