Connect Claude or ChatGPT to Framer

Framer's built-in Agent, Claude Code and Codex: which one to use, how to set it up, and the safety rules our team follows on live sites.

Last verified: October 5, 2026. Framer's agent features are new and change often. We re-check this guide every quarter.

If your marketing site runs on Framer, you have probably looked for a way to plug Claude or ChatGPT into it. Framer works differently from Webflow or WordPress here, and most guides skip the details or describe a route Framer doesn't support.

We're a verified Framer Expert, rango.design runs on Framer, and our team uses Framer's agent tools on live sites regularly. Here is which route fits, how to set it up, and what went wrong for us.

On Webflow? See how the same job works on Webflow.

Quick answer: can you connect Claude or ChatGPT to Framer?

Yes, but not from the chat window. As of October 2026:

Framer lists Claude Code, Codex, Cursor, Gemini CLI and Windsurf as supported external agents (Framer help), and says claude.ai, the Claude Desktop chat and standard ChatGPT are not supported (Framer help).

Is there a Framer MCP server?

Not one you add in Claude or ChatGPT, as of October 2026. Framer's official route is its external agent tool, which connects Claude Code or Codex to a project you choose and needs no separate MCP server (Framer help). A community "MCP" plugin also exists, but its listing says it is not official and it only works while open in your project (Framer marketplace).

Framer's built-in Agent vs Claude Code: which should your team use?

Use the built-in Agent for visual and copy changes on a few pages: a new hero, an added section, SEO metadata, a site audit. It sits in the editor's right panel, so you watch each change land on the canvas. Framer launched it with Framer 3.0 in June 2026 (Framer blog).

Use Claude Code or Codex for repetitive, text-heavy jobs: 40 meta descriptions, a CMS collection built from a spreadsheet, a redirect list, an audit of every blog post. It follows a written checklist and works through long lists for you.

Our default for a marketing team: the built-in Agent for page edits, and Claude Code for CMS and SEO batches, run by one trained person.

How to set up Framer's built-in Agent

1. Create a branch: click the branch name ("main"), then New Branch. Branches are on the Pro plan (Framer pricing).

2. Open the Agent tab in the right panel and describe the change.

3. Check the result on the canvas at desktop, tablet and phone sizes.

4. Publish the branch to get a preview link you can share. This does not publish main.

5. Click Review Changes, then Apply to bring the work into main. Applying does not publish (Framer help).

6. Publish from the editor. Applying a branch updates main; publishing main is what makes the changes live.

Credits, as of October 2026: 500 one-time credits on Free (for workspaces without a paid plan), 1,000 a month on Basic, 3,000 a month on Pro, with more available to buy (Framer pricing). We haven't found an official cost per task, so check your balance after week one.

How to connect Claude Code to Framer, step by step

Framer connects to Claude Code through its official external agent tool, not through a connector in Claude's settings. Framer ships a small command-line tool that gives Claude Code access to a project you choose, and says no separate MCP server is needed (Framer help).

1. Check your plan. As of October 2026, Claude Code is included with Claude Pro and Max, and with Team and Enterprise seats that include it (some older Enterprise seats are chat only) (Claude help).

2. Install Node.js 24 or newer, or paste Framer's automated setup prompt into Claude Code and let it check (Framer help).

3. Run npx @framer/agent setup in a terminal.

4. Copy your project link from the browser while the project is open in Framer.

5. Start Claude Code (type claude) and ask something read-only: "What blog posts do I have in [project link]?"

6. Authorize access to your project in the browser window that opens.

7. Create a branch before the first edit (see the safety rules below).

As of October 2026, external agents are free during the preview on Basic and Pro (Framer pricing). They run on Framer's Server API, which launched in open beta in February 2026, so expect changes (Framer update).

Do you need a developer? Usually only for setup: if nobody on the team has used a terminal, have someone technical do steps 2 to 6 and stay on call for troubleshooting. Day to day, your team works in plain English.

Using ChatGPT with Framer: the Codex route

