Cursor integration

Cursor's Agent mode runs shell commands directly in your terminal, so it can drive the properui CLI the same way Claude Code or Codex can. The only setup is a project rule that tells it to reach for a real component before writing markup from scratch.

Prerequisites

• A project already scaffolded with npx @properui/cli@latest init: Cursor works best once components.json exists.
• Cursor with Agent mode enabled, so it can run terminal commands (with whatever approval level you've set under Run Mode).

Start using Proper UI with Cursor

Describe what you're building in plain language and let Cursor's agent choose the components:

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.

Cursor will typically run properui search or properui list in its terminal to confirm component names, then properui add <name> for each one it decides to use, and finally write the page around them.

Install the Proper UI rule

Rather than writing .cursor/rules/properui.mdc by hand, install it with the Proper UI Skill command:

npx @properui/cli@latest agent init --client cursor

This writes .cursor/rules/properui.mdc with alwaysApply: true frontmatter: Cursor's rules system only recognizes .mdc files with frontmatter in that folder, a plain .md file is ignored, so the CLI writes the correct format directly. The rule covers the same workflow as the Skill used by Claude Code and Codex: run properui info --json before touching UI code, search the registry before writing markup, install matches with add rather than hand-rolling, and keep React Aria props, semantic tokens and RTL-safe logical properties in anything written by hand.

alwaysApply: true means Cursor includes this rule in every chat and every Agent mode session, not just when a matching file is open, which matters here, since the "search before you write markup" instruction applies to any file, not just component files. If you'd rather it only load when a .tsx/.jsx file is in context, open the generated file, drop alwaysApply, and add a globs line instead; Cursor's own docs cover the other rule types (Auto Attached, Agent Requested, Manual). Re-running agent init --client cursor after a Skill update replaces the file, so keep any such manual edit in mind before re-running with --overwrite.

MCP integration

@properui/mcp gives Cursor 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. Add the remote server to .cursor/mcp.json in a project, or to ~/.cursor/mcp.json for every project. It needs no install and no account:

{
    "mcpServers": {
        "properui": {
            "url": "https://properui.dev/api/mcp"
        }
    }
}

The remote server has no project to write to, so the agent runs the CLI command that get_install_plan prints. To let add_component install into the project, use a local command entry in the same file instead:

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

Reload Cursor, then check that properui is listed and enabled under MCP in settings. The full tool list is on the MCP page.

FAQs