Claude-Code-MCP-Tutorial: Server richtig hinzufügen
Context7, Playwright oder einen beliebigen MCP-Server an Claude Code anbinden — Transports, Scopes, die Datei .mcp.json, API-Keys und das /mcp-Panel, in einem illustrierten Durchgang.
Die Kurzfassung
- Ein Befehl installiert jeden Server: claude mcp add name -- npx -y @scope/package für lokale Server, oder claude mcp add --transport http name url für remote Server.
- Es gibt drei Transports: stdio führt einen Befehl auf deinem Rechner aus, SSE ist die veraltete Remote-Form, streamable HTTP ist die moderne Remote-Option.
- Drei Scopes entscheiden, wer den Server bekommt: local (nur du), project (geteilt über .mcp.json) und user (alle deine Projekte).
- In einer Session /mcp eingeben, um Status und Tools zu sehen; der erste Tool-Aufruf fragt nach Erlaubnis — einmal oder immer erlauben.
Claude Code Tutorial #7 - MCP Servers
Kanal: The Net Ninja14:16
Claude Code MCP: How to Add MCP Servers (Complete Guide)
Kanal: Leon van Zyl17:58
Model Context Protocol (MCP) — official Claude Code docs
Doku: code.claude.com/docs
Die Screenshots stammen aus The Net Ninjas Kapitel — eine saubere Vollbild-Aufnahme. Befehlsaufschlüsselung, Scopes und Windows-Fixes folgen Leon van Zyls ausführlicherem Walkthrough sowie der offiziellen Doku.
Die Frames gehören den jeweiligen Creators und sind hier mit Deep-Links zu den exakten Momenten credited; der Text ist von uns.
Von null zu zwei laufenden MCP-Servern
Teil 1 · Was MCP-Server bringen
- 1
Was MCP Claude Code gibt
Claude Code bringt Werkzeuge für Dateien und Shell mit, aber alles außerhalb deiner Codebasis ist unerreichbar. MCP — das Model Context Protocol — ist der Anthropic-Standardweg für Zusatz-Tools: Ein Server stellt Fähigkeiten bereit, und Claude Code ruft sie wie jedes eingebaute Tool auf.
Die Kursfolie, die MCP in einer Zeile definiert.Bei 0:52 ansehen - 2
Server passend zur Arbeit wählen
Jeder Server bringt eigene Tools mit. Der Supabase-Server kann Tabellen auflisten, Edge Functions deployen und SQL ausführen; Playwright steuert einen echten Browser; Context7 liefert aktuelle Framework-Doku. Fang mit dem an, der deine häufigste Routinearbeit wegnimmt.
Das Supabase-Beispiel: drei Tools, ein externer Dienst.Bei 1:24 ansehen - 3
Install-Befehl im README des Servers suchen
Server-Autoren veröffentlichen einen fertigen Claude-Code-Befehl in ihrem README — Context7 und Playwright machen es beide vor. Verzeichnisse wie PulseMCP machen es leicht, sich umzusehen, bevor man sich festlegt.
Das Playwright-MCP-README dokumentiert Funktionen und Voraussetzungen.Bei 2:02 ansehen - 4
Die drei Transport-Typen kennen
Die offizielle Doku teilt Installationen in lokal und remote. Ein stdio-Server führt einen Befehl auf deinem Rechner aus — das ist der Standard. SSE- und HTTP-Server sind remote Endpoints; SSE ist veraltet, streamable HTTP ist sein Nachfolger. Die claude mcp add-Syntax unterscheidet sich leicht je nach Typ.
Die Doku-Seite vergleicht lokales stdio mit remote SSE und HTTP.Bei 3:02 ansehen
Teil 2 · Den ersten Server hinzufügen
- 5
Context7 mit project-Scope hinzufügen
Im Terminal: claude mcp add context7 --scope project -- npx -y @upstash/context7-mcp. Der Name liegt bei dir, alles nach dem doppelten Strich ist der auszuführende Befehl, und --scope project schreibt den Server in die geteilte Projekt-Konfiguration statt in deine persönliche.
Der exakte add-Befehl für den Context7-Doku-Server.Bei 5:22 ansehen - 6
Die erzeugte .mcp.json lesen
Server mit project-Scope landen in einer .mcp.json im Repo-Root unter dem Schlüssel mcpServers. Jeder Eintrag hält den Typ fest — hier stdio — plus Befehl und Argumente: dieselbe Form, die Cursor oder Claude Desktop nutzen.
In .mcp.json: type, command und args für den stdio-Server.Bei 6:42 ansehen - 7
Windows: auf das cmd /c-Präfix achten
Auf nativem Windows ohne WSL brauchen stdio-Befehle cmd /c vor npx, damit sich die Shell nach dem Server sauber schließt. Die Doku weist in einer Warnbox darauf hin, und der Walkthrough zeigt die exakte Änderung.
Die offizielle Warnbox für stdio-Server unter Windows.Bei 3:24 ansehen - 8
Prüfen, dass die Datei im Repo gelandet ist
Nach einem add mit project-Scope erscheint .mcp.json im Explorer als neue untracked Datei — committen, damit Teammitglieder dieselben Server bekommen. Server mit local-Scope fassen diese Datei nie an.
Eine neue .mcp.json im Projektroot, untracked und bereit zum Commit.Bei 8:32 ansehen - 9
Lieber remote? Den HTTP-Transport nehmen
Wenn ein stdio-Build zickt, ist der remote Endpoint der schnelle Ausweg: claude mcp add --transport http context7 --scope project https://mcp.context7.com/mcp. Kein lokaler Prozess, kein npm — Claude Code spricht die URL direkt an.
Die HTTP-Variante des add-Befehls gegen den Context7-Endpoint.Bei 8:36 ansehen - 10
Verbindung in /mcp prüfen
Starte Claude Code und führe /mcp aus. Jeder Server zeigt Status und Tool-Liste. Ein Fehler lässt sich meist über den eingebauten Reconnect beheben; wenn nicht, behandelt der Troubleshooting-Abschnitt unten die häufigsten Ursachen.
Das /mcp-Panel zeigt context7 verbunden mit seinen zwei Tools.Bei 9:22 ansehen
Teil 3 · Server im echten Alltag nutzen
- 11
Den Server aus einem echten Prompt aufrufen
Frage etwas, das die eingebauten Tools nicht können, und nenne den Server: „gleiche meine globale CSS-Datei mit der neuesten Tailwind-Doku ab — benutze context7“. Die Datei per @-Erwähnung anhängen hält die Antwort an deinem Code fest.
Der Prompt, der aktuelle Tailwind-Doku über context7 anfordert.Bei 9:38 ansehen - 12
Den Tool-Aufruf freigeben
Beim ersten Lauf eines Server-Tools fragt Claude Code um Erlaubnis. Einmal freigeben — oder bei vertrauenswürdigen Servern „immer erlauben“ wählen, damit weitere Aufrufe ohne Nachfrage durchgehen.
Die Berechtigungskarte für Context7s resolve-library-id-Tool.Bei 10:00 ansehen - 13
Die belegte Antwort lesen
Das Tool liefert die relevanten Doku-Stellen — hier die Guidance zu Theme-Variablen in Tailwind v4 — mit angezeigten Token-Kosten, und Claude Code wendet sie auf deine Datei an. Genau das ist der Punkt: Antworten aus aktueller Dokumentation statt Raten aus Trainingsdaten.
Die get-library-docs-Antwort bestätigt das Theme-Setup.Bei 10:15 ansehen - 14
Die Gewohnheit in CLAUDE.md festhalten
Das Raute-Symbol eingeben, um ein Projekt-Gedächtnis hinzuzufügen, etwa: „bei neuen Libraries oder Frameworks die aktuelle Doku über Context7 prüfen“. Die Zeile landet in CLAUDE.md, und jede spätere Session erbt sie.
Eine Einzeilen-CLAUDE.md-Notiz, die Context7 zum Standard macht.Bei 10:42 ansehen - 15
Zweiter Server: Playwright
Für Browser-Automatisierung dasselbe Muster: claude mcp add playwright --scope project -- cmd /c npx @playwright/mcp@latest — und auf macOS oder Linux den cmd /c-Teil weglassen. Ein Repo, mehrere Server, eine Config-Datei.
Hinzufügen des Playwright-MCP-Servers mit project-Scope.Bei 11:22 ansehen - 16
Zusehen, wie er den Browser steuert
Bitte Claude Code, eine Seite zu öffnen und zusammenzufassen — Playwright navigiert, klickt und liest, dann gibt es Rückmeldung. Mit Context7s Doku und Playwrights Browser sind die meisten externen Aufgaben nur einen Prompt entfernt.
Das Playwright MCP navigiert zu einer Seite für eine Zusammenfassung.Bei 12:42 ansehen
Umgebungsvariablen, Header und API-Keys
Remote-Server und APIs mit Auth brauchen Zugangsdaten. Claude Code nimmt sie als Umgebungsvariablen bei stdio-Servern und als Header bei remote Servern — ohne Config-Dateien von Hand zu editieren.
- 1stdio-Server: claude mcp add myserver -e API_KEY=your-key -e ZONE=your-zone -- npx -y @some/mcp-server — das -e-Flag pro Variable wiederholen, direkt nach dem Servernamen.
- 2Remote-HTTP-Server: claude mcp add --transport http myserver https://example.com/mcp --header "Authorization: Bearer your-key" — der Header geht mit jedem Tool-Aufruf mit.
- 3Scope-Auffrischung: local hält den Server für dich in diesem Projekt, project teilt ihn über .mcp.json, user installiert ihn in all deinen Projekten. Beim Hinzufügen mit -s oder --scope setzen.
- 4Server entfernen: claude mcp remove name — bei project-Scope die .mcp.json-Änderung committen, damit der Server auch bei den Kollegen verschwindet.
Werte, die mit -e übergeben werden, liegen im Klartext in der Config-Datei. Wo die API es erlaubt, lieber eng geschnittene Keys nehmen — und niemals echte Zugangsdaten in eine project-scope .mcp.json committen.
Wenn /mcp failed zeigt
Fast alle MCP-Fehler in Claude Code laufen auf ein paar Ursachen hinaus. Geh die Liste durch, bevor du etwas löschst und neu hinzufügst.
- 1Unknown option -y unter Windows: Manche Terminals stolpern über das npm-Flag. Führe den add-Befehl aus PowerShell oder der Eingabeaufforderung aus — oder lass -y weg, füge den Server hinzu und trage -y später von Hand ins args-Array der .mcp.json ein.
- 2stdio scheitert auf nativem Windows: Präfix cmd /c vor den Befehl — etwa cmd /c npx -y @some/package@latest. Ohne WSL ist das Pflicht, und das @latest-Tag verhindert veraltete Cache-Builds.
- 3Status zeigt failed: /mcp öffnen und neu verbinden — vorübergehende Fehler erledigen sich meist im zweiten Anlauf. Wenn nicht, zeigt das Panel den Log-Pfad des Servers für den echten Fehler.
- 4Server fehlt im anderen Projekt: Das ist der Scope, der wie gedacht arbeitet. project-Server leben in der .mcp.json dieses Repos; für eine Installation auf der ganzen Maschine den user-Scope nehmen.
- 5Server verbindet, wird aber nie genutzt: Im Prompt beim Namen nennen — „prüf die Doku mit context7“ — oder eine CLAUDE.md-Notiz ergänzen, denn ohne Ansage greifen Modelle zu den vertrauten eingebauten Tools.
Wenn gar nichts hilft: claude mcp remove name, Terminal neu starten und den Server über den Transport wieder hinzufügen, der sicher funktioniert — remote HTTP ist am verlässlichsten.