Setup guide · Anysphere

Set up CleenUI in Cursor.

Cursor supports MCP — register CleenUI in .cursor/mcp.json and the skills become available in Composer and Chat.

AI toolCursor

Cursor has first-class MCP support. The config file lives at .cursor/mcp.json (project-scope) or ~/.cursor/mcp.json (global). Once registered, the three CleenUI tools are available in Composer, Chat, and Cmd-K threads — no rules file needed.

Step by step

5 steps. About 5 minutes.

  1. 1

    Open Cursor in your project

    Open your project folder in Cursor. The MCP config is project-scoped by default so it lives in the repo you're working on.

  2. 2

    Create .cursor/mcp.json

    At the root of your project, create a folder called .cursor (if it doesn't exist), and add a file named mcp.json inside it. You can also use ~/.cursor/mcp.json for a global config available in every project.

  3. 3

    Open the MCP settings panel

    Hit ⌘+Shift+J to open Cursor Settings, then go to Features → Model Context Protocol. Cursor will auto-discover the file you just created and list cleenui — toggle it on if it's off.

  4. 4

    Open Composer (⌘+I) and ask for setup

    Cursor's Composer is where multi-file agent work happens. Hit ⌘+I, then just describe what you want. Cursor will call the cleenui setup tool automatically.

  5. 5

    Apply the changes and run npm install

    Click Apply in the Composer panel. Then run npm install in Cursor's integrated terminal — ⌃` (Ctrl+backtick) — to pull the new dependencies.

Verify

Confirm via the MCP settings panel

Open ⌘+Shift+J → Features → MCP. The cleenui server should show a green dot — and listing it from any Composer thread with /tools should show setup, builder, theme.

Troubleshooting

If something doesn't work.

cleenui doesn't appear in the MCP panel

Restart Cursor — the mcp.json file is only re-scanned on startup. Confirm the file is named exactly .cursor/mcp.json, not cursor.mcp.json or .cursor/mcp.json.txt.

Server shows 'failed' status

Click the failed entry — Cursor surfaces the npx error message. Most commonly it's a missing Node version or a corporate proxy blocking npx.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.