How to Connect Framer to External AI Agents (Claude Code, Cursor, Codex & Gemini CLI)

Framer now lets you connect external AI agents directly to your Framer projects.

This means tools like Claude Code, Cursor, Codex and Gemini CLI can work with your Framer canvas, components, CMS and project context.

In simple terms, your AI tool can now understand and help edit your Framer project, instead of just giving you generic advice in a chat window.

You can ask it to inspect your site, work with CMS collections, create new sections, suggest improvements, clean up styles, or help you make changes across your project.

In this guide, we’ll go through what Framer External Agents are, what you need before getting started, and how to connect your preferred AI tool to Framer.

What are Framer External Agents?

Framer External Agents let you connect AI tools outside of Framer to your Framer projects.

At the moment, Framer highlights support for tools like:

• Claude Code

• Cursor

• Codex

• Gemini CLI

The idea is simple.

Instead of only using AI inside Framer, you can use the AI tools you already work with and give them access to your Framer project.

Once connected, your agent can understand your project structure and help with real tasks inside Framer.

For example, you could ask it to:

• list all the pages in your project

• check your CMS collections

• create a new section

• update page content

• suggest SEO improvements

• help organise your site

• inspect your components

• fix inconsistent styles

• create or update CMS items

This is useful if you already use tools like Claude Code, Cursor or Codex as part of your workflow.

Why use External AI Agents?

Framer already has its own built-in Agent inside the app, which is probably the easiest way to start using AI in Framer.

But external AI agents can be useful if you already pay for a tool like Claude Code, Cursor, Codex or Gemini CLI, or if you want to work with the AI credits, token limits and models from those tools instead.

In other words, you can keep using the AI setup you already have, while giving it access to your Framer canvas, components, CMS and project context. It is not something everyone needs, but it can be a good option if you already use these tools regularly or want a bit more flexibility than the native Framer Agent workflow.

What you’ll need before we start

Before connecting Framer to an external AI agent, you’ll need a few things ready.

You’ll need:

• a Framer account

• a Framer project you want to connect

• access to one of the supported AI tools

• the official install prompt from Framer

• a tool that can run commands, depending on the AI agent you choose

You don’t need to be a developer to understand the basic idea.

But you should be comfortable following a few setup steps and running a command when instructed by your AI tool.

If you’re a designer, don’t let that put you off. The setup is mostly about copying the right prompt into the right tool and following the instructions.

Step 1 - Choose the AI tool you want to use

First, decide which external AI agent you want to connect to Framer.

Framer currently shows setup options for:

• Codex

• Claude Code

• Cursor

• Gemini CLI

Which one you choose depends on what you already use.

If you already use Cursor for code or AI-assisted editing, start there.

If you use Claude Code, use that.

If you are experimenting with Codex or Gemini CLI, Framer supports those too.

The setup flow is broadly similar, but each tool has its own official install prompt.

If this is your first time using any of these tools, I’d start with Cursor. The built-in browser makes it easier to access your Framer account and see the changes the AI agent is making. You also get access to models from Claude, OpenAI and Cursor’s own Composer 2.

Step 2 - Go to the official Framer External Agents page

Next, open the official Framer External Agents page.

On that page, Framer gives you setup options for each supported tool.

You should see options for Codex, Claude Code, Cursor and Gemini CLI, each with a button to copy the install prompt.

This prompt is what you paste into your chosen AI tool to start the setup.

It tells the AI tool how to install the Framer agent bridge and connect to your Framer project.

Because these prompts may change, it’s better to copy them from Framer directly instead of using an old version from a blog post.

Step 3 - Copy the install prompt for your tool

Choose the tool you want to use and copy the official install prompt.

For example: if you want to use Claude Code, copy the Claude Code prompt.

Then paste that prompt into your AI tool.

Your AI tool should guide you through the next part of the setup.

The setup usually involves running Framer’s agent setup command, which installs the bridge your agent uses to talk to Framer.

Step 4 - Run the Framer agent setup

During the setup, Framer uses the agent setup command:

npx @framer/agent setup

You do not need to memorise this.

The official install prompt should guide the AI agent through the process.

