Proper UI
Set up
For Claude Code

A UI library and MCP built for Claude Code.

Claude Code gets a Skill that says how to build, an MCP server that searches 233 screens, 446 sections, 13 flows and 89 component groups, and a CLI that installs the source it picks. Free, MIT licensed, no account.

Set up in two commandsAbout the MCP
What Claude Code gets

Four pieces that work together

The Skill sets the rules, the MCP finds the right screen, and the CLI installs it.

  • The Skill

    A SKILL.md in .claude/skills/properui and a short pointer in CLAUDE.md. It tells Claude Code to check the project with info --json, search the registry before writing markup, install with the CLI, and keep the token and accessibility rules.

    agent init

  • The MCP server

    Four search tools return ranked results with thumbnails, docs links and what each entry is built from. A search that finds nothing says so.

    search_screens, search_sections, search_flows, search_components

  • Compare and plan

    compare_screens sets two to five candidates side by side. get_install_plan lists the files, the npm packages and the exact CLI command, before anything is written.

    compare_screens, get_install_plan

  • The CLI

    add copies real source into the project, resolves registry dependencies and rewrites imports to your alias. Claude Code runs it through its own shell tool, so each write goes through the approval Claude Code already asks for.

    add
Setup

Set up in two commands

Run the first in your project. The second registers the MCP server with Claude Code.

  1. Install the Skill

    Writes .claude/skills/properui/SKILL.md and appends a pointer to CLAUDE.md. It also merges the local MCP server into .mcp.json; add --no-mcp to skip that.

    Run in your project
    npx @properui/cli@latest agent init --client claude

  2. Add the MCP server

    The remote endpoint needs nothing installed. Add --scope user to make it available in every project. Then run /mcp inside Claude Code to confirm properui shows as connected.

    Remote (HTTP)
    claude mcp add --transport http properui https://properui.dev/api/mcp
    Or local (stdio), so add_component can install for you
    claude mcp add properui -- npx -y @properui/mcp

Prefer another client? See setup for Codex, Cursor, ChatGPT and more.

What a session looks like

A real recording, not a mockup

One prompt in Claude Code, recorded against the actual site and the app Claude Code built.

What happened in it

  1. Reads the Skill in the project, then checks the project's Proper UI setup. The first step in the Skill is npx @properui/cli@latest info --json.
  2. Searches the registry for billing, settings and confirm dialog entries.
  3. Installs the settings-13 example and the confirm-dialog component with add, then reads the installed source.
  4. Writes the billing route from them, builds the app and runs the token check. The recording ends on the finished page and its confirmation dialog.

The prompt

Build a billing settings page at /settings/billing: current plan with usage, payment method on file, an invoice history table, and a cancel-subscription confirmation dialog. Use Proper UI components only, keep it production quality, then run next build.

What you get

Real screens, installed as source

Both frames below are live pages rendered from the registry, not screenshots. Claude Code installs one with add and edits it like any other file in your repository.

Settings page

Open settings-13
Install
npx @properui/cli@latest add settings-13

Dashboard

Open dashboard-04
Install
npx @properui/cli@latest add dashboard-04
Know the edges

Limits, plainly

  • The components are React 19 only. For Vue, Angular, Svelte, Astro or plain HTML you get the tokens, @properui/html and @properui/elements, a smaller curated set. See Frameworks.
  • Examples ship with placeholder data and demo assets. Replace them before anything reaches a user.
  • The MCP over HTTP cannot write files, because it cannot see your project. Claude Code runs the CLI, or you use the local package, whose add_component tool installs for you.
  • Zero axe violations in the test suites is not the same as fully accessible. Automated checks miss things such as focus order and screen reader wording. See Accessibility.
Questions

Frequently asked questions

Do I need an account or an API key?

No. There is no sign-in and no key. Proper UI is MIT licensed, the MCP is part of it, and there is no paid tier.

What does `agent init --client claude` change in my repository?

It writes .claude/skills/properui/SKILL.md, appends a short pointer to CLAUDE.md between marker comments (the rest of the file is not touched, and running it again updates that block in place), and merges a properui entry into .mcp.json. An existing properui entry in .mcp.json is left alone unless you pass --overwrite. Pass --no-mcp to skip the MCP registration.

Remote or local MCP in Claude Code?

The remote URL needs nothing installed and can search, inspect and plan. The local package, npx -y @properui/mcp, runs inside your project, so it also has add_component, get_project_info and check_tokens. The .mcp.json entry that agent init writes is the local one. Register the remote one instead when you do not want a local process.

Does Claude Code write files through the MCP?

Only with the local package. Over HTTP the server searches, inspects and plans, and Claude Code runs npx @properui/cli@latest add <name> itself, so each write goes through the approval Claude Code already asks for.

Does it work with other agents?

Yes. agent init also takes --client codex, --client cursor and --client lovable, or --client all. The MCP works in any client that supports MCP; the MCP page lists setup for each.

Give Claude Code a library to search.

Add the Skill and the MCP once. Then ask for a screen and install the one you pick.

See the MCPRead the agent docs