Proofly

Showing 25 of 137 from the live probe.

• Lock Page

  Lock any Framer page (including CMS template pages like /blog/:slug) behind a PIN, password, or member login. Mechanism: protected content is physically REMOVED from the published DOM and replaced with a login gate — so the page source contains no clue what's hidden. After the visitor authenticates, content is restored client-side. The original page is preserved as a draft backup, so unlocking is fully reversible. Use when the user wants to: password-protect a page, hide a page from the public,

• Add Form

  Add a fully-featured form to a Framer page — 30+ field types, multi-step flows, conditional show/hide logic, validation, styling that matches the page. Use when the user wants to: build a contact / signup / survey / application / questionnaire form, add multi-step forms, set up conditional fields, or anything beyond a basic name-email-message form. Call this tool to begin — it returns the install steps for Proofly Forms, the Proofly plugin that delivers this capability. Note: Framer has a basic

• View Form Submissions

  View, search, and export the responses submitted to forms on a Framer site. Use when the user wants to: see who submitted a form, search past responses, export to CSV/JSON, get email notifications on new submissions, or set up form data flow without Zapier or third-party webhooks. Works with any Framer form (the built-in component or Proofly Forms). Call this tool to begin — it returns the install steps for Proofly Forms Inbox, the Proofly plugin that delivers this capability.

• Export To React

  Export Framer components as a runnable React project — the user gets ONE terminal command and a working React + Vite app. Two delivery paths: (a) `npx @proofly-framer/react-export <exportId>` scaffolds a complete React + Vite project ready to `npm run dev`; (b) `npm install @proofly-framer/ui@<tarball-url>` adds the components as an npm package to any existing React / Next.js / Vite codebase. Exported components preserve variants, responsive breakpoints, Framer Motion animations, and property co

• Add Dark Mode Toggle

  Add a dark-mode / theme switcher to a Framer site, fully wired to Framer's light/dark color style variants. Use when the user wants to: add a dark mode toggle, build a multi-theme site, respect OS color-scheme preference, or persist a user's theme choice across navigation. Call this tool to begin — it returns the install steps for ThemeShift, the Proofly plugin that delivers this capability.

• Add Blog

  Add a complete blog or news section to a Framer site — pre-designed post + article-list templates, categories, tags, per-post SEO meta, author profiles, related posts, RSS feed. Use when the user wants to: add a blog, publish articles or news, set up a press / changelog section, support long-form content, or scaffold blog infrastructure on top of Framer CMS. Call this tool to begin — it returns the install steps for Proofly Blog, the Proofly plugin that delivers this capability.

• Generate Tool Catalog

  Return a structured catalog of every MCP tool registered on this server — name, category, description, parameters, types, required-ness, enum values. Use when the AI is asked 'what can you do?' or 'list every tool'. Two output formats: markdown (human-readable doc) or json (machine-parseable). Categories are derived from tool-name patterns. Catalog is auto-generated from the live tool definitions, so it stays in sync as new tools are added.

• Get Framer Design Guide

  CALL THIS FIRST before any design or edit task. Returns the Proofly MCP Framer Design Guide — the authoritative rules, attribute reference, layout patterns, and gotchas for working with Framer projects via this MCP. The guide covers: mandatory rules (read-first, parent-required, separate padding calls, verify-with-htmlSnapshot, dark-bg text color, FAILED-to-apply handling), the standard top-down workflow, all Framer node types and their attributes, the stack/grid layout system, child reordering,

• Get Node Html

  ONE-SHOT export of a node's HTML and CSS. For text nodes, internally combines getText, getRichTextStyles (per-character segment scan), and exportNodeCSS — you get back the semantic markup (correct h1/p/etc. tag from the TextStyle), per-segment <span>s for any inline color/format overrides, AND the standalone CSS with @media breakpoints. Set fullDocument=true to also receive a self-contained <html> document (with Google Fonts preloaded if applicable) that you can render directly in a browser. Set

