Install Framer Bridge

Pick your client, copy the command, done.

Manual setup required. The maintainer's config contains paths only you know — edit the placeholders below before adding it to Claude Code.

Run this once before adding it to Claude Code.

git clone https://github.com/SeuUsuario/framer-bridge.git
cd framer-bridge
npm install
npm run build

claude mcp add framer-bridge -- node /path/to/framer-bridge/index.js

Replace any placeholder paths in the command with the real path on your machine.

Environment Variables

Set these before running Framer Bridge.

VariableDescriptionRequired

FRAMER_CMS_API_KEYAPI key for Framer CMS integrationsNo

After setup, try these prompts with your AI agent:

→Generate a Framer Motion spring animation snippet for a card hover effect.

→Create a React component scaffold with Framer property controls for a custom button.

→Help me mirror the parallax effect from this reference site using Framer Motion code.

→Generate a layout animation component compatible with Framer's code tab.

Prerequisites & system requirements

An MCP-compatible client (Claude Code, Cursor, Windsurf, Claude Desktop, or Codex)
Node.js 18+ with npm/npx installed

Save the docs, env vars, and workflow around Framer Bridge in Conare so Claude Code, Codex, and Cursor remember it next time.