MCP Free and open source · for Framer
Let your AI agent build Framer sites. Undo anything it does.
Sitewright connects Claude Code, Cursor and Codex to your Framer project. Your agent sets up tokens and text styles, builds pages, components, CMS content and translations — live in the editor, with every change in a local journal you can roll back.
npx -y sitewright@latest
Node.js 24.11 or newer · macOS, Linux and Windows · MIT license
- Hero section Framer agent Hero
- Text styles Plugin API Heading 1Body
- CMS items Plugin API Blog
- Skill used framer guide
- New landing page
- Color tokens Server API Brand / Primary
How it works
Your agent talks to Sitewright. Sitewright works in your open Framer project.
Sitewright is a local MCP server. It reaches Framer through a small companion plugin in the editor, so changes appear on the canvas as they happen, and through Framer's Server API when you add a key for the parts only Framer's agent layer can do.
Claude Code, Cursor or Codex
You describe the site. The agent plans the work and calls Sitewright's tools.
Sitewright
109 tools, a guide to how Framer behaves, and checks before handover. Records every change in a journal you can undo.
Your Framer project
The plugin applies each change live. A Server API key, if you add one, unlocks the rest.
-
Run the setup
npx -y sitewright@latestconnects your agent, asks what it may do, and offers to save a Server API key per project. -
Open the plugin
Add Sitewright from the Framer Marketplace, open it in your project and click Connect. The journal window it opens carries the connection: keep it open.
-
Ask your agent
“Build a landing page for a ceramics studio, with a blog in the CMS and a Dutch version.” Watch it land on the canvas.
Features
Built from real client sites, not from a demo.
Everything Sitewright knows about Framer came from building real sites through it: what Framer silently rewrites and what breaks on phones. The design stays yours: Sitewright carries it out.
A journal with undo
Every call is recorded with what changed and how it reached Framer. Undo the last change, a change and everything after it, or go back to a checkpoint. The window takes Framer's light or dark theme.
Keys stay with you
Server API keys are saved per project on your computer and never leave it. No account, no telemetry, no cloud in the middle.
Works without a key
With just the plugin, the agent builds pages from frames and text, styles, breakpoints, gradients, images, CMS content, redirects, and components and sections from the Marketplace.
A layout audit after every change
Catches what looks broken once published: misaligned edges, uneven cards, default-blue links, fixed sizes that break on phones, missing headings.
Built in your site's system
Changes use the site's own tokens, styles and components, and work around what Framer does without saying so.
Desktop to phone
Adds Tablet and Phone breakpoints and adapts their copies, so a page holds at 1440, 810 and 390 pixels wide.
Motion that settles
Appear, hover, scroll and loop presets in one call, as springs that come to rest without a bounce, with a note where Framer keeps true spring physics.
The Marketplace, filled in
Reads the Marketplace components you link, with their controls, and fills a carousel with your own photos.
Checks before handover
Search titles and descriptions, broken links and anchors, alt text, contrast, a template's leftover copy, and the published site itself.
Two ways to reach Framer
Start with the plugin. Add a key when you need the rest.
Calls go to the plugin first, so they land live in the editor. Work only Framer's agent layer can do goes through the Server API of the same project.
| Path | What you need | What works |
|---|---|---|
| Plugin | The Sitewright plugin open in the Framer editor, connected. | Color tokens and text styles, fonts, pages from frames and text (layout, size, fills, linear gradients, images, borders, links), breakpoints, SVG, Marketplace components and sections and their controls, CMS, redirects, code files, the editor selection, and the checks before handover. |
| Server API | Your own key from Framer → Site Settings → General → API Keys, saved per project. | Everything above, plus motion and transitions, variants and components, rich text, shadows, link styles, translations and new locales, site settings, screenshots of pages and references, preview links, Framer's DSL reference, and the icon, component and shader catalogs. |
Nothing runs while the plugin is not connected, so a change never lands in a project you did not open.
Tools
109 tools, grouped the way you build a site.
Each tool says what it changes, whether it can be undone, and what the agent should check before using it. Code tools stay off until you switch them on. The docs say which need a Server API key.
Project and guide 18
Status, switching projects, the Framer guide and Framer's docs, the selection, publishing on request.
- framer_status
- framer_connect
- project_overview
- selection_get
- publish_status
- deployments_list
- publish_preview
- project_publish
- framer_guide
- framer_docs
- framer_user
- selection_wait
- nodes_select
- node_show
- nodes_zoom
- plugin_data_get
- plugin_data_set
- framer_read
Design system 13
Tokens with light and dark values, text and link styles, where each style is used, fonts in Framer's library and on the site.
- color_tokens_list
- color_tokens_upsert
- color_tokens_delete
- text_styles_list
- text_styles_upsert
- text_styles_delete
- link_styles_list
- link_styles_upsert
- link_styles_delete
- styles_usage
- fonts_search
- fonts_used
- color_token_swap
Pages and layout 20
Create, duplicate and read pages, change them, set their motion, replace text, site settings, look at them, redirect old paths.
- page_create
- page_delete
- page_duplicate
- nodes_read
- nodes_find
- design_apply
- effects_set
- text_replace
- site_settings_get
- site_settings_set
- layout_audit
- breakpoints_add
- node_screenshot
- image_compare
- reference_screenshot
- redirects_list
- redirects_set
- nodes_query
- nodes_lock
- breakpoints_suggest
- styles_copy
- node_clone
Checks before handover 10
What looks fine in the editor and still fails on the published site.
- seo_audit
- links_check
- images_check
- a11y_audit
- contrast_check
- template_audit
- live_check
- site_audit
- performance_audit
- rich_text_audit
Components and assets 12
Components and their controls, the Marketplace, icons, shaders, uploads, SVG.
- components_read
- component_insert
- component_controls_set
- component_border_variable_add
- component_make_local
- component_detach
- marketplace_item
- icons_search
- shaders_read
- image_upload
- file_upload
- svg_add
- component_instances
CMS 11
Collections and fields, List fields too; items by slug, values by field name.
- cms_collections_list
- cms_collection_create
- cms_collection_delete
- cms_fields_set
- cms_items_list
- cms_items_upsert
- cms_items_delete
- cms_items_order
- cms_seo_collection
- cms_interlink
- blog_add
Localization 4
Add a locale, see what still needs translating, and write it.
- locales_list
- locale_add
- localization_get
- localization_set
Journal 7
What the agent did, undo and redo, checkpoints and restore.
- activity_list
- activity_get
- activity_checkpoint
- activity_undo
- activity_redo
- activity_restore
- activity_open
Code, opt-in 11
Custom HTML and code components, only when you allow it and ask for it.
- custom_code_get
- custom_code_set
- code_files_list
- code_file_read
- code_file_write
- code_file_delete
- code_files_read
- code_file_patch
- code_file_rename
- code_file_check
- theme_toggle_add
Privacy
Your projects and keys never leave your machine.
Sitewright runs on your computer and talks to Framer. Beyond that it reads only public pages a tool names: Marketplace items you link, reference pages, your published site. There is no Sitewright server, so there is nothing to sign up for and nothing that sees your work. Read the privacy policy.
-
Keys in a local file. One Server API key per project in
~/.sitewright, readable only by you. - No telemetry, no account. Sitewright does not collect or send usage data.
- The right project, always. Changes go to the project the plugin is open in, or to the one you name.
- You decide what it may do. Custom code and code components stay off until you switch them on. Publishing happens only when you ask.
FAQ
Questions
Is Sitewright made by Framer?
No. Sitewright is an independent, unofficial tool. It is not affiliated with or endorsed by Framer. “Framer” is a trademark of Framer B.V.
What does it cost?
Nothing. Sitewright is free and open source under the MIT license, with no paid tier. Some Framer features, such as localization or CMS limits, depend on your Framer plan. If it saves you time, you can donate on Ko-fi or to a monobank jar.
Found a bug or have an idea?
Open an issue on GitHub: there are forms for a bug report, an idea
and general feedback. For a bug, the Sitewright version (npx -y sitewright@latest --version)
and anything relevant from sitewright logs help most. Questions and ideas go to
Discussions.
Which agents does it work with?
Any agent that speaks MCP. The setup connects Claude Code, Cursor and Codex for you; for others,
npx sitewright setup --print prints the config.
Do I need a Server API key?
No. With the plugin alone the agent builds and edits pages, styles, breakpoints, CMS, redirects and Marketplace components, and runs the checks. A key adds motion, variants, rich text, link styles, translations, screenshots and Framer's catalogs.
Can the agent break my site?
It works in the editor, not on your live site: nothing is published unless you ask. Every change is in the journal, and most can be undone with one click. The journal says when a change cannot be undone, such as a new CMS collection or field, and returns what it removed.
How is it different from Framer's own agent?
Sitewright runs as a fast local server with the journal and undo, a layout audit after every change, checks before handover, what Framer does without saying so learned from real builds, the Marketplace, and the plugin path that works without a key. You can use it next to Framer's tools.
Give your agent a Framer project.
One command sets it up. Open the plugin, click Connect, and start describing your site.
npx -y sitewright@latest