The important thing to understand is what this does.

It installs the connection between your external AI agent and Framer.

Once this is done, your AI tool can use Framer-specific commands and connect to your project.

If something does not work, go back to the official Framer page and copy the latest install prompt again.

Step 5 - Connect your Framer project

After setup, the agent will guide you through connecting it to your Framer project.

You’ll usually just need to paste the URL of the Framer project you want to work on, then the agent will start the connection process.

Once the connection is complete, your AI tool should be able to work with that Framer project.

Step 6 - Try your first prompt

Once everything is connected, you can start with something simple.

Don’t begin by asking it to redesign your entire website.

Start small and check that the connection works.

Try prompts like:

List all the pages in my Framer project.

Show me the CMS collections in this project.

Check this page for inconsistent text styles.

Suggest SEO titles and meta descriptions for my main pages.

Create a new FAQ section using the existing design style.

Review my blog CMS and suggest improvements.

These small prompts help you understand what the agent can see and how it responds.

Once you trust the workflow, you can move on to bigger tasks.

What can you use this for?

External agents can be useful for lots of Framer tasks.

For designers, the most useful ones are probably:

• improving content

• creating new sections

• checking consistency

• working with CMS collections

• writing SEO metadata

• cleaning up structure

• creating page variations

• making updates across a project

For example, if you have a blog in Framer, you could ask your agent to list your posts, suggest better titles, or help organise CMS fields.

If you have a landing page, you could ask it to suggest a better FAQ section or rewrite the hero copy.

If you are working on a template, you could ask it to check whether the structure is clear and easy to edit.

This can save time, especially when working on repetitive or messy tasks.

Can the agent edit your live site?

Not directly.

The agent works with your Framer project in the editor, not directly on your published live site.

Changes do not automatically go live unless you publish them.

This is important.

It means you can ask the agent to make changes, review what it did, and decide if you want to keep them.

You stay in control of what gets published.

Does it have access to your CMS?

Yes, once connected, the agent can work with your CMS collections.

That means it can read and write CMS content.

It may be able to help create, update or delete CMS items depending on what you ask it to do.

This is powerful, but you should use it carefully.

Before asking an agent to make big CMS changes, start with read-only tasks.

For example:

List all my CMS collections.

Show me the fields in my blog collection.

Suggest improvements to my CMS structure.

Then, once you’re comfortable, you can ask it to make changes.

Good first tasks to try

If you’re not sure what to ask your external agent, start with simple tasks that help you understand your project better.

Here are a few ideas.

Ask it to review your page structure

Review the structure of this Framer page and suggest ways to make it clearer and easier to edit.

Ask it to check your styles

Check this project for inconsistent text styles, colours or spacing.

Ask it to improve SEO metadata

Suggest SEO titles and meta descriptions for the main pages in this Framer project.

Ask it to help with CMS

Review my CMS collections and suggest improvements to field names and structure.

Ask it to create a new section

Create a simple FAQ section using the same visual style as the current page.

Ask it to help with content

Rewrite the hero section to make it clearer and more direct, without changing the layout.

These are good starting points because they are useful, but not too risky.

Tips before using external agents on a real project

External agents are powerful, but you should still use them with care.

A few simple rules:

• start with small tasks

• review every change

• do not publish without checking

• use branches properly

• be specific in your prompts

• keep your Framer project organised

• avoid asking the agent to change too many things at once

The better your project is structured, the better the agent will perform.

If your layers, components, CMS fields and styles are messy, the agent may struggle to understand what you want.

So before relying on AI, it is still worth keeping your Framer projects clean and organised.

The Lowdown

Framer External Agents are another step towards a more AI-assisted website workflow.

For designers, the main benefit is not that AI magically replaces the work.

It is that your AI tool can now understand your actual Framer project.

That makes it much more useful.

Instead of asking for generic advice, you can ask questions about your canvas, your components, your CMS, and your pages.

Start small.

Connect one project.

Ask it to inspect your site.

Try a few simple improvements.

Then build from there.

If you want to know more about Framer 3.0, you can check out our full recap of all the new updates that have been introduced with this new release.