From Framer to React

Framer has become one of the most popular tools for designing and publishing modern websites. Its visual editor, responsive layout system, and component-based architecture allow designers and developers to build beautiful experiences quickly.

As AI-assisted development has evolved, a new workflow has emerged: instead of manually rebuilding a design, developers want AI to inspect the design structure and generate production-ready React code.

Framer's Model Context Protocol (MCP) server is a major step in that direction. It exposes a project's internal structure, allowing AI assistants to inspect pages, components, layouts, typography, assets, and design tokens. With APIs such as getProjectXml and getNodeXml, an AI can understand a Framer project far beyond what a screenshot can provide.

However, there is still a gap between understanding a project and owning its code.

Today, exporting React components relies on Framer's official export functionality, which requires a paid subscription. While this works well, it creates a dependency on a proprietary export pipeline. At the same time, the design information required to recreate the application is already accessible through the MCP server.

This raises an interesting question:

If AI can already understand the complete structure of a Framer project, do we really need a dedicated code exporter?

The answer is increasingly no.

Large language models are now capable of transforming structured design data into clean, maintainable React applications. Instead of treating AI as a code completion tool, we can use it as a compiler that translates Framer's design tree into reusable React components.

This project explores that idea.

Our goal is not to replace Framer or reverse engineer its internal implementation. Instead, we want to build an open-source MCP plugin that extracts the information already available through Framer's public MCP interface and converts it into a developer-friendly React project.

Rather than producing opaque generated code, the plugin will focus on generating readable, modular, and customizable components that developers can easily integrate into existing React, Vite, or Next.js applications.

By making the entire workflow open source, we hope to give developers full ownership of their UI, encourage community contributions, and demonstrate how AI and open protocols can work together to bridge the gap between visual design tools and modern frontend development.

In the chapters that follow, we'll explore Framer's architecture, understand how the MCP server exposes project data, design the extraction pipeline, and build an open-source Framer-to-React workflow from the ground up.

To be continued... (Custom MCP server for Framer)