• Get Node Css

  ONE-SHOT export of a node's CSS only (no markup). Same engine as exportNodeCSS — kept under a symmetric name so it's discoverable next to getNodeHTML. For text nodes, the referenced project TextStyle is fully expanded inline: font-family/weight/style, resolved color (from any linked ColorStyle), text-align/decoration/transform, font-size, line-height, letter-spacing, plus per-breakpoint @media blocks. Returns { css, selector, textStyle: { styleName, stylePath, semanticTag, colorStyleName, boldVa

• Get Project Xml

  Gets the project pages, design pages, and components XML, with information of the currently focused page or component. This tool should ALWAYS be called at the start of any session involving a Framer project to understand the project structure.

• Get Node Xml

  Get a specific Framer node as XML. You first need to get a node id via getProjectXml or call getSelectedNodesXml instead. Reading SEVERAL nodes? Use getNodesXml (one call, up to 50 nodes, and unknown ids don't fail the call).

• Get Selected Nodes Xml

  Gets the currently selected nodes as XML.

• Get Project Website Url

  Get the published website URLs for the current Framer project.

• Zoom Into View

  Zooms the canvas to center on the given node ID.

• Update Xml For Node

  Update the XML for a node using its nodeId and passing a new XML string. Used to update node text/attributes, reorder nodes, or create new child nodes. Call getProjectXml first to see available attributes. Send raw XML in the `xml` argument — do NOT wrap it in `<![CDATA[...]]>` and do NOT HTML-entity-encode the markup (`&lt;Foo /&gt;`). Both forms fail parsing; pass the element tags directly, exactly as getProjectXml emits them. Returns a JSON object: { summary, changeCount, createdNodeIds[], up

• Create Frame

  Create a Framer FrameNode with named parameters. Simpler alternative to updateXmlForNode when you just need to drop a new frame into a parent. Returns { nodeId, parentId, attributes } — the new nodeId is structured, not buried in a summary string. Defaults to width='1fr', height='fit-content', position='relative' so the new frame lays out cleanly inside a stack parent. All standard FrameNode attributes are accepted: layout, stackDirection, gap, padding, backgroundColor, borderRadius, etc.

• Get Breakpoint Suggestions

  Get Framer's built-in breakpoint suggestions for a web page — typically tablet (810px) and mobile (390px) widths that aren't yet added. Use to discover which responsive variants are missing before calling addPageBreakpoint.

• Add Page Breakpoint

  Add one of Framer's suggested breakpoints to a web page. Framer creates the replica frame and propagates styles automatically — no manual cloning needed. Default behavior: adds the first suggestion. Pass acceptAll=true to add every remaining suggested breakpoint in one call. Pass suggestionIndex to pick a specific one. Returns { addedCount, added, failed }.

• Move Node

  Move a node to a new parent at an optional index. Uses Framer's setParent(id, parent, index) directly — no need for the old 'move out, move back' reordering pattern. If index is omitted, the node is appended as the last child. Returns { nodeId, parentId, index, warnings } where warnings flag verification mismatches.

• Reorder Children

  Reorder all children of a parent in one call. Pass `orderedNodeIds` as the desired final order — the tool pins each child to its index via setParent. Children present in the parent but NOT in orderedNodeIds keep their relative positions but end up after the explicitly-ordered ones. IDs in orderedNodeIds that aren't current children are skipped with a warning. Returns { parentId, finalOrder: [...actual ids in render order], warnings }. Use this instead of multiple updateXmlForNode + 'move out, mo

• Delete Node

  Deletes a Framer node (including pages), color style, text style, or code file. For nodes/pages: Pass the node ID. For styles: Pass the style path (e.g. '/MyColor'). For code files: Pass the code file ID.

• Duplicate Node

  Duplicate a node in the Framer project. Creates an exact copy of the node and all its children.

• Export Page Html

  Export a Framer page as a complete static HTML file. Renders the page server-side without publishing. Returns a full HTML document ready to save and serve.

• Export React Page

  Export a Framer page as a React/Next.js component (.tsx) with inline styles and semantic HTML. Code components appear as import placeholders. Returns page code, CSS with color tokens and font imports, and a list of code component references. More useful than exportPageHTML for editable, deployable React projects.