How to Unlock Framer with Cursor (Setup & Workflow)

Framer now has its own built-in AI Agent, but you’re not limited to using AI directly inside Framer. You can also connect your projects to external AI tools like Cursor and let them interact directly with your website.

I’ve been using Cursor with Framer for the past few weeks and it has quickly become one of my favourite ways to work with the new Framer.

In this guide, I’ll show you how to connect Cursor to Framer, how I’ve set up my workspace, and some of the reasons you might want to use an external agent instead of - or alongside - Framer Agent.

Prefer watching instead? I walk through the entire setup in the video below.

What do you need to connect Cursor to Framer?

The setup is surprisingly simple. You’ll need:

• A Framer account and a Framer project

• The Cursor desktop app

• A folder on your computer for your project

You can use Framer for free, so you don’t need a paid Framer subscription just to experiment with this setup.

Once you have Cursor installed, open the app and switch to its IDE. From there, click Open Project and select a folder on your computer.

I recommend creating a separate folder for each Framer project you work on.

Your actual Framer website doesn't live inside this folder. Instead, I use it as a workspace where Cursor can keep project-specific files, instructions, plans and other context.

More on that later.

How to connect Cursor to Framer

Framer has made the actual connection process incredibly easy.

Framer provides a setup prompt in its documentation that you can give directly to an external AI agent. Copy the prompt from Framer's getting-started guide, paste the entire thing into Cursor's chat and send it.

Cursor will handle the setup for you.

Once it has finished, it will ask you for the link to the Framer project you want to connect.

You can get your project link in two ways:

• Copy the URL while your project is open in the browser.

• In the Framer desktop app, right-click your project tab and select Copy Project Link.

Paste that link into Cursor and let the Agent continue.

Your browser should automatically open and ask you to sign into your Framer account and authorise the connection.

Once approved, return to Cursor. It should confirm that the connection was successful and provide some basic information about your Framer project.

That's it.

Cursor can now communicate directly with your Framer project.

Check that Cursor can access your Framer website

Before doing anything complicated, I recommend testing the connection with a simple request.

For example, I asked Cursor:

What is the H1 on my homepage?

Cursor inspected my Framer project and returned the correct headline.

You could also ask it questions such as:

What pages are currently on my website?

or:

Describe the structure of my homepage.

Once Cursor can correctly answer questions about your project, you know everything is working.

From there, you can start asking the Agent to actually make changes to your website.

My Cursor + Framer setup

There's another small change I've made that makes this workflow much nicer.

Cursor has a built-in browser, so I open my Framer project directly inside Cursor.

That means I can essentially have three things visible at once:

Cursor Agent → Framer → Project files

I can chat with the Agent on one side, see my Framer website and any changes being made in the middle, and access all of my project files on the other side.

On a larger external monitor, this works particularly well.

Everything I need to work on the website is effectively contained within one application.

But the project folder is where using Cursor starts to become particularly interesting.

Why use Cursor instead of Framer Agent?

Framer Agent is already built directly into Framer, so why bother connecting another AI tool?

For some people, there won't be a reason to.

Framer Agent is incredibly convenient, requires almost no setup and gives you access to several powerful AI models directly from the Framer interface.

But Cursor gives you a few additional options that I find useful.

Access to more AI models

One of the biggest advantages is model choice.

Cursor gives me access to a wider selection of AI models, and I can choose a different model depending on what I'm doing.

For a relatively simple or technical task, I might choose a faster and cheaper model. For a larger design task where I want the Agent to reason more carefully about the website, I can switch to a more capable model.

You're not tying your entire Framer AI workflow to a single model.

Use your existing Cursor subscription

This one will depend entirely on your setup.

I come from a development background and was already paying for Cursor before Framer introduced its own Agent.

Framer Agent uses AI credits, with additional credits available depending on your plan and usage.

Because I'm already paying for Cursor, it makes sense for me to use my existing subscription for some Framer tasks rather than relying exclusively on Framer's AI credits.

If you don't already use Cursor, however, this alone probably isn't a reason to subscribe.

Framer Agent is more than capable of letting you start experimenting with AI directly inside Framer.

Give your Agent more context with files

This is probably my favourite part of the setup.

Remember that empty project folder we created earlier?

You can fill it with Markdown files containing information that you want your Agent to have access to.

For example, for a Framer website I could create files for:

• A content plan

• SEO tasks

• Blog post ideas

• Brand guidelines

• Information about the business

• Instructions for the Agent

• Plans for larger website updates

If I'm planning ten new blog posts, I can keep the entire content plan inside the project folder and work through it with Cursor over time.

The same applies to SEO. I can create a plan containing everything I want to improve and then work through those tasks one by one with the Agent.

You can also maintain an AGENTS.md file with project-specific instructions you want the Agent to remember instead of repeating them in every conversation.

It turns Cursor into more than another chat interface for Framer.

The folder becomes a persistent workspace around your website, while Framer becomes one of the tools the Agent can interact with.

Should you use Cursor or Framer Agent?

I don't think this needs to be an either/or decision.

If you're new to Framer and simply want to experiment with AI website building, I'd start with Framer Agent. It's already integrated into the product, there's nothing else to install and you can start using it immediately.

Cursor becomes more interesting when you want greater control over your AI workflow.

The additional models, project files, persistent instructions and ability to create a larger workspace around a Framer project make it particularly useful if you're already comfortable working with AI coding tools.

Personally, I'm currently using both.

And there's one question I still want to answer: does using an external agent actually produce better results?

I'm going to be running more experiments where I give different AI agents the same Framer tasks and compare what they produce.

For now, if you already use Cursor, connecting it to Framer takes only a couple of minutes and is definitely worth trying.