Setup guide · Codeium

Set up CleenUI in Windsurf.

Drop cleenui into ~/.codeium/windsurf/mcp_config.json — Cascade picks it up as a registered MCP server.

AI toolWindsurf

Windsurf supports MCP servers via Cascade. The config file lives at ~/.codeium/windsurf/mcp_config.json. Once registered, the three CleenUI tools are toggleable from Cascade's MCP settings panel and invokable from any Cascade thread.

Step by step

4 steps. About 5 minutes.

  1. 1

    Open the MCP config file

    Windsurf stores MCP server configs at ~/.codeium/windsurf/mcp_config.json. Open it in your editor of choice — Windsurf will create the file automatically if it doesn't exist.

  2. 2

    Add the CleenUI server

    Add the cleenui entry under mcpServers. Standard MCP shape — same format Claude Code and Cursor use.

  3. 3

    Refresh Cascade's MCP panel

    In Cascade (the chat panel), click the MCPs icon in the top right of the panel header (it looks like a stack of servers). Hit the refresh button — cleenui should appear with its three tools listed.

  4. 4

    Run Setup in a Cascade thread

    Start a new Cascade thread and ask Windsurf to set up CleenUI. Cascade will call the cleenui:setup tool and walk through the file changes.

Verify

Check Cascade's tool list

Open the MCPs panel and confirm cleenui shows a green status with three tools listed. Cascade has a 100-tool limit across all active MCPs — cleenui uses three of those slots.

Where the file lives
If the file doesn't exist yet, create it: mkdir -p ~/.codeium/windsurf && touch ~/.codeium/windsurf/mcp_config.json. Then paste the JSON and refresh Cascade.
Troubleshooting

If something doesn't work.

cleenui doesn't show after editing the file

Use the refresh button in Cascade's MCP panel. Cascade also reloads on Windsurf restart if refresh doesn't pick it up.

Tools show but won't invoke

Check Cascade's tool-count indicator. If you're near the 100-tool limit across all MCPs, disable a few unused servers to free slots.

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.