Setup guide · GitHub

Set up CleenUI in GitHub Copilot.

VS Code's Copilot supports MCP servers — add cleenui to .vscode/mcp.json and the tools become callable from Copilot Chat.

AI toolGitHub Copilot

Copilot's MCP support lives inside VS Code (rather than the Copilot Extensions marketplace) and uses a dedicated .vscode/mcp.json file at workspace scope, or a user-level mcp.json for everywhere. Heads up: VS Code's MCP format uses servers as its top-level key — different from the mcpServers key that Claude Code, Cursor, Cline, and Windsurf use.

Step by step

4 steps. About 5 minutes.

  1. 1

    Open the MCP: Add Server command

    VS Code ships a guided installer. Open the command palette (⌘+Shift+P) and run 'MCP: Add Server'. Choose Workspace (writes to .vscode/mcp.json) or Global (writes to your user profile's mcp.json).

  2. 2

    (Alternative) Edit .vscode/mcp.json by hand

    If you prefer raw JSON, create .vscode/mcp.json in your project. Note the top-level key is servers (singular form, NOT mcpServers) — this is VS Code's unique convention.

  3. 3

    (Quick option) Use the CLI flag

    One-liner from your terminal — VS Code's --add-mcp flag installs an MCP server without opening the UI.

  4. 4

    Invoke via Copilot Chat

    Open Copilot Chat (⌃⌘I on macOS / Ctrl+Alt+I elsewhere) and switch to Agent mode. Tools registered via MCP are surfaced to the agent automatically — just describe what you want.

Verify

Inspect the MCP panel

Open the Extensions sidebar and search @mcp. cleenui should appear in the installed list with a green dot.

Troubleshooting

If something doesn't work.

Tools don't appear in Copilot Chat

Make sure Copilot Chat is in Agent mode (not Ask). MCP tools are only callable in Agent mode.

Edited servers key but nothing happens

VS Code MCP uses servers as the top-level key — not mcpServers. If you copy/pasted from a Claude Code or Cursor example, you'll need to rename the key.

Add Server command not in palette

Update VS Code to a current version (MCP shipped stable in mid-2025). Older builds had MCP behind a flag.

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.