frameforge

frameforge

MCP server for generating UI mockups using Google Gemini image generation (Imagen / Nano Banana).

Generates high-fidelity web UI mockup PNGs and returns them inline in Claude Code.

Install

npx -y frameforge

Setup

Add to ~/.claude/mcp_config.json:

{
  "mcpServers": {
    "frameforge": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "frameforge"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Local development

{
  "mcpServers": {
    "frameforge": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/frameforge/dist/index.js"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Tool: generate_ui_preview

Param	Type	Required	Default	Description
prompt	string	yes	—	Description of the UI to generate
component_name	string	yes	—	Name used in the output filename
style_hints	string	no	—	Style guidance (e.g. "dark mode", "mobile")
aspect_ratio	string	no	"16:9"	Aspect ratio for the image
model	string	no	"gemini-2.0-flash-exp"	Gemini model ID
output_dir	string	no	"./previews"	Directory to save PNGs

Example

In Claude Code:

Generate a UI preview of a dashboard with a sidebar, header with search bar, and a grid of analytics cards showing revenue, users, and conversion metrics.

The tool returns an inline image visible directly in the terminal, and saves the PNG to ./previews/.

Requirements

• Node.js 18+
• GEMINI_API_KEY environment variable

License

MIT