This package contains skills and a CLI tool to enable your favourite local agent to interact directly with Framer projects. It works with Claude Code, Cursor, Codex, and other AI agents.
See framer.com/agents/external to learn more.
Getting Started
1. Installation
Install or refresh the globally available skills:
npx @framer/agent@latest setup
This will install skills into ~/.agents/skills and ~/.claude/skills.
To remove these skills (for example, when switching to the Framer MCP), run npx @framer/agent@latest uninstall.
If you're new to node/npm or are struggling with setup, try pasting the following prompt into your agent:
Prompt
Goal:
Ensure Node.js v24 or newer is installed, then run the @framer/agent setup.
Check first:
Run `node --version`.
If Node.js is already installed and the major version is 24 or higher:
Do not install or modify Node.js. Continue to the @framer/agent setup.
If Node.js is missing or older than v24:
Install an official Node.js release with major version 24 or higher.
Install policy:
Use an existing package manager only if it is already installed.
Do not install Homebrew, winget, Chocolatey, Scoop, nvm, fnm, or another package manager just for this task.
Install options:
macOS:
- If Homebrew is already installed, use it to install Node.js.
- Otherwise use the official Node.js `.pkg` installer.
Windows:
- If winget is already installed, use it to install Node.js.
- Otherwise use the official Node.js `.msi` installer.
Linux:
- If the system package manager can install Node.js v24 or newer, use it.
- For Debian/Ubuntu or RHEL/Fedora-compatible systems, use the official NodeSource instructions for Node.js 24 or newer.
- Otherwise use the official Node.js standalone Linux binary for the detected architecture.
Official downloads:
Use the static latest Node.js release directory when downloading installers or binaries:
https://nodejs.org/download/release/latest/
Verify:
After installing, run `node --version` again.
Only continue if the major version is 24 or higher.
Final step:
Run `npx @framer/agent@latest setup`.
Success message:
If the setup completes successfully, tell the user they are now set up and what the user should do next:
Create a new thread, then copy your Framer project link:
- Browser: copy the address bar when the project is open.
- App: right-click the project tab, then choose "Copy Project Link".
2. Connect to your projects
In your AI agent, simply ask to work on your project, pasting the relevant project URL. You can also manually invoke the framer skill. This will connect to your Framer project and ask you to grant access to the project from your browser.
3. Write your first prompt
Tell your agent what to build, change, or fix. It works directly in your Framer project without the need to have it open.
Frequently asked questions
Do I need to set up a Framer MCP server?
No. Framer doesn’t require a separate MCP server. If you’re searching for a Framer MCP, the native Framer Agent connection gives Claude Code, Cursor, Codex, Gemini CLI, and other AI tools direct access to your canvas, components, CMS, and project context, without manual MCP setup.
Which AI agents are supported?
Framer Agent works with any local agent harness that can work with Skills and can call local tools, including Claude Code, Codex, Cursor, Gemini CLI, and Windsurf.
Can the agent edit my live site?
No. The agent works on your canvas in the Framer editor, not on your published site. Changes only go live when you choose to publish them yourself or tell the agent.
Does the agent have access to my CMS?
Yes. Once connected, the agent can read and write CMS collections, including creating, updating, and deleting items. You stay in control of what gets published.
Is it safe to give an agent access to my project?
The agent only has access to the projects you explicitly connect it to. It cannot access other projects, your account settings, or billing. You can revoke access at any time.
What happens if the agent makes a mistake?
Framer has branching, so every change made by an external agent automatically happens on a branch. You can undo changes, review the branch, and decide when to merge it back into your main branch.
Will this consume my tokens or Framer tokens?
Usage will only consume your own agent's tokens.
Why does this use so many tokens?
Token consumption for Framer Agent can be relatively high. For other work like web development tasks, your agent already has a lot of knowledge baked into its model and so is able to get to work straight away. For Framer Agent, we need to first teach your AI how to interact with Framer projects and provide a lot of context. This requires a certain amount of token usage before being able to undertake the task at hand.
How do I get the latest releases if I have min-release-age set in my npm config?
If your npm config delays new packages with min-release-age, you can make generated Framer Agent skills override that delay. This updates your installed skills immediately:
npx --min-release-age=0 @framer/agent@latest override-min-release-age enable
To restore your default npm behavior:
npx @framer/agent@latest override-min-release-age disable