PLAYBOOK · EXTERNAL
External Agents
Drive your Framer project from Claude Code, Cursor, or a script.
PROMPT LIBRARY
40 prompts for external agents
$ npx @framer/agent
✓ connected to canvas
audit my SEO
generating nodes
live preview
External AgentsBeginnerFree · setup
Set up Framer Agents
Get Node 24+ and the agent running in two commands.
Ensure Node.js v24 or newer is installed — run node --version to check. If it is missing or older than v24, install an official Node.js 24+ release using a package manager you already have (Homebrew or winget) or the official installer; do not add a new package manager just for this. Then run npx @framer/agent@latest setup and verify node --version reports 24 or higher before continuing.
live preview
External AgentsIntermediate~150 credits
Parallel site audit
Run several audits at once.
Perform a comprehensive audit of this project, running accessibility, SEO, and performance checks in parallel. Output a separate markdown report for each with the findings, the rationale behind each score, and concrete, prioritized fixes. Flag anything critical prominently.
live preview
External AgentsIntermediate~100 credits
Sync results to Notion
Push artifacts to a connected tool.
Take the audit reports you just generated and sync them to a new page in my connected Notion workspace, organized as a table with one row per issue and columns for severity, page, and fix. Include a link back to the live project at the top.
live preview
External AgentsAdvanced~150 credits
Headless CMS build
Let a local agent do the heavy lift.
Read the attached folder of exports on disk, design a relational CMS for them, and create the collections, fields, references, and items in my Framer project. Do the heavy parsing locally, then push the structured result up, and report anything that couldn't be mapped.
NEW YORK
live preview
External AgentsAdvanced~200 credits
Scheduled content refresh
Automate an update-and-publish loop.
Every morning, fetch new entries from my API, upsert them into the matching CMS collection, regenerate any stale SEO metadata from the new content, and republish the site. Log a short summary of what changed each run and alert me if a fetch fails.
live preview
External AgentsAdvanced~150 credits
Live data UI
From API to animated component.
Use the X tool to fetch the latest posts containing a keyword, build a CMS-powered collection list from them, design a card with name, date, and content, and lay it out as an infinite animated ticker. Refresh the data on a schedule and dedupe by id.
$ npx @framer/agent
✓ connected to canvas
add a CMS blog
generating nodes
live preview
External AgentsBeginnerFree · setup
Connect Cursor
Edit Framer from your IDE.
Connect Cursor to my Framer project through the agent so I can read and edit pages from my editor. Verify the connection by listing the current pages and making one small, safe edit I can confirm.
live preview
External AgentsIntermediate~150 credits
Bulk image optimization
Audit and fix every asset.
Scan every page for oversized or unoptimized images, report the worst offenders with their dimensions and weight, and replace each with an optimized version at the right resolution. Preserve alt text and crops, and confirm the page weight dropped.
live preview
External AgentsAdvanced~150 credits
Migrate from another site
Import external content.
Crawl my old website, extract every blog post with its title, body, images, and date, and recreate them as CMS items with clean slugs. Preserve formatting and inline images, set up redirects from the old URLs, and report any posts that need review.
live preview
External AgentsIntermediate~100 credits
Sync to a spreadsheet
Export CMS to Sheets.
Export every item in the Products collection to a connected Google Sheet with one column per field, and keep it in sync on a schedule so edits in Framer flow through. Handle additions, edits, and deletions without creating duplicate rows.
live preview
External AgentsAdvanced~200 credits
Generate from a database
Database to Framer pages.
Connect to my database, read the latest records from the chosen table, and generate or update a detail page for each — creating new pages for new records and updating changed ones. Map the columns to page content and keep the slugs stable.
live preview
External AgentsIntermediate~100 credits
CSV to collection
A structured import.
Take this CSV of team members and create a Team collection with the correct field types inferred from the data — text, image, email, and references. Import every row, generate slugs, and skip or flag any row with missing required fields.
live preview
External AgentsAdvanced~150 credits
Automated QA before publish
Pre-flight checks.
Before each publish, run a checklist across the site: broken internal links, missing alt text, empty sections, and low-contrast text. Produce a pass/fail report and block the publish if any critical issue is found, listing exactly what to fix.
live preview
External AgentsIntermediate~100 credits
Apply a brand kit
Apply a design.md from a file.
Read my design.md file, then apply its colors, fonts, radii, and spacing as proper styles across the project — creating color and text styles and binding existing layers to them. Report anything in the file that didn't map to a style.
live preview
External AgentsAdvanced~200 credits
Multi-agent workflow
Orchestrate sub-tasks in parallel.
Use a workflow to audit, fix, and verify each page in parallel: one pass to find issues, one to fix them, and an adversarial pass to confirm the fixes hold. Summarize what changed per page and surface anything that needs my decision.
$ npx @framer/agent
✓ connected to canvas
audit my SEO
generating nodes
live preview
External AgentsBeginnerFree · setup
Connect MCP tools
Wire up integrations.
Connect my Slack and Linear MCPs so the agent can post build summaries to a channel and open issues for any problems it finds. Confirm the connections by posting a test message and creating a sample issue I can delete.
live preview
External AgentsAdvanced~150 credits
Refresh from RSS
Auto-pull a feed.
Pull my podcast RSS feed and upsert each episode into the Episodes collection with title, date, description, and audio URL, keeping it current on a schedule. Strip tracking parameters, dedupe by GUID, and don't overwrite manual edits to descriptions.
$ npx @framer/agent
✓ connected to canvas
make this responsive
generating nodes
live preview
External AgentsIntermediate~100 credits
Generate sitemap + robots
SEO plumbing.
Generate an accurate sitemap and robots configuration from the current published pages, excluding drafts and the 404. Set sensible change frequencies and priorities, and keep it updated whenever pages are added or removed.
▲
●
✦
◇
■
✚
❋
◆
▲
●
▲
●
✦
◇
■
✚
❋
◆
▲
●
live preview
External AgentsAdvanced~200 credits
Localize the whole site
Translate at scale.
Translate every page and CMS item into French and German, creating the locales and translating titles, body, and metadata in our tone while leaving the originals intact. Keep layout intact for longer translated strings and flag anything that overflows.
live preview
External AgentsIntermediate~100 credits
Weekly analytics digest
Scheduled reporting.
Every Monday, query analytics for the top pages, referrers, and conversion events from the past week, then post a concise digest to my connected Slack channel with the key numbers and the biggest changes versus the prior week.
$ npx @framer/agent
✓ connected to canvas
generate a pricing table
generating nodes
live preview
External AgentsAdvanced~400 credits
Connect a Stripe Catalog
Pull live products and prices from Stripe into a synced collection
Connect the Stripe MCP and sync the product catalog into a new CMS collection called Products with fields for name, description, price, currency, image, and active status. Map recurring prices into a separate Plans collection linked by reference. Build a pricing grid bound to active records only, with a responsive layout that collapses three columns to one at the phone breakpoint. Add a Featured boolean and surface those records first using a sort. Re-run the sync on demand and report any records that changed since the last pull.
$ npx @framer/agent
✓ connected to canvas
audit my SEO
generating nodes
live preview
External AgentsAdvanced~350 credits
GitHub Release Changelog
Turn repository releases into a published changelog page
Use the GitHub MCP to fetch the latest releases from a repo I specify and write them into a Changelog CMS collection with fields for version, date, body, and tag. Generate a changelog page that lists records newest first, rendering the markdown body into formatted text and showing the version tag as a styled chip using a color style. Group entries visually by month with a sticky date label. Add a staggered reveal on scroll, gated behind prefers-reduced-motion. On future runs, only insert releases newer than the most recent stored version.
live preview
External AgentsAdvanced~450 credits
Airtable Two-Way Sync
Keep a Framer collection mirrored with an Airtable base
Connect Airtable through MCP and establish a bidirectional sync between a base and a CMS collection, matching records by a stable external ID field you store on each item. Pull new and changed rows into Framer, and on a separate pass push edits made in Framer back to Airtable. Map field types carefully: long text to formatted text, attachments to images, single-select to a styled status chip. Detect conflicts where both sides changed and list them for me instead of overwriting. Print a summary of created, updated, and skipped records.
live preview
External AgentsAdvanced~300 credits
Embed a Calendly Widget
Add a working booking flow with a styled embed override
Create a code component that embeds a Calendly inline scheduler using a URL I provide through a property control, and theme it to match the site by passing background and accent hex values from variables into the embed parameters. Add a loading skeleton that shows a spinner until the iframe fires its load event, then crossfades to the calendar. Lazy-load the script only when the section scrolls into view to protect performance. Make the container full-width on phone and capped at a max width on desktop, and respect prefers-reduced-motion for the fade.
✦
◇
■
✚
❋
◆
▲
●
✦
◇
✦
◇
■
✚
❋
◆
▲
●
✦
◇
live preview
External AgentsAdvanced~400 credits
Live Crypto Ticker
Stream prices into a scrolling marquee from a public API
Build a code component that fetches prices for a list of symbols from a public crypto API and renders them as an infinite horizontal marquee, looping seamlessly with duplicated content. Show each symbol, current price, and a green or red delta using color styles. Poll on an interval I set via a property control, debounce updates, and animate value changes with a brief count transition. Pause the marquee on hover. Stop polling when the tab is hidden and resume on focus. Fall back to a static placeholder row if the request fails, and honor prefers-reduced-motion.
live preview
External AgentsAdvanced~500 credits
Webflow Site Import
Recreate a Webflow site's structure and content in Framer
I am migrating from Webflow. Read an exported sitemap I provide, recreate the page hierarchy with matching slugs, and rebuild each section's layout using Framer stacks, variables for spacing, and shared color and text styles instead of inline values. For any blog or collection pages, create matching CMS collections and import the records with their fields mapped. Set responsive behavior at the tablet and phone breakpoints to mirror the originals. Flag any Webflow-specific interactions you could not reproduce and propose Framer equivalents for each.
$ npx @framer/agent
✓ connected to canvas
add a CMS blog
generating nodes
live preview
External AgentsIntermediateFree - setup
Slack Publish Alerts
Notify a Slack channel after every successful publish
Connect the Slack MCP and set up a publish notification flow. After I publish, post a formatted message to a channel I name containing the site name, the live URL, a short list of pages that changed, and a timestamp. Use Slack blocks for clean formatting with a header and a context line. Include a button linking straight to the live site. If a publish fails or is skipped, post a muted warning variant instead. Keep credentials in the connection, never inline, and confirm the message id after sending.
live preview
External AgentsAdvanced~450 credits
Notion Blog Pipeline
Draft posts in Notion and sync them into a blog collection
Connect Notion via MCP and treat a database as the source of truth for a blog. Sync pages whose status is Ready into a Posts CMS collection, mapping title, slug, cover image, author reference, tags, and the page body converted from Notion blocks into formatted text. Skip drafts. Generate the blog index and a post template bound to the collection, with a related-posts row matched by shared tag. On each run, update existing posts by external id and set status back to Published in Notion. Report counts and any block types you could not convert.
AMSTERDAM
live preview
External AgentsAdvanced~300 credits
Daily Backup Snapshot
Schedule a recurring export of the project as JSON
Set up a scheduled task that runs once daily and exports the full project structure and CMS contents to a timestamped JSON snapshot, keeping the last fourteen and pruning older ones. Before exporting, capture a brief diff summary versus the previous snapshot so I can see what changed day to day. Store snapshots in a location I specify and write a small index file listing each backup with its date and a one-line change note. If a run produces no changes, skip writing a new file and log that nothing changed.
live preview
External AgentsAdvanced~350 credits
Mailchimp Signup Form
Wire a newsletter form to a real mailing list
Build a newsletter signup as a code component that posts the email to a Mailchimp audience through its API using a key stored in the connection, never in the markup. Validate the email before submit, show inline error text styled with a color style, display a spinner during the request, and swap to a success state with a checkmark animation on a 200. Handle the already-subscribed case gracefully with its own message. Make the layout stack vertically on phone and inline on desktop, and respect prefers-reduced-motion for the state transitions.
live preview
External AgentsAdvanced~400 credits
Google Sheets Pricing Table
Bind a pricing grid to a shared spreadsheet
Connect a Google Sheet through MCP and treat one tab as a pricing source. Sync each row into a Plans CMS collection with fields for tier name, monthly price, annual price, a list of features, and a highlighted boolean. Build a three-tier pricing grid bound to the collection with equal-height cards, a styled badge on the highlighted plan, and a monthly-annual toggle that switches the bound price field. Collapse to a single column on phone with the highlighted plan first. Re-sync on demand and report any rows with missing required fields.
live preview
External AgentsAdvanced~450 credits
Algolia Site Search
Add instant search backed by a hosted index
Set up site search with Algolia. First write a script that reads my CMS collections and pushes records into an Algolia index with the fields worth searching, then build a search code component that queries the index as the user types, debounced. Render results in a dropdown with highlighted matches, keyboard up-down navigation, and Enter to open the record's page. Show an empty state when nothing matches and a spinner while querying. Make the overlay full-screen on phone and a floating panel on desktop, and trap focus while open.
live preview
External AgentsAdvanced~300 credits
Typeform Embed Override
Drop in a themed Typeform with completion tracking
Create an override that mounts a Typeform via its embed SDK on a canvas frame, reading the form id from a property control and passing brand colors from variables so it matches the site. Listen for the submit event and, on completion, reveal a hidden thank-you section already on the page using a variant change. Lazy-init the embed only when it scrolls into view, and show a spinner placeholder until it is ready. Keep it responsive by filling its container at every breakpoint, and skip the reveal animation when prefers-reduced-motion is set.
live preview
External AgentsAdvanced~350 credits
Status Page Health Strip
Show live service uptime from a status API
Build a code component that polls a public status API and renders a compact health strip of service components, each shown as a labeled dot using green, amber, and red color styles for operational, degraded, and down. Add a small tooltip on hover with the component name and current status text. Poll on an interval, pause when the tab is hidden, and animate dot color changes smoothly. If the API is unreachable, show a neutral unknown state rather than red. Stack the dots into two rows on phone, and honor prefers-reduced-motion.
live preview
External AgentsAdvanced~400 credits
Cloudinary Image CDN
Route CMS images through a transforming CDN
Rewire image rendering to serve through Cloudinary. Write an override that takes a source URL from a CMS field and builds a Cloudinary fetch URL with automatic format, quality, and a width matched to the current breakpoint, then sets it as the image source with a blurred low-quality placeholder that swaps in on load. Apply it across the blog and gallery collections. Verify a few transformed URLs return successfully and report the average size reduction versus the originals. Keep everything lazy-loaded and fall back to the raw source if the CDN errors.
■
✚
❋
◆
▲
●
✦
◇
■
✚
■
✚
❋
◆
▲
●
✦
◇
■
✚
live preview
External AgentsAdvanced~500 credits
Multilingual via DeepL
Auto-translate collection content into a second locale
Connect the DeepL API and translate a blog collection into a second locale. For each record, send the title and body to DeepL, store the results in locale-specific fields, and preserve formatting and any inline links. Add a Locale variable and a language toggle in the nav that switches which fields the bound text reads from. Skip records already translated by tracking a source-hash field, and only re-translate when the source changed. Report how many records were translated, skipped, and failed, and list any that exceeded the length limit.
live preview
External AgentsAdvanced~500 credits
Contentful Headless Sync
Pull a Contentful space into native collections
Connect Contentful through MCP and mirror a content model into Framer CMS. For each content type, create a matching collection and map fields including references and assets, resolving linked entries into reference fields and assets into images. Import all published entries by stable id, and on later runs update changed entries and remove ones unpublished in Contentful. Build an index and detail template bound to the main collection. Output a mapping table of Contentful field to Framer field and flag any rich-text features that did not convert cleanly.
live preview
External AgentsAdvanced~450 credits
Embed an Analytics Dashboard
Surface live traffic metrics from Plausible
Build a metrics dashboard code component that calls the Plausible stats API with a key from the connection and renders four KPI cards: visitors, pageviews, bounce rate, and average duration, each animating from zero to value on first view. Add a small sparkline per card from the last thirty days of data. Let me set the date range via a property control. Show skeleton loaders while fetching and a retry control on error. Lay the cards in a responsive grid that goes four across on desktop and two on phone, and honor prefers-reduced-motion.
live preview
External AgentsAdvanced~400 credits
Discord Community Feed
Mirror recent channel messages into a live feed
Connect a Discord bot through MCP and pull recent messages from a public channel into a Community collection with fields for author, avatar, message, and timestamp. Build a feed section that renders newest first with relative timestamps that recompute on the client, author avatars, and a subtle staggered entrance. Refresh on a schedule and only insert messages newer than the last stored id to avoid duplicates. Filter out bot and system messages. Make rows full-width on phone with the avatar above the text, and gate the entrance animation behind prefers-reduced-motion.
live preview
External AgentsAdvanced~450 credits
Generate OG Share Images
Auto-create social preview cards for every page
Set up dynamic Open Graph images. For each CMS-driven page, generate a 1200 by 630 share card composed from the record's title, an accent strip using a color style, the site logo, and a category chip, rendered through an image generation endpoint or a templated HTML-to-image service. Store the resulting URL on the record and wire it into the page's OG and Twitter meta tags. Re-generate only when the title or category changes by tracking a hash. Produce a contact-sheet preview of the first ten cards so I can sanity-check the layout before publishing.