Gemini integration

Gemini CLI and Gemini-based coding agents can run shell commands the same way Claude Code can, so the setup mirrors it closely: give Gemini enough project context to reach for properui add before it writes markup from scratch.

Prerequisites

• A project already scaffolded with npx @properui/cli@latest init — Gemini works best once components.json exists.
• Gemini CLI installed and authenticated (gemini on your PATH), or a Gemini-based agent with shell access.
• Optional: the properui-mcp server, covered below, for tool-based access instead of shelling out to npx.

Start using Proper UI with Gemini

Build a settings page with a page header, a tabbed navigation between
"General" and "Billing", and a form with labeled inputs. Use Proper UI
components — check `npx @properui/cli@latest search` for anything you're
not sure exists before writing custom markup.

Gemini will typically run properui search or properui list to confirm names before installing, the same flow as any shell-capable coding agent.

GEMINI.md instructions

Add a short section to your project's GEMINI.md so this convention holds across every session, not just the one where you type the prompt above:

## UI components

This project uses Proper UI (`@properui/ui`). Before writing any new
UI markup:

1. Run `npx @properui/cli@latest search "<what you need>"` to check whether
   a component or full-page example already covers it.
2. Install matches with `npx @properui/cli@latest add <name>` rather than
   hand-rolling the equivalent markup.
3. Import installed components from `@/components/...` (or your
   project's configured alias in `components.json`) and follow their
   existing prop APIs — don't rename props to "clean them up".
4. Only write new markup for something the registry genuinely doesn't
   have, and keep it in the same style: Tailwind utility classes, no
   inline styles, React Aria for anything interactive.

MCP integration

Gemini CLI reads the same mcpServers config format as most other MCP clients. Register properui-mcp in your settings.json:

{
    "mcpServers": {
        "properui-mcp": {
            "command": "npx",
            "args": ["-y", "properui-mcp"]
        }
    }
}

The MCP integration guide covers authentication options and the full tool list — search_components, get_component, add_component, and list_components.

FAQs