Connect Framer to Claude, Codex, Cursor, and more

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. (For the wider context on Framer's AI features, see what's new in Framer 3.0.)

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.

1. Go to framer.com/agents/external/ - find your tool’s card and click Copy install prompt.

2. Paste the prompt into your AI tool - it will walk you through the next steps automatically.

3. Run the install command - all tools use the same command: npx @framer/agent setup

4. Paste your Framer project URL when prompted - find it in your browser bar when the project is open.

5. Test the connection - ask “List all the pages in my Framer project” to confirm it can read your canvas.

What to actually use External Agents for

Tip: for your first session, keep it read-only — ask the agent to report before it changes anything. Once you trust it, these copy-paste prompts cover the jobs External Agents are genuinely great at.

SEO & content

• Audit every page's title and meta description - flag which are missing, too short, or over 60/160 characters."

• "Rewrite the meta descriptions on all blog posts to 150–160 characters, keeping the main keyword."

• "Add descriptive alt text to every image that's missing it."

Design consistency

• "List every font size and color used on the homepage and flag anything off my design system."

• "Build a new pricing (or FAQ) section using my existing components and styles."

CMS at scale

• "List all my CMS collections and their fields."

• "Bulk-update reading times and internal links across all blog posts."

Housekeeping

• "Audit my project — list all pages, components, and CMS collections."

• "Find empty pages and broken 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. Try a free one like Agenttical or Zentrixx, or browse all 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.

What do I need installed to get started? Node.js v16+, a Framer account, and an account with your chosen AI tool. Setup is a single command: npx @framer/agent setup.

Which tool is best for SEO and content work? Claude Code — it's the strongest for meta descriptions, copywriting, and bulk CMS updates. Cursor is the easiest starting point for beginners.

Can an agent break my live site? Not if you work on a Framer branch and review changes before merging. If something does go wrong, undo with Cmd+Z or roll back to a previous branch version.

Can External Agents edit my Framer CMS? Yes. They can read and update CMS collections and fields, which makes them ideal for bulk jobs like alt text, reading times, and internal links.

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.