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.
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).
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.
One-liner from your terminal — VS Code's --add-mcp flag installs an MCP server without opening the UI.
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.
Open the Extensions sidebar and search @mcp. cleenui should appear in the installed list with a green dot.
Make sure Copilot Chat is in Agent mode (not Ask). MCP tools are only callable in Agent mode.
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.
Update VS Code to a current version (MCP shipped stable in mid-2025). Older builds had MCP behind a flag.
Two paths to your first component. Pick the one that fits how your team builds.
One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.
The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.