Framer External Agents for Claude Code, Cursor, and Codex

Lukas Margeriego watch the original →

Framer now allows direct integration with AI agents like Cursor and Claude Code, enabling users to build, style, and manage CMS-backed sites via natural language prompts without requiring MCP setup.

Connecting External Agents to Framer

Framer has introduced native support for external AI agents, allowing developers to connect tools like Cursor, Claude Code, and Codex directly to a project. This integration bypasses the need for Model Context Protocol (MCP) configuration. To connect an agent, users execute a provided install command within their IDE, copy the Framer project URL into the agent thread, and authorize the connection via a browser popup. Once authorized, the agent gains full read and write access to the project canvas, components, and CMS.

Building and Restyling Workflows

Once connected, agents can perform complex site-building tasks through natural language prompts. The workflow includes:

  • Landing Page Generation: Agents analyze requirements to create a multi-section landing page, including responsive breakpoints and layout foundations.
  • Style Guide Synchronization: By using visual selection tools (such as Cursor's design mode), users can capture a reference website and instruct the agent to update the Framer style guide, including typography, primary colors, and secondary accents, to match the target aesthetic.
  • CMS Integration: Agents can generate CMS collections and detail pages from existing static elements. Users can prompt the agent to add specific fields, such as description fields, and map them to the UI components automatically.
  • Template Modification: Existing templates can be repurposed by providing a new project URL and a prompt to swap copy, images, and branding to match a specific niche, such as converting a general portfolio template into an interior design studio site.

Implementation Details

The agent operates by generating a multi-step design plan, which typically includes analyzing existing typography, buttons, and grids before executing changes. The process is iterative, allowing users to request specific additions like hero carousels, contact forms, or image galleries. While the agent handles structural and stylistic changes, final site publishing remains a manual step within the Framer interface.

  • #tutorial
  • #ai
  • #dev-tooling

summary by google/gemini-3.1-flash-lite. probably wrong about something. check the source.