Copilot MCP mit shadcn: Server und Instructions in VS Code

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, einem Dialog und einem 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 (opens in a new tab), der Referenz zur MCP-Konfiguration (opens in a new tab), der Doku zu Custom Instructions (opens in a new tab), der Doku zu Tools (opens in a new tab), der Doku zu Freigaben (opens in a new tab) und dem Migrationsguide (opens in a new tab), 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.

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

Drei Dateien und eine CLI pro Registry:

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:

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:

{
  "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 (opens in a new tab):

• 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 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:

{
  "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:

{
  "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}:

{
  "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 (opens in a new tab) 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:

# 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 (opens in a new tab) (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 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:

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

// 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.

// 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.

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 und die Doku zu Coding Agents. Die Login Page gehört zu Wingo UI Pro, ab $8 im Monat, die Details stehen auf der Preisseite. Läuft Claude Code im selben Repository? Das Claude Code shadcn Setup ist das Gegenstück zu diesem Beitrag, Gemini CLI MCP mit shadcn zeigt dasselbe für Googles Agenten im Terminal, und weitere Guides findest du unter UI mit KI-Agenten bauen.

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/.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.