Standard ChatGPT chat can't reach Framer as of October 2026. Codex can: Framer lists "Codex in ChatGPT" among its supported agents (Framer), and as of October 2026 Codex is included in every ChatGPT plan, including Free, with usage limits that vary by plan (OpenAI). Setup is the same: run npx @framer/agent setup, start Codex instead of Claude Code, share your project link and authorize.

What it can and can't do

Can, per Framer's help center and launch post:

- Update CMS content, and create collections filled from your source material

- Create and update pages and sections; update color and text styles

- Upload and replace images

- Set up redirects from a list

- Update localized content

- Draft SEO blog posts and generate SEO metadata

- Run audits, take screenshots and publish

(Framer help, Framer help, Framer blog)

What our team keeps manual: Framer confirms agents can't reach other projects, your account settings or billing (Framer). As of October 2026 we also keep these jobs with a person:

- Delete, rename or move pages

- Change project settings such as the project name or domains

- Assign code overrides

- Read your analytics

Safety settings before the first edit

1. Branch first, every time. In our tests, external agent sessions opened on main. Framer says agent changes automatically go to branches (Framer), and on our project an edit made while main was active landed on an auto-named branch we hadn't created. Create and name the branch yourself so you know where the work is. Branches need Pro; on Basic, keep agent work to drafts.

2. One agent per project at a time. Two agent sessions on one project made the active branch switch under both of them.

3. Ask for the plan first. Framer's own advice for high-impact changes is to have the agent report what it plans to change before it changes anything (Framer help).

4. Read Review Changes before you Apply. If it shows changes you didn't ask for, don't apply.

5. Keep approvals on. Use whichever setting asks before each change. Never pick "always allow" or an auto-approve mode on a live project.

6. Draft first. Ask for new CMS items and pages to be created as drafts, and have a human publish them.

7. Know your undo. Reverting an applied branch moves its changes back into a draft through version history (Framer help).

Prompts that work

Each ends with a check. Swap in your own names.

1. Audit, no changes (either route) Audit [project link]: list pages and blog posts with a missing meta description or one over 155 characters, and images with no alt text. Give me a table. Don't change anything. Verify: open three rows in Framer and confirm the agent read them correctly.

2. Branch check (Claude Code or Codex) Before anything else, tell me which Framer branch you're on. If it's main, create a branch called [task-name], switch to it and confirm. Verify: the branch it names matches the one shown in the Framer editor.

3. Hero rewrite (built-in Agent) On the /demo page, rewrite the hero headline and subhead for a VP of RevOps. Keep the layout and text styles. Show me two options before changing anything. Verify: check tablet and phone too. A breakpoint can keep its own copy of a text layer and still show the old line.

4. Meta descriptions in bulk (Claude Code) On the branch seo-descriptions, draft meta descriptions under 155 characters for every blog post missing one. Show me the list and only write them after I say yes. Change that field and nothing else. Verify: Review Changes should show description fields only.

5. One-sentence fix in a long article (Claude Code) In the blog post [slug], replace "[old sentence]" with "[new sentence]". Edit only that sentence; do not rewrite or re-save the body. Count the videos, images and embeds before and after. Verify: the counts match, and the videos still play on the branch preview.

6. New case study as a draft (Claude Code) Create a draft item in the Case Studies collection from this doc [paste]. Upload the logo from [URL] with alt text. Leave it as a draft. Verify: the CMS panel shows it as a draft, and its URL returns a 404 on the branch preview.

7. Redirects from a list (Claude Code) Here are old and new URLs [paste]. Show me the redirect list first, flag any chains or loops, then add them on the branch. Verify: after publishing, open three old URLs in a private window and check where they land.

When "done" isn't done: what we've seen on real Framer sites

An agent saying "done" is not the same as the page being right. These come from our own Framer production work in 2026, not the docs.

1. The videos that vanished. A CMS article's body was rewritten in full through the agent. The text was fine, but the two embedded YouTube videos were gone, and the change shipped to production when the branch was merged. The text version of the body the agent worked from left embeds out entirely, so it saw nothing to keep. Fix: edit sentences or fields, never whole bodies, and count embeds before and after.

