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

@properui/mcp gives Gemini the registry as tools: list_components, search_components, get_component, get_component_docs, the design library tools search_screens, search_sections, search_flows, compare_screens and get_install_plan, and, on the local server, add_component, get_project_info and check_tokens. Register the remote server, with no install and no account:

gemini mcp add --transport http properui https://properui.dev/api/mcp

Run /mcp in Gemini CLI to check that it is connected. The remote server has no project to write to, so Gemini runs the CLI command that get_install_plan prints. To let add_component install into the project, use the local server: Gemini CLI reads the same mcpServers config format as most other MCP clients, so add it to ~/.gemini/settings.json (or .gemini/settings.json in a project):

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

The MCP integration guide covers registry options and the full tool list.

FAQs