# Copilot MCP mit shadcn: Server und Instructions in VS Code

> Copilot MCP für shadcn in VS Code: der shadcn-Server in .vscode/mcp.json, eine zweite Registry, copilot-instructions.md und die .mcp.json des Copilot Harness.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 5. Nov. 2026
- Kategorie: [UI mit KI-Agenten bauen](https://wingo-ui.com/de/blog/category/ai-agents)
- Lesezeit: 10 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/copilot-shadcn-mcp-setup
- Englische Fassung: https://wingo-ui.com/blog/copilot-shadcn-mcp-setup

## Kurz gesagt

Führ npx shadcn@latest mcp init --client vscode aus, damit der shadcn-Server in .vscode/mcp.json landet, drück Start über dem Eintrag und wähl im Copilot-Chat Agent, damit er die Tools des Servers aufrufen kann. Ergänz daneben den eigenen Server einer Bibliothek und schreib dann .github/copilot-instructions.md mit vier Regeln: vor dem Schreiben von UI suchen, mit der CLI installieren, die Props lesen, Tokens nutzen. Der Server gibt Copilot die echten Komponenten, und die Instructions sorgen dafür, dass es sie auch nutzt.

Bitte GitHub Copilot in einem shadcn/ui-Projekt um einen Login-Screen, und es schreibt ihn aus dem Gedächtnis: eine Button-API aus den Trainingsdaten, ein selbst gebautes Formular und `bg-blue-500`, wo dein Theme ein Token hat. Ein Copilot MCP Setup für shadcn behebt das mit zwei Dateien. `.vscode/mcp.json` verbindet Copilot mit dem shadcn-MCP-Server, damit der Agent-Modus echte Registries durchsuchen kann, und `.github/copilot-instructions.md` sagt ihm, dass es erst sucht, dann schreibt und mit der CLI installiert. Dieses Tutorial richtet beides ein, ergänzt eine zweite Registry neben shadcn/ui, behandelt den neuen Copilot Harness mit seiner `.mcp.json` und endet mit einem Login-Screen aus einer [Login Page](https://wingo-ui.com/components/login-page), einem [Dialog](https://wingo-ui.com/components/dialog) und einem [Button](https://wingo-ui.com/components/button).

Jeden Befehl in diesem Beitrag haben wir am 5. November 2026 ausgeführt, mit shadcn 4.23.0 und unserer eigenen Registry, Wingo UI 1.13.0 (CLI 1.0.4). Was wir über VS Code sagen, stammt aus dem [Guide zu MCP-Servern](https://code.visualstudio.com/docs/copilot/customization/mcp-servers), der [Referenz zur MCP-Konfiguration](https://code.visualstudio.com/docs/copilot/reference/mcp-configuration), der [Doku zu Custom Instructions](https://code.visualstudio.com/docs/copilot/customization/custom-instructions), der [Doku zu Tools](https://code.visualstudio.com/docs/agents/run/tools), der [Doku zu Freigaben](https://code.visualstudio.com/docs/agents/run/approvals) und dem [Migrationsguide](https://code.visualstudio.com/docs/agent-customization/migrate-customizations), alle mit Stand 4. November 2026. VS Code ändert diesen Bereich oft. Heißt ein Menü bei dir anders, schau dort nach. Den größeren Überblick über Agenten und Komponentenbibliotheken gibt unser [Guide zu MCP für Komponentenbibliotheken](https://wingo-ui.com/de/blog/component-library-mcp-guide).

## Was braucht ein GitHub Copilot MCP Setup für shadcn?

Drei Dateien und eine CLI pro Registry:

| Teil | Aufgabe | Wo es liegt |
| --- | --- | --- |
| MCP-Konfiguration | Startet den shadcn-Server (und jeden weiteren) für Copilot | `.vscode/mcp.json` (Local Harness) oder `.mcp.json` (Copilot Harness) |
| Instructions | Erst suchen, welche CLI installiert, Tokens, was nie passieren darf | `.github/copilot-instructions.md` oder `AGENTS.md` |
| `components.json` | Die Registries, die der shadcn-Server durchsucht | Stammordner des Projekts |
| Die CLI | Schreibt die Dateien und installiert npm-Pakete | `npx shadcn@latest add` oder die CLI einer Bibliothek |

Stell den Chat im Agent-Picker auf Agent. Laut der Tools-Doku von VS Code aktivierst und wählst du dort die Tools, und ein Chat, der keine Tools aufruft, antwortet aus dem Gedächtnis des Modells. Genau dieses Problem wollen wir lösen.

## Wie füge ich den shadcn-MCP-Server zu Copilot in VS Code hinzu?

Willst du Copilot MCP einrichten, reicht für den Anfang ein Befehl im Stammordner des Projekts:

```bash
npx shadcn@latest mcp init --client vscode
```

Er gab `Configuration saved to .vscode/mcp.json.` aus, trug `shadcn` in die `devDependencies` ein und schrieb diese Datei:

```json
{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
```

Achte auf den Schlüssel: Das Format der VS Code mcp.json nutzt `servers`. Claude Code, Cursor und die portable `.mcp.json` nutzen `mcpServers`. Ein Snippet aus deren Doku bringt also den falschen mit, und in einer `.vscode/mcp.json` mit `mcpServers` findet VS Code keinen Server.

Öffne die Datei und drück Start über dem Eintrag `shadcn`. Beim ersten Mal fragt VS Code, ob du dem Server vertraust. Das ist der Moment, den Befehl zu lesen, den er ausführt. Wähl in der Chat-Ansicht Agent, öffne Configure Tools im Eingabefeld des Chats und prüf, ob die shadcn-Tools dort stehen. **MCP: List Servers** in der Command Palette startet, stoppt und startet Server neu und zeigt ihre Ausgabe, und **MCP: Reset Cached Tools** hilft, wenn sich die Tool-Liste eines Servers geändert hat.

### Welche Tools gibt der shadcn-MCP-Server Copilot?

Sieben, und keines davon schreibt eine Datei. Diese Liste hat uns der Server über stdio geliefert, und sie passt zum [Quellcode des Servers](https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/src/mcp/index.ts):

- `get_project_registries`: die Registries in `components.json`.
- `list_items_in_registries` und `search_items_in_registries`: durchblättern oder per Fuzzy-Suche finden, mit Paging.
- `view_items_in_registries`: Name, Beschreibung, Typ und Dateiinhalte.
- `get_item_examples_from_registries`: Demo-Code, gefunden über Namen wie `dialog-demo`.
- `get_add_command_for_items`: der Befehl `npx shadcn@latest add` für eine Liste von Items.
- `get_audit_checklist`: eine kurze Checkliste für den Schritt nach der Codegenerierung.

Der Server schickt außerdem keine Anweisungen mit. Niemand sagt Copilot also, dass es vor dem Schreiben von UI suchen soll. Das übernimmt die Instructions-Datei weiter unten. Jede Installation ist ein Terminal-Befehl, und auf der Standardstufe Manual für Berechtigungen fragt VS Code nach, bevor es einen ausführt, der nicht automatisch freigegeben ist.

## Wie binde ich neben shadcn/ui eine zweite Registry ein?

Für die Suche trägst du sie in `components.json` ein, wie es das [Cursor shadcn Setup](https://wingo-ui.com/de/blog/cursor-shadcn-mcp-rules) zeigt: `"registries": { "@wingo-ui": "https://wingo-ui.com/r/{name}.json" }`, und der shadcn-Server durchsucht beide. Für Props und Design-Regeln verbindest du zusätzlich den eigenen Server der Bibliothek, denn die shadcn-Tools liefern Dateien und add-Befehle, aber keine Props-Tabellen.

Für Copilot hat `agents install` in unserer CLI noch kein Ziel, also schreibst du den Eintrag von Hand. Der stdio-Proxy ist in VS Code die einfachste Wahl:

```json
{
  "servers": {
    "shadcn": {
      "type": "stdio",
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    },
    "wingo-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "wingo-ui@latest", "mcp"]
    }
  }
}
```

Der Proxy liest den Key, den `npx wingo-ui@latest login` gespeichert hat. In der Datei steht also kein Secret, und nichts fragt danach. Ohne Key liefert er trotzdem Doku, Props und Design-Regeln und sagt das beim Start auch: `anonymous: docs only`. Er listet zehn reine Lese-Tools: `search_components`, `list_categories`, `get_component`, `get_block`, `get_design_rules`, `get_theme_tokens`, `get_install_instructions`, `check_updates`, `get_changelog` und `get_account_status`. Anders als der shadcn-Server schickt er beim Verbinden Anweisungen mit, und die erste Regel lautet: erst suchen, dann schreiben.

Ziehst du den Remote-Server über HTTP vor, kann VS Code nach dem Key fragen und ihn aus der Datei heraushalten:

```json
{
  "inputs": [
    { "type": "promptString", "id": "wingo-ui-key", "description": "API-Key für Wingo UI", "password": true }
  ],
  "servers": {
    "wingo-ui": {
      "type": "http",
      "url": "https://wingo-ui.com/mcp",
      "headers": { "Authorization": "Bearer ${input:wingo-ui-key}" }
    }
  }
}
```

Einen Haken hat das, mehr dazu im nächsten Abschnitt: Ein Server, der eine `${input:...}`-Abfrage braucht, wird nicht an Sessions im Copilot Harness weitergereicht.

Beide Registries liefern eine `components/ui/button.tsx`, mit unterschiedlichen APIs. Die Varianten unseres Buttons heißen `solid`, `soft`, `outline`, `ghost` und `link`, destructive ist `tone="danger"`. Gib der zweiten Bibliothek also einen eigenen Ordner: Setz nach `npx wingo-ui@latest init` in `wingo-ui.json` unter `aliases` den Eintrag `"ui": "@/components/wingo"`. Blöcke wie die Login Page landen so oder so in `components/blocks`.

## Was ändert sich mit dem Copilot Harness und .mcp.json?

Stand 4. November 2026 führt VS Code Copilot-Sessions in mehr als einem Harness aus. Der Local Harness ist der vertraute Agent-Modus und liest `.vscode/mcp.json`. Der Copilot Harness liest eine portable `.mcp.json` im Stammordner des Workspace und `~/.copilot/mcp-config.json` (oder `$COPILOT_HOME/mcp-config.json`), beide mit `mcpServers`. Laut Doku bleibt `.vscode/mcp.json` zur Kompatibilität mit dem Local Harness verfügbar und ist im geführten Ablauf zum Hinzufügen eines Servers als deprecated markiert. VS Code reicht passende Server daraus an Copilot-Sessions weiter, außer denen, die `${input:...}` brauchen.

Die stdio-Datei von oben funktioniert also in beiden, und ein Copilot shadcn Setup, das darauf aufbaut, übersteht einen Wechsel des Harness. Arbeitet dein Team mit dem Copilot Harness, commite die portable Version. Umgebungsvariablen schreibst du dort als `${NAME}`:

```json
{
  "mcpServers": {
    "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] },
    "wingo-ui": {
      "type": "http",
      "url": "https://wingo-ui.com/mcp",
      "headers": { "Authorization": "Bearer ${WINGO_UI_API_KEY}" }
    }
  }
}
```

Ist der Copilot Harness ausgewählt, hat **Chat: Open Customizations** eine Ansicht Migrations, die `.vscode/mcp.json` für dich dorthin überträgt. Laut [Migrationsguide](https://code.visualstudio.com/docs/agent-customization/migrate-customizations) werden Passwort-Inputs, `envFile` und SSE-Server nicht automatisch migriert. VS Code begrenzt eine Chat-Anfrage außerdem auf 128 aktivierte Tools. Zwei Server bringen zusammen 17 mit, bei diesem Setup bleibt also viel Luft. Schalte trotzdem ganze Server, die du nicht brauchst, im Tools-Picker ab.

## Was sollte in copilot-instructions.md stehen?

Wem welcher Ordner gehört, mit welchem Tool gesucht wird, welche CLI installiert und welche Tokens gelten. Copilot Harness und Local Harness lesen `.github/copilot-instructions.md` oder `AGENTS.md` im Stammordner des Repositorys. Die Doku von VS Code rät zu knappen Regeln und weist darauf hin, dass Instructions nicht für Inline-Vorschläge beim Tippen gelten. Diese shadcn-Instructions für Copilot würden wir committen:

```md
# UI-Regeln

- Zwei Registries. `components/ui` ist shadcn/ui. `components/wingo` ist Wingo UI; seine Blöcke liegen in `components/blocks`.
- Vor dem Schreiben von UI mit den MCP-Tools suchen: `shadcn` für @shadcn, `wingo-ui` für Wingo UI. Schreib nie eine Komponente von Hand, die eine Registry hat.
- Installiere shadcn-Items mit `npx shadcn@latest add @shadcn/<name>` und Wingo-UI-Items mit `npx wingo-ui@latest add <slug>`.
- Lies die Props der Datei, die du importierst, oder ruf `get_component` auf, bevor du sie nutzt. Rate nie einen Prop-Namen.
- Farben kommen aus Tokens: `bg-background`, `bg-card`, `text-muted-foreground`, `border-border`. Keine Hex-Werte, kein `bg-blue-500`.
- Übergib nie `--overwrite`. Zeig mir den Diff, bevor du eine Komponente aktualisierst.
```

Regeln, die nur für bestimmte Dateien gelten, kommen in `.github/instructions/<name>.instructions.md` mit einem `applyTo`-Glob wie `"**/*.tsx"`. Auf github.com unterstützen laut [GitHubs Doku zu Repository-Instructions](https://docs.github.com/en/copilot/how-tos/configure-custom-instructions/add-repository-instructions) (geprüft am 5. November 2026) nur der Copilot Cloud Agent und Code Review pfadspezifische Dateien. Das Wichtigste gehört also in die Hauptdatei. Arbeiten Claude Code oder Codex im selben Repository, schreib dieselben Punkte stattdessen in die `AGENTS.md`; unser [Vergleich AGENTS.md vs CLAUDE.md](https://wingo-ui.com/de/blog/agents-md-vs-claude-md-react) erklärt, welche Datei jeder Agent lädt.

## Welche Prompts bringen Copilot dazu, echte Komponenten zu installieren?

Die, die die Registry nennen, zuerst eine Suche verlangen und sagen, wie das Ergebnis geprüft wird:

1. **Erst suchen.** „Durchsuch @shadcn und wingo-ui nach einer Login-Seite mit Magic-Link-Option. Liste jeden Kandidaten mit Registry und Installationsbefehl auf und installier noch nichts.“
2. **Auf der echten API bauen.** „Installier die login-page von Wingo UI mit der Wingo-CLI, lies ihre Props mit get_component und leg dann app/(auth)/login/page.tsx an: Passwort und Magic Link, keine Social-Buttons, ein Card-Layout und eine Weiterleitung nach /dashboard.“
3. **Die kleinen Teile ergänzen.** „Füg einen Abmelde-Button mit Bestätigungsdialog hinzu, mit Dialog und Button von Wingo UI.“
4. **Mit einer Prüfung enden.** „Führ get_audit_checklist aus, dann Type-Check und Lint für die Dateien, die du geändert hast.“

Das ist der Block, den Prompt 2 installiert. Gib eine beliebige E-Mail-Adresse und ein Passwort mit weniger als 8 Zeichen ein, dann erscheint der Fehlerhinweis. Wechsle danach zum Formular für den E-Mail-Link:

> Live-Demo (Login Page): Melde dich mit einem zu kurzen Passwort an, um den Fehlerhinweis zu sehen, und wähl dann „Email me a sign-in link“, um das Formular zu wechseln; unter 1024px verschwindet der Hero, und das Formular füllt den Screen. Probier sie unter [Login Page](https://wingo-ui.com/components/login-page) aus und installier sie mit `npx wingo-ui@latest add login-page`.

Ein guter Lauf endet mit Dateien wie diesen. Beide haben wir per Type-Check gegen Release 1.13.0 geprüft:

```tsx
// app/(auth)/login/page.tsx
"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { LoginPage } from "@/components/blocks/login-page";

async function post(url: string, body: unknown) {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  if (!response.ok) throw new Error((await response.text()) || "Etwas ist schiefgelaufen. Versuch es noch einmal.");
}

export default function Page() {
  const router = useRouter();

  return (
    <LoginPage
      layout="card"
      methods={["password", "magic-link"]}
      providers={[]}
      registerHref="/signup"
      linkComponent={Link}
      onSignIn={({ email, password, remember }) => post("/api/auth/sign-in", { email, password, remember })}
      onMagicLink={(email) => post("/api/auth/magic-link", { email })}
      onForgot={(email) => post("/api/auth/forgot", { email })}
      onSuccess={() => router.push("/dashboard")}
    />
  );
}
```

Ein abgelehntes Promise wird zum Hinweis über dem Formular, die API-Route bestimmt also die Meldung. `providers={[]}` blendet die Social-Buttons und ihren Trenner aus, und `linkComponent={Link}` schickt den Link zur Registrierung und die Links im Footer über das Routing von Next.js.

```tsx
// components/sign-out-button.tsx
"use client";

import { useState } from "react";
import { LogOut } from "lucide-react";
// neben shadcn/ui lauten diese Imports @/components/wingo/...
import { Button } from "@/components/ui/button";
import { Dialog, DialogClose } from "@/components/ui/dialog";

export function SignOutButton({ onSignOut }: { onSignOut: () => Promise<void> }) {
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);

  async function confirm() {
    setPending(true);
    try {
      await onSignOut();
      setOpen(false);
    } finally {
      setPending(false);
    }
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => !pending && setOpen(next)}
      dismissible={!pending}
      size="sm"
      icon={<LogOut />}
      title="Abmelden?"
      description="Zum erneuten Anmelden brauchst du dein Passwort oder einen Anmeldelink."
      trigger={
        <Button variant="ghost" leftIcon={<LogOut />}>
          Abmelden
        </Button>
      }
      footer={
        <>
          <DialogClose asChild>
            <Button variant="soft" disabled={pending}>
              Abbrechen
            </Button>
          </DialogClose>
          <Button loading={pending} loadingText="Wird abgemeldet" onClick={confirm}>
            Abmelden
          </Button>
        </>
      }
    />
  );
}
```

Das `loading`-Prop des Buttons ersetzt den Spinner, den Copilot sonst von Hand zeichnen würde, und `dismissible={!pending}` verhindert, dass Escape, ein Klick daneben oder das Ziehen am Sheet den Dialog mitten in der Anfrage schließt. Eine Media Query gibt es nicht: Unter 768px öffnet sich der Dialog als Bottom Sheet.

> Live-Demo (Dialog): Öffne den Dialog und drück Save, um den Ladezustand zu sehen; unter 768px öffnet sich derselbe Dialog als Bottom Sheet, das du zum Schließen nach unten ziehst. Probier sie unter [Dialog](https://wingo-ui.com/components/dialog) aus und installier sie mit `npx wingo-ui@latest add dialog`.

## Warum ignoriert Copilot den MCP-Server oder die Instructions?

Meist liegt es an einem von fünf Dingen:

- **Der falsche Agent.** Tools gibt es nur, wenn im Agent-Picker Agent gewählt ist. Stell den Chat von Ask auf Agent um.
- **Der falsche Schlüssel.** `mcpServers` in `.vscode/mcp.json` oder `servers` in `.mcp.json`. Jede Datei will ihren eigenen.
- **Der Server ist nie gestartet.** Drück Start in `mcp.json` oder nutz **MCP: List Servers** und lies dann seine Ausgabe. Ein stdio-Server braucht Node und beim ersten `npx`-Lauf Netzwerkzugriff.
- **Die Tools sind aus.** Prüf Configure Tools im Local Harness oder den Tab Tools unter Open Customizations im Copilot Harness.
- **Der Prompt nennt keine Registry.** „Füg eine Login-Seite hinzu“ überlässt Copilot seinem Gedächtnis. Nenn die Registry und sag „erst suchen“.

## Wo fange ich an?

Nur mit shadcn/ui: Führ `mcp init --client vscode` aus, drück Start und commite eine dreizeilige `copilot-instructions.md`: erst suchen, mit der CLI installieren, nur Tokens. Mehr braucht ein GitHub Copilot MCP Setup für eine Registry nicht. Willst du eine zweite Registry, die für Smartphones gebaut ist: Button und Dialog aus diesem Beitrag sind kostenlos, mit einem Konto, für das nur eine E-Mail-Adresse nötig ist. Den Rest beschreiben die [Doku zum MCP-Server](https://wingo-ui.com/docs/mcp) und die [Doku zu Coding Agents](https://wingo-ui.com/docs/agents). Die Login Page gehört zu Wingo UI Pro, ab $8 im Monat, die Details stehen auf der [Preisseite](https://wingo-ui.com/de/pricing). Läuft Claude Code im selben Repository? Das [Claude Code shadcn Setup](https://wingo-ui.com/de/blog/claude-code-shadcn-mcp-setup) ist das Gegenstück zu diesem Beitrag, [Gemini CLI MCP mit shadcn](https://wingo-ui.com/de/blog/gemini-cli-shadcn-mcp) zeigt dasselbe für Googles Agenten im Terminal, und weitere Guides findest du unter [UI mit KI-Agenten bauen](https://wingo-ui.com/de/blog/category/ai-agents).

## Komponenten in diesem Artikel

- [Button](https://wingo-ui.com/components/button) (Free): The React button component every screen starts with: five variants, six tones, all sizes, and a loading state that never jumps. Installation: `npx wingo-ui@latest add button`
- [Dialog](https://wingo-ui.com/components/dialog) (Free): A React modal dialog for focused tasks: a spring-scaled card on desktop and a bottom sheet on phones, with nesting and scrolling. Installation: `npx wingo-ui@latest add dialog`
- [Login Page](https://wingo-ui.com/components/login-page) (Pro): A React login page with password, magic link or code sign-in, Google, Apple and Microsoft buttons, two-step codes and password recovery. Installation: `npx wingo-ui@latest add login-page`

## Häufige Fragen

### Wie füge ich den shadcn-MCP-Server zu GitHub Copilot in VS Code hinzu?

Führ npx shadcn@latest mcp init --client vscode im Stammordner des Projekts aus. Der Befehl schreibt einen shadcn-Eintrag unter servers in .vscode/mcp.json und installiert shadcn als Dev-Dependency; öffne die Datei, drück Start über dem Eintrag und frag Copilot dann im Agent-Modus.

### Warum ignoriert VS Code meine mcp.json?

Meist liegt es am Schlüssel auf oberster Ebene. .vscode/mcp.json nutzt servers, Claude Code, Cursor und die portable .mcp.json nutzen mcpServers. Eine aus einem anderen Client kopierte Datei mit mcpServers listet in .vscode/mcp.json keinen einzigen Server.

### Wohin gehören die shadcn-Instructions für Copilot?

In .github/copilot-instructions.md oder in eine AGENTS.md im Stammordner des Repositorys, die VS Code ebenfalls liest. Regeln, die nur für bestimmte Dateien gelten, kommen in .github/instructions/<name>.instructions.md mit einem applyTo-Glob.

### Installiert der shadcn-MCP-Server Komponenten für Copilot?

Nein. Keines seiner sieben Tools schreibt eine Datei; get_add_command_for_items liefert einen Befehl npx shadcn@latest add, und Copilot führt ihn im Terminal aus. Auf der Standardstufe Manual fragt VS Code nach, bevor es einen Befehl ausführt, der nicht automatisch freigegeben ist.

### Ist .vscode/mcp.json veraltet?

Laut der VS-Code-Doku vom 4. November 2026 bleibt die Datei zur Kompatibilität mit dem Local Harness verfügbar und ist im geführten Ablauf zum Hinzufügen eines Servers als deprecated markiert. Der Copilot Harness liest stattdessen eine portable .mcp.json im Stammordner des Workspace und ~/.copilot/mcp-config.json.

---

Quelle: https://wingo-ui.com/de/blog/copilot-shadcn-mcp-setup