Memma is an open-source, visual-to-code CLI tool that utilizes a lightweight agentic AI workflow to convert websites into React components. With a single command, Memma visually analyzes a website and returns the necessary React components, styled with inline Tailwind CSS, to replicate the site’s layout.

Memma produces close structural and stylistic approximations of existing UIs, enabling developers to jumpstart applications and iterate from a meaningful starting codebase instead of a blank project.

Features

• Alternate between LLM Providers - Configure Memma's environment with either Anthropic or OpenAI API keys.
• Scaffold a Next.js Project - Optionally place the generated React components into a newly created Next.js project.
• Supports local image files - Use a local image file path instead of an URL for Memma to visually analyze.

Prerequisites

• Python 3.8.0+ installed on your environment
• An Anthropic or OpenAI API key

Getting Started

Install Memma:

$ npm install -g memma

memma init

Upon installing Memma, run memma init to initialize and configure your Memma environment.

$ memma init

• When prompted, select your preferred LLM provider and provide an API key.
• Memma generates configuration files in a directory located in the user's home directory (e.g. ~/.memma).
• A Python virtual environment will be created (at ~/.memma) to manage Memma’s Python dependencies in isolation. This venv is used to run Memma's local agentic backend.

memma start

Before running memma generate, a local Memma server must be running. Use memma start to start the required FastAPI service.

$ memma start

Runs a local FastAPI server in the background to support Memma’s agentic workflow.

memma generate

Generates React components from a provided source using Memma’s agentic workflow. The output consists of TypeScript-based React components styled with inline Tailwind CSS.

$ memma generate <source> [outputDir]

Arguments

| Argument | Required | Description | | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | source | Yes | The source to generate from. This can be either a public website URL or a local image file (when used with the --local-file flag). | | outputDir | No | Optional output directory where the generated components will be written. Defaults to the current working directory. Supported file types: .png/.jpg/.jpeg/.webp |

Options

| Option | Description | | ---------------------- | ---------------------------------------------------------------------- | | -c, --create-project | Scaffold a new Next.js project with the generated components. | | -l, --local-file | Treat the provided source as a local image file path instead of a URL. |

[!NOTE] A local Memma server must be running before executing memma generate. Refer to memma start

memma stop

Stops the locally running Memma server.

$ memma stop

memma reset

Resets Memma's environment, deleting all configuration files and directories. Users must run memma init to reinitialize Memma's environment.

$ memma reset

License

Memma is released under the MIT License.