2. The hidden draft that showed up. Writing to a hidden draft article's body quietly switched it to published on the branch preview, where it appeared as the "Next" link under another article. Fix: check draft status after any CMS edit, and confirm each hidden item's URL returns a 404 on the preview.

3. The edit on the wrong branch. Sessions open on main, and with two agents on two branches of one project, the active branch flipped under both of them mid-task, more than once. An unchecked write lands on the other branch. Fix: one agent per project, and a branch check at the start of every session.

4. The links that followed the old page. To put a rebuilt page on an existing URL, we first moved the old page to a new path. Framer tracks internal links as references to pages, not typed URLs, so the nav, footer and homepage links quietly followed the old page, and the new page was linked from nowhere. Fix: keep URL changes a human job, then click every nav, footer and homepage link on the preview.

5. The menu that lost two items. After a branch merge, a shared nav component kept publishing its pre-merge version: two items were missing from the live menu while the project data was correct. Republishing didn't help; a small edit to the missing items forced a rebuild. Fix: after every merge, check the live nav and footer.

6. The page that looked broken but wasn't. Right after a publish, a page's first load can be a lightweight shell with the site's default title, and branch previews can serve a cached title and meta description. Both look like a failed SEO change. Fix: reload after a short wait and check the page source; adding a query string such as ?v=2 helps bypass a cached copy.

7. The publish that said yes. Publishing from the agent sometimes failed with "Publishing is currently unavailable" and had to be done in the editor. More than once, a publish reported success while an edit was still pending. Fix: judge the live page, not the agent's summary.

Our checklist: open the URL yourself at desktop and phone width; compare embeds, images and links before and after; check draft status after CMS changes; check the nav and footer after merges; one person owns publishing each week.

Your first 30 days on Framer

• Week 1, read only. Set up the built-in Agent, plus Claude Code if you need batches. Audit meta descriptions, alt text and outdated case studies. No writes. Decide who owns publishing.

• Week 2, drafts on a branch. New posts and case studies as draft CMS items; bulk SEO fields drafted on a branch and checked in Review Changes, not applied.

• Week 3, small live edits. Hero copy, CTAs and SEO fields: branch, preview link, Apply, publish from the editor, then the checklist.

• Week 4, a routine. One branch per week (for example web-updates-oct-12), a short list of changes the agent proposes, one review, one publish.

What still needs a designer or developer

• New page designs, sections and components. An agent can build a section, but matching your design system at every breakpoint is design work. When our agent duplicated a section, it copied the desktop layout but not the tablet and phone adjustments.

• What our team keeps manual: deleting, renaming or moving pages, domains, project settings and code overrides.

• Page-specific code, such as structured data on one page, which we add in the editor under Settings > Code.

• Analytics and conversion questions, since the agent can't read your Framer analytics.

• Diagnosing silent failures like the ones above.

The goal isn't zero designers or developers. It's nobody waiting in a queue for a headline change.

FAQ

Can I connect Claude to Framer? Yes, through Claude Code with Framer's official agent tool (npx @framer/agent setup). As of October 2026, Framer doesn't support claude.ai or the Claude Desktop chat.

Is there a Framer MCP for Claude? No official one you add in Claude's connector settings, as of October 2026; Framer says its agent tool needs no separate MCP server. A community "MCP" plugin exists, but its listing says it is not official and it only works while open in your project (Framer marketplace).

Can ChatGPT edit my Framer site? Not from standard ChatGPT chat. Codex can, using the same setup as Claude Code; as of October 2026 it's included in every ChatGPT plan, including Free, with usage limits.

Does Framer AI cost extra? The built-in Agent uses AI credits included in your plan, and you can buy more. External agents are free during the preview on Basic and Pro, but you still pay for Claude or ChatGPT. Both as of October 2026; check Framer's pricing before you budget.

Is it safe to let AI edit a live Framer site? It's safer with a process: branch first, review changes, draft first and check the page yourself. Human review lowers the risk of a bad edit; it doesn't remove it. Our Webflow guide applies the same rules on Webflow.

Want it set up for you? Our team connects your Framer site to your team's assistant, sets the review rules and trains your team. Talk to us

Changelog: October 5, 2026, first published.