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