FramerをChatGPT、Claude、Geminiに接続

• 01 / 03Framerのサイト構造を監査する方法
• 02 / 03Framerサイトの公開方法
• 03 / 03Framer CMSの更新方法

最速日

768ms

最遅日

1068ms

14日間の傾向

遅延傾向+15%

Framer Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Framer capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "framer-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

各クライアントの手順ガイドはこちらです。 接続方法

Claude向けのガイド付きセットアップ？ FramerをClaudeや他のAIに設定する

このConnectorが対応するすべてのAIクライアントを見る ↑

• 01

  デザイン主導のチーム

  Framerのキャンバスを操作したりデザインレイアウトを崩したりすることなく、ウェブサイトのコンテンツを更新できます。

• 02

  マーケティングチーム

  会話形式の指示だけで、ランディングページやブログ記事、キャンペーンコンテンツを直接公開できます。

• 03

  開発者

  ヘッドレスAPI、データベース、スプレッドシートなどの外部データから、CMSデータをプログラム経由でFramerへ同期できます。

• 01

  How do I connect my Framer project?

  You need to generate an API key in your Framer project under Site Settings and General, then provide it to the MCP.

• 02

  Do I still need to use the Framer editor?

  You still use the editor for design and layout, but you can handle all CMS and publishing tasks through your AI agent.

• 03

  Can I publish my site through the AI?

  Yes, the publish_site capability allows your agent to push your latest changes live.

• 04

  Which AI clients work with this MCP?

  This MCP works with any compatible client including Claude, Cursor, Windsurf, and VS Code.

• 05

  Can I sync data from other apps?

  Yes, you can use your AI agent to push content from external data sources into your Framer CMS collections.

• 06

  How do I get my Framer API key?

  Open your Framer project in the editor. Go to Site Settings (gear icon in the top bar), then navigate to the General tab. Scroll down to find the Server API section and click Generate API key. Copy the key and store it securely. treat it like a password. This key is specific to this project. Paste it into the configuration field below.

• 07

  Can I push content from a spreadsheet into my Framer CMS?

  Yes. Your AI agent can create and update CMS collection items programmatically. Describe the data you want to add, and it maps your fields to the Framer collection schema and creates the items. perfect for bulk content migrations or data-driven landing pages.

• 08

  Does publishing through the API affect my Framer design?

  No. The Server API only manages CMS content. it cannot modify your visual design, canvas layout, or component structure. Your designers remain in full control of the visual experience while content teams operate independently through the AI agent.

• 09

  Is this suitable for agencies managing multiple Framer projects?

  Yes. Each API key is bound to a specific Framer project. Configure separate integrations for each client project and your AI agent can switch between them. managing content across your entire portfolio without opening multiple browser tabs.

• 

  Kentico (CMS & DXP) AIコネクタ

  Manage content and system objects via Kentico Xperience — retrieve documents, manage users, and audit custom t

  表示
• 

  Builder.io (Visual CMS) AIコネクタ

  Manage Builder.io content, assets, and models via AI — fetch entries, update data, and query GraphQL APIs dire

  表示
• 

  Builder.io AIコネクタ

  Manage your visual CMS via Builder.io — track content entries, models, and symbols directly from any AI agent.

  表示
• 

  ContentStack (Management) AIコネクタ

  Grant your AI agent read-write capabilities using ContentStack CMA. Update, publish, and manage contents, sche

  表示

おすすめ

• 

  Webflow AIコネクタ

  Manage Webflow sites, CMS collections, pages, and assets directly from your AI agent.

  表示
• 

  HubSpot CMS Hub AIコネクタ

  Manage blog posts, site pages, landing pages, authors, tags, and domains through natural conversation.

  表示
• 

  Joomla (Open-Source CMS) AIコネクタ

  Manage content via Joomla — list and create articles, manage categories and tags, and audit site menus.

  表示
• 

  Kontent.ai (Enterprise Headless CMS) AIコネクタ

  Manage enterprise content via Kontent.ai — create items, publish language variants, and audit content types.

  表示