Connect Framer to Claude, Codex, Cursor, and more
Learn how to connect Framer to Claude Code, Cursor, Codex & Gemini CLI using External Agents. Step-by-step setup guide for designers and developers.
Tips
10 min read
Key takeaways
Framer External Agents connect Claude Code, Cursor, Codex, or Gemini CLI directly to your Framer canvas via MCP.
Setup takes 5-10 minutes - copy the prompt from framer.com/agents/external/ and run one command.
Cursor is easiest for beginners; Claude Code is best for content and SEO work. No extra Framer charges.
Always start read-only and use Framer branches before applying changes to your live site.
Framer External Agents let you control your Framer project from Claude Code, Cursor, Codex, or Gemini CLI. Instead of generic AI chat, your tool gets direct access to the actual project structure - pages, components, CMS collections, and styles - and can make real, editable changes.
This guide covers what External Agents are, which tool to choose, how to set one up in under 10 minutes, and what to actually do once connected.
What are Framer External Agents?
External Agents are MCP-based connectors that give AI coding tools outside of Framer read and write access to your live project. Think of it as giving your existing AI tool a window directly into your canvas - not a screenshot, but the real structure.
Aspect | Framer built-in agent | External agents |
|---|---|---|
Where you work | Inside Framer editor | Your IDE or terminal |
AI tools | Framer only | Claude Code, Cursor, Codex, Gemini CLI |
Credits used | Framer credits | Your tool’s subscription |
Best for | Simple, guided tasks | Advanced, cross-tool workflows |
Which AI tool should you use?
All four tools connect the same way. The difference is your preference and workflow:
Cursor - recommended for beginners. Built-in browser makes Framer authentication easy. Free with limits, Pro at $20/month.
Claude Code - best for designers and content-heavy tasks like SEO, copy, and CMS updates. Free tier available, Pro at $20/month.
Codex - for teams already using OpenAI’s platform. API usage-based pricing.
Gemini CLI - for Google Workspace teams. Steeper learning curve, but powerful for Google Cloud workflows.
How to connect Framer to an external AI agent (5-10 mins)
Before you start you need: a Framer account (any plan), an account with your chosen AI tool, and Node.js v16+ installed.
Go to framer.com/agents/external/ - find your tool’s card and click Copy install prompt.
Paste the prompt into your AI tool - it will walk you through the next steps automatically.
Run the install command - all tools use the same command:
npx @framer/agent setupPaste your Framer project URL when prompted - find it in your browser bar when the project is open.
Test the connection - ask “List all the pages in my Framer project” to confirm it can read your canvas.
First tasks to try
Start small. Build trust before making changes.
Read-only first (week 1)
“Audit my project - list all pages, CMS collections, and components”
“Check all page titles and meta descriptions. Which pages are missing them?”
“Find inconsistent font sizes or colors used on the homepage”
Then move to edits (week 2+)
Improve meta descriptions across all blog posts
Build a new section matching your existing design system
Bulk-update CMS fields - alt text, reading times, internal links
All Framerthemes templates are Agent-compatible. Hand any template to an External Agent, adapt it to your brand, and ship the same day.
Browse free Framer templates ->
Security & best practices
Always work on a Framer branch - let the agent make changes there, review, then merge to main.
Set boundaries in your prompts - tell the agent not to change slugs, URLs, or the navigation structure.
Never commit API keys to git - use environment variables and rotate keys monthly.
If something breaks - use Framer’s undo (Cmd+Z) or switch to a previous branch version.
Frequently asked questions
Do I need coding skills?
No. Designers can use External Agents effectively with clear, detailed prompts. Developers will find setup slightly easier but both can succeed.
Does it work with my current Framer plan?
Yes - all plans including Free. You only need a subscription with your chosen AI tool.
Is my project data safe?
Yes. External Agents use the MCP protocol built for this purpose. Only data relevant to the task is shared.
What does it cost?
No extra Framer charges. Cursor and Claude Code both offer free tiers and Pro at $20/month. Codex and Gemini CLI are usage-based.
Ready to connect?
Visit framer.com/agents/external/, pick your tool, copy the prompt, and run npx @framer/agent setup. Start with a read-only audit, build confidence, then gradually hand off more complex tasks. The agent works alongside you - every change stays visible, editable, and under your control.