Framer MCP server for your AI

Build or change a page with Framer's command language: add, update, move, duplicate or remove layers.

Read Framer's own guide to editing the canvas: the command language for framer_apply_canvas_changes, design rules, examples, the query types for framer_read_project, and the inputs for analytics and stock images.

Read this project's fonts, color tokens, text style presets and icon sets, as text.

Run a read-only analytics query on this site's visitors.

Read project state with one or more queries, answered in order.

Find and replace words inside one text node.

Take a picture of a canvas node or page, returned as an image you can look at.

Add fields to a collection.

Create an empty CMS collection.

Read one collection item by id or slug, with its fields by name.

List a collection's fields with id, name, type, whether required, enum cases and allowed file types.

Read a collection's items.

List the CMS collections with id, name, slug field, whether they are read-only and who manages them.

Delete collection items by id or slug.

Update one collection item by id or slug.

Create or update collection items.

Create a branch to try changes on without touching main.

List the project's branches with id, title, URL and last edit.

Create a code file, such as a React component or override.

Make a published deployment the live site, visible to every visitor.

Read a code file's source, by id or path.

Get the live production and staging URLs, when each was last deployed, and image optimization status.

List the project's code files with id, name, path, version and exports.

List the warnings and errors found in a deployment, each with its severity, message and node id when known.

List recent deployments, newest first, with status (pending, optimizing, ready, failed), who made each and when.

List the pages changed since the last publish, each with its path, node id and whether it was added, modified or removed.

Publish the current project and make it the live site in one step, visible to every visitor.

Publish the current project state to a new preview deployment.

Replace a code file's whole source.

Create an empty web page at a path, such as /about.

List collections synced from outside Framer, which this API or a plugin owns.

List the site's web pages with node id and path.

Create or update managed collection items.

Upload a file, such as a PDF, to the project from a URL or base64, and get an asset back.

Upload an image to the project from a URL or base64 and get an asset back.

Add redirects.

List the site's redirects with id, from, to and whether each covers all languages.

Delete redirects by id.

Get this Framer project's name and id.

Start here.

Read the site-wide custom code at each location: headStart, headEnd, bodyStart and bodyEnd.

Set the site-wide custom code at one location, replacing what is there.

Turn a local component instance into plain editable layers.

List every node above a node on a page, up to the root.

List just the ids and types of nodes under one node on a page.

Find nodes of the given types under one node on a page.

Get the top-level frame that contains a node.

Read one node on a page in the compact form used by framer_apply_canvas_changes.

Get a node's position and size on a page, in pixels.

Read several nodes on a page in the compact form used by framer_apply_canvas_changes.

Find every node of the given types on a page, such as every text node.

Get a node's parent on a page, in the compact form.

Get the page or component that contains a node.

List the icon sets available to use, by id and name.

List the components available to use: the project's canvas and code components, and others from Framer, by id and name.

Copy an external component into the project so it can be edited.

Read what can be set on components, by id.

Read what can be set on icon sets, by id.

List the icon names in one icon set.

Read what can be set on layout templates, by id.

Read what can be set on shaders, by name.

Search stock images for use on the canvas, with thumbnails and an url for each.

Read a node and what is inside it, to the depth you choose, in the form framer_apply_canvas_changes understands.

Read several nodes and what is inside them, in the form framer_apply_canvas_changes understands.

Add an SVG graphic to the canvas from its source.

Add a new text layer to the canvas with the given words.

Duplicate a canvas node and everything inside it.

Create an empty canvas component.

Create a frame on the canvas, optionally inside a parent.

Create an empty text node on the canvas, optionally inside a parent.

Export any canvas node as SVG source.

Get the root node of the page this session opened on.

Get one canvas node and its attributes by id.

List a node's direct children.

Get a node's parent.

Read a piece of hidden data stored on a node, collection or item under a key.

Get a node's position and size in canvas pixels.

Read the SVG source of an SVG node.

Read a text node's words.

List the keys of hidden data stored on a node, collection or item.

List every node of one type in the project, or under one node.

List nodes that support an attribute, such as backgroundImage or link, set or not.

List nodes where an attribute has a value, such as every node with a link.

Move a node into another parent, optionally at a position among its children.

Delete canvas nodes and everything inside them.

Store a piece of hidden data on a node, collection or item under a key, such as the id of the matching record elsewhere.

Replace a text node's words.

Change a node's attributes, such as name, visible, width, opacity, backgroundColor or link.

Add a hover or pressed state to a variant of a canvas component.

Place a component on the canvas from its module URL.

Add a placeholder for a component that does not exist yet, to swap for the real one later with framer_replace_component_placeholder.

Add variables to a component.

Add a variant to a canvas component, based on an existing variant.

Place a component on the canvas as plain editable layers instead of a linked instance.

Add an option to a component's enum variable.

Get the error a code component instance is showing on the canvas, or null if it works.

List an icon's editable variables.

List a component's variables, the properties shown when it is used, with id, name, type and default.

List the icons in a vector set with id, name and URL for placing them.

List the project's vector sets, its shared icon collections.

Delete a component placeholder.

Delete component variables by id.

Remove an option from a component's enum variable.

Swap a placeholder for a real component instance from its module URL.

Set the order of a component's variables.

Set the order of a component's enum options.

Change a component placeholder's title, preview or size.

Change a component variable.

Rename an option of a component's enum variable.

Add an option to an enum field in a collection.

Get one CMS collection by id or exact name.

Delete fields inside an array field, and the values stored in them.

Delete fields from a collection, and the values stored in them on every item.

Remove an option from an enum field.

Set the order fields appear in for a collection.

Set the order of a collection's items.

Set the order of an enum field's options.

Change a field inside an array field, such as renaming it.

Rename a collection field or change its settings, such as required.

Rename an option of an enum field.

Create a shared color style.

Create a shared text style.

Get one color style.

Find one font by family name, optionally with a weight and style.

Get one text style.

List the project's shared color styles with id, name and colors.

List the fonts available to the project.

List the project's shared text styles with id, name, font, size and spacing.

Delete a color style.

Delete a text style.

Change a color style.

Change a text style.

Delete a branch and its unmerged work.

Get the branch a call works on when it does not name one: normally main.

Get one branch by id.

Join a branch as a contributor, so this user can edit it.

Leave a branch as a contributor.

List what changed on a branch: pages, collections, styles, code files and so on.

Merge a branch into its base, or into the branch you name.

Rename a branch.

Read the source of one saved version of a code file.

Get one deployment's status and URLs.

List the people who made changes between two versions of the project.

List a code file's saved versions with id, name, author and date, by file id or path.

Delete a code file, by id or path.

Rename a code file, by id or path.

Check TypeScript source for type errors without saving it.

Add a breakpoint to a web page, based on one of its existing frames.

Copy a design page under a new name.

Copy a web page to a new path.

Create a design page, a canvas for drafts that is not published to the site.

Create a collection owned by this API, for syncing data from another system.

List suggested breakpoints to add to a web page.

For a CMS detail page, get the collection item it is showing in the editor.

List a managed collection's fields.

List the ids of a managed collection's items.

Delete managed collection items by id.

Replace a managed collection's whole field list.

Set the order of a managed collection's items.

Upload an image and place it on the canvas.

Upload several images and place them on the canvas.

Add a language to the site.

Get the site's main language.

Get an image asset's picture, returned as an image you can look at.

List the language codes Framer supports, for framer_create_locale.

List the region codes available for a language, for framer_create_locale.

List the site's languages with id, code, name and slug.

List translatable content, grouped by page, collection item and so on, with each source text and its translations.

Save translations and translation status.

Upload several files to the project in one call.

Upload several images to the project in one call.

Set the order redirects are checked in.

Change a redirect.

Get the Framer user this connection